alissatroiano · Darlyn-Lurikah · Apr 25, 2022 · Apr 24, 2022 · Apr 24, 2022 · Apr 24, 2022
diff --git a/404.html b/404.html
@@ -23,9 +23,7 @@
 	<link rel="shortcut icon" type="image/ico" href="assets/images/favicon.ico" />
     <link rel="shortcut icon" type="image/ico" href="assets/images/favicon.png" />
     <title>404</title>
-
 </head>
-
 <body id="error-page">
     <header>
         <div id="navbar-container"></div>
@@ -35,17 +33,15 @@
             <div class="row my-0 mx-auto">
                 <div class="col-12">
                     <div class="mainbox">
-                        <div class="err">4</div>
+                        <h2 class="err">4</h2>
                         <i class="far fa-question-circle fa-spin mt-3"></i>
-                        <div class="err2">4</div>
+                        <h2 class="err2">4</h2>
                         <div class="msg">
                             <p>Maybe this page moved? Got deleted? Is hiding out in quarantine? Never existed
                                 in the first place?
                             </p>
                             <a class="btn btn-main btn-lg my-3" href="index.html">TAKE ME Home!</a>
-
                         </div>
-
                         <img class="img-fluid mt-3 mt-md-5"
                         src="https://cdn.pixabay.com/photo/2019/12/13/15/37/faulty-4693238_1280.png" alt="404"
                         id="img-404">
@@ -55,5 +51,4 @@
         </section>
     </main>
 </body>
-
 </html>
diff --git a/README.md b/README.md
@@ -124,7 +124,7 @@ In addition to the Navbar features the footer displays:
 5. Notice there is a stray `</p>` tag on like 36
 6. Open IDE and visit `index.html`
 7. Remove the stray element
-8. Repeat steps 1-3
+8. Repeat steps 1-3 until there are no errors
 9. Mark test "passed"
 
 ### HTML Test 2: Questions.html
@@ -136,10 +136,48 @@ In addition to the Navbar features the footer displays:
 6. Observe that there is an error in the font awesome CDN link
 7. Conclude that error most likely occurred while merging or formatting the code
 8. Replace with correct CDN link
-9. Repeat steps 1-3
+9.  Repeat steps 1-3 until there are no errors
 10. Observe validator's outpit, "Document checking completed. No errors or warnings to show"
 11. Mark test "passed"
 
