https://github.com/codewithdhruba01/happynewyear-massage
Users can input their name to receive a personalized Happy New Year message.
https://github.com/codewithdhruba01/happynewyear-massage
Last synced: 4 months ago
JSON representation
Users can input their name to receive a personalized Happy New Year message.
- Host: GitHub
- URL: https://github.com/codewithdhruba01/happynewyear-massage
- Owner: codewithdhruba01
- Created: 2025-01-02T15:48:38.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-01T15:16:09.000Z (over 1 year ago)
- Last Synced: 2025-09-30T14:56:58.058Z (9 months ago)
- Language: CSS
- Size: 13.7 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Happy New Year 2025 Responsive Website
This project is a **Responsive Happy New Year Greeting Website** designed to provide an interactive experience where users can enter their name and receive a personalized New Year message along with a random motivational quote. The website features a modern, professional design and includes a dark/light mode toggle, animations, and responsiveness for various devices.
---
## Features
### 1. **Personalized Greeting**
- Users can input their name to receive a personalized Happy New Year message.
- Example: "Happy New Year, Dhrubaraj"
### 2. **Random Motivational Quotes**
- After entering a name, the user also sees a random New Year quote.
- The quotes refresh each time a name is submitted.
### 3. **Dark and Light Mode**
- A toggle button allows users to switch between dark mode and light mode for better readability and aesthetics.
- The toggle button is positioned in the top-right corner of the page and is accessible at all times.
### 4. **Responsive Design**
- The website is fully responsive and adapts seamlessly to various screen sizes, including desktops, tablets, and mobile devices.
### 5. **Animations**
- Smooth fade-in animations enhance the user experience for both the greeting message and quotes.
### 6. **Footer**
- A footer positioned at the bottom of the page contains copyright information and remains fixed at the bottom.
---
## Technology Stack
### Frontend
- **HTML**: Provides the structure of the web page.
- **CSS**: Used for styling and layout.
- **JavaScript**: Adds interactivity to the website.
- Handles user input, random quote generation, and theme toggling.
---
## File Structure
```
Happy-New-Year-2025/
├── index.html # Main HTML file
├── styles.css # CSS for styling
├── script.js # JavaScript for interactivity
└── README.md # Project documentation
```
---
## How to Run the Project
1. **Clone the repository:**
```bash
git clone https://github.com/your-username/happy-new-year-2025.git
```
2. **Navigate to the project directory:**
```bash
cd happy-new-year-2025
```
3. **Open the project in a browser:**
- Open `index.html` directly in your browser.
---
## How It Works
### Personalized Greeting
1. The user enters their name into the input field.
2. When the "Submit" button is clicked, a personalized Happy New Year message is displayed.
### Random Quotes
- A random quote is fetched from a predefined array of motivational quotes and displayed below the personalized message.
### Theme Toggle
- Clicking the toggle button switches between dark and light modes dynamically.
- The icon on the button changes to reflect the current theme.
---
## Future Improvements
- Add an API integration for fetching dynamic quotes.
- Store the theme preference using local storage.
- Include festive background graphics or animations.
---
## Acknowledgments
- Inspired by the spirit of New Year's celebrations!
- Built with ❤️Dhrubaraj Pati for a fun and interactive user experience.
---
Contribute, and share! Wishing you a Happy New Year! 🎉