Web Dev Series 8 - JavaScript If and else statement, JS intervals and loops etc.
If and else statement - If and else statement is used to specify that what happens if we do this action in a webpage else what will happen when we do this. If we take a example of your favorite number you have to type your favorite number and it will display that it is greater or less than 10 according to that example we have made a basic logic using if and else statements. The result of the coding is at the image above and the JS code is here
<code>
<script>
var a = prompt("What number do you like?");
if(a < 10){
document.write("The number is less than 10 and the number is ", a);
}
else if (a==10,a > 10){
document.write("The number is greater than 10 and the number is ", a);
}
else{
document.write("I don't know the number");
}
</script>
</code>
JS Intervals - There are two basic JS intervals one is setTimeOut and the other is setTimeInterval you can understand setTimeOut as stop watch like if you click on the button and the stop watch will get stopped as same thing you can do with setTimeOut but the difference is that for making the time stop like a stop watch you have make a logic and as same like a stop watch you can also start a timer with it as like that only you can do the same thing with setTimeInterval you can command that in how many seconds you can repeat the same process as you do with a stop watch the time will get started when you click on the watch and at every second the time will gets changed as same logic applies in setTimeInterval it will repeat the same process at every second. You can understand it better by a digital clock made using HTML, CSS And JavaScript the image of the digital clock is at the above and the code is here <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>JavaScript Project</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
*{
margin: 0;
padding: 0;
box-sizing:border-box;
font-family: 'Nunito', sans-serif;
}
.h1{
font-size: 40px;
display: inline-block;
}
#clock{
position: absolute;
top: 50%;
left: 50%;
border: 2px solid rgb(21, 252, 0);
transform: translate(-50%,-50%);
}
.Day-Div{
display: inline-block;
text-align: center;
margin-right: 20px;
padding-left: 10px;
padding-right: 10px;
}
.Month-Div{
display:inline-block;
text-align: center;
margin-right: 20px;
padding-left: 10px;
padding-right: 10px;
}
.Year-Div{
display:inline-block;
text-align: center;
margin-right: 20px;
padding-left: 10px;
padding-right: 10px;
}
</style>
</head>
<body>
<div id="clock">
<div class="Day-Div">
<h1 class="h1">Hours</h1>
<h2 class="h2"id="Hours">00</h2>
</div>
<div class="Month-Div">
<h1 class="h1">Minutes</h1>
<h2 class="h2"id="Minutes">00</h2>
</div>
<div class="Year-Div">
<h1 class="h1">Seconds</h1>
<h2 class="h2"id="Seconds">00</h2>
</div>
</div>
<script>
function clock(){
var seconds = document.getElementById('Seconds');
var minutes = document.getElementById('Minutes');
var hours = document.getElementById('Hours');
var a = new Date().getSeconds();
var b = new Date().getMinutes();
var c = new Date().getHours();
seconds.innerHTML = a;
minutes.innerHTML = b;
hours.innerHTML = c;
}
var time = setInterval(clock, 1000);
</script>
</body>
</html>
</code>
alert, prompt and confirm - alert is used to display a alert or a message to the user when it comes on the site while prompt is used to take a input from the user like his favorite number, color or any other input that the developer wants from the user and the confirm is used to concerned the user that he confirms the thing that you have asked from the user.
<code>
<script>
alert("This is a alert");
prompt("This is a prompt");
confirm("This is a confirm");
</script>
</code>
0 Comments