Binary-Search-Example/index.html at master · kellerflint/Binary-Search-Example · 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
119
120
121
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Search Demo</title>
    <style>
        .menu-left {
            position: fixed;
            margin-left: 1%;
            background-color: lightblue;
            padding: 10px;
            border: 3px solid darkblue;

        }

        .menu-right {
            position: fixed;
            margin-left: 80%;
            background-color: lightblue;
            padding: 10px;
            border: 3px solid darkblue;

        }

        h1 {
            margin-left: 40%;
            margin-top: 20%;
            color: green;
            position: fixed;
            font-size: 5em;
        }

        .hide {
            display: none;
        }

        h2 {
            text-align: center;
        }

        p {
            text-align: center;
        }

        .item {
            display: inline-block;
            border: 2px solid grey;
            background-color: lightgrey;
            text-align: center;
            margin: 2px;
            width: 50px;
            height: 50px;
        }
    </style>
</head>

<body>
    <h1 id="win">YOU DID IT!</h1>
    <div id="menu" class="menu-left">
        <h2 id="target">Target Number: </h2>
        <p id="counter">Clicks: 0</p>
    </div>
    <div id="main"></div>


    <script>

        // for 10,000 [7, 9, 11] 7-11 guesses so far

        let count = 0;
        let target = 0;
        let counter = document.getElementById("counter");
        let main = document.getElementById("main");
        document.getElementById("win").setAttribute("class", "hide");

        let c = 0;
        let numbers = [];
        for (let i = 0; i < 10000; i++) {
            c += Math.floor(Math.random() * (Math.random() * 10) + 1);
            let node = document.createElement("div");
            node.setAttribute("class", "item");
            node.setAttribute("data-c", c);
            let p = document.createElement("p");
            p.setAttribute("class", "hide");
            let text = document.createTextNode(c);
            numbers.push(c);
            node.addEventListener("click", function () {
                node.childNodes[0].setAttribute("class", "");
                count++;
                counter.innerText = ("Clicks: " + count);
                if (target == parseInt(node.getAttribute("data-c"))) {
                    document.getElementById("win").setAttribute("class", "");
                }
            });
            p.append(text);
            node.append(p);
            main.append(node);
        }

        let menu = document.getElementById("menu");
        menu.addEventListener("mouseenter", function () {
            if (menu.classList.contains("menu-left")) {
                menu.classList.add("menu-right");
                menu.classList.remove("menu-left");
            } else {
                menu.classList.add("menu-left");
                menu.classList.remove("menu-right");
            }
        });

        target = numbers[Math.floor(Math.random() * numbers.length)];

        document.getElementById("target").innerText = "Target Number: " + target;


    </script>
</body>

</html>