Pre-work – Memory Game

Memory Game is a Light & Sound Memory game to apply for CodePath’s SITE Program.

Submitted by: Gabriella Urgiles

Time spent: 4 hours spent in total

Link to project: (insert your link here, should start with…)

Required Functionality

The following required functionality is complete:

  • Game interface has a heading (h1 tag), a line of body text (p tag), and four buttons that match the demo app
  • “Start” button toggles between “Start” and “Stop” when clicked.
  • Game buttons each light up and play a sound when clicked.
  • Computer plays back sequence of clues including sound and visual cue for each button
  • Play progresses to the next turn (the user gets the next step in the pattern) after a correct guess.
  • User wins the game after guessing a complete pattern
  • User loses the game after an incorrect guess

The following optional features are implemented:

  • Any HTML page elements (including game buttons) has been styled differently than in the tutorial
  • Buttons use a pitch (frequency) other than the ones in the tutorial
  • More than 4 functional game buttons
  • Playback speeds up on each turn
  • Computer picks a different pattern each time the game is played
  • Player only loses after 3 mistakes (instead of on the first mistake)
  • Game button appearance change goes beyond color (e.g. add an image)
  • Game button sound is more complex than a single tone (e.g. an audio file, a chord, a sequence of multiple tones)
  • User has a limited amount of time to enter their guess on each turn

The following additional features are implemented:

  • List anything else that you can get done to improve the app!

Video Walkthrough (GIF)

Recorded multiple GIFs

Reflection Questions

  1. If you used any outside resources to help complete your submission (websites, books, people, etc) list them here.

I have used one resource which was geeks for geeks, however the instructions was very helpful and straight-forward.

  1. What was a challenge you encountered in creating this submission (be specific)? How did you overcome it? (recommended 200 – 400 words)

One of the challenges, I’ve encounter was when I was writing in the index.html, nothing was updating the preview, so later I found that when I was coding style.css was when the screen was coming together, which helped me understand what the difference was between index.html and style.css. For a better understand on what was going on, I went to websites to research the understanding between the two. Geeks for Geeks was a great website to CSS, I found out in geeks for geeks that it is used to provide the background color and is also used for styling, as well as can be used to style the font and change its size. HTML is the basic building block of a website and does the basic elements with different properties onto the website. Another encounter was the if else at the end of the program, before that I thought the program was finish and I tested it out and it would just play the blue button, and I would press the blue button or not and there was no reaction to it, had to read what else was missing and saw where the flowchart came in and had to refresh on the diagram meaning of if blocks and which would be else blocks while creating the names of the situation.

  1. What questions about web development do you have after completing your submission? (recommended 100 – 300 words)

What’s your research process like? Since with this project took me 4 hours to do, creating must have been long and even longer to show thorough instructions to show us. How long does one web development project take to complete from start to finish? Curious for the reason because I understand why you dedicate so much time because you want it to be perfect. What tools do you use to keep track of project requirements? What would your ideal environment as a developer be and how did you become a developer? What programming languages do you prefer, and which is your favorite? What’s important when checking a team member’s code?

  1. If you had a few more hours to work on this project, what would you spend them doing (for example: refactoring certain functions, adding additional features, etc). Be specific. (recommended 100 – 300 words)

Other features I would like to add are:

  • the type of music that I would like to play/ tones onto the buttons
  • let the user customize the colors of the buttons/ lets them choose like a palette of colors, to make it even more fun and personalized.
  • When your press start, then it would appear three more buttons, one saying easy, another one saying medium and the last one saying hard. Depending the modes, there would different amounts of buttons, easy mode would have three, medium would had four and hard would have 6 buttons.

Interview Recording URL Link

[My 5-minute Interview Recording]


Copyright Gabriella Urgiles

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
See the License for the specific language governing permissions and
limitations under the License.


View Github