Project: Random DIce

vancouver·2023년 4월 28일

javascript이해하기

목록 보기

4/22

javascript

var randomNumber1 = Math.floor(Math.random() * 6) + 1; 

var randomNumberDice1 = "dice" + randomNumber1 + ".png";

var randomNumberDiceSource1 = "images/" + randomNumberDice1 ;

var image1 = document.querySelectorAll("img")[0];

image1.setAttribute("src", randomNumberDiceSource1);


var randomNumber2 = Math.floor(Math.random() * 6) + 1; 

var randomNumberDiceSource2 = "images/dice" + randomNumber2 + ".png" ;
document.querySelectorAll("img")[1].setAttribute("src", randomNumberDiceSource2)



    if (randomNumber1 < randomNumber2) {
       document.querySelector("h1").innerHTML = "Player2 wins! 🚩"
    } 
        else if (randomNumber1>randomNumber2) {
         document.querySelector("h1").innerHTML = "Player1 wins! 🚩"
    } else {
         document.querySelector("h1").innerHTML = "Draw! 🚩"
    }

리팩터링(refactoring)

var randomNumber1 =  (Math.floor(Math.random() * 6) + 1); // 플레이어 1 변수
var dice1 = document.querySelectorAll("img")[0].setAttribute("src", "images/dice" + randomNumber1 + ".png"); //이미지 랜덤으로 변환


var randomNumber2 = (Math.floor(Math.random() * 6) + 1);// 플레이어 2 변수
var dice2 = document.querySelectorAll("img")[1].setAttribute("src", "images/dice" + randomNumber2 + ".png");//이미지 랜덤으로 변환



    if (randomNumber1 < randomNumber2) {
       document.querySelector("h1").innerHTML = "Player2 wins! 🚩"
    } 
        else if (randomNumber1 > randomNumber2) {
         document.querySelector("h1").innerHTML = "Player1 wins! 🚩"
    } else {
         document.querySelector("h1").innerHTML = "Draw! 🚩"
    }

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Dicee</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css?family=Indie+Flower|Lobster" rel="stylesheet">
  
  </head>
  <body>

    <div class="container">
      <h1>Refresh Me</h1>

      <div class="dice">
        <p>Player 1</p>
        <img class="img1" src="./images/dice6.png" >
      </div>

      <div class="dice">
        <p>Player 2</p>
        <img class="img2" src="./images/dice6.png" >
      </div>

    </div>

    
  </body>

  <footer>
    <script src="dicee.js" charset="utf-8"></script>
    www 🎲 App Brewery 🎲 com
  </footer>
</html>

CSS

.container {
  width: 70%;
  margin: auto;
  text-align: center;
}

.dice {
  text-align: center;
  display: inline-block;

}

body {
  background-color: #393E46;
}

h1 {
  margin: 30px;
  font-family: 'Lobster', cursive;
  text-shadow: 5px 0 #232931;
  font-size: 8rem;
  color: #4ECCA3;
}

p {
  font-size: 2rem;
  color: #4ECCA3;
  font-family: 'Indie Flower', cursive;
}

img {
  width: 80%;
}

footer {
  margin-top: 5%;
  color: #EEEEEE;
  text-align: center;
  font-family: 'Indie Flower', cursive;

}

https://brrkak.github.io/random-Dice/

vancouver

이전 포스트

DOM (Document Object Model) style object

다음 포스트

Project: Random DIce

javascript이해하기

javascript

리팩터링(refactoring)

HTML

CSS

DOM (Document Object Model) style object

Advanced javascript and DOM Manipulation

0개의 댓글