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.
<html><head><style>body { width: 500px; margin: 4% auto; font-family: ‘Source Sans Pro’, sans-serif; letter-spacing: 5px; font-size: 1.8rem; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;}.calculator { padding: 20px; -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2); border-radius: 1px;background-color: rgba(197, 227, 84, 0.3);}.input { border: 1px solid #ddd; border-radius: 1px; height: 60px; padding-right: 15px; padding-top: 10px; text-align: right; margin-right: 6px; font-size: 2.5rem; overflow-x: auto; transition: all .2s ease-in-out;}.input:hover { border: 1px solid #bbb; -webkit-box-shadow: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.2); box-shadow: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.2);}.buttons {}.operators {}.operators div { display: inline-block; border: 1px solid #bbb; border-radius: 1px; width: 80px; text-align: center; padding: 10px; margin: 20px 4px 10px 0; cursor: pointer; background-color: #ddd; transition: border-color .2s ease-in-out, background-color .2s, box-shadow .2s;}.operators div:hover { background-color: #ddd; -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2); border-color: #aaa;}.operators div:active { font-weight: bold;}.leftPanel { display: inline-block;}.numbers div { display: inline-block; border: 1px solid #ddd; border-radius: 1px; width: 80px; text-align: center; padding: 10px; margin: 10px 4px 10px 0; cursor: pointer; background-color: #f9f9f9; transition: border-color .2s ease-in-out, background-color .2s, box-shadow .2s;}.numbers div:hover { background-color: #f1f1f1; -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2); border-color: #bbb;}.numbers div:active { font-weight: bold;}div.equal { display: inline-block; border: 1px solid #3079ED; border-radius: 1px; width: 16%;text-align: center; padding: 127px 10px; margin: 10px 6px 10px 0; vertical-align: top; cursor: pointer; color: #FFF; background-color: #4d90fe; transition: all .2s ease-in-out;}div.equal:hover { background-color: #307CF9; -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2); border-color: #1857BB;}div.equal:active { font-weight: bold;}</style></head><body><div> <div id=”input”></div> <div> <div> <div>+</div> <div>-</div> <div>×</div> <div>÷</div> </div> <div> <div> <div>7</div> <div>8</div> <div>9</div> </div> <div> <div>4</div> <div>5</div> <div>6</div> </div> <div> <div>1</div> <div>2</div> <div>3</div> </div> <div> <div>0</div> <div>.</div> <div id=”clear”>C</div> </div> </div> <div id=”result”>=</div> </div></div><script>”use strict”;var input = document.getElementById(‘input’), // input/output button number = document.querySelectorAll(‘.numbers div’), // number buttons operator = document.querySelectorAll(‘.operators div’), // operator buttons result = document.getElementById(‘result’), // equal button clear = document.getElementById(‘clear’), // clear button resultDisplayed = false; // flag to keep an eye on what output is displayed// adding click handlers to number buttonsfor (var i = 0; i < number.length; i++) { number[i].addEventListener(“click”, function(e) { // storing current input string and its last character in variables – used later var currentString = input.innerHTML; var lastChar = currentString[currentString.length – 1]; // if result is not displayed, just keep adding if (resultDisplayed === false) { input.innerHTML += e.target.innerHTML; } else if (resultDisplayed === true && lastChar === “+” || lastChar === “-” || lastChar === “×” || lastChar === “÷”) { // if result is currently displayed and user pressed an operator // we need to keep on adding to the string for next operation resultDisplayed = false; input.innerHTML += e.target.innerHTML; } else { // if result is currently displayed and user pressed a number // we need clear the input string and add the new input to start the new operation resultDisplayed = false; input.innerHTML = “”; input.innerHTML += e.target.innerHTML; } });}// adding click handlers to number buttonsfor (var i = 0; i < operator.length; i++) { operator[i].addEventListener(“click”, function(e) { // storing current input string and its last character in variables – used later var currentString = input.innerHTML; var lastChar = currentString[currentString.length – 1]; // if last character entered is an operator, replace it with the currently pressed one if (lastChar === “+” || lastChar === “-” || lastChar === “×” || lastChar === “÷”) { var newString = currentString.substring(0, currentString.length – 1) + e.target.innerHTML; input.innerHTML = newString; } else if (currentString.length == 0) { // if first key pressed is an operator, don’t do anything console.log(“enter a number first”); } else { // else just add the operator pressed to the input input.innerHTML += e.target.innerHTML; } });}// on click of ‘equal’ buttonresult.addEventListener(“click”, function() { // this is the string that we will be processing eg. -10+26+33-56*34/23 var inputString = input.innerHTML; // forming an array of numbers. eg for above string it will be: numbers = [“10”, “26”, “33”, “56”, “34”, “23”] var numbers = inputString.split(/+|-|×|÷/g); // forming an array of operators. for above string it will be: operators = [“+”, “+”, “-“, “*”, “/”] // first we replace all the numbers and dot with empty string and then split var operators = inputString.replace(/[0-9]|./g, “”).split(“”); console.log(inputString); console.log(operators); console.log(numbers); console.log(“—————————-“); // now we are looping through the array and doing one operation at a time. // first divide, then multiply, then subtraction and then addition // as we move we are altering the original numbers and operators array // the final element remaining in the array will be the output var divide = operators.indexOf(“÷”); while (divide != -1) { numbers.splice(divide, 2, numbers[divide] / numbers[divide + 1]); operators.splice(divide, 1); divide = operators.indexOf(“÷”); } var multiply = operators.indexOf(“×”); while (multiply != -1) { numbers.splice(multiply, 2, numbers[multiply] * numbers[multiply + 1]); operators.splice(multiply, 1); multiply = operators.indexOf(“×”); } var subtract = operators.indexOf(“-“); while (subtract != -1) { numbers.splice(subtract, 2, numbers[subtract] – numbers[subtract + 1]); operators.splice(subtract, 1); subtract = operators.indexOf(“-“); } var add = operators.indexOf(“+”); while (add != -1) { // using parseFloat is necessary, otherwise it will result in string concatenation 🙂 numbers.splice(add, 2, parseFloat(numbers[add]) + parseFloat(numbers[add + 1])); operators.splice(add, 1); add = operators.indexOf(“+”); } input.innerHTML = numbers[0]; // displaying the output resultDisplayed = true; // turning flag if result is displayed});// clearing the input on press of clearclear.addEventListener(“click”, function() { input.innerHTML = “”;})</script></body></html>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