thisisdaniel1
diff --git a/‎assets/0.png
5 KB b/‎assets/0.png
5 KB
diff --git a/‎assets/1.png
4.11 KB b/‎assets/1.png
4.11 KB
diff --git a/‎assets/2.png
4.05 KB b/‎assets/2.png
4.05 KB
diff --git a/‎assets/3.png
4.03 KB b/‎assets/3.png
4.03 KB
diff --git a/‎assets/4.png
3.92 KB b/‎assets/4.png
3.92 KB
diff --git a/‎assets/5.png
4.05 KB b/‎assets/5.png
4.05 KB
diff --git a/‎assets/6.png
4.18 KB b/‎assets/6.png
4.18 KB
diff --git a/‎assets/7.png
3.63 KB b/‎assets/7.png
3.63 KB
diff --git a/‎assets/8.png
4.24 KB b/‎assets/8.png
4.24 KB
diff --git a/‎assets/9.png
4.11 KB b/‎assets/9.png
4.11 KB
diff --git a/‎assets/plus.png
3.02 KB b/‎assets/plus.png
3.02 KB
diff --git a/‎index.html
+29 b/‎index.html
+29
diff --git a/‎scripts/controllers.js
+9 b/‎scripts/controllers.js
+9
diff --git a/‎scripts/model.js
+51 b/‎scripts/model.js
+51
diff --git a/‎scripts/view.js
+23 b/‎scripts/view.js
+23
@@ -0,0 +1,29 @@
+<html>
+    <head>
+        <style>
+            .center{
+                margin: auto;
+                width: 50%;
+                padding: 10px;
+                text-align: center;
+            }
+        </style>
+    </head>
+    <body>
+        <h1 id="time"></h1>
+
+        <div class="center">
+            <img src="assets/0.png" id="first-number" width="100"/>
+            <img src="assets/plus.png" width="100"/>
+            <img src="assets/0.png" id="second-number" width="100"/>
+        </div>
+
+        <div class="center">
+            <input type="text" id="guess-text">
+            <input type="button" value="Submit" id="guess-button">
+        </div>
+        <script src="scripts/model.js"></script>
+        <script src="scripts/controllers.js"></script>
+        <script src="scripts/view.js"></script>
+    </body>
+</html>
@@ -0,0 +1,9 @@
+const button = document.getElementById("guess-button");
+const number = document.getElementById("guess-text");
+button.addEventListener("click", buttonEvent);
+
+
+function buttonEvent(){
+    const guess = number.value;
+    guessNumber(guess);
+}
@@ -0,0 +1,51 @@
+let firstNumber = 0;
+let secondNumber = 0;
+let answer = 0;
+roll();
+
+// creates a random number from 0-4
+function roll(){
+    firstNumber = Math.floor(Math.random()*5);
+    secondNumber = Math.floor(Math.random()*5);
+    answer = firstNumber + secondNumber;
+}
+
+// use Date class to get current time in epoch time
+let then = Date.now();
+let timeLeft = 5;
+let gameOver = false;
+let score = 0;
+
+// Callback function for event: Button click
+function guessNumber(guess){
+    if(guess == answer){
+        roll();
+        score++;
+        timeLeft = timeLeft + 5;
+    }
+    else{
+        gameOver = true;
+        printGameOver("LOSE");
+    }
+}
+
+function main(){
+    const now = Date.now();
+    // skip if game has ended
+    if(gameOver){
+        return;
+    }
+    else if (timeLeft <= 0){
+        printGameOver("OUT");
+    }
+    // recursively prints the digits after a second has passed, 1000ms
+    else if (now - then > 1000){
+        timeLeft--;
+        printFirstDigit(firstNumber);
+        printSecondDigit(secondNumber);
+        printTimeRemaining();
+        then = Date.now();
+    }
+    requestAnimationFrame(main);
+}
+main();
@@ -0,0 +1,23 @@
+function printTimeRemaining(){
+    const timeText = document.getElementById("time");
+    timeText.innerHTML = `<h2>Time left: ${timeLeft}</h2>`;
+}
+
+function printGameOver(status){
+    if(status === "OUT"){
+        var message = `<h1>Time's UP!</h1> <p>Your final score was: ${score}</p>`;
+    }
+    else{
+        var message = `<h1>You Lose!</h1> <p>The number was: ${answer}</p> <p2>Your final score was: ${score}</p2>`;
+    }
+    document.body.innerHTML = message;
+}
+
+// prints state of guess with DOM
+function printFirstDigit(number){
+    document.getElementById("first-number").src = `assets/${number}.png`;
+}
+
+function printSecondDigit(number){
+    document.getElementById("second-number").src = `assets/${number}.png`;
+}