HTML, CSS, JavaScript

Github repository

Project Overview

This web application brings joy and interactivity to virtual celebrations with a fun, unique feature — a birthday candle that users can blow out using their microphone. With a blend of modern web technologies, this app offers an immersive experience that mimics the cherished tradition of blowing out a birthday candle.

Features

Blowable Birthday Candle: Utilizes the Web Audio API to process real-time audio input from the user’s microphone to detect “blowing” and extinguish the candle on the screen. Raining Hearts Animation: Upon successfully blowing out the candle, the user is greeted with a delightful visual effect of pink hearts raining down the screen, enhancing the festive atmosphere. Customizable Text Message: Displays a customizable “Happy Birthday” message that can be tailored to the birthday person’s name or any celebratory note. Responsive Design: Crafted to provide a seamless experience across various devices and screen sizes, ensuring everyone can join the celebration.

Technology Stack

HTML5 CSS3 (with keyframe animations for effects) JavaScript (for audio processing and DOM manipulation)

How It Works

The app prompts users to allow access to their microphone. Once access is granted, it listens for a “blowing” sound. When a “blow” is detected, a JavaScript function is triggered to switch the on-screen candle image from lit to extinguished. This action also initiates the raining hearts animation, symbolizing the celebration of a wish made. The app then presents a customizable, styled “Happy Birthday” message.

Personal Development

This project was an excellent opportunity to practice and enhance my CSS, HTML, and design skills. Through the development process, I learned responsive design principles, ensuring that the app provides a seamless experience on various devices. I also explored the creative possibilities of CSS3 animations, visual effects in web applications. The integration of the Web Audio API for real-time audio processing challenged my JavaScript skills, particularly in handling media inputs and event-driven programming.

2024

Pomodoro

I did this project because of how much the Pomodoro technique has helped me improve my focus and productivity.

Containerization

“Adaptability is not imitation. It means power of resistance and assimilation.” -Mahatma Gandhi

Back to Top ↑

2023

First Hackathon?

“You must do the thing you think you cannot do.” -Eleanor Roosevelt

PEAR

I collaborated with a group of 3 for this project. As a group, we seamlessly blended our individual skills in coding, design, and problem-solving.

Study Shuffle

Are you studying for exams, expanding your vocabulary, or mastering new concepts?

Back to Top ↑