diff --git a/feedback.md b/feedback.md new file mode 100644 index 0000000..3ed5829 --- /dev/null +++ b/feedback.md @@ -0,0 +1,18 @@ +# Project 1 Evaluation +[inline code comments]() +## Planning / Process / Submission +**1: Progressing** +>App is submitted, with basic evidence of planning. Documentation exists, but lacks common areas such as setup instructions, description of application functionality and link to deployed application +>Make sure to add a `readme.md` with appropriate documentation. Refer to the "Writing Documentation" lecture for guidance. + +## Technical Requirements +**2: Performing** +>App functions with minimal or no errors and is deployed on github pages + +## Code Quality +**3: Excelling** +>No major code quality issues, makes use of JavaScript best practices appropriately, and follows techniques such as separation of concerns, abstraction, and encapsulation + +## Creativity and Interface +**3: Excelling** +>The app is fully responsive, incorporates outside technologies such as Flexbox. App incorporates modern UI themes, and adds unique flair. diff --git a/index.html b/index.html index 40f4331..06f85a5 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,7 @@ Simon Piano +
@@ -13,6 +14,7 @@

Sim
  • +
  • @@ -48,6 +50,7 @@

    SimFree Play

    Score:

    +

    Count Down:

  • diff --git a/main.js b/main.js index 9f95cad..7d60313 100644 --- a/main.js +++ b/main.js @@ -13,6 +13,7 @@ let timer = 0 let secondCount = document.getElementById('timer') var buttonNormal = document.getElementById('buttonNormal') +// Vanilla JS? Nice... buttonNormal.addEventListener('click', function () { compArray = [] userArray = [] @@ -32,6 +33,8 @@ buttonExtreme.addEventListener('click', function () { extreme = true timeSubtracter = 30 compBox.randomize() + // Notice how this is repetitive of the normal mode? Think about abstracting it into + // a separate function with varying values passed in }) var buttonFreePlay = document.getElementById('buttonFreePlay') @@ -43,6 +46,7 @@ buttonFreePlay.addEventListener('click', function () { // secondCount.innerHTML = timer // }, 1000) // } + // Remove commented-out / unused code from production branches scoreCount = false listen = true userArray = [] @@ -98,6 +102,9 @@ class Key { userArray.push(this.num) this.compare() } + // Does the below functionality need to be attached to each `Key` instance since it + // really pertains to the game as a whole? Think about moving this functionality to the + // `compBox` or another helper class. compare () { if (scoreCount) { let userString = userArray.join('') @@ -109,6 +116,8 @@ class Key { userArray = [] compArray = [] time = 800 + // Think about abstracting this code that runs when they get it wrong into + // its own function / method } } if (userArray.length === compArray.length) { @@ -122,6 +131,7 @@ class Key { setTimeout(() => { compBox.randomize() }, time * 1.5) + // Same here } } } @@ -159,3 +169,8 @@ let keys = [ new Key('keyB', 'bnote', 6), new Key('keyHighC', 'highCNote', 7) ] + +// Awesome job encapsulating functionality into classes. I think a little more abstraction +// (more narrowly defined functions / methods in terms of functionality) and potentially +// creating a second helper class (class Game ?) would be the only improvements that could +// be made. Overally, really great job. diff --git a/style.css b/style.css index aca2a86..a6139ea 100644 --- a/style.css +++ b/style.css @@ -58,6 +58,7 @@ li { .black { z-index: 10; + /*Is 10 neccessary, wouldn't 1 work?*/ display: inline-block; width: 60px; height: 240px; @@ -118,3 +119,9 @@ h1 { #red { color: #EE2C2C; } + +/*Really great formatting and semantic naming for your classes. To strictly follow +best practice, order your selectors by specificity: +- All general element selectors first +- Then all class selectors +- Then all id selectors */