Counter

 

Counter

HTML

<h1>COUNTER</h1>

<div class="main-div">

<p id="output">0</p>

</div>

<button id="minus">-</button>

<button id="plus">+</button>

CSS

<style>

body {

margin-top: 15%;

margin-left: 40%;

text-align: center;

position: fixed;

background-color: rgb(220, 220, 228);

background-color: linear-gradient(

90deg,

rgba(220, 220, 228, 1) 26%,

rgba(0, 212, 255, 1) 46%,

rgba(2, 0, 36, 1) 69%

);

}

.main-div{

width: 150px;

height: 100px;

background-color: whitesmoke;

padding: 10px;

border-radius: 100px 100px 0px 100px;

border: 2px solid black;

}

p{

font-size: 30px;

}

button{

width: 100px;

height: 30px;

margin-top: 10%;

font-size: 23px;

cursor: pointer;

background-color: #9fdf20;

border: 1px solid black;

border-radius: 10px;

}

button:hover{

background-color: #a4ff4f;

}

</style>

JS

<script>

var button = document.getElementById("output"),count = 0;

plus.onclick = function(){

count += 1;

output.innerHTML = +count;

}

minus.onclick = function(){

count -= 1;

output.innerHTML = + count;

}

</script>