Beckys branch

evaluation-template.md

@@ -0,0 +1,28 @@
+### Project Feedback + Evaluation
+
+* __Project Workflow__: **Meets Expectations**
+
+>Did you complete the user stories, wireframes, task tracking, and/or ERDs, as specified above? Did you use source control as expected for the phase of the program you’re in (detailed above)?
+
+***Great job on the planning portion and creating user stories. Also, great job using branches and having frequent git commits!***
+
+
+* __Technical Requirements__: **Exceeds Expectations**
+
+>Did you deliver a project that met all the technical requirements? Given what the class has covered so far, did you build something that was reasonably complex?
+
+***Your memory game not only is very functional and rather complex, the interface is awesome, and it’s extremely creative. Also, your CSS/SASS is exceptional! I love the user interface and design of your game.***
+
+
+* __Code Quality__: **Exceeds Expectations**
+
+>Did you follow code style guidance and best practices covered in class, such as spacing, modularity, and semantic naming? Did you comment your code as your instructors have in class?
+
+ ***It's great that you were able to put all of your code into a game object, eliminate global variables, and spend time refactoring your code. I left comments that further help to explain how I might go about refactoring it even more.***
+
+
+* __Problem Solving__: **Exceeds Expectations**
+
+>Are you able to defend why you implemented your solution in a certain way? Can you demonstrate that you thought through alternative implementations?
+
+***You definitely were able to solve your problem and had opportunity to focus on your "silver" or "gold" level objectives. Awesome job!***

index.html

@@ -81,6 +81,7 @@ <h2>
           </div>
         </div>
       </div>
+      <!--I might have made this dynamically in javaScript instead of hard coding all of these divs in my html  -->
       <div class="container">
         <div class="row">
           <div class="col-md-3 card">

pseudocode.md

@@ -10,6 +10,7 @@ Add a title
 Add a timer
 Randomize location of font divs within boxes
 
+<!--I think it's great that you did pseudocode!!! It still reads a little too much like code though -->
 * JS
 variable numFlipped = 0;
 variable card = DOM element selecting boxes;
@@ -19,7 +20,6 @@ variable cardOneFont = "";
 variable cardTwoFont = "";
 
 addEventListener on card for clicks;
-
 if numFlipped <= 2; {
   function selectCard();
     numFlipped++;

readMe.md

@@ -14,6 +14,7 @@ Play the game <a href="http://caitlindaitch.github.io/ConcentrationGame/">here</
 * Open index.html, script.js and style.scss (or style.css) in your text editor of choice
 
 ## User Stories:
+<!--I think your really close on the user stories here but I still think it's missing a more specifics. A user story describes the type of user, what they want and why -->
 * When I click a card, the font should be displayed
 * When I have two cards revealed, they should be compared and either disappear or completely if matching or go back to their original state if the pair is not a match
 * When I click "Play Timed Game" a 30 second countdown should be displayed

script.js

@@ -1,3 +1,4 @@
+//Awesome job putting this all into one object
 var game = {
   numFlipped: 0,
   card: document.querySelectorAll(".card-back"),
@@ -15,6 +16,19 @@ var game = {
   easyGame: document.querySelector(".easy"),
 
   selectLevel: function() {
+    // I think you could have one callback function for both of these event listeners:
+    // for example since they have a class of hard and easy maybe change the name of your fonts arrays property to easy & hard
+    // and write a function like this:
+
+    // this.hardGame.addEventListener("click", this.shuffleFonts);
+    // this.easyGame.addEventListener("click", this.shuffleFontsHard);
+
+    // shuffleFonts: function(){
+    //   var type = this.classList[0];
+    //   var self = game;
+    //   self.shuffleFonts(self.type);
+    // }
+
     this.hardGame.addEventListener("click", this.shuffleFontsHard);
 
     this.easyGame.addEventListener("click", this.shuffleFontsEasy);
@@ -57,6 +71,7 @@ var game = {
   },
 
   shuffleFontsHard: function() {
+    // I actually really liked that you used self for this instance, it might help in the future iterating on this code
     var self = game;
 
     self.shuffleFonts(self.fontsHard);
@@ -86,7 +101,7 @@ var game = {
 
     colorPairs.forEach(function(pair){
       if(newColor === pair[0]){
-        for (var i=0; i<self.card.length; i++) {
+        for (var i= 0; i < self.card.length; i++) {
           self.card[i].style.backgroundColor = pair[1];
         };
       }
@@ -97,14 +112,31 @@ var game = {
     var activeCard = this.firstElementChild;
     var self = game;
 
+
     if (self.numFlipped === 0) {
+
+      // I would abstract this into a separate function and call it here:
+      // self.cardOne = activeCard;
+      // changeActiveClass(activeCard, self);
+
+    //   changeActiveClass = function(activeCard, self){
+      //   activeCard.classList.remove("inactive");
+      //   self.cardOne = activeCard;
+      //   self.cardOneFont = activeCard.getAttribute("data-font");
+      //   self.numFlipped++;
+    // }
       activeCard.classList.remove("inactive");
 
       self.cardOne = activeCard;
       self.cardOneFont = activeCard.getAttribute("data-font");
 
       self.numFlipped++;
     } else if (self.numFlipped === 1 && self.cardOne != activeCard) {
+      // I would do the same thing here in this case:
+      // self.cardTwo = activeCard;
+      // changeActiveClass(activeCard, self);
+      // self.checkAnswer();
+      //
       activeCard.classList.remove("inactive");
 
       self.numFlipped++;
@@ -117,6 +149,7 @@ var game = {
   },
 
   checkAnswer: function() {
+    // I would separate the setTimeout into a separate method/function from checkAnswer
     if (this.cardOneFont === this.cardTwoFont) {
       var selectedCardOne = this.cardOne.parentNode;
       var selectedCardTwo = this.cardTwo.parentNode;
@@ -149,6 +182,8 @@ var game = {
   },
 
   playTimedGame: function() {
+    // I would try to break this function down further as well, it's a little dificult to read and understand
+    // exactly what your trying to achieve
     var loser = document.querySelector(".loser-outer");
     var countdown = document.querySelector(".countdown");
     var seconds = 29;
@@ -192,3 +227,5 @@ var game = {
 };
 
 game.selectLevel();
+
+// Overall, Awesome job your code looks great!