DO NOT MERGE: Final project code review

README.md

@@ -1,4 +1,6 @@
 # 201-FINAL PROJECT
+
+<!-- It would be nice to include a link here to the deployed version of your site! -->
 201d43 Final project by Richard Jimenez, Jeremy Beck, Kristofer Riedman, Christina Gislason
 
 Project: The Four Horsemen of the  201pocalypse 

about-us.html

@@ -28,6 +28,7 @@
     </div>
   </header>
 
+  <!-- Try to be consistent on not having spaces between attribute names and values! -->
   <div class = "about-us-wrapper">
     <div class = "banner">
       <h1>About Us</h1>

index.html

@@ -35,6 +35,7 @@ <h3>Which 201 staff member</h3>
         <h3>are you most like?</h3>
       </div>
     </div>
+    <!-- I wish you didn't need to include html for all of the questions ahead of time! See JS for a different idea... -->
     <!-- Question 1 -->
     <div class="question-bubble">
       <div class="question">

js/home.js

@@ -17,6 +17,7 @@ var text = [
 ];
 
 // Answers constructor
+// Nitpick: in general, you should use singular words (i.e. Answer) for constructors, not plurals.
 function Answers(descriptor, path, staff) {
   this.descriptor = descriptor;
   this.path = path;
@@ -120,6 +121,47 @@ question9.qAnswersArr.push(answer36);
 
 // Render function: puts things on the page
 function render() {
+  // the fact that you use the i variable from the outer function hurts very much.
+  // My recommendation would be that you do something using template literals instead of using
+  // HTML that's already built into your HTML page.
+  // Something like...
+// var html = `<div class="question-bubble">
+//   <div class="question">
+//     <h2>${this.question}</h2>
+//   </div>
+
+//   <div class="img-row">
+//     <label>
+//       <input type="radio" name="question1" class="${this.qAnswersArr[0].staff}">
+//       <img src="{this.qAnswersArr[0].path}" class="${this.qAnswersArr[0].staff}Img">
+//       <p class="${this.qAnswersArr[0].staff}Text">${this.qAnswersArr[0].descriptor}</p>
+//     </label>
+
+//     <label>
+//       <input type="radio" name="question1" class="{this.qAnswersArr[1].staff}">
+//       <img src="{this.qAnswersArr[1].path}" class="{this.qAnswersArr[1].staff}Img">
+//       <p class="{this.qAnswersArr[1].staff}Text">${this.qAnswersArr[1].descriptor}</p>
+//     </label>
+//   </div>
+
+//   <div class="img-row">
+//     <label>
+//       <input type="radio" name="question1" class="{this.qAnswersArr[2].staff}">
+//       <img src="{this.qAnswersArr[2].path}" class="{this.qAnswersArr[2].staff}Img">
+//       <p class="{this.qAnswersArr[2].staff}Text">${this.qAnswersArr[2].descriptor}</p>
+//     </label>
+
+//     <label>
+//       <input type="radio" name="question1" class="this.qAnswersArr[3].staff">
+//       <img src="{this.qAnswersArr[3].path}" class="this.qAnswersArr[3].staffImg">
+//       <p class="this.qAnswersArr[3].staffText">${this.qAnswersArr[3].descriptor}</p>
+//     </label>
+//   </div>
+// </div>`;
+// var wrapperElt = document.createElement('div');
+// wrapperElt.innerHTML = html;
+// formElt.appendChild(wrapperElt);
+
   var question = document.getElementsByTagName('h2')[i];
   question.textContent = this.text;
   var michelleImg = document.getElementsByClassName('michelleImg')[i];
@@ -160,6 +202,8 @@ function Staff(name, img, bio) {
 var staffArr = [];
 
 // Create staff objects for each staff member
+// I might think about creating this info on the results page, and just saving the name of the staff member in local storage.
+// Also, you don't need the variables for each of these! Can just be 4 lines that start "new Staff..."
 var michelle = new Staff('Michelle', 'img/michelle/michelle-portrait.png', 'You are a coding rockstar that is here to school us all!');
 var justin = new Staff('Justin', 'img/justin/justin-flexing.gif', 'You march to the beat of your own drum, always with a smile on your face.');
 var joanna = new Staff('Joanna', 'img/joanna/joanna-profile.png', 'You are a social butterfly that can find a friend anywhere!');

js/results.js

@@ -22,6 +22,7 @@ function removeQuizResult(event) {
 
 // Adds quiz results to the page
 function renderResult() {
+  // You already run this line on page load: no need to load from localStorage twice!
   newResult = JSON.parse(localStorage.getItem('staffWinner'));
   for(var i = 0; i < newResult.length; i++) {
     // Create div for results

results.html

@@ -40,6 +40,7 @@
   </div>
 
 </body>
+<!-- you should keep everything inside of your body, including scripts. Nothing other than the head and the body should be direct children of the html element. -->
 <script src="js/results.js"></script>
 
 </html>