Hangman (2) - html

이 포스트는 Udemy에 올라온

Brad Traversy의 20 Web Projects With Vanila JavaScript 강의를 보고 정리하는 내용입니다!

https://www.udemy.com/course/web-projects-with-vanilla-javascript/

20 Web Projects With Vanilla JavaScript

 

 

 

      <div class="wrong-letters-container">
        <div id="wrong-letters">
        	<p>Wrong</p>
            <span>e,r,t,y</span>
        </div>
      </div>

      <div class="word" id="word">
      	<div class="letter">h</div>
       	<div class="letter">e</div>
      	<div class="letter">l</div>
        <div class="letter">l</div>
        <div class="letter">o</div>
      </div>

Game Cotainer 속

wrong-letters에는 시도했던 단어들이 들어가고

word에는 정답 단어

(일단은 style을 위해서 static하게 넣어놨지만 나중에 자바스크립트를 이용해서 동적으로 넣어줄 예정)

 

 

 

    <!-- Container for final message -->
    <div class="popup-container" id="popup-container">
      <div class="popup">
        <h2 id="final-message">You have won</h2>
        <button id="play-button">Play Again</button>
      </div>
    </div>

게임이 끝났을 때 팝업창 div

<h2>에 final message를 넣어준다

<button> 태그로 Play Again

 

 

 

    <!-- Notification -->
    <div class="notification-container" id="notification-container">
      <p>You have already entered this letter</p>
    </div>

화면 아래에 이미 시도했던 단어들을 입력한 경우 뜨는 notification 창

 

 

 

 

전체 구조

<h1> 게임 이름

<p> 게임 설명

<div> game-container

     <svg> Hangman

      <div> wrong-letters-container

      <div> word

             <div> letter

<div> popup-container

<div> notification-container