Counter using JavaScript

By -

Code is given below :


1.HTML

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Counter</title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<div class="container">

<h1>Counter</h1> <br>

<p id="count"></p>

<button onclick="lower()">Lower Count</button>

<button onclick="add()">Add Count</button>

</div>

</body>

</html>


2.CSS

body

{

padding: 0;

margin: 0;

}

.container

{

top: 50%;

left: 50%;

transform: translate(-50%,-50%);

position: absolute;

width: 50%;

text-align: center;

background: #D0D3D4;

box-shadow: 0px 5px #BDC3C7;

border-radius: 25px;

}

#count

{

font-size: 35px;

font-weight: bold;

color: #E74C3C;

}

button

{

margin: 5px 25px;

background: #BCBB92;

border-radius: 25px;

padding:5px 35px;

outline:none;

border: none;

cursor: pointer;

font-size: 22px;

}



3.JavaScript

let display=document.getElementById("count");

let count=0;

display.innerHTML=count;

function lower()

{

if(count<=0)

{

count=0;

}

else

{

count-=1;

}

display.innerHTML=count;

}

function add()

{

count+=1;

display.innerHTML=count;

}


OUTPUT

Fig. Counter


Thank You





Comments

Post a Comment