30 Days 30 Projects

A collection of 30 small web applications built as part of a 30-day coding challenge. Each project demonstrates different aspects of web development using HTML, CSS, and JavaScript.

📁 Project Structure

Each day contains a complete, standalone project with:

• index.html - Main HTML file
• script.js - JavaScript functionality
• style.css - Styling and layout
• Additional assets (images, audio, etc.) where needed

🚀 Projects List

Week 1: Basic Applications

• Day 1: Speech-to-Text Converter - Convert speech to text using Web Speech API
• Day 2: Piano Application - Interactive piano with playable notes
• Day 3: Text-to-Voice Application - Convert text to speech
• Day 4: Robot Joke Generator - Random joke generator with robot theme
• Day 5: HSL Color Generator - Generate colors using HSL values
• Day 6: Modal Application - Popup modal with overlay
• Day 7: Digital Clock - Real-time digital clock display

Week 2: Interactive Tools

• Day 8: Color Flipper - Random color generator for backgrounds
• Day 9: Percentage Calculator - Calculate percentages with interactive UI
• Day 10: Calculator Application - Full-featured calculator
• Day 11: Read More/Less - Expandable text sections
• Day 12: Star Rating - Interactive star rating system
• Day 13: Animated Counter - Numbers counting up with animation
• Day 14: Hex to Binary Converter - Convert hexadecimal to binary

Week 3: Creative Applications

• Day 15: Awesome Cursor - Custom animated cursor effects
• Day 16: Quick URL Application - URL shortener or manager
• Day 17: Typing Text Effect - Animated typing effect for text
• Day 18: Image Comparison Slider - Before/after image slider
• Day 19: Search Functionality - Search and filter functionality
• Day 20: Words Counter - Count words in text input
• Day 21: Dynamic Color Changer - Change colors dynamically

Week 4: Advanced Projects

• Day 22: Notes Taking Application - Sticky notes style note-taking
• Day 23: Image Carousel - Rotating image gallery
• Day 24: Browse File Upload - File upload with preview
• Day 25: Vowel Counter - Count vowels in text
• Day 26: Cash Calculator - Calculate cash denominations
• Day 27: Age Calculator - Calculate age from birthdate
• Day 28: FD Calculator - Fixed deposit interest calculator
• Day 29: BMI Calculator - Body Mass Index calculator
• Day 30: Love Calculator - Fun love compatibility calculator

🛠️ Technologies Used

• HTML5 - Semantic markup and structure
• CSS3 - Styling, animations, and responsive design
• Vanilla JavaScript - DOM manipulation, event handling, APIs
• External Libraries: Font Awesome icons, Web Speech API, etc.

🚀 How to Run

Each project can be run independently by opening the index.html file in a web browser. No build process or server required for most projects.

For projects with audio/images:

1. Ensure all files are in the same directory
2. Open index.html in your browser
3. Some projects may require allowing microphone access (speech-related projects)

Example:

# Navigate to a project folder
cd "Day 1 Speech-To-Text/Project-46-Speech-To-Text"

# Open in browser (method depends on your OS)
# Windows: double-click index.html
# Mac/Linux: open index.html

📚 Learning Outcomes

This challenge covers:

• Web development fundamentals
• DOM manipulation and event handling
• CSS animations and transitions
• API integration (Web Speech, etc.)
• User interface design
• Problem-solving with JavaScript
• Responsive design principles

🤝 Contributing

Feel free to fork this repository and add your own projects or improvements to existing ones.

📄 License

This project is open source and available under the MIT License.

---

Built with ❤️ as part of a 30-day coding challenge