+### HTML Test 3: Team.html
+1. Visit [W3C Validator](https://validator.w3.org/)
+2. Paste the contents of `team.html` into the tool to check input 
+3. Click "check"
+4. Observe the following **error**: "Attribute target not allowed on element i at this point"
+5. Visit `team.html` in local IDE
+6. Move the target attribute to its' corresponding `<a></a>` element
+7. Observe the following **error**: "Duplicate ID"
+8. Visit `team.html` and observe that all team cards are using the same ID
+9. Create new ID names for all div elements effected by this error
+10. Visit `style.css` and style all new ID's accordingly
+11.  Repeat steps 1-3 until there are no errors
+12. Mark test "passed"
+
+### HTML Test 4: 404.html
+1. Visit [W3C Validator](https://validator.w3.org/)
+2. Paste the contents of `404.html` into the tool to check input 
+3. Click "check"
+4. Observe the following **warning**: "Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections, or else use a div element instead for any cases where no heading is needed."
+5. Visit `404.html` in IDE
+6. Replace `div` with `h2`
+7. Repeat steps 1-3 until there are no errors
+8. Mark test "passed"
+
+
+### CSS Jigsaw Validator Test
+1. Visit W3C Jigsaw validator in the browser
+2. Copy all properties from `style.css`
+3. Paste the contents of `style.css` in the validator tool
+4. Click, "Check"
+5. Observe an error coming from line 410
+6. Notice the media query definition is outdated
+7. Revise
+8. Repeat steps 1-4
+9. Observe all tests are now passing
+10. Mark test, "passed"
+
+
 ### JS Test 1: On Click/Select CSS Effect
 1. Visit the project in the browser
 2. Click on the CTA button to visit the calculator tool
@@ -173,14 +211,39 @@ In addition to the Navbar features the footer displays:
 3. Scroll down to search for a vehicle
 4. Click on a choice for each question
 5. Click, "Search"
-
+6. Observe that clicking the "Search" button returns nothing on the front-end
+7. Open up the JS console
+8. Observe a 404 error, stating that the JSON file can not be found by the server
+9. Consult with team
+10. Have team member refactor and troubleshoot
+11. Observe that the error during production resulted from the use of a file path in the fetch statement
+12. Replace the file path with a URL
+13. Commit, push and deploy changes
+14. Repeat steps 1-5
+15. Observe that the search functionality has been repaired and search results are now printing on the front end.
+16. Open the JavaScript console
+17. Observe that there are no longer any errors
+18. Mark test, "passed"
+
+### JS Test 4: JSHint Test
+1. Copy the contents of `script.js`
+2. Visit [JSHint](https://jshint.com/)
+3. Paste the contents of `script.js` into the JavaScript validator
+4. Observe the **warnings**
+5. Add semicolons wherever they are missing
+6. Notice the remaining warnings suggest dot notation
+7. Observe there are no errors with the JavaScript
+8. Repeat steps 1 - 3
+9. Mark test, "passed"
 
 | **Bug ID** | **Description of Bug** | **Problem** | **Fix/Solution** |
 |||||
 |||||
 |||||
 |||||
 
+
+
 ### **Known Limitations**
 
 ## **DEPLOYMENT**
@@ -256,11 +319,17 @@ In addition to the Navbar features the footer displays:
 
 ### **Content**
 - [Design Shack](http://127.0.0.1:5500/index.html#mission) - CSS `text-shadow` styles were copied from Design Shack's article, ["12 Fun CSS Text Shadows You Can Copy and Paste"](https://designshack.net/articles/css/12-fun-css-text-shadows-you-can-copy-and-paste/)
+
+- The [404 Error Page](404.html) was copied from [FreeFrontEnd](https://freefrontend.com/html-css-404-page-templates/)
 
 ### **Media**
 - [EvSpecifications](https://www.evspecifications.com/) 
     Source for the images of the cars in the database
 
 - [Pixabay](https://pixabay.com/illustrations/faulty-break-down-car-4693238/)
 
+- The illustration on the landing page was copied from [iStockPhoto](https://www.istockphoto.com/illustrations)
+
+- The favicon image was copied from [FreeSVG](https://freesvg.org/lightning-symbol-vector-image)
+
 ### **Acknowledgements**
diff --git a/TESTING.md b/TESTING.md
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -314,16 +314,26 @@ a.link-secondary:hover {
     font-size: smaller;
 }
 
-#team-card {
+#team-card,
+#team-card-1,
+#team-card-2,
+#team-card-3,
+#team-card-4,
+#team-card-5 {
     border: 0;
     width: 12rem;
     margin-top: 25px;
+
 }
 
-#team-card img {
+#team-card img,
+#team-card-1 img,
+#team-card-2 img,
+#team-card-3 img,
+#team-card-4 img,
+#team-card-5 img  {
     border-radius: 5rem;
     width: 10rem;
-
 }
 
 #footer-copyright {
@@ -351,6 +361,7 @@ a.link-secondary:hover {
     position: relative;
 }
 
+#error, #error2,
 .err {
     font-family: 'futura-pt', sans-serif;
     color: var(--p-yellow);
@@ -396,7 +407,7 @@ a.link-secondary:hover {
 }
 
 /* Portrait and Landscape */
-@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
+@media only screen and (min-width: 768px) {
     .jumbotron {
         max-width: 100%;
         margin: 0 auto;
@@ -405,6 +416,5 @@ a.link-secondary:hover {
         max-width: 100%;
         min-height: 100%;
         height: auto;
-        margin-bottom: 50px;
     }
 }
diff --git a/assets/js/script.js b/assets/js/script.js
@@ -35,21 +35,21 @@ function setOptionVariable(value) {
 // function to display the car search results
 function displaySearchResults(resultsList) {
     // find the display element and clear it
-    display = document.getElementById("searchResultsDisplay")
-    display.innerHTML = ""
+    display = document.getElementById("searchResultsDisplay");
+    display.innerHTML = "";
     // check if list contains any cars
     if (resultsList.length > 0) {
         if (resultsList.length >= 2) {
             // more than 2 results in the list, shuffle the list and take the first 2 results
             if (resultsList.length > 2){
-                resultsList = resultsList.sort(() => Math.random() - 0.5)
-                var resultsList = resultsList.slice(0,2)
+                resultsList = resultsList.sort(() => Math.random() - 0.5);
+                var resultsList = resultsList.slice(0,2);
             }
         }
         // for all the items in the results, display thier info on screen
         for (const car of resultsList) {
-            carFuelSavings = calculateFuelSavings(true, 1/car['m/kWh'])
-            savingStatement =  `<p class="mb-0 text-success">Save approx $${carFuelSavings} a year with this EV!</p>`
+            carFuelSavings = calculateFuelSavings(true, 1/car['m/kWh']);
+            savingStatement =  `<p class="mb-0 text-success">Save approx $${carFuelSavings} a year with this EV!</p>`;
             display.innerHTML += `
             <div class="card car-display-card">
                 <div class="card-header">
@@ -65,7 +65,7 @@ function displaySearchResults(resultsList) {
                     ${carFuelSavings > 0 ?  savingStatement : ""}
                 </div>
             </div>
-            `
+            `;
         }
     } else {  // error message display
         display.innerHTML = `
@@ -75,20 +75,20 @@ function displaySearchResults(resultsList) {
                     <p>Please make a different selection and try again</p>
                 </div>
             </div>
-        `
+        `;
     }
 }
 
 function searchButtonClick() {
     // validate user input with an alert if options are not clicked
     if (budgetInput == null && carSizeInput == null) {
-        alert("please select your car budget above and prefered car size above")
+        alert("please select your car budget above and prefered car size above");
         return false;
     } else if (carSizeInput == null) {
-        alert("please select a car size above")
+        alert("please select a car size above");
         return false;
     } else if (budgetInput == null) {
-        alert("please select your car budget above")
+        alert("please select your car budget above");
         return false;
     } else {
         // collect data from the local database https://alissatroiano.github.io/team-4-april-2022/electric.json
@@ -104,15 +104,15 @@ function searchButtonClick() {
                 // filer all vehicles by vehicle class/size
                 for (let i = 0; i < carData.length; i++) {
                     if (carData[i]["VEHICLE CLASS"].toLowerCase() == carSizeInput.slice(3)) {
-                        resultsStorage.push(carData[i])
+                        resultsStorage.push(carData[i]);
                     }
                 }
                 // filer all vehicles by price in brackets
                 switch (budgetInput.slice(3)) {
                     case "Under30":
                         for (let i = 0; i < resultsStorage.length; i++) {
                             if (resultsStorage[i]["data_price"] < 30000) {
-                                searchResults.push(resultsStorage[i])
+                                searchResults.push(resultsStorage[i]);
                             }
                         }
                         break;
@@ -126,13 +126,13 @@ function searchButtonClick() {
                     case "Over50":
                         for (let i = 0; i < resultsStorage.length; i++) {
                             if (resultsStorage[i]["data_price"] > 50000) {
-                                searchResults.push(resultsStorage[i])
+                                searchResults.push(resultsStorage[i]);
                             }
                         }
                         break;
                     }
                 // call the display search results function
-                displaySearchResults(searchResults)
+                displaySearchResults(searchResults);
             }
-        )}
-    }
+        )};
+    }
diff --git a/index.html b/index.html
@@ -43,8 +43,8 @@ <h1 class="display-4">Welcome to Electrillo</h1>
     <section class="container mission-container" id="mission">
       <!--container for mission page starts here-->
       <div class="row py-5">
-        <div class="col-12 text-center mission-bg pb-4">
-          <h1 class="display-4">Our Mission</h1>
+        <div class="col-12 text-center mission-bg mt-3 mt-md-5 py-3">
+          <h1 class="display-4 mt-3">Our Mission</h1>
           <p class="mission-statement mt-5">With climate change becoming a increasing urgent problem in our lives,
             there is a no better time to start looking for more eco-friendly 
             vehicles for the planets health. Electric Vehicles (EVs) and Hybrid