foloye · foloye · Mar 30, 2022 · Apr 1, 2022 · Apr 1, 2022
diff --git a/.gitignore b/.gitignore
diff --git a/.glitch-assets b/.glitch-assets
@@ -0,0 +1,17 @@
+{"name":"drag-in-files.svg","date":"2016-10-22T16:17:49.954Z","url":"https://cdn.hyperdev.com/drag-in-files.svg","type":"image/svg","size":7646,"imageWidth":276,"imageHeight":276,"thumbnail":"https://cdn.hyperdev.com/drag-in-files.svg","thumbnailWidth":276,"thumbnailHeight":276,"dominantColor":"rgb(102, 153, 205)","uuid":"adSBq97hhhpFNUna"}
+{"name":"click-me.svg","date":"2016-10-23T16:17:49.954Z","url":"https://cdn.hyperdev.com/click-me.svg","type":"image/svg","size":7116,"imageWidth":276,"imageHeight":276,"thumbnail":"https://cdn.hyperdev.com/click-me.svg","thumbnailWidth":276,"thumbnailHeight":276,"dominantColor":"rgb(243, 185, 186)","uuid":"adSBq97hhhpFNUnb"}
+{"name":"paste-me.svg","date":"2016-10-24T16:17:49.954Z","url":"https://cdn.hyperdev.com/paste-me.svg","type":"image/svg","size":7242,"imageWidth":276,"imageHeight":276,"thumbnail":"https://cdn.hyperdev.com/paste-me.svg","thumbnailWidth":276,"thumbnailHeight":276,"dominantColor":"rgb(42, 179, 185)","uuid":"adSBq97hhhpFNUnc"}
+{"uuid":"adSBq97hhhpFNUna","deleted":true}
+{"uuid":"adSBq97hhhpFNUnb","deleted":true}
+{"uuid":"adSBq97hhhpFNUnc","deleted":true}
+{"name":"Logo_Color.svg","date":"2020-10-15T17:02:08.576Z","url":"https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FLogo_Color.svg","type":"image/svg+xml","size":25537,"imageWidth":19,"imageHeight":14,"thumbnail":"https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FLogo_Color.svg","thumbnailWidth":19,"thumbnailHeight":14,"uuid":"XPQ2UUJettC9yQ6L"}
+{"name":"HKGrotesk-Medium.otf","date":"2020-10-15T17:19:39.944Z","url":"https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FHKGrotesk-Medium.otf","type":"","size":69888,"thumbnail":"https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2Fthumbnails%2FHKGrotesk-Medium.otf","thumbnailWidth":210,"thumbnailHeight":210,"uuid":"mSnvx5eJut7fimxB"}
+{"name":"HKGrotesk-Regular.otf","date":"2020-10-15T17:19:40.076Z","url":"https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FHKGrotesk-Regular.otf","type":"","size":67768,"thumbnail":"https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2Fthumbnails%2FHKGrotesk-Regular.otf","thumbnailWidth":210,"thumbnailHeight":210,"uuid":"VY2dLeOvcf8ffuEw"}
+{"name":"HKGrotesk-SemiBold.otf","date":"2020-10-15T17:20:42.442Z","url":"https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FHKGrotesk-SemiBold.otf","type":"","size":69948,"thumbnail":"https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2Fthumbnails%2FHKGrotesk-SemiBold.otf","thumbnailWidth":210,"thumbnailHeight":210,"uuid":"yEDZsSX7I7P2NlF1"}
+{"name":"HKGrotesk-Bold.otf","date":"2020-10-15T17:21:24.249Z","url":"https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FHKGrotesk-Bold.otf","type":"","size":68144,"thumbnail":"https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2Fthumbnails%2FHKGrotesk-Bold.otf","thumbnailWidth":210,"thumbnailHeight":210,"uuid":"aHiG7zYivg7tnSDH"}
+{"name":"illustration.svg","date":"2021-04-11T21:42:24.016Z","url":"https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2Fillustration.svg","type":"image/svg+xml","size":21272,"imageWidth":658,"imageHeight":682,"thumbnail":"https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2Fthumbnails%2Fillustration.svg","thumbnailWidth":319,"thumbnailHeight":330,"uuid":"WlqPAPkJzcjf2thL"}
+{"uuid":"aHiG7zYivg7tnSDH","deleted":true}
+{"uuid":"mSnvx5eJut7fimxB","deleted":true}
+{"uuid":"yEDZsSX7I7P2NlF1","deleted":true}
+{"uuid":"VY2dLeOvcf8ffuEw","deleted":true}
+{"uuid":"XPQ2UUJettC9yQ6L","deleted":true}
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,54 @@
+The LICENSE file for any project gives credit to the creator/author of the 
+project, copyright information for the project, and the legal terms under 
+which it's being shared. In other words, this is us using an MIT license to
+say "we wrote this and you can do whatever you want with it."
+
+******************************************************************************
+~glitch-hello-website
+******************************************************************************
+MIT License
+
+Copyright (c) 2021, Glitch, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+
+
+
+******************************************************************************
+
+THIRD-PARTY SOFTWARE
+This is all the software we used to build this starter project. All of these
+licenses are compatible with the license above. We've included links so you
+can learn more if you want. 
+
+1. HK Grotesk: The font we're using. 
+
+
+******************************************************************************
+1. HK Grotesk
+URL: https://hanken.co/products/hk-grotesk
+******************************************************************************
+HK Grotesk was designed by Hanken Design Co. It is shared using a SIL OFL
+license. Full license text can be found at:
+
+https://hanken.co/pages/web-fonts-eula
+******************************************************************************
+END, HK Grotesk
+******************************************************************************
diff --git a/README.md b/README.md
@@ -41,8 +41,9 @@ The following **additional** features are implemented:
 ## Video Walkthrough (GIF)
 
 If you recorded multiple GIFs for all the implemented features, you can add them here:
