5 Javascript Projects For Beginners With Demo And Code

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
    }