full code:
<https://github.com/XxTyaftioNxX/RockPaperScissors>
jsfiddle:
<https://jsfiddle.net/45y3sdth/>

here the border of the scoreboard update like a second earlier than that of the option-button
userChoice\_div = document.getElementById(userChoice);
scoreBoard\_Id = document.getElementById('score');

js

```
if(resultType === "tie"){
        //changing the color of the option border       
        userChoice_div.classList.add('gray-glow');
        setTimeout(() => userChoice_div.classList.remove('gray-glow'), 300);
        //chnaging the color of the scoreboard border
        scoreBoard_Id.classList.add('gray-glow');
        setTimeout(() => scoreBoard_Id.classList.remove('gray-glow'), 300); 
        //increasing the score     
        userScore = userScore + 1;
        userScore_span.innerHTML = userScore;
        computerScore = computerScore + 1;
        computerScore_span.innerHTML = computerScore;

```

css

```
.score-board{
    margin: 20px auto;
    border: 4px solid white;
    border-radius: 5px;
    text-align: center;
    font-family: Times New Roman;
    width: 200px;
    color: white;
    font-size: 30px;
    padding: 15px 20px;
    position: relative;
}

.gray-glow{
    border: 4px solid gray;
    box-shadow: 0 0 10px rgb(61, 68, 70);
}

```

html

```
<div class="score-board" id="score">
        <div id="user-label" class="badge">user</div>
        <div id ="comp-label"class="badge">comp</div>
        <span id="user-score">0</span>:<span id="computer-score">0</span>
    </div>
    <div class="result">
        <p>LETS GET THAT BREAD</p>
    </div>
    <div class="choices">
        <div class="choice" id="rock">
            <img src="assets/rock.png" alt="">
        </div>
        <div class="choice" id="paper">
            <img src="assets/paper.png" alt="">
        </div>
        <div class="choice" id="scissors">
            <img src="assets/scissors.png" alt="">
        </div>
    </div> 
    </div> ```

```