👨‍💻 Daily Code 39 | Combining 🟦 CSS and 🟨 Javascript
Tags: javascript, css, beginners, daily
Published: 2024-01-16 06:27:04

🌅 New week, new JavaScript! 

I continue following the [free SuperSimpleDev course](https://www.youtube.com/watch?v=SBmSRK3feww&t=25927s). 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!

```html
<!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](https://supersimple.dev/projects/rock-paper-scissors/) (and also download the images there if you really want haha)

```html
<!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 🙋‍♂️