Types of JavaScript Coding Projects to add to your portfolio

JavaScript is renowned for its ability to help software developers to build websites, web applications, server applications, presentations, games, art and many other projects. Projects built using JavaScript are an asset to a developer’s portfolio and will help to assist you in securing a software development position.

 

Can I get a job with just JavaScript knowledge?

 

No matter what framework a company uses JavaScript is an essential skill to have.  The company you start to work for may give you some extra training over and above this, but JavaScript is used everywhere and forms the building blocks for most programming languages. JavaScript can take anywhere from 6 to 9 months to learn confidently and apply in practice but even after that you can gain more skills and a deeper understanding of JavaScript as you acquire more hands-on experience and knowledge of the programming language.

 

 

Simple JavaScript Projects

 

Here are some simple projects that beginners can use to practice with:

 

Progress Bar

This enables you to show progress with a sliding bar instead of an hourglass when you are waiting for a process to finish.  The build a project bar in JavaScript can show you the progress and is used to teach you how to access and manipulate an element in HTML by using JavaScript.

 

Sort List

A sort list is a way in which you can list words into alphabetical order with a sort button. When this button is pressed the words are sorted into alphabetical order.

 

Countdown Clock

This JavaScript clock project is used to count down until midnight and enables the user to watch the seconds tick down to 0:00.  It can be a simple project, or you can make it a little more elaborate.  What this project does is use a countdown clock by taking the current day and time into account and then calculates the date and time to display it in days, hours, minutes and seconds.

 

Converter

This project converts volumes in litres, grams and cubic centimetres and changes them from the Imperial measurements to Metric measurements.  A measure converter is built in JavaScript which allows the user to enter a number or unit of measure and press a button to convert it using conversion routines.

 

Login Page

This project allows you to input a username and password and then validate it by providing two input boxes and two buttons, one to Login and one to Cancel.  Upon loading you can disable the Login button and then enables it when both inputs have been entered. You are also able to make it so that the password entered is not visible by using encryption as well as alert the user if the password or username is incorrect.

Battery Charger

With this project you can build a battery charger progress bar and animate the charging process of the battery.  You will master the process of getting the element and setting the HTML in it.

 

Music Player & Video Player

The Music Player project enables you to build a button to show how to play and stop a song.  You can make it a little more challenging for yourself by adding a progress meter to show how far into the song the listener is. The Video Player project allows you to use the HTML tag to display the “video” element and allow the user to make use of two buttons to start and pause the video.

 

Photo Gallery

Here you can setup a webpage that is able to display images and provide buttons that allow the user to advance or go backwards when looking at the images.  You can even set up features such as automatic advancement to the next image, input boxes to accept timing in seconds and interval times between each image.

 

 

JavaScript Project Ideas for your Portfolio

 

Calculator

 

This project is one of the best to begin with and allows you to get used to JavaScript and help you understand HTML, CSS and JavaScript by enabling you to learn how to structure a web application to get things to work.  The calculator that you build will provide basic functionality such as addition, subtraction, division and multiplication together with the equal sign to get a result.  Once you get the hang of this project then you can start changing the code to allow users to enter longer mathematical strings before pressing the equal sign to get a result.  If you want to add even more functionality then add an error checking code to warn your users when their calculation is going to raise an error.

 

Memory Game, Tic Tac Toe and Tetris

 

Memory game is a classic game and is one of the best games to build in JavaScript. It consists of a board that shows the back end of many cards.  Upon clicking on one of the cards the card is turned over to show a symbol  The second card is then clicked and also turned over to show a symbol giving the player a few seconds to memorize the symbols before the cards are automatically turned back over again.  The player continues turning over two cards at a time to uncover them until such time as two symbols match.  When two cards have the same symbol, they remain upwards with the symbol showing.  The game carries on until all the cards have been matched and turned over.  The Tic Tac Toe Game is also a game that can be built using JavaScript and teaches the user how to organize code into functions by starting with the logic first and then building up the display in HTML.  When you can master the core functions of the game then you can go on to the HTML and CSS functions and make the page responsive and animated. Similarly, you can build Tetris in JavaScript and build a playing field consisting of a grid and polygons slowly falling to the bottom of the grid with the goal being to arrange them to fill up the empty squares of the grid as they land.  You can also build buttons for Start, Pause, rotate left, rotate right and other such movements.  Once you have mastered the core function of this game you can continue to add levels and timers to test the players skills. There are various other games that can also be built using JavaScript such as Maze Game and Break Out Game.

Eating Out Bill Splitter

This is a fun project to do as it can be widely used by many restaurant-goers.  This calculator enables the user to split a bill before or after a tip has been added.  HTML is used to build the necessary fields such as accepting the bill amount, the number of people eating out with you as well as buttons to split the bill or to reset the fields.

 

Smart home

 

This project makes use of two web pages, one with a smart home panel and another one to show the status of the home.  In the first web page the designer is able to build a series of drop down lists from the smart home panel and input start and end times into these boxes from a list with  smart home devices such as the front door, back door, dryer, lounge fan, bedroom light, washer and many more.  Each of these devices allow for a start and end time that the user can put in which will then turn the device on automatically.  The second web page allows the user to see the status of the home as well as the option to press the “Run” button to start the simulation and get the current time as well as save it in a variable.  You can also build a gradient page to the home status page which will indicate whether it is daytime or evening.

 

 

Shopping Mall Map

 

This project provides the shoppers with a map of a shopping mall as well as in indication as to where the shopper is currently situated in the mall by means of a big arrow.  The shopper will be able to enter the name of a store or name of an item that they are looking for in the mall.  HTML is used to provide an input box in which the user can enter a store name or specific item and provides a database-like object to a store or list of items that each store sells.  This project enables you to showcase how creative you can be as there are so many ways in which to make it interesting and colourful.  JavaScript does not have a dictionary object but instead works with arrays in in which you are able to implement a database-like structure and allow you to work with text strings and string manipulations.

 

Grocery List

 

This project is a variation of the traditional to-do-list projects and uses primary and secondary drop-down lists in HTML and input them with the initial categories such as snacks, fruits, bakery, frozen foods, vegetables, perishables, non-perishables etc. You are then able to add in the secondary categories for example pumpkin and cauliflower under the vegetable category by providing an input box where a user can enter a grocery item under the category that they have selected.  In short, this provides the basic functionality and then validation to a project.  If you would like to check if your code has been properly written, then it is advisable to provide a “Show List” button that will show you the entire grocery list when pressed.

 

There are many incredible options to add to your Portfolio. The projects listed above are just some of the vast variety of projects to choose from when building with JavaScript.   It is important to enjoy these projects and learn from them. This is the fun part!