Readme

README.md

@@ -1,38 +1,87 @@
-# sv
+# Stretch My Time Off
 
-Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
+Welcome to **Stretch My Time Off**, a personal project designed to help you optimize your vacation days by strategically aligning public holidays and personal leave. This tool allows you to maximize your time off, making it easier to plan the ultimate getaway.
 
-## Creating a project
+## Table of Contents
 
-If you're seeing this, you've probably already done this step. Congrats!
+- [About the Project](#about-the-project)
+- [Features](#features)
+- [Tech Stack](#tech-stack)
+- [Installation](#installation)
+- [Usage](#usage)
+- [Contributing](#contributing)
+- [License](#license)
+- [Acknowledgments](#acknowledgments)
 
-```bash
-# create a new project in the current directory
-npx sv create
+## About the Project
 
-# create a new project in my-app
-npx sv create my-app
-```
+I created this project out of a personal need to better manage my vacation days. As someone who loves to travel, I wanted a tool that could help me make the most of my time off by aligning it with public holidays. This project was coded using the Cursor IDE with the assistance of GPT-4o, and it is hosted on Vercel with Cloudflare providing additional services.
 
-## Developing
+## Features
 
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+- **Country-Specific Holidays**: Automatically fetches public holidays for your country.
+- **Optimized Days Off**: Calculates the best way to use your personal leave days to maximize time off.
+- **Interactive Calendar**: Visualize your holidays and optimized days off in a user-friendly calendar.
+- **Responsive Design**: Works seamlessly on both desktop and mobile devices.
 
-```bash
-npm run dev
+## Tech Stack
 
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
+- **Framework**: [SvelteKit](https://kit.svelte.dev/)
+- **Programming Language**: JavaScript
+- **Styling**: CSS
+- **Hosting**: [Vercel](https://vercel.com/)
+- **CDN and Security**: [Cloudflare](https://www.cloudflare.com/)
+- **IDE**: [Cursor IDE](https://cursor.so/)
 
-## Building
+## Installation
 
-To create a production version of your app:
+To get a local copy up and running, follow these steps:
 
-```bash
-npm run build
-```
+1. **Clone the repository**:
+   ```bash
+   git clone https://github.com/yourusername/stretch-my-time-off.git
+   ```
 
-You can preview the production build with `npm run preview`.
+2. **Navigate to the project directory**:
+   ```bash
+   cd stretch-my-time-off
+   ```
 
-> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
+3. **Install dependencies**:
+   ```bash
+   npm install
+   ```
+
+4. **Start the development server**:
+   ```bash
+   npm run dev
+   ```
+
+## Usage
+
+Once the development server is running, you can access the application at `http://localhost:3000`. Enter your country to see the public holidays and use the interactive calendar to plan your time off.
+
+## Contributing
+
+Contributions are welcome! If you have suggestions for improvements or new features, feel free to open an issue or submit a pull request.
+
+1. Fork the Project
+2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
+3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
+4. Push to the Branch (`git push origin feature/AmazingFeature`)
+5. Open a Pull Request
+
+## License
+
+Distributed under the MIT License. See `LICENSE` for more information.
+
+## Acknowledgments
+
+- **SvelteKit**: For providing a powerful and flexible framework.
+- **Vercel**: For seamless deployment and hosting.
+- **Cloudflare**: For robust CDN and security features.
+- **Cursor IDE and GPT-4o**: For making the development process efficient and enjoyable.
+
+---
+
+Thank you for checking out **Stretch My Time Off**! I hope you find it as useful as I do in planning your vacations. If you have any questions or feedback, feel free to reach out.

src/routes/+page.svelte

@@ -51,7 +51,7 @@
         tempSpan.style.whiteSpace = 'nowrap';
         tempSpan.textContent = inputElement.value || inputElement.placeholder;
         document.body.appendChild(tempSpan);
-        inputElement.style.width = `${tempSpan.offsetWidth + 50}px`;
+        inputElement.style.width = `${tempSpan.offsetWidth + 30}px`;
         document.body.removeChild(tempSpan);
     }
 
@@ -303,6 +303,7 @@
     .bold {
         font-weight: bold;
         font-size: 1em;
+        margin: 0 5px;
     }
 
     .flag {
@@ -342,7 +343,9 @@
                 <button on:click={() => { if (daysOff > 0) { daysOff--; updateHolidays(); } }} aria-label="Decrease days off">▼</button>
                 <span class="bold">{daysOff}</span>
                 <button on:click={() => { daysOff++; updateHolidays(); }} aria-label="Increase days off">▲</button>
-            </span>days&nbsp;off in<span class="arrow-controls">
+            </span>
+            days&nbsp;off in
+            <span class="arrow-controls">
                 <button on:click={() => { year--; updateHolidays(); }} aria-label="Previous year">◀</button>
                 <span class="bold">{year}</span>
                 <button on:click={() => { year++; updateHolidays(); }} aria-label="Next year">▶</button>