5 Javascript Projects For Beginners With Demo And Code

1. Counter

In this project you can increase/decrease the value of a variable.

This project shows the use of conditional statement (if-else).

• Project Demo - Link
• Check out the code - Link

  function changeCounterColor(counter) {
        if ( counter === 0 ){
            target.style.color = "black"
        }
        else if ( counter < 0 ){
            target.style.color = "red"
        }
        else {
            target.style.color = "green"
        }
    }
  

1. Generate Random Background Colour

This project changes the background colour of a website.

It uses Math.random() to fetch items from an Array

• Project Demo - Link
• Check out the code - Link

const hex = [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','F']

function getRandomNumber() {    
    return Math.floor(Math.random() * hex.length)
}

1. Random Flag of World Countries

This project will give you new country flags at the button click.

The data are stored in a json fill

• Project Demo - Link
• Check out the code - Link

   {
      "url":"/wiki/Nigeria",
      "alpha3":"NGA",
      "file_url":"//upload.wikimedia.org/wikipedia/commons/7/79/Flag_of_Nigeria.svg",
      "name":"Nigeria",
      "license":"Public domain"
   },
  

1. Select States in Nigeria

This project will give you new country flags at the button click.

The data are stored in a json fill

• Project Demo - Link

• Check out the code - Link

   {"state":{"name":"Enugu State","id":14,"locals":[{"name":"Awgu","id":1},{"name":"Enugu East","id":2},{"name":"Enugu North","id":3},{"name":"Enugu South","id":4},{"name":"Ezeagu","id":5},{"name":"Igbo Etiti","id":6},{"name":"Igbo Eze North","id":7},{"name":"Igbo Eze South","id":8},{"name":"Isi Uzo","id":9},{"name":"Nkanu East","id":10},{"name":"Nkanu West","id":11},{"name":"Nsukka","id":12},{"name":"Oji River","id":13},{"name":"Udenu","id":14},{"name":"Udi","id":15},{"name":"Uzo Uwani","id":16}]}}
  

• Arithmetic Calculator

You can perform basic arithmetic like addition/subtraction/multiplication/division.

• Project Demo - Link
• Check out the code - Link

   function addition (a, b){
    return a + b
  }