diff --git a/README.md b/README.md index 6d04c03..a3e3463 100644 --- a/README.md +++ b/README.md @@ -4,10 +4,11 @@ Mini projects built with HTML, CSS and JavaScript | # | Project | | -- | ------- | | 01 | [Clock](./clock/) | -| 02 | [Color Flip](./color-flip/) | -| 03 | [Dice Game](./dice-game/) | -| 04 | [BMI Calculator](./bmi-calculator/) | -| 05 | [Drum Kit](./drum-kit/) | -| 06 | [Simon Game](./simon-game/) | -| 07 | [Calculator](./calculator/) | -| 08 | [Form Validator](./form-validator/) | +| 02 | [Counter](./counter/) | +| 03 | [Color Flip](./color-flip/) | +| 04 | [Dice Game](./dice-game/) | +| 05 | [BMI Calculator](./bmi-calculator/) | +| 06 | [Drum Kit](./drum-kit/) | +| 07 | [Simon Game](./simon-game/) | +| 08 | [Calculator](./calculator/) | +| 09 | [Form Validator](./form-validator/) | diff --git a/counter/README.md b/counter/README.md new file mode 100644 index 0000000..735d767 --- /dev/null +++ b/counter/README.md @@ -0,0 +1,4 @@ +# Counter +Counter made in HTML, CSS, JS + +![counter](./images/counter.gif) diff --git a/counter/images/counter.gif b/counter/images/counter.gif new file mode 100644 index 0000000..1d44864 Binary files /dev/null and b/counter/images/counter.gif differ diff --git a/counter/index.html b/counter/index.html new file mode 100644 index 0000000..e68b009 --- /dev/null +++ b/counter/index.html @@ -0,0 +1,22 @@ + + + + + + + + Counter + + +

Counter

+
+
0
+
+ + + +
+
+ + + diff --git a/counter/index.js b/counter/index.js new file mode 100644 index 0000000..a4f6bb8 --- /dev/null +++ b/counter/index.js @@ -0,0 +1,43 @@ +const txtCounter = document.querySelector('#counter') +const btnIncrease = document.querySelector('#increase') +const btnDecrease = document.querySelector('#decrease') +const btnReset = document.querySelector('#reset') + +let counter = 0 + +function count() { + btnIncrease.addEventListener('click', () => { + counter++ + txtCounter.textContent = counter + addClass() + }) + + btnDecrease.addEventListener('click', () => { + counter-- + txtCounter.textContent = counter + addClass() + }) + + btnReset.addEventListener('click', () => { + counter = 0 + txtCounter.textContent = counter + addClass() + }) + + console.log(counter); +} + +function addClass() { + if (counter < 0) { + txtCounter.classList.add('red') + txtCounter.classList.remove('green') + } else if (counter > 0) { + txtCounter.classList.add('green') + txtCounter.classList.remove('red') + } else { + txtCounter.classList.remove('green') + txtCounter.classList.remove('red') + } +} + +count() diff --git a/counter/style.css b/counter/style.css new file mode 100644 index 0000000..f95bbdb --- /dev/null +++ b/counter/style.css @@ -0,0 +1,85 @@ +@import url('https://fonts.googleapis.com/css2?family=Secular+One&display=swap'); + +:root { + --col-bg-1: #d0e4c9; + --col-bg-2: #82c3c6; + --col-bg-3: #5776a2; + --col-light: #f5fff5; + --col-btn: #ffab51; + --col-btn-hover: #fd9b32; + --col-btn-active: #ff8e15; + --col-red: #ff3752; + --col-green: #00c55c; + --ff: 'Secular One', sans-serif; +} + +* { + margin: 0; + padding: 0; + font-family: var(--ff) +} + +body { + display: flex; + min-height: 100vh; + flex-direction: column; + background-image: linear-gradient(var(--col-bg-1), var(--col-bg-2), var(--col-bg-3)); + color: var(--col-light); +} + +h1 { + font-size: 3rem; + font-weight: 700; + text-align: center; + color: var(--col-bg-3); + margin: 2rem; +} + +.container { + display: flex; + flex-direction: column; + align-items: center; +} + +.buttons { + display: flex; + flex-direction: row; + margin-top: 2rem; +} + +.counter { + color: var(--col-light); + font-size: 12rem; + font-weight: 300; +} + +.btn { + font-size: 2rem; + border-radius: 1.4rem; + border: none; + padding: 0.4rem 1.6rem; + cursor: pointer; +} + +.btn-primary { + margin: 0.4rem; + background-color: var(--col-btn); + color: var(--col-light); +} + +.btn-primary:hover { + background-color: var(--col-btn-hover); +} + +.btn-primary:active { + background-color: var(--col-btn-active); + color: var(--col-dark); +} + +.red { + color: var(--col-red); +} + +.green { + color: var(--col-green); +}