CODE KATA #6

loopbacksealยท2021๋…„ 1์›” 22์ผ
0

CODE KATA ๐Ÿง—โ€โ™‚๏ธ

๋ชฉ๋ก ๋ณด๊ธฐ
6/29
post-thumbnail

CODE KATA ๐Ÿง—โ€โ™‚๏ธ

range input์„ ํ†ตํ•ด 0~250 ์‚ฌ์ด์˜ ์ˆซ์ž๋ฅผ ์‚ฌ์šฉ์ž๊ฐ€ ์„ ํƒํ•˜๋„๋กํ•˜๊ณ , ์„ ํƒํ•œ ๋ฒ”์œ„๋‚ด์—์„œ Math.random()์„ ํ†ตํ•ด ์ •์ˆ˜ ํ•˜๋‚˜๋ฅผ ์„ ํƒํ•˜๊ณ , ์‚ฌ์šฉ์ž๊ฐ€ input์— ์ž…๋ ฅํ•œ ์ˆซ์ž์™€ ๊ฐ™์€ ์ˆซ์ž์ธ์ง€๋ฅผ play! button์ด ํด๋ฆญ๋˜์—ˆ์„ ๋•Œ ํ™•์ธํ•˜๋„๋กํ•œ๋‹ค. ํด๋ฆญ๋งˆ๋‹ค ์ƒˆ๋กœ์šด ์ˆซ์ž๋ฅผ ์„ ํƒํ•œ๋‹ค.

์š”๊ตฌ์กฐ๊ฑด

input range๋ฅผ ์‚ฌ์šฉ
์‚ฌ์šฉ์ž์˜ ๋ฒ”์œ„ ์„ค์ •์„ ์‹ค์‹œ๊ฐ„์œผ๋กœ ๋ฐ˜์˜
์‚ฌ์šฉ์ž์˜ ์ˆซ์ž๊ฐ€ ์„ ํƒ๋˜์ง€ ์•Š์•˜๋‹ค๋ฉด play! button์ด ๋™์ž‘ํ•˜์ง€ ์•Š๋„๋ก

ํ•ด๊ฒฐ๊ณผ์ •

set up

<<h1>Random Number Game</h1>
<h2 class="js-notice">Generate a Number between 0 and</h2>
<input type="range" class="js-range" min="0" max="250" />
<p>
  Guess the Number!
  <input class="js-input" type="number" min="0" max="250" width="200" />
  <button class="js-button">play!</button>
</p>
<span class="js-span"></span>
<h4 class="js-result"></h4>

html ํŒŒ์ผ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ž‘์„ฑํ•˜์˜€๋‹ค. "js-notice"๋Š” ์‚ฌ์šฉ์ž์˜ input range์˜ ๊ฐ’์— ๋”ฐ๋ผ ํ•ด๋‹น ๊ฐ’์„ ๋ฐ˜์˜ํ•˜๋„๋ก ํ•˜์˜€๊ณ , "js-input"์€ ์‚ฌ์šฉ์ž์˜ ์ž…๋ ฅ์„ ๋ฐ›๊ณ , "js-span"๊ณผ "js-result"์—์„œ๋Š” ๊ฐ๊ฐ ์‚ฌ์šฉ์ž์™€ ์ปดํ“จํ„ฐ์˜ ๊ฐ’๊ณผ ์ŠนํŒจ์—ฌ๋ถ€๋ฅผ ๋ฐ˜์˜ํ•˜๋„๋ก ํ•˜์˜€๋‹ค.

js ํŒŒ์ผ์—์„œ๋Š” ์•„๋ž˜์˜ ๋‚ด์šฉ๊ณผ ๊ฐ™์ด html ํƒœ๊ทธ๋“ค์„ ์‚ฌ์ „์— ์„ ์–ธํ•ด ์ฃผ์—ˆ๊ณ ,

const range = document.querySelector(".js-range");
const notice = document.querySelector(".js-notice");
const input = document.querySelector(".js-input");
const button = document.querySelector(".js-button");
const span = document.querySelector(".js-span");
const result = document.querySelector(".js-result");

init() ํ•จ์ˆ˜ ๋‚ด๋ถ€์—๋Š” addEventListener()๋ฅผ ํ†ตํ•ด range์—๋Š” input event์— ๋Œ€ํ•ด, button์—๋Š” click event์— ๋Œ€ํ•ด ๋ฐ˜์‘ํ•˜๋„๋ก ํ•˜์˜€๋‹ค.

handleInput()

input event์— ๋Œ€ํ•œ ๋ฐ˜์‘์œผ๋กœ ์ž‘๋™๋˜๋Š” ํ•จ์ˆ˜ handleInput()์€ ์‚ฌ์šฉ์ž๊ฐ€ input range๋กœ ์ง€์ •ํ•œ ๊ฐ’์„ notice์˜ ๋‚ด์šฉ์œผ๋กœ ํฌํ•จ์‹œํ‚ค๋„๋ก ํ•˜๋Š” ํ•จ์ˆ˜์ด๋‹ค.

function handleInput(event) {
  const value = event.target.value;
  notice.innerText = `Generate a Number between 0 and ${value}`;
}

handleClick()

play! button์„ ํด๋ฆญํ•˜๋ฉด ๋ฐœ์ƒํ•˜๋Š” ํ•จ์ˆ˜ handleClick()์€ input.value๋ฅผ value๋กœ์„œ ์ €์žฅํ•˜๊ณ , ์กฐ๊ฑด๋ฌธ์„ ํ†ตํ•ด value !== ""์ธ ๊ฒฝ์šฐ์—๋งŒ ์ •๋‹ต ๋น„๊ต๋ฅผ ์ง„ํ–‰ํ•˜๋„๋ก ํ•˜์—ฌ, input์— ์•„๋ฌด๊ฒƒ๋„ ์ž…๋ ฅ์ด ๋˜์ง€ ์•Š์€ ๊ฒฝ์šฐ๋ฅผ ๋ฌด์‹œํ•˜๋„๋ก ํ•˜์˜€๋‹ค.

    const answer = Math.floor(Math.random() * range.value);
    span.innerText = `You chose : ${value}, the machine chose : ${answer}`;
    if (parseInt(value) === answer) {
      result.innerText = "YOU WIN!";
    } else {
      result.innerText = "YOU LOST!";
    }

์ดํ›„ ์œ„์™€ ๊ฐ™์€ ๋‚ด์šฉ์˜ ์ฝ”๋“œ๋ฅผ ํ†ตํ•ด value์˜ ๊ฐ’๊ณผ answer์˜ ๊ฐ’์„ ๋น„๊ตํ•˜์—ฌ ํ•ด๋‹นํ•˜๋Š” ๋‚ด์šฉ์œผ๋กœ innerText๋ฅผ ์ˆ˜์ •ํ•˜๋„๋ก ํ•˜์˜€๋‹ค.


์‹คํ–‰ ๊ฒฐ๊ณผ

profile
CAU Business Administration

0๊ฐœ์˜ ๋Œ“๊ธ€