바닐라코딩 스타터킷 - Baseball Game (야구 게임)

https://zerosial.github.io/Baseball_game/

Baseball Project

 

https://github.com/zerosial/Baseball_game

(프로젝트 링크)

 

바닐라 코딩 스타터 킷 최종 프로젝트 중 1번째인 야구게임을 만들어봤다.

https://book.vanillacoding.co/starter-kit/step-5/final-projects/baseball

🖋 Number Baseball - Starter Kit

 

 

Todo 리스트는 전부 구현 완료했으며 여러 가지 경험을 할 수 있었다.

 

1. 2가지의 Html , Javascript상의 이동 , css의 활용 (탬플릿을 지정 , 버튼 등을 다른 사람이 만든 버튼 등으로 적용해보기)

2. 실제적으로 가장 기초적인 웹 구동방법에 대해 학습했다. (Html , Css , Js를 통한 기초 웹사이트)

3. 페이지의 로드 , 새로고침 , 지정 등 처음부터 만들면서 학습할 수 있었다.

 

 

만들면서 보기엔 1시간이면 만들 수 있을꺼라 생각했지만 .. 실상은 하루 반나절을 몽땅 썼다.

문제가 됐던 부분

 

1. JS의 document.querySelector 가 안 먹었다. 아마 html을 2가지 (index.html , playgame.html)으로 구성하고 이동했는데 JS는 1개로 단독 사용하다 보니 나온 문제라고 생각된다. JS도 2가지로 분할하여 (index.js , playgame.js) 해결하였다.
2. 해당 Html로 구성하고 입력 버튼 (혹은 enter)를 누르면 페이지가 갱신되는 문제가 있었다. JS 단 최 후미에 e.preventDefault(); 를 삽입함으로 문제를 해결했다.

        <form id="form">
          숫자를 입력해주세요 : <input type="text" id="input">
          <button type="text" id="btn">입력</button>
        </form>

 

3. JS에서 랜덤 숫자 생성에 대해 공부할 수 있었다.

Math.floor(Math.random() * (900)) + 100 + "";

나는 첫자리 숫자도 0이 나오는 게 싫어서 최소 100 이상 최대 999 이하를 만들고 싶었다.

후방에 ""는 해당 숫자를 스트링으로 변환하기 위해 삽입했다.

 

 

특히 가장 시간이 많이 걸렸던 건 아마 1번이었던 거 같다. 왜 클릭을 해도 이벤트가 발생을 안 하는지 몰라서 2시간 넘게 사이트 유랑을 하였다. 혹시 몰라서 JS를 분리해서 지정해주니까 바로 해결되었다...