This post is also available in: हिन्दी (Hindi) العربية (Arabic)
JavaScript is the most widely-used programming language for web development. It has evolved over the years and is now being implemented in an array of environments from websites to robotics. Learning JavaScript will help kids see the broader picture of web development. There are many online platforms helping kids to learn JavaScript through their online coding classes.
JavaScript Projects for Kids
Kids can use their skills to build some cool applications using JavaScript. Here are some of the projects that kids can try their hands on.
1. Digital Clock
Clocks are useful elements for any UI if used in a proper way. Clocks can be used in sites where time is the main concern like some booking sites or some app showing arriving times of trains, buses, flights, etc. We will be looking at making a digital one.

The approach is to use the date object to get time on every second and then display time on the browser using the new time that we got by calling the same function each second.
<html><head><style>body { background: black;}.clock { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); color: blue; font-size: 60px; font-family: Orbitron; letter-spacing: 7px;}</style></head><body><div id=”MyClockDisplay” onload=”showTime()”></div><script>function showTime(){ var date = new Date(); var h = date.getHours(); // 0 – 23 var m = date.getMinutes(); // 0 – 59 var s = date.getSeconds(); // 0 – 59 var session = “AM”; if(h == 0){ h = 12; } if(h > 12){ h = h – 12; session = “PM”; } h = (h < 10) ? “0” + h : h; m = (m < 10) ? “0” + m : m; s = (s < 10) ? “0” + s : s; var time = h + “:” + m + “:” + s + ” ” + session; document.getElementById(“MyClockDisplay”).innerText = time; document.getElementById(“MyClockDisplay”).textContent = time; setTimeout(showTime, 1000); }showTime();</script></body></html>2. Stop Watch
Stopwatch finds applications in many projects such as quizzes, games, etc. They are useful elements for denoting elapsed time.

The approach is to use two variables – one for the second and the other hundredth part of the second. Initially, the two variables are initialized to 0. After the hundredth part of the second completes 99 counts, the second variable is incremented by one.
<html><head><style>/* Variables */ $orange: #ffa600;$grey:#f3f3f3;$white: #fff;$base-color:$orange ;/* Mixin’s */ @mixin transition {-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}@mixin corners ($radius) {-moz-border-radius: $radius;-webkit-border-radius: $radius;border-radius: $radius; -khtml-border-radius: $radius; }body {background:$base-color;font-family: “HelveticaNeue-Light”, “Helvetica Neue Light”, “Helvetica Neue”, Helvetica, Arial, “Lucida Grande”, sans-serif; height:100%;}.wrapper {width: 800px;margin: 30px auto;color:$white;text-align:center;}h1, h2, h3 { font-family: ‘Roboto’, sans-serif; font-weight: 100; font-size: 2.6em; text-transform: uppercase;}#seconds, #tens{ font-size:2em;}button{@include corners (5px);background:$base-color;color:$white;border: solid 1px $white;text-decoration:none;cursor:pointer;font-size:1.2em;padding:18px 10px;width:180px;margin: 10px; outline: none; &:hover{@include transition;background:$white;border: solid 1px $white;color:$base-color;}}</style></head><body><div><h1>Stopwatch</h1><p><span id=”seconds”>00</span>:<span id=”tens”>00</span></p><button id=”button-start”>Start</button><button id=”button-stop”>Stop</button><button id=”button-reset”>Reset</button></div> <script>window.onload = function () { var seconds = 00; var tens = 00; var appendTens = document.getElementById(“tens”) var appendSeconds = document.getElementById(“seconds”) var buttonStart = document.getElementById(‘button-start’); var buttonStop = document.getElementById(‘button-stop’); var buttonReset = document.getElementById(‘button-reset’); var Interval; buttonStart.onclick = function() { clearInterval(Interval); Interval = setInterval(startTimer, 10); } buttonStop.onclick = function() { clearInterval(Interval); } buttonReset.onclick = function() { clearInterval(Interval); tens = “00”; seconds = “00”; appendTens.innerHTML = tens; appendSeconds.innerHTML = seconds; } function startTimer () { tens++; if(tens <= 9){ appendTens.innerHTML = “0” + tens; } if (tens > 9){ appendTens.innerHTML = tens; } if (tens > 99) { console.log(“seconds”); seconds++; appendSeconds.innerHTML = “0” + seconds; tens = 0; appendTens.innerHTML = “0” + 0; } if (seconds > 9){ appendSeconds.innerHTML = seconds; } }}</script></body></html>3. Analog Clock
An Analog clock is the one having an hour, minute, and second hands. The approach is to use the date object to get time on every second and then displaying time on the browser by converting the values of second, minute, and hour in terms of the position of the respective hand.
We know that the angle in a circle is 360 degrees and the hour hand covers 12 divisions, minute and second hands cover 60 divisions while moving around 360 degrees. This means every second the secondhand moves by (360/60) = 6 degrees and similarly minute hand moves by 6 degrees once the second hand completes one full revolution. An hour hand moves through an angle (360/12) = 30 degrees once a minute hand completes one revolution.

Function Math.PI is used to calculate the angular shift of the hands. Math.PI gives the value of PI which is 180 degrees.
<html><body><canvas id=”canvas” width=”400″ height=”400″style=”background-color:#333″></canvas><script>var canvas = document.getElementById(“canvas”);var ctx = canvas.getContext(“2d”);var radius = canvas.height / 2;ctx.translate(radius, radius);radius = radius * 0.90setInterval(drawClock, 1000);function drawClock() { drawFace(ctx, radius); drawNumbers(ctx, radius); drawTime(ctx, radius);}function drawFace(ctx, radius) { var grad; ctx.beginPath(); ctx.arc(0, 0, radius, 0, 2*Math.PI); ctx.fillStyle = ‘white’; ctx.fill(); grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05); grad.addColorStop(0, ‘#333’); grad.addColorStop(0.5, ‘white’); grad.addColorStop(1, ‘#333’); ctx.strokeStyle = grad; ctx.lineWidth = radius*0.1; ctx.stroke(); ctx.beginPath(); ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI); ctx.fillStyle = ‘#333’; ctx.fill();}function drawNumbers(ctx, radius) { var ang; var num; ctx.font = radius*0.15 + “px arial”; ctx.textBaseline=”middle”; ctx.textAlign=”center”; for(num = 1; num < 13; num++){ ang = num * Math.PI / 6; ctx.rotate(ang); ctx.translate(0, -radius*0.85); ctx.rotate(-ang); ctx.fillText(num.toString(), 0, 0); ctx.rotate(ang); ctx.translate(0, radius*0.85); ctx.rotate(-ang); }}function drawTime(ctx, radius){ var now = new Date(); var hour = now.getHours(); var minute = now.getMinutes(); var second = now.getSeconds(); //hour hour=hour%12; hour=(hour*Math.PI/6)+ (minute*Math.PI/(6*60))+ (second*Math.PI/(360*60)); drawHand(ctx, hour, radius*0.5, radius*0.07); //minute minute=(minute*Math.PI/30)+(second*Math.PI/(30*60)); drawHand(ctx, minute, radius*0.8, radius*0.07); // second second=(second*Math.PI/30); drawHand(ctx, second, radius*0.9, radius*0.02);}function drawHand(ctx, pos, length, width) { ctx.beginPath(); ctx.lineWidth = width; ctx.lineCap = “round”; ctx.moveTo(0,0); ctx.rotate(pos); ctx.lineTo(0, -length); ctx.stroke(); ctx.rotate(-pos);}</script></body></html>4. Calculator
A digital calculator is a device to perform mathematical calculations. It basically consists of two parts – the display part and the buttons. The buttons are again divided into two sub-blocks – numbers (0 to 9) and the operators (+, -, ×, ÷ and =). The operator clicks the calculator and performs the desired operation, which is then displayed on the display part.

5. Quiz Builder
Quizzes are useful elements for any UI where you are asking users to take an online test. It consists of a set of questions each having multiple options (one of which is correct). The user selects the most appropriate option and the system compares the user’s input with the already stored correct answer.

The approach is to create a collection of questions, available options, and correct answers and display the questions one by one by going through a loop and for each response comparing with the correct answer.
<html><head><style>body{font-size: 20px;font-family: sans-serif;color: #333;}.question{font-weight: 600;}.answers { margin-bottom: 20px;}.answers label{ display: block;}#submit{font-family: sans-serif;font-size: 20px;background-color: #279;color: #fff;border: 0px;border-radius: 3px;padding: 20px;cursor: pointer;margin-bottom: 20px;}#submit:hover{background-color: #38a;}</style></head><body><div id=”quiz”></div><button id=”submit”>Submit Quiz</button><div id=”results”></div><script>(function(){ function buildQuiz(){ // variable to store the HTML output const output = []; // for each question… myQuestions.forEach( (currentQuestion, questionNumber) => { // variable to store the list of possible answers const answers = []; // and for each available answer… for(letter in currentQuestion.answers){ // …add an HTML radio button answers.push( `<label> <input type=”radio” name=”question${questionNumber}” value=”${letter}”> ${letter} : ${currentQuestion.answers[letter]} </label>` ); } // add this question and its answers to the output output.push( `<div> ${currentQuestion.question} </div> <div> ${answers.join(”)} </div>` ); } ); // finally combine our output list into one string of HTML and put it on the page quizContainer.innerHTML = output.join(”); } function showResults(){ // gather answer containers from our quiz const answerContainers = quizContainer.querySelectorAll(‘.answers’); // keep track of user’s answers let numCorrect = 0; // for each question… myQuestions.forEach( (currentQuestion, questionNumber) => { // find selected answer const answerContainer = answerContainers[questionNumber]; const selector = `input[name=question${questionNumber}]:checked`; const userAnswer = (answerContainer.querySelector(selector) || {}).value; // if answer is correct if(userAnswer === currentQuestion.correctAnswer){ // add to the number of correct answers numCorrect++; // color the answers green answerContainers[questionNumber].style.color = ‘lightgreen’; } // if answer is wrong or blank else{ // color the answers red answerContainers[questionNumber].style.color = ‘red’; } }); // show number of correct answers out of total resultsContainer.innerHTML = `${numCorrect} out of ${myQuestions.length}`; } const quizContainer = document.getElementById(‘quiz’); const resultsContainer = document.getElementById(‘results’); const submitButton = document.getElementById(‘submit’); const myQuestions = [ { question: “Who invented JavaScript?”, answers: { a: “Douglas Crockford”, b: “Sheryl Sandberg”, c: “Brendan Eich” }, correctAnswer: “c” }, { question: “Which one of these is a JavaScript package manager?”, answers: { a: “Node.js”, b: “TypeScript”, c: “npm” }, correctAnswer: “c” }, { question: “Which tool can you use to ensure code quality?”, answers: { a: “Angular”, b: “jQuery”, c: “RequireJS”, d: “ESLint” }, correctAnswer: “d” } ]; // Kick things off buildQuiz(); // Event listeners submitButton.addEventListener(‘click’, showResults);})();</script></body></html>Did you like the projects? Try these applications. To test these applications, copy the code in a notepad and save it as an HTML file and then run it on a browser. If you want to develop any other application in JavaScript, let us know in the comment box.
Also read Learn To Create Line Patterns in Scratch Using 2D Shapes and Learning Geometry With Scratch – Basic 2D Shapes.
Please reformat the code