js-test/index.html at master · hyeminlee/js-test · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">

    <title>Number guessing game</title>

    <style>
        html {
        font-family: sans-serif;
      }
      body {
        width: 50%;
        max-width: 800px;
        min-width: 480px;
        margin: 0 auto;
      }
      .lastResult {
        color: white;
        padding: 3px;
      }
    </style>
</head>

<body>
    <h1>Number guessing game</h1>

    <p>We have selected a random number between 1 and 100. See if you can guess it in 10 turns or fewer. We'll tell you if your guess was too high or too low.</p>

    <div class="form">
        <label for="guessField">Enter a guess: </label><input type="text" id="guessField" class="guessField">
        <input type="submit" value="Submit guess" class="guessSubmit">
    </div>

    <div class="resultParas">
        <p class="guesses"></p>
        <p class="lastResult"></p>
        <p class="lowOrHi"></p>
    </div>

    <script>
        var randomNumber = Math.floor(Math.random() * 100) + 1;

        var guesses = document.querySelector('.guesses');
        var lastResult = document.querySelector('.lastResult');
        var lowOrHi = document.querySelector('.lowOrHi');

        var guessSubmit = document.querySelector('.guessSubmit');
        var guessField = document.querySelector('.guessField');

        var guessCount = 1;
        var resetButton;

        function checkGuess() {
            var userGuess = Number(guessField.value); //value가 현재 입력된 값인가봐
            //Number. 는 값이 숫자라는 걸 알 수 있는 메소드.
            if (guessCount === 1) {
                guesses.textContent = 'previous guesses: ';
            }
            guesses.textContent += userGuess + ' ';
            //현재의 userGuess 값에 마지막 guesses 문장을 추가하고, 끝에 공백을 더함으로서 각각의 추측한 수끼리 간격을 두고 보여진다.-- 왜 userGuess가 앞에 있는거죠. 뒤로 가는거 아닌가요.

            if (userGuess === randomNumber) {
                lastResult.textContent = 'Congratulations! You got it right!';
                lastResult.style.backgroundColor = 'green';
                lowOrHi.textContent = '';
                setGameOver();
            } else if (guessCount === 10) {
                lastResult.textContent = '!!!Game Over!!!';
                setGameOver();
            } else {
                lastResult.textContent = 'Wrong!';
                lastResult.style.backgroundColor = 'red';
                if (userGuess < randomNumber) {
                    lowOrHi.textContent = 'Last guess was too low!';
                } else if (userGuess > randomNumber) {
                    lowOrHi.textContent = 'Last guess was too high!';
                }
            }


            guessCount++; //한 차례 더함.
            guessField.value = ''; //텍스트필드 공란으로 만들기.
            guessField.focus(); //텍스트필드에 커서 위치시키기.
        }

        guessSubmit.addEventListener('click', checkGuess);
        //event listener: 이벤트 발생 후 발생된 이벤트 처리.
        //addEventListener()는 두개의 입력(인수)를 가지는 메소드. 특히 addEventListener() 안에서는 함수의 괄호가 필요없다.(위의 checkGuess)처럼

        /*
        function checkGuess() {
            alert('I am a placeholder');
        }

        checkGuess();

        var name = 'bingo';
        name;

        var hello = 'says hello!';
        hello;

        var greeting = name + hello;
        greeting;

        name += 'says hello!';
        name = name + 'says hello!';

        !==
        means Non - equality(is it not the same ? )
        */

    </script>
</body>

</html>