-![](https://recordit.co/hAGd5OGIpv)
-![](https://recordit.co/AUXCbQpUwY)
+![x](https://media.giphy.com/media/cAqe4xg0L7Sk6OMHRv/giphy.gif)
+![x](https://media.giphy.com/media/qLm8aU9bz5lGyo9Oge/giphy.gif)
+![x](https://media.giphy.com/media/izHgMDRGFz9ZUcoN0z/giphy.gif)
 
 ## Reflection Questions
 1. If you used any outside resources to help complete your submission (websites, books, people, etc) list them here. 
@@ -69,7 +70,7 @@ If I had a few more hours to work on this project, I would try to implement a fe
 
 ## Interview Recording URL Link
 
-[My 5-minute Interview Recording](your-link-here)
+[My 5-minute Interview Recording](https://www.loom.com/share/63079364d1434d68afae7cf2a62ceebe)
 
 
 ## License

diff --git a/TODO.md b/TODO.md
@@ -0,0 +1,19 @@
+# TODO 🚧
+
+Your new site is all yours so it doesn't matter if you break it! Try editing the code–add a button element that moves when the user clicks it.
+
+In `index.html`, add this code on the line after the comment with `ADD BUTTON HERE` in it (you can copy and paste the button element HTML):
+
+```html
+<button>
+    Click me!
+</button>
+```
+
+Look at the page to see the button. Click it!
+
+Open `script.js` to see the script that makes the button move.
+
+## Keep going! 🚀
+
+Try adding more properties to the CSS `dipped` style for the button to see how the changes appear on click.
diff --git a/index.html b/index.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <!--
+      This is the page head - it contains info the browser uses to display the page
+      You won't see what's in the head in the page
+      Scroll down to the body element for the page content
+    -->
+
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" href="https://glitch.com/favicon.ico" />
+
+    <!-- 
+      This is an HTML comment
+      You can write text in a comment and the content won't be visible in the page
+    -->
+
+    <title>CodePath Summer Internship Prework</title>
+
+    <!-- Meta tags for SEO and social sharing -->
+    <link rel="canonical" href="https://glitch-hello-website.glitch.me/" />
+    <meta
+      name="description"
+      content="A simple website, built with Glitch. Remix it to get your own."
+    />
+    <meta name="robots" content="index,follow" />
+    <meta property="og:title" content="Hello World!" />
+    <meta property="og:type" content="article" />
+    <meta property="og:url" content="https://glitch-hello-website.glitch.me/" />
+    <meta
+      property="og:description"
+      content="A simple website, built with Glitch. Remix it to get your own."
+    />
+    <meta
+      property="og:image"
+      content="https://cdn.glitch.com/605e2a51-d45f-4d87-a285-9410ad350515%2Fhello-website-social.png?v=1616712748147"
+    />
+    <meta name="twitter:card" content="summary" />
+
+    <!-- Import the webpage's stylesheet -->
+    <link rel="stylesheet" href="/style.css" />
+
+    <!-- Import the webpage's javascript file -->
+    <script src="/script.js" defer></script>
+  </head>
+  <body>
+    <h1 class="title">Sound and Light Memory Game</h1>
+
+    <!-- Instructions on using this project -->
+    <div class="instructions">
+      <p>Welcome to the game! Are you ready to get started?</p>
+      <p>
+        Instructions: Follow the pattern back to win the game!
+      </p>
+      <button id="startBtn" class="notGB" onclick="startGame()">
+        Start
+      </button>
+      <button id="stopBtn" class="hidden notGB" onclick="stopGame()">
+        Stop
+      </button>
+    </div>
+    <br>
+
+    <div id="gameButtonArea">
+      <button id="button1" onmousedown="startTone(1)" onmouseup="stopTone()" onclick="guess(1)"></button>
+      <button id="button2" onmousedown="startTone(2)" onmouseup="stopTone()" onclick="guess(2)"></button>
+      <button id="button3" onmousedown="startTone(3)" onmouseup="stopTone()" onclick="guess(3)"></button>
+      <button id="button4" onmousedown="startTone(4)" onmouseup="stopTone()" onclick="guess(4)"></button>
+      <button id="button5" onmousedown="startTone(5)" onmouseup="stopTone()" onclick="guess(5)"></button>
+      <button id="button6" onmousedown="startTone(6)" onmouseup="stopTone()" onclick="guess(6)"></button>
+      <button id="button7" onmousedown="startTone(7)" onmouseup="stopTone()" onclick="guess(7)"></button>
+      <button id="button8" onmousedown="startTone(8)" onmouseup="stopTone()" onclick="guess(8)"></button>
+      <button id="button9" onmousedown="startTone(9)" onmouseup="stopTone()" onclick="guess(9)"></button>
+      <button id="button10" onmousedown="startTone(10)" onmouseup="stopTone()" onclick="guess(10)"></button>
+    </div>
+  </body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,181 @@
+// global constants
+const cluePauseTime = 333; //how long to pause in between clues
+const nextClueWaitTime = 1000; //how long to wait before starting playback of the clue sequence
+
+//Global Variables
+var pattern = []; //[2, 9, 1, 3, 6, 8, 5, 4,10,7];
+var progress = 0;
+var gamePlaying = false;
+var tonePlaying = false;
+var volume = 0.5;
+var guessCounter = 0;
+var clueHoldTime = 1000; //how long to hold each clue's light/sound
+var mistakes = 0;
+
+function startGame() {
+  //initialize game variables
+  progress = 0;
+  mistakes = 0;
+  pattern = [];
+  createPattern();
+
+  for (let i = 0; i <= 10; i++) {
+    //prints out every value of the pattern array to the console
+    console.log("length of patternarray" + pattern[i]);
+  }
+
+  gamePlaying = true;
+  document.getElementById("startBtn").classList.add("hidden");
+  document.getElementById("stopBtn").classList.remove("hidden");
+  playClueSequence();
+}
+// swap the Start and Stop buttons
+
+function stopGame() {
+  //end the current game
+  gamePlaying = false;
+  guessCounter = 0;
+  document.getElementById("startBtn").classList.remove("hidden");
+  document.getElementById("stopBtn").classList.add("hidden");
+}
+
+function lightButton(btn) {
+  document.getElementById("button" + btn).classList.add("lit");
+}
+function clearButton(btn) {
+  document.getElementById("button" + btn).classList.remove("lit");
+}
+
+function createPattern() {
+  //creates a random pattern every time the game restarts
+  var length = 0;
+  while (length < 11) {
+    pattern.push(Math.floor(Math.random() * (10 - 1 + 1) + 1));
+    length++;
+  }
+  length = 0;
+}
+
+function playSingleClue(btn) {
+  if (gamePlaying) {
+    lightButton(btn);
+    playTone(btn, clueHoldTime);
+    setTimeout(clearButton, clueHoldTime, btn);
+  }
+}
+
+function playClueSequence() {
+  var guessCounter = 0;
+  if (clueHoldTime > 450) {
+    clueHoldTime = clueHoldTime - 90; //decreases the amount of time a note plays for
+  }
+  context.resume();
+  let delay = nextClueWaitTime; //set delay to initial wait time
+  for (let i = 0; i <= progress; i++) {
+    // for each clue that is revealed so far
+    console.log("play single clue: " + pattern[i] + " in " + delay + "ms");
+    setTimeout(playSingleClue, delay, pattern[i]); // set a timeout to play that clue
+    delay += clueHoldTime;
+    delay += cluePauseTime;
+  }
+}
+
+function loseGame() {
+  stopGame();
+  alert("Game Over. You lost.");
+}
+function winGame() {
+  stopGame();
+  alert("You Won! Congratulations.");
+}
+
+function guess(btn) {
+  console.log("user guessed: " + btn);
+  console.log("guess counter: " + guessCounter);
+  console.log("progress: " + progress);
+  console.log("place in pattern array: " + pattern[guessCounter]);
+  if (!gamePlaying) {
+    return;
+  }
+  if (btn == pattern[guessCounter]) {
+    //checks if the button is the correct one
+
+    if (progress == guessCounter) {
+      //checks how many times the user has guessed a square
+
+      if (progress == pattern.length - 1) {
+        // checks if we've hit the end of pattern array
+        winGame();
+      } else {
+        //if we haven't hit end of array play next clue
+        progress++;
+        guessCounter = 0;
+        playClueSequence();
+      }
+    } else {
+      guessCounter++;
+    }
+  } else if (mistakes < 3) {
+    //checks how many mistakes user has made
+    mistakes++;
+    if (mistakes == 3) {
+      loseGame();
+    } else {
+      //if mistakes are less than 3 it alerts user how many mistakes they've made
+      if (mistakes == 1) {
+        alert("Incorrect Move! You have made " + mistakes + " mistake.");
+      } else {
+        alert("Incorrect Move! You have made " + mistakes + " mistakes.");
+      }
+    }
+  } else {
+    loseGame();
+  }
+}
+
+// Sound Synthesis Functions
+const freqMap = {
+  1: 261.6,
+  2: 329.6,
+  3: 392,
+  4: 466.2,
+  5: 175,
+  6: 650.4,
+  7: 200,
+  8: 800,
+  9: 225,
+  10: 523.6,
+};
+function playTone(btn, len) {
+  o.frequency.value = freqMap[btn];
+  g.gain.setTargetAtTime(volume, context.currentTime + 0.05, 0.025);
+  context.resume();
+  tonePlaying = true;
+  setTimeout(function () {
+    stopTone();
+  }, len);
+}
+function startTone(btn) {
+  if (!tonePlaying) {
+    context.resume();
+    o.frequency.value = freqMap[btn];
+    g.gain.setTargetAtTime(volume, context.currentTime + 0.05, 0.025);
+    context.resume();
+    tonePlaying = true;
+  }
+}
+function stopTone() {
+  g.gain.setTargetAtTime(0, context.currentTime + 0.05, 0.025);
+  tonePlaying = false;
+}
+
+// Page Initialization
+// Init Sound Synthesizer
+var AudioContext = window.AudioContext || window.webkitAudioContext;
+var context = new AudioContext();
+var o = context.createOscillator();
+var g = context.createGain();
+g.connect(context.destination);
+g.gain.setValueAtTime(0, context.currentTime);
+o.connect(g);
+o.start(0);