🌅 New week, new JavaScript!
I continue following the free SuperSimpleDev course. Today I combine JavaScript with CSS. How great is that! So many possibilities to manipulate the design of a website 🎨
My Code
In my first code I have some CSS styled buttons. The way a click can change the styling of a button here is by just removing or adding a class tag. How brilliant is that!
<!DOCTYPE html> <html> <head> <title>DOM Projects</title> <style> body { font-family: Arial; } .subscribe-button { border: none; background-color: black; color: white; padding: 10px 15px; font-weight: bold; border-radius: 50px; cursor: pointer; margin-bottom: 50px; } .is-subscribed { background-color: rgb(240, 240, 240); color: black; } .cost-input { font-size: 15px; padding: 10px; } .calculate-button { background-color: green; color: white; border: none; font-size: 15px; padding: 12px 15px; cursor: pointer; } </style> </head> <body> <h1>YouTube Subscribe Button</h1> <button onclick=" subscribe(); " class="js-subscribe-button subscribe-button">Subscribe</button> <h1>Amazon Shipping Calculator</h1> <input placeholder="Cost of order" type="text" class="js-cost-input cost-input" onkeydown=" handleCostKeydown(event)"> <button onclick=" calculateTotal(); " class="calculate-button">Calculate</button> <p class="js-total-cost"></p> <script> String(25) console.log('25') function handleCostKeydown(event) { if (event.key === 'Enter') { calculateTotal(); } } function calculateTotal() { const inputElement = document.querySelector('.js-cost-input'); let cost = Number(inputElement.value); if (cost < 40) { cost = cost + 10; } document.querySelector('.js-total-cost').innerHTML = `$${cost}` } function subscribe() { const buttonElement = document.querySelector('.js-subscribe-button'); if (buttonElement.innerText === 'Subscribe') { buttonElement.innerHTML = 'Subscribed' buttonElement.classList.add('is-subscribed'); } else { buttonElement.innerHTML = 'Subscribe' buttonElement.classList.remove('is-subscribed'); } } </script> </body> </html> Next I added some styling to the 🪨 Rock 📄 Paper ✂️ Scissors from my previous daily posts. It looks great now! - you can’t run this code without the images, but you can check out how it looks here (and also download the images there if you really want haha)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Rock Paper Scissors</title> <style> body { background-color: rgb(25, 25, 25); color: white; font-family: Arial; .title { font-size: 30px; font-weight: bold; } } .move-icon { height: 50px; } .move-button { background-color: transparent; border: 3px solid white; width: 120px; height: 120px; border-radius: 60px; margin-right: 10px; cursor: pointer; } .result { font-size: 25px; font-weight: bold; margin-top: 50px; } .score { margin-top: 100px; } .reset-score-button { background-color: white; border: none; font-size: 15px; padding: 8px 15px; cursor: pointer; } </style> </head> <body> <p class="title">Rock Paper Scissors</p> <button onclick="playGame('rock')" class="move-button"> <img src="images/rock-emoji.png" class="move-icon"> </button> <button onclick="playGame('paper');" class="move-button"> <img src="images/paper-emoji.png" class="move-icon"> </button> <button onclick="playGame('scissors');" class="move-button"> <img src="images/scissors-emoji.png" class="move-icon"> </button> <p class="js-result result"></p> <p class="js-moves"> You <img src="images/rock-emoji.png" class="move-icon"> <img src="images/scissors-emoji.png" class="move-icon"> Computer </p> <p class="js-score score"></p> <button onclick=" score.wins = 0; score.losses = 0; score.ties = 0; localStorage.removeItem('score'); document.querySelector('.js-result').innerHTML = '_' document.querySelector('.js-moves').innerHTML = '_' updateScoreElement(); " class="reset-score-button">Reset Score</button> <script> let score = JSON.parse(localStorage.getItem('score')) || { wins: 0, losses: 0, ties: 0 }; updateScoreElement(); function playGame(playerMove) { const computerMove = pickComputerMove(); let result = ''; if (playerMove === 'scissors') { if (computerMove === 'rock') { result = 'You lose.'; } else if (computerMove === 'paper') { result = 'You win.'; } else if (computerMove === 'scissors') { result = 'Tie.'; } } else if (playerMove === 'paper') { if (computerMove === 'rock') { result = 'You win.'; } else if (computerMove === 'paper') { result = 'Tie.'; } else if (computerMove === 'scissors') { result = 'You lose.'; } } else if (playerMove === 'rock') { if (computerMove === 'rock') { result = 'Tie.'; } else if (computerMove === 'paper') { result = 'You lose.'; } else if (computerMove === 'scissors') { result = 'You win.'; } } if (result === 'You win.') { score.wins++; } else if (result === 'You lose.') { score.losses++; } else if (result === 'Tie.') { score.ties++; } localStorage.setItem('score', JSON.stringify(score)); updateResultElement(result); updateMovesElement(playerMove, computerMove); updateScoreElement(); } function updateResultElement(result) { document.querySelector('.js-result') .innerHTML = `${result}`; } function updateMovesElement(playerMove, computerMove) { document.querySelector('.js-moves') .innerHTML = `You <img src="images/${playerMove}-emoji.png" class="move-icon"> <img src="images/${computerMove}-emoji.png" class="move-icon"> Computer`; } function updateScoreElement() { document.querySelector('.js-score') .innerHTML = `Wins: ${score.wins}, Losses: ${score.losses}, Ties: ${score.ties}`; } function pickComputerMove() { let computerMove = ''; const randomNumber = Math.random(); if (randomNumber >= 0 && randomNumber < 1 / 3) { computerMove = 'rock'; } else if (randomNumber >= 1 / 3 && randomNumber < 2 / 3) { computerMove = 'paper'; } else { computerMove = 'scissors'; }; return computerMove; } </script> </body> </html> That’s it. See you tomorrow 🙋♂️
Top comments (0)