https://github.com/vipulbunny/compliment-generator
A fun and interactive Compliment Generator web app that tailors compliments based on mood and gender. Users select their mood, receive personalized compliments, and experience a delightful 3D envelope animation reveal. Built with HTML, CSS, and JavaScript, featuring smooth animations, dynamic content, and a user-friendly interface. 🎉💌
https://github.com/vipulbunny/compliment-generator
3d-envelope-animation compliment-generator creative-ui-design frontend-project fun-web-app html-css-javascript interactive-web-app mood-based-app valentines-day-project web-development
Last synced: 5 months ago
JSON representation
A fun and interactive Compliment Generator web app that tailors compliments based on mood and gender. Users select their mood, receive personalized compliments, and experience a delightful 3D envelope animation reveal. Built with HTML, CSS, and JavaScript, featuring smooth animations, dynamic content, and a user-friendly interface. 🎉💌
- Host: GitHub
- URL: https://github.com/vipulbunny/compliment-generator
- Owner: VIPULbunny
- Created: 2025-02-13T09:11:32.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-13T09:21:16.000Z (over 1 year ago)
- Last Synced: 2025-06-01T13:55:24.129Z (about 1 year ago)
- Topics: 3d-envelope-animation, compliment-generator, creative-ui-design, frontend-project, fun-web-app, html-css-javascript, interactive-web-app, mood-based-app, valentines-day-project, web-development
- Language: HTML
- Homepage:
- Size: 1.19 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 📖 Compliment Generator
A fun and interactive web application that generates personalized compliments based on the selected mood and gender. The app features a charming 3D envelope animation that reveals compliments in an engaging and visually appealing way.
## 🚀 Features
- 🎭 **Mood-Based Compliments:** Choose from moods like Happy, Cute, Romantic, and Angry.
- 👨👩👧 **Gender-Specific Compliments:** Personalized messages for males and females.
- 💌 **3D Envelope Animation:** A unique envelope reveal animation to display compliments.
- 🌐 **Interactive Interface:** Simple and delightful design for easy navigation.
## 🛠️ Technologies Used
- HTML
- CSS (with animations)
- JavaScript
## 🖼️ Screenshots
### 1. HomePage
### 2. Compliment Reveal Page
### 3. Mood Selection Page
## ⚙️ Code Structure
The application follows a simple structure with separate files for HTML, CSS, and JavaScript:
```
📂 compliment-generator
├── 📄 index.html # Main mood selection page
├── 📄 envelope.html # Compliment reveal page
├── 📂 css
│ └── style.css # Styling for the application
├── 📂 js
│ └── script.js # Logic for compliment selection and display
└── 📂 images
└── *.png # Screenshots and visuals
```
## ⚙️ How It Works
1. **Select Mood:** Users choose their mood from the available options.
2. **Gender Selection:** The app detects gender-based compliments.
3. **Compliment Generation:** Random compliments are generated based on the selected mood.
4. **Envelope Reveal:** A click on the envelope reveals the compliment with a smooth animation.
5. **Navigation:** A back button allows users to select a new mood easily.
## 🛠️ Setup Instructions
1. Clone the repository:
```bash
git clone https://github.com/your-username/compliment-generator.git
```
2. Open `index.html` in your browser.
## 🎨 Customization
- Add new moods and compliments in `script.js`.
- Modify animation properties in `style.css`.
## 📢 Contribution
Contributions are welcome! Feel free to submit a pull request if you have improvements or new features in mind.
---
**Created with ❤️ by Vipul Solanki(https://github.com/VIPULbunny)**