🌅 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)