HTML, CSS, JavaScript

Live Website

GitHub repository

Inspiration

The Coffee Recommender is a fun and interactive web application designed to help users discover their perfect coffee based on their preferences for strength, milk, and sweetness. The app uses a simple quiz interface to guide users and provides a coffee suggestion based on their choices.

What it does

The application lets users select their coffee preferences and generates a recommendation. Key features include:

• Interactive Quiz: Users answer three questions to determine their coffee preference.
• Coffee Recommendations: Suggests popular coffee types like Espresso, Latte, Cappuccino, Americano, Macchiato, and Flat White.
• Responsive Design: Works seamlessly across desktop and mobile devices.
• Separate Files: HTML, CSS, and JavaScript are in separate files for modularity and maintainability.

How it was built

• Frontend: HTML5 for structure, CSS3 for styling, JavaScript for quiz logic
• Responsive Design: Ensured proper display on desktop and mobile
• Separate Modular Files: index.html, style.css, script.js

How It Works

1. Users select their preferences for coffee strength, milk, and sweetness.
2. Clicking Submit triggers JavaScript to determine the recommended coffee.
3. Recommendation is displayed on the screen; Retry allows retaking the quiz.
4. Input validation ensures all questions are answered before showing results.

Challenges

• Validating user input and ensuring smooth quiz flow
• Making the layout responsive for different screen sizes
• Structuring modular files for maintainability

Accomplishments

• Developed a fully interactive quiz from scratch
• Practiced DOM manipulation and JavaScript logic
• Built a responsive and user-friendly design

What I learned

• Improved JavaScript skills for handling user input and quiz logic
• Learned modular coding practices with separate HTML, CSS, and JS files
• Strengthened responsive web design skills for a better user experience

• 2025 3
• 2024 4
• 2023 2
• 2022 1