diff --git a/27-rock-paper-scissor-game/readme.md b/27-rock-paper-scissor-game/readme.md index d76a065..91cb7da 100644 --- a/27-rock-paper-scissor-game/readme.md +++ b/27-rock-paper-scissor-game/readme.md @@ -14,6 +14,12 @@ Play against the computer, enjoy animations, and sound effects when you win or l --- ## project +Screenshot 2025-08-17 145829 + + try it live here: +👉 [Play the Game](https://rock-paper-scissor-js-d.netlify.app) + +--- ## ⚙️ How to Play 1. Click **Rock**, **Paper**, or **Scissors**. diff --git a/30-counter-app/index.html b/30-counter-app/index.html new file mode 100644 index 0000000..a0202f3 --- /dev/null +++ b/30-counter-app/index.html @@ -0,0 +1,25 @@ + + + + + + Counter App + + + + +
+

Counter App

+

0

+
+ + +
+
+

Increment / Decrement By :

+ +
+ +
+ + diff --git a/30-counter-app/script.js b/30-counter-app/script.js new file mode 100644 index 0000000..e6c82ab --- /dev/null +++ b/30-counter-app/script.js @@ -0,0 +1,22 @@ +const decreaseButton = document.querySelector('.minusButton'); +const increaseButton = document.querySelector('.plusButton'); +const outputValue = document.querySelector('.outputValue'); +const userInput = document.querySelector('.input-sty'); +const resetButton = document.querySelector('.resetButton'); + +decreaseButton.addEventListener('click', () => { + const resultValue = parseInt(outputValue.innerText); + const userInputValue = parseInt(userInput.value); + outputValue.innerText = resultValue - userInputValue; +}); + +increaseButton.addEventListener('click', () => { + const resultValue = parseInt(outputValue.innerText); + const userInputValue = parseInt(userInput.value); + outputValue.innerText = resultValue + userInputValue; +}); + +resetButton.addEventListener('click', () => { + outputValue.innerText = 0; + userInput.value = 1; +}); diff --git a/30-counter-app/style.css b/30-counter-app/style.css new file mode 100644 index 0000000..b32165d --- /dev/null +++ b/30-counter-app/style.css @@ -0,0 +1,95 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} +body { + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; + background-color: #191a1b; + font-family: 'Winky Sans', sans-serif; + color: white; +} +.container { + width: 100%; + max-width: 390px; + min-height: 380px; + background-color: #25384b; + display: flex; + flex-direction: column; + align-items: center; + row-gap: 20px; + border-radius: 10px; + box-shadow: 3px 1px 0px white; +} +.container h1 { + margin-top: 16px; +} +.outputValue { + font-size: 48px; +} +.box-one { + display: flex; + column-gap: 32px; + margin: 16px 0px; +} +.btn-sty { + color: #ecf0f1; + border-radius: 5px; + border: solid 1px #f39c12; + background: #e67e22; + text-align: center; + padding: 0px 30px; + font-size: 2.1em; + -webkit-transition: all 0.1s; + -moz-transition: all 0.1s; + transition: all 0.1s; + -webkit-box-shadow: 0px 6px 0px #d35400; + -moz-box-shadow: 0px 6px 0px #d35400; + box-shadow: 0px 6px 0px #d35400; +} +.btn-sty:active { + -webkit-box-shadow: 0px 2px 0px #d35400; + -moz-box-shadow: 0px 2px 0px #d35400; + box-shadow: 0px 2px 0px #d35400; + position: relative; + top: 4px; +} +.box-two { + display: flex; + column-gap: 16px; + margin-bottom: 16px; +} +.box-two p { + font-size: 19px; +} +.input-sty { + width: 100%; + max-width: 50px; + border-radius: 5px; + padding: 5px 5px; +} +.resetButton { + color: #ecf0f1; + border-radius: 5px; + border: solid 1px #ff0000; + background: #e62222; + text-align: center; + padding: 5px 15px; + font-size: 1.2em; + -webkit-transition: all 0.1s; + -moz-transition: all 0.1s; + transition: all 0.1s; + -webkit-box-shadow: 0px 6px 0px #e62222; + -moz-box-shadow: 0px 6px 0px #e62222; + box-shadow: 0px 6px 0px #b20000; +} +.resetButton:active { + -webkit-box-shadow: 0px 2px 0px #e62222; + -moz-box-shadow: 0px 2px 0px #e62222; + box-shadow: 0px 2px 0px #e62222; + position: relative; + top: 4px; +}