I will also add video in English as well as in Hindi . I will also add source code .
Basically we are making 3 apps.
1. Mile to KM Convertor JavaScript App or Project
App is Conversion App where you can convert miles to Km.by taking this project as reference you can make currency convertor ,Feet to Inches Convertor, KG to LB and many more. Just change formula.
Also in this app there is custom error message where if user does not enter any Value , user will get custom error message. And as soon as user enter value , error message will go away ,and app will convert mile to km.
In this app you will learn few concept of HTML, CSS , and variable ,IF else statement , DOM (Document Object Model concept) from JavaScript step by step.
Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>App</title>
<style>
#container{
height: 400px;
width: 400px;
border: 3px solid rgb(51, 4, 4);
}
h1{
text-align: center;
}
input{
background-color: blue;
color: white;
width: 90px;
height: 50px;
font-size: x-large;
}
button{
height: 40px;
width: 100px;
margin-top: 10px;
margin-left: 100px;
background-color: rgb(56, 6, 6);
color: white;
font-size: large;
}
#error{
color: red;
}
</style>
</head>
<body>
<div id ="container">
<h1>Mile to KM</h1>
<h4><span id= "error"></span></h4>
Mile<input id="mile" type ="text">
KM:<input id= "km" type ="text"><br>
<button id ="submit" > Submit</button>
</div>
<script>
newmile= document.getElementById("mile")
newkm= document.getElementById("km")
newerror= document.getElementById("error")
newsub= document.getElementById("submit")
newsub.addEventListener("click",function(){
if(newmile.value===""){
newerror.innerText="Please enter value"
}
else{
newerror.innerText=""
newkm.value=newmile.value*1.609344
}
})
</script>
</body>
</html>
2. JavaScript Quiz App / Project
In app you will learn how to make JavaScript simple quiz by using JavaScript library jQuery. In video CDN method has used . Where if user click on Hide button, All Answer will be hide and as soon user click on show method Answer will be shown to user. Also there is another way in jQuery if you use toggle in build method then on one button user can hide and show answer . Hide, show and toggle jQuery method is used.
Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quiz</title>
<style>
#box{
height: 400px;
width: 500px;
background-color: dodgerblue;
margin-left: 20px;
text-align: center;
border: 2px solid black;
color: white;
}
p{
color: red;
font-size: x-large;
font-weight: bold;
}
#hide{
height: 30px;
width: 50px;
color: white;
background-color: red;
}
#show{
height: 30px;
width: 50px;
color: white;
background-color: green;
}
#to{
height: 30px;
width: 50px;
color: white;
background-color: rgb(6, 14, 6);
}
</style>
</head>
<body>
<div id= "box">
<h1>QuizApp</h1>
<h3>1. What is 2 + 2?</h3>
<p>4</p>
<h3>2. What is 2 - 2?</h3>
<p>0</p>
<h3>3. Where is Mumbai </h3>
<p>India</p>
<button id ="hide">Hide</button>
<button id ="show">Show</button>
<button id ="to">Toggle</button>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
})
$("#show").click(function(){
$("p").show();
})
$("#to").click(function(){
$("p").toggle()
})
})
</script>
</body>
</html>
3. Lotto App
In this JavaScript app, computer will generate 3 random number if user click on button . Math.floor and Math.random method used in this all to generate random number. In this tutorial you will get hint of how to use and call JavaScript function and how to use console to making sure if logic is correct.
Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lotto</title>
<style>
#container{
height: 500px;
width: 500px;
border: solid 2px black;
text-align: center;
}
input{
background-color: blue;
color: white;
height: 100px;
width: 100px;
text-align: center;
font-size: xx-large;
font-weight: bold;
margin-top: 10px;
}
button{
height: 80px;
width: 80px;
margin-top: 10px;
font-size: larger;
background-color: green;
color: white;
}
</style>
</head>
<body>
<div id ="container">
<h1>LottoApp</h1>
<input id ="one"type="text">
<input id ="two" type="text">
<input id = "three"type="text"><br>
<button id = "submit">Click</button>
</div>
<script>
num1= document.getElementById("one")
num2= document.getElementById("two")
num3 =document.getElementById("three")
sub =document.getElementById("submit")
sub.addEventListener("click", function(){
one()
two()
three()
})
function one(){
num1.value=Math.floor(Math.random()*10)
}
function two(){
num2.value=Math.floor(Math.random()*10)
}
function three(){
num3.value=Math.floor(Math.random()*10)
}
</script>
</body>
</html>
Video Source :
In English Language
