Hi Guys,
In this blog i shall guide you and teach you about how to make counter with increase or decrease button, you only need to basic knowledge over JavaScript HTML5 & CSS3 under is the code & screen shots…
This is the code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Counter Show In Browser</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: helvetica, arial, verdana, sans-serif;
}
input {
font-size: 4.4em;
background-color: transparent;
text-align: center;
border-width: 0;
width: 100%;
margin: 0 0 .1em 0;
color: #fff;
}
label {
display: block;
font-size: .8em;
}
button {
/* basics */
color: #444;
background-color: #B5B198;
/* rounded corners */
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
font-weight: bold;
}
button:hover, button:active, button:focus {
background-color: #CBC7AE;
}
.box {
/* basics */
background-color: #444;
color: #C4BE92;
text-align: center;
/* rounded corners */
-webkit-border-radius: 12px;
border-radius: 12px;
-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
padding: .8em .8em 1em;
width: 8em;
margin: 0 auto;
-webkit-box-shadow: 0px 0px 12px 0px #000;
box-shadow: 0px 0px 12px 0px #000;
}
</style>
</head>
<body>
Increase or Decrease Counter -1 +1
</body> function modify_qty(val) { var qty = document.getElementById(‘qty’).value; var new_qty = parseInt(qty,10) + val; if (new_qty </html>
This is the result screen shorts.
When i click on +1 button counter has been increase their value.
When i click on -1 button counter has been decrease their value.
I hope this post help you to make counter.
Thanks for watching & reading my post.
Js Studio 