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)
 
+## About the Project
+
+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.
+
+## Features
+
+- **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.
+
+## Tech Stack
+
+- **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/)
+
+## Installation
+
+To get a local copy up and running, follow these steps:
+
+1. **Clone the repository**:
    ```bash
-# create a new project in the current directory
+   git clone https://github.com/yourusername/stretch-my-time-off.git
-npx sv create
-
-# create a new project in my-app
-npx sv create my-app
    ```
 
-## Developing
+2. **Navigate to the project directory**:
+   ```bash
+   cd stretch-my-time-off
+   ```
 
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+3. **Install dependencies**:
+   ```bash
+   npm install
+   ```
 
+4. **Start the development server**:
    ```bash
    npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
    ```
 
-## Building
+## Usage
 
-To create a production version of your app:
+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.
 
-```bash
+## Contributing
-npm run build
-```
 
-You can preview the production build with `npm run preview`.
+Contributions are welcome! If you have suggestions for improvements or new features, feel free to open an issue or submit a pull request.
 
-> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
+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>