- Popup Box – build a popup box with more than one input.
- Memory Game – build a memory game to test your brain.
- Tic Tac Toe Game – build a game of tic tac toe.
- World Clocks – build a date and time panel for various locations in the world.
- Photo Gallery – build a slideshow with next and previous buttons.
- Battery Charging Icon – build a progress meter by animating a battery charge.
- Eating Out Bill Splitter – build a bill splitter and eat with friends.
- Calculator – build a vintage calculator that adds, subtracts, multiplies and divides two numbers.
- Shopping Map – build a shopping mall map and give directions to lost shoppers.
- Smart Home – build 2 web pages to simulate a smart home panel and a home status page.
- Grocery List – build a list of grocery items to shop for.
- Maze Game – build a maze and traverse through as fast as you can.
- Sign in/ Sign up Form – build a form validation and accept sign in and sign up info.
- Client-Side Email – build a form then email the contents of the form.
- Video Player – build a video player.
- Music Player – build a mp3 player.
- Game of Pong – build the classic paddle and ball game.
- Breakout Game – build the classic game of breakout.
Tic Tac Toe
Build the game of tetris by providing a grid, polygons and six buttons for Start, Pause, Rotate Left, Rotate Right, Move Left and Move Right. Once you have the basic game working, try to add levels to the game and a timer to test your skill.
Setup a web page to display a series of images but provide two buttons to allow the user to advance or go backwards. For more challenges, add an auto-advancement feature to automatically advance to the next image after a set time. Provide an input box to accept the time in seconds. Set the interval time and advance the images accordingly.
Eating Out Bill Splitter
Build a HTML form and accept input then calculate how much each person has to pay to split a bill. Add the ability to accept a tip and split paying it.
Use HTML and layout the necessary fields to accept the bill amount, the number of people eating with you and two buttons to split the bill and to reset the fields.
Your calculator should provide all the basic functionality such as to add two numbers, subtract from a number, multiply two numbers and divide one number from another. Try to keep it simple at first, allowing the user to enter a number followed by an operator then another number before they press the ‘=’ equal sign to get the result. Once your calculator works, you can change the code to allow the user to enter a longer arithmetic string before pressing the ‘=’ sign for the result. Other variations would include adding a ‘CLR’ button to clear the result box or a ‘DEL’ button to delete the last entry. Or if you want more of a challenge, add scientific functions to your calculator.
It’s your choice on how you want to implement the User Interface (UI). It can be as simple as a list of HTML buttons or as fancy as buttons that change color when you hover over using CSS.
Below is just a suggestion to get your creative juices flowing:
For extra functionality, add error checking code to warn your users that dividing by zero will raise an error. Either provide a popup or change the color of the result box to red and flash it.
This project requires two web pages, one for the smarthome panel to manage smarthome settings and the other to show the home status. With the smarthome panel, add a number of HTML drop down lists and input boxes for start and end times. Fill up the list with smarthome devices such as:
- Living Room Lamp
- Bedroom # 1 Desk Lamp
- Bedroom # 2 Floor Lamp
- Bathroom Fan
- Front Door
- Back Door
- Garage Door
- Kitchen Fan
- Dining Room Light
With each of these devices, allow the user to enter a start and end time such that when the current time falls between these times, the device will turn on. Turn off the device when the current time reaches the end time.
The second web page will show the home status. Provide a ‘Run’ button on this page to start the simulation. When the ‘Run’ button is pressed, get the current time and save it in a variable. Display it on the home status page and update it every second. Let the simulation run and check back on the page when devices are set to turn on or off.
Provide a graphic similar to the one illustrated below to show lights are turned on or off, door locks opened or closed, thermostats that show temperature and humidity, etc.
Shopping Mall Map
Have you shopped in a mall lately? Or do you prefer to shop online? Shopping in a mall has its advantages such as giving you a chance to try clothes on and seeing if it clashes with your jeans or not. You can’t do that when you are sitting in front of your computer shopping online.
- Canned Items
- Dry Goods
- Bakery Items
- Frozen Goods
Below the drop down list, provide an input box for the user to enter a grocery item that is under the category selected. For example, if I selected ‘Vegetables’ then I can enter ‘Kale’. Provide the basic functionality first then add validation to the project. An error message should appear if a user tries to enter a grocery item that is not under the category selected. For example, an error message should appear if the user tries to enter ‘Milk’ under ‘Dry Goods’.
To show that your code is properly written, provide a ‘Show List’ button and when pressed, will list out the entire grocery list by category.
You can make a maze as simple as you want or as hard as you can. Put a countdown timer on it and see if you can beat the time before it reaches zero. Or put a count up timer on it and add time to it until you make it through the maze.
Make it interesting by adding hidden holes in it using a randomizer. When you step on a hidden hole, you are transported to another part of the maze. Another thing you can do is to add treasure items in the maze so that you can pick things up along the way. This makes traversing the maze more fun but it will add more time to the timer.
This project involves building a form that validates input and ensures data entered is valid before storing to a persistent data store such as a database. Form validations can occur on both the front end or the back end (ie. server) but some prefer to perform validations earlier in the process than later. Build a sign in/ sign up form and validate the input. The sign up form should include fields such as the first name, last name, email address, phone number, country and zip code.
You can extend this project by adding the functionality to store the sign up information to a persistent data store or enhance the HTML to provide tips when the user hovers over a field.
Game of Pong
A player scores a point when their opponent misses the ball. The player with the most points wins. To complete the project, add a scoreboard to show each player’s score. Increment the score and refresh the page every time a point is scored.
A point is added to the score if the player clears the entire board before the ‘Lives’ are exhausted. A player starts with 5 lives and every time the player misses the ball, a live is deducted. If a player loses all the lives, the game is over.
- Progress Bar – Show the progress with a sliding bar.
- Sort List – Sort a list of words alphabetically.
- Countdown Clock to New Years – Ring in the New Year with this simple clock that counts down to midnight.
- Imperial to Metric Converter – Converts amounts from Imperial system to Metric.
- Login page – Accepts input of a user name and password and validates it.
Use a div tag to provide the following progress bar.
Start off with a list of cities such as Berlin, Madrid, Oslo, Rome, Stockholm and Helsinki. Provide a button to ‘Sort’. When the button is pressed, sort the cities in alphabetic order and display the sorted list.
Countdown Clock to New Years
You can be as simple as you want or as elaborate as you desire but the countdown clock just takes the current day and time and performs some date and time calculations to display it in days, hours, minutes and seconds.
Similarly, alert the user if the input is correct. Either redirect the user to another web page or provide a message indicating that login was successful.
Disclosure of Material Connection: Some of the links in the post above are “affiliate links.” This means if you click on the link and purchase the item, I will receive an affiliate commission. Regardless, I only recommend products or services I use personally and believe will add value to my readers.
Leave a Reply