Skip to content

amarumendez/responsive-birthday-cake

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Responsive Birthday Cake Using HTML, CSS, and JavaScript

This coding project was designed for my friend's birthday. This webpage features some basic audio processing, cursor interaction, event handling, and DOM manipulation. The stuff covered is all in the files, so if you want to test the project yourself, your able to do so.

Set Up

The basic setup is downloading the files from the GitHub page by copying and pasting. Just open the index.html file in your preferred web browser, and it should work just fine. I haven't checked the code, but maybe the webpage might not function based on your web browser, so switching to another web browser should be fine. I will implement browser compatibility in my code soon.

Features

The webpage features a cake that I designed using CSS and a bit of JavaScript. There is the icing. A separate JavaScript file is used to put random, colorful toppings, shaped as circles into the icing to make a fun-looking cake. The website features a prompt, which asks the user to put in their first name. This is helpful so that the user can have their name on the website. The best part has come and that is the interactions and responsiveness of the website. There are two modes or choices, 1. Microphone, and 2. Cursor. These two features are used to blow the candle flame, which is how some birthday traditions work. The best choice is the mic which in the code is less buggy. While the cursor choice is a bit buggy, I will fix that soon as well.

Version 1.0

Here is the list of features in this cake version:

  1. Microphone responsiveness
  2. Cursor interaction
  3. Random Toppings
  4. Prompt for user's first name

Things to add & fix in the future

  1. Fix cursor interaction
  2. Redesign the cake
  3. Browser Compatibility
  4. Responsive design & compatibility (mobile compatible)
  5. Gifts
  6. My own service website