├── README.md └── conter ├── img └── bg.png ├── index.html ├── scripts.js └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # JavaScript-Counter 2 | Lets create a JavaScript counter with HTML, CSS and JavaScript. It a fun project and you will able to increment, decrement as well as reset the number. 3 | 4 | 5 | ## 📝 Description 6 | Lets create a JavaScript counter with HTML, CSS and JavaScript. It a fun project and you will able to increment, decrement as well as reset the number. 7 | 8 | 9 | 10 | ## 🥰 App screenshot 11 | ![Logo](https://github.com/shovoalways/JavaScript-Counter/blob/main/conter/img/bg.png?raw=true) 12 | 13 | 14 | ## 🥰 Follow me 15 | - [@Github](https://github.com/shovoalways/) 16 | - [@Facebook](https://facebook.com/shovoalways/) 17 | - [@Twitter](https://twitter.com/shovoalways/) 18 | - [@Instagram](https://instagram.com/shovoalways/) 19 | -------------------------------------------------------------------------------- /conter/img/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shovoalways/JavaScript-Counter/b7ad5938a69be601134a6a5910ecfe9e6a3e467b/conter/img/bg.png -------------------------------------------------------------------------------- /conter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |

14 |

15 |

0

16 |

17 | 18 | 19 | 20 |

21 |

22 |

23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /conter/scripts.js: -------------------------------------------------------------------------------- 1 | const mainTitle = document.querySelector('#title'); 2 | let curValue = 0; 3 | 4 | const btnDecrement = document.querySelector('#decrement'); 5 | const btnReset = document.querySelector('#reset'); 6 | const btnIncrement = document.querySelector('#increment'); 7 | 8 | btnIncrement.addEventListener('click', () => { 9 | curValue++; 10 | mainTitle.textContent = curValue; 11 | }); 12 | 13 | btnDecrement.addEventListener('click', () => { 14 | curValue--; 15 | mainTitle.textContent = curValue; 16 | }); 17 | 18 | btnReset.addEventListener('click', () => { 19 | curValue = 0; 20 | mainTitle.textContent = curValue; 21 | }); 22 | -------------------------------------------------------------------------------- /conter/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::after, 3 | *::before { 4 | margin: 0; 5 | padding: 0; 6 | } 7 | html, 8 | body { 9 | height: 100%; 10 | } 11 | 12 | body { 13 | background: rgb(255, 132, 100); 14 | background: linear-gradient( 15 | 90deg, 16 | rgba(255, 132, 100, 1) 0%, 17 | rgba(253, 105, 165, 1) 100% 18 | ); 19 | } 20 | .container { 21 | display: flex; 22 | align-items: center; 23 | justify-content: center; 24 | height: 100%; 25 | } 26 | .card-body { 27 | background: #fff; 28 | padding: 25px; 29 | border-radius: 10px; 30 | text-align: center; 31 | } 32 | .card-body h1 { 33 | margin-bottom: 15px; 34 | font-size: 70px; 35 | } 36 | .card-btn button { 37 | border-radius: 5px; 38 | color: #262626; 39 | padding: 10px 35px; 40 | border: 0; 41 | font-size: 15px; 42 | font-weight: bold; 43 | margin: 0 5px; 44 | cursor: pointer; 45 | transition: 0.5s; 46 | } 47 | button#decrement { 48 | background: #f6e58d; 49 | } 50 | button#decrement:hover { 51 | background: #f79f1f; 52 | color: #fff; 53 | } 54 | button#reset { 55 | background: #f3a683; 56 | } 57 | button#reset:hover { 58 | background: #ea2027; 59 | color: #fff; 60 | } 61 | button#increment { 62 | background: #c4e538; 63 | } 64 | button#increment:hover { 65 | background: #009432; 66 | color: #fff; 67 | } 68 | --------------------------------------------------------------------------------