Commit 294be6b

committed

create counter project

Signed-off-by: Amit Amrutiya <amitamrutiya2210@gmail.com>

1 parent 4de16e3 commit 294be6bCopy full SHA for 294be6b

File tree

+111

-0

lines changed

+111

-0

lines changed

Lines changed: 27 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,27 @@`
	`1`	`+<!DOCTYPE html>`
	`2`	`+<html lang="en">`
	`3`	`+ <head>`
	`4`	`+ <meta charset="UTF-8" />`
	`5`	`+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />`
	`6`	`+ <meta http-equiv="X-UA-Compatible" content="ie=edge" />`
	`7`	`+ <title>HTML 5 Boilerplate</title>`
	`8`	`+ <link rel="stylesheet" href="styles.css" />`
	`9`	`+ </head>`
	`10`	`+`
	`11`	`+ <body>`
	`12`	`+ <div class="container">`
	`13`	`+ <h1>Counter</h1>`
	`14`	`+ <span id="number" class="number">0</span>`
	`15`	`+ <div class="row">`
	`16`	`+ Increment / Decrement by`
	`17`	`+ <input id="increment" type="number" min="1" max="10" value="1" />`
	`18`	`+ </div>`
	`19`	`+ <div class="row">`
	`20`	`+ <button id="add" class="add">+</button>`
	`21`	`+ <button id="subtract" class="subtract">-</button>`
	`22`	`+ </div>`
	`23`	`+ <button id="reset" class="reset">Reset</button>`
	`24`	`+ </div>`
	`25`	`+ <script src="index.js"></script>`
	`26`	`+ </body>`
	`27`	`+</html>`

Lines changed: 32 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,32 @@`
	`1`	`+let increment = document.getElementById("increment");`
	`2`	`+let add = document.getElementById("add");`
	`3`	`+let subtract = document.getElementById("subtract");`
	`4`	`+let reset = document.getElementById("reset");`
	`5`	`+let incrementNumber = 1;`
	`6`	`+`
	`7`	`+increment.addEventListener("change", function (e) {`
	`8`	`+ incrementNumber = parseInt(e.target.value);`
	`9`	`+});`
	`10`	`+`
	`11`	`+add.addEventListener("click", function (e) {`
	`12`	`+ let currValue = document.getElementById("number");`
	`13`	`+ let total = parseInt(currValue.innerText) + incrementNumber;`
	`14`	`+`
	`15`	`+ currValue.innerText = total;`
	`16`	`+});`
	`17`	`+`
	`18`	`+subtract.addEventListener("click", function (e) {`
	`19`	`+ let currValue = document.getElementById("number");`
	`20`	`+ let total = parseInt(currValue.innerText) - incrementNumber;`
	`21`	`+ console.log(total, total < 0);`
	`22`	`+ if (total < 0) {`
	`23`	`+ total = 0;`
	`24`	`+ }`
	`25`	`+`
	`26`	`+ currValue.innerText = total;`
	`27`	`+});`
	`28`	`+`
	`29`	`+reset.addEventListener("click", function (e) {`
	`30`	`+ let currValue = document.getElementById("number");`
	`31`	`+ currValue.innerText = 0;`
	`32`	`+});`

Lines changed: 52 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,52 @@`
	`1`	`+.container {`
	`2`	`+ display: flex;`
	`3`	`+ flex-direction: column;`
	`4`	`+ align-items: center;`
	`5`	`+}`
	`6`	`+`
	`7`	`+.number {`
	`8`	`+ font-size: 50px;`
	`9`	`+}`
	`10`	`+`
	`11`	`+.row {`
	`12`	`+ margin-top: 15px;`
	`13`	`+}`
	`14`	`+`
	`15`	`+.add {`
	`16`	`+ background-color: green;`
	`17`	`+ font-size: 40px;`
	`18`	`+ width: 50px;`
	`19`	`+ border-radius: 5px;`
	`20`	`+ border: 0px solid;`
	`21`	`+ cursor: pointer;`
	`22`	`+}`
	`23`	`+`
	`24`	`+.subtract {`
	`25`	`+ background-color: red;`
	`26`	`+ font-size: 40px;`
	`27`	`+ width: 50px;`
	`28`	`+ border-radius: 5px;`
	`29`	`+ border: 0px solid;`
	`30`	`+ cursor: pointer;`
	`31`	`+}`
	`32`	`+`
	`33`	`+.reset {`
	`34`	`+ margin-top: 10px;`
	`35`	`+ background-color: yellow;`
	`36`	`+ font-size: 40px;`
	`37`	`+ border-radius: 5px;`
	`38`	`+ border: 1px solid black;`
	`39`	`+ cursor: pointer;`
	`40`	`+}`
	`41`	`+`
	`42`	`+.add:active {`
	`43`	`+ background-color: lightgreen;`
	`44`	`+}`
	`45`	`+`
	`46`	`+.subtract:active {`
	`47`	`+ background-color: lightcoral;`
	`48`	`+}`
	`49`	`+`
	`50`	`+.reset:active {`
	`51`	`+ background-color: lightyellow;`
	`52`	`+}`

Comments

(0)