From 240c95cc67f8debd4f8724bfdedb3f79fb5426b2 Mon Sep 17 00:00:00 2001
From: Vincent Ramdhanie <vramdhanie@gmail.com>
Date: Sat, 15 Aug 2020 12:59:49 -0400
Subject: [PATCH 01/15] Add solutions for the Select checkpoint

---
 index.js | 65 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 65 insertions(+)

diff --git a/index.js b/index.js
index e69de29b..fcf7a819 100644
--- a/index.js
+++ b/index.js
@@ -0,0 +1,65 @@
+// view the entire HTML document
+console.log(document);
+
+// find an <h1> element
+const heading = document.querySelector("h1");
+console.log(heading);
+
+// find an element with the class "value"
+const elem01 = document.querySelector(".value");
+console.log(elem01);
+
+// find a <button>
+const elem02 = document.querySelector("button");
+console.log(elem02);
+
+// find an element with class "area"
+const elem03 = document.querySelector(".area");
+console.log(elem03);
+
+// find an <div> that  is a descendant of class "stat"
+const elem04 = document.querySelector(".stat div");
+console.log(elem04);
+
+// find an element with class "hello"
+const elem05 = document.querySelector(".hello");
+console.log(elem05); // null because it does not exist
+
+// find all buttons
+const buttons = document.querySelectorAll("button");
+console.log(buttons);
+
+// iterate over the NodeList of buttons
+for (let element of buttons.values()) {
+  console.log(element);
+}
+
+// find all h3
+const heading3List = document.querySelectorAll("h3");
+
+// iterate over entire list
+for (let element of heading3List.values()) {
+  console.log(element);
+}
+
+// another way to iterate
+for (let i = 0; i < heading3List.length; i++) {
+  const element = heading3List[i];
+  console.log(element);
+}
+
+// find all divs containing ratings
+const ratings = document.querySelectorAll(".rating .value");
+
+// iterate over entire list
+for (let element of ratings.values()) {
+  console.log(element);
+}
+
+// find all divs containing areas
+const areas = document.querySelectorAll(".area .value");
+
+for (let i = 0; i < areas.length; i++) {
+  const element = areas[i];
+  console.log(element);
+}

From ada66fb9e2123c884d62837034b6ac4c1f9187cf Mon Sep 17 00:00:00 2001
From: Vincent Ramdhanie <vramdhanie@gmail.com>
Date: Sat, 15 Aug 2020 16:56:01 -0400
Subject: [PATCH 02/15] Solutions code for updating DOM checkpoint

---
 index.js  | 52 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 style.css | 13 +++++++++++++
 2 files changed, 65 insertions(+)

diff --git a/index.js b/index.js
index e69de29b..eafac686 100644
--- a/index.js
+++ b/index.js
@@ -0,0 +1,52 @@
+// select all the descriptions on the page
+
+const descriptions = document.querySelectorAll(".description");
+
+for (desc of descriptions.values()) {
+  let content = desc.innerText;
+
+  if (content.length > 250) {
+    content = content.slice(0, 250);
+    content = content + '<a href="#">...</a>';
+  }
+
+  desc.innerHTML = content;
+}
+
+// select all rating values
+const ratings = document.querySelectorAll(".rating .value");
+
+for (rating of ratings) {
+  let ratingValue = parseFloat(rating.innerText);
+
+  if (ratingValue > 4.7) {
+    rating.classList.add("high_rating");
+    rating.classList.remove("value");
+  }
+}
+
+// Select all parks
+const parks = document.querySelectorAll(".park");
+const numberParks = parks.length;
+
+// create a new element
+const newElement = document.createElement("div");
+
+// add the text
+newElement.innerText = `${numberParks} exciting parks to visit`;
+
+//add the class
+newElement.classList.add("header_statement");
+
+// insert the new element
+const header = document.querySelector("header");
+header.appendChild(newElement);
+
+// get the parent element of all parks
+const main = document.querySelector("main");
+
+//select a single park
+const park = main.querySelector(".park");
+
+// remove that park
+// main.removeChild(park);
diff --git a/style.css b/style.css
index 64f9755a..24c8cbbd 100644
--- a/style.css
+++ b/style.css
@@ -105,6 +105,19 @@ main {
   color: rgba(255, 255, 255, 0.5);
 }
 
+.high_rating {
+  color: #3ba17c;
+  font-size: 1.5rem;
+  font-weight: bold;
+  text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
+  text-align: center;
+}
+
+.header_statement {
+  color: #ffffff;
+  font-size: 1.2rem;
+}
+
 @media screen and (min-width: 600px) {
   main {
     grid-template-columns: repeat(2, 1fr);

From 55b1e2632c303087ed777d41a8e590dfeb44dcd6 Mon Sep 17 00:00:00 2001
From: Vincent Ramdhanie <vramdhanie@gmail.com>
Date: Sun, 16 Aug 2020 16:43:11 -0400
Subject: [PATCH 03/15] Solution code for the event listener checkpoint

---
 index.html |   5 +++
 index.js   | 111 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 style.css  |   6 +++
 3 files changed, 122 insertions(+)

diff --git a/index.html b/index.html
index 9d5e3e0f..a19b640a 100644
--- a/index.html
+++ b/index.html
@@ -10,6 +10,11 @@
     <header class="banner">
       <h1>National Parks</h1>
     </header>
+    <div class="sorter">
+      Sort by:
+      <a href="" class="sortLink" id="nameSorter">Name</a> |
+      <a href="" class="sortLInk" id="ratingSorter">Rating</a>
+    </div>
     <main>
       <section class="park">
         <h2>Biscayne National Park</h2>
diff --git a/index.js b/index.js
index e69de29b..1301b298 100644
--- a/index.js
+++ b/index.js
@@ -0,0 +1,111 @@
+// const firstBtn = document.querySelector("button");
+
+// firstBtn.addEventListener("click", function (event) {
+//   console.log(event.target.parentNode);
+// });
+
+// function to handler favorite button clicks
+const favoriteButtonClickHandler = (event) => {
+  const park = event.target.parentNode;
+  park.style.backgroundColor = "#c8e6c9";
+};
+
+// function for sorting by name
+const sortByName = (parkA, parkB) => {
+  const parkAName = parkA.querySelector("h2").innerText;
+  const parkBName = parkB.querySelector("h2").innerText;
+  if (parkAName < parkBName) {
+    return -1;
+  } else if (parkAName > parkBName) {
+    return 1;
+  } else {
+    return 0;
+  }
+};
+
+// function for sorting by rating
+const sortByRating = (parkA, parkB) => {
+  const parkARating = parseFloat(
+    parkA.querySelector(".rating > .value").innerText
+  );
+  const parkBRating = parseFloat(
+    parkB.querySelector(".rating > .value").innerText
+  );
+  return parkBRating - parkARating;
+};
+
+// function for handling the nameSorter click
+const nameSorterClickHandler = (event) => {
+  event.preventDefault();
+
+  // 1.  get the main element
+  const main = document.querySelector("main");
+
+  // 2. get the list of parks
+  const parksList = main.querySelectorAll(".park");
+
+  // 3. empty the main
+  main.innerHTML = "";
+
+  // 4. create an array
+  const parksArray = Array.from(parksList);
+
+  // 5. sort the array
+  parksArray.sort(sortByName);
+
+  // 6. Insert each park into the DOM
+  parksArray.forEach((park) => {
+    main.appendChild(park);
+  });
+};
+
+// function to handle the ratingSorter click
+const ratingSorterClickHandler = (event) => {
+  event.preventDefault();
+
+  // 1.  get the main element
+  const main = document.querySelector("main");
+
+  // 2. get the list of parks
+  const parksList = main.querySelectorAll(".park");
+
+  // 3. empty the main
+  main.innerHTML = "";
+
+  // 4. create an array
+  const parksArray = Array.from(parksList);
+
+  // 5. sort the array
+  parksArray.sort(sortByRating);
+
+  // 6. Insert each park into the DOM
+  parksArray.forEach((park) => {
+    main.appendChild(park);
+  });
+};
+
+// the point where all the code starts
+const main = () => {
+  // select the nameSorter link
+  const nameSorter = document.querySelector("#nameSorter");
+
+  // add an event listener
+  nameSorter.addEventListener("click", nameSorterClickHandler);
+
+  // select the ratingSorter link
+  const ratingSorter = document.querySelector("#ratingSorter");
+
+  // add an event listener
+  ratingSorter.addEventListener("click", ratingSorterClickHandler);
+
+  // select all the buttons for all the parks
+  const allBtns = document.querySelectorAll(".rateBtn");
+
+  // iterate the list of buttons and add an event handler to each
+  allBtns.forEach((btn) => {
+    btn.addEventListener("click", favoriteButtonClickHandler);
+  });
+};
+
+// Add event listener for DOMContentLoaded
+window.addEventListener("DOMContentLoaded", main);
diff --git a/style.css b/style.css
index 64f9755a..2244dedf 100644
--- a/style.css
+++ b/style.css
@@ -29,6 +29,12 @@ main {
   max-width: 1400px;
 }
 
+.sorter {
+  width: 90%;
+  margin: 0 auto;
+  padding: 6px;
+}
+
 .park {
   box-shadow: 0 0 3px 2px rgba(115, 66, 48, 0.2);
   border-radius: 6px;

From de3e37f1bf1a7b579afcfe971c91b3baaec8b73a Mon Sep 17 00:00:00 2001
From: Vincent Ramdhanie <vramdhanie@gmail.com>
Date: Sun, 16 Aug 2020 20:56:23 -0400
Subject: [PATCH 04/15] Add heading and slight colour to form

---
 index.html | 52 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 style.css  | 25 +++++++++++++++++++++++++
 2 files changed, 77 insertions(+)

diff --git a/index.html b/index.html
index 9d5e3e0f..8a856e1d 100644
--- a/index.html
+++ b/index.html
@@ -10,6 +10,58 @@
     <header class="banner">
       <h1>National Parks</h1>
     </header>
+    <div class="inputForm">
+      <h2>Add a new park</h2>
+      <form action="" id="parkForm">
+        <label for="parkName">Name</label>
+        <input
+          type="text"
+          name="parkName"
+          id="parkName"
+          title="Park name"
+          placeholder="Name of park"
+        />
+        <label for="parkLocation">Location</label>
+        <input
+          type="text"
+          name="parkLocation"
+          id="parkLocation"
+          title="Park location"
+          placeholder="State, United States"
+        />
+        <label for="parkDescription">Description</label>
+        <textarea name="parkDescription" id="parkDescription"></textarea>
+        <label for="established">Established</label>
+        <input
+          type="text"
+          name="established"
+          id="established"
+          title="Established"
+          placeholder="July 4, 1776"
+        />
+        <label for="area">Area</label>
+        <input
+          type="text"
+          name="area"
+          id="area"
+          title="Area"
+          placeholder="1 acre"
+        />
+        <label for="rating">Rating</label>
+        <input
+          type="number"
+          min="1"
+          max="5"
+          name="rating"
+          id="rating"
+          title="rating"
+          placeholder="4.9"
+        />
+        <div class="formControl">
+          <button type="submit" id="addBtn">Add</button>
+        </div>
+      </form>
+    </div>
     <main>
       <section class="park">
         <h2>Biscayne National Park</h2>
diff --git a/style.css b/style.css
index 64f9755a..e788a59e 100644
--- a/style.css
+++ b/style.css
@@ -105,6 +105,31 @@ main {
   color: rgba(255, 255, 255, 0.5);
 }
 
+.inputForm {
+  width: 90%;
+  max-width: 350px;
+  padding: 6px;
+  margin: 6px auto;
+  background-color: rgba(0, 0, 0, 0.1);
+  box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3);
+}
+
+.inputForm label {
+  font-weight: bold;
+  display: block;
+  margin-top: 4px;
+}
+
+.inputForm input,
+.inputForm textarea {
+  width: 100%;
+}
+
+.inputForm .formControl {
+  padding: 6px;
+  text-align: center;
+}
+
 @media screen and (min-width: 600px) {
   main {
     grid-template-columns: repeat(2, 1fr);

From 4135a3dfce1ef80d6d9decc1991d36460a928c39 Mon Sep 17 00:00:00 2001
From: Vincent Ramdhanie <vramdhanie@gmail.com>
Date: Sun, 16 Aug 2020 21:04:12 -0400
Subject: [PATCH 05/15] Add error messages for the form.

---
 index.html | 8 ++++++++
 style.css  | 6 ++++++
 2 files changed, 14 insertions(+)

diff --git a/index.html b/index.html
index 8a856e1d..7c288c02 100644
--- a/index.html
+++ b/index.html
@@ -21,6 +21,7 @@ <h2>Add a new park</h2>
           title="Park name"
           placeholder="Name of park"
         />
+        <div class="error" id="nameError">Please enter a name</div>
         <label for="parkLocation">Location</label>
         <input
           type="text"
@@ -29,8 +30,12 @@ <h2>Add a new park</h2>
           title="Park location"
           placeholder="State, United States"
         />
+        <div class="error" id="locationError">Please enter a location</div>
         <label for="parkDescription">Description</label>
         <textarea name="parkDescription" id="parkDescription"></textarea>
+        <div class="error" id="descriptionError">
+          Please enter a short description
+        </div>
         <label for="established">Established</label>
         <input
           type="text"
@@ -39,6 +44,7 @@ <h2>Add a new park</h2>
           title="Established"
           placeholder="July 4, 1776"
         />
+        <div class="error" id="establishedError">Please enter a date</div>
         <label for="area">Area</label>
         <input
           type="text"
@@ -47,6 +53,7 @@ <h2>Add a new park</h2>
           title="Area"
           placeholder="1 acre"
         />
+        <div class="error" id="areaError">Please enter a name</div>
         <label for="rating">Rating</label>
         <input
           type="number"
@@ -57,6 +64,7 @@ <h2>Add a new park</h2>
           title="rating"
           placeholder="4.9"
         />
+        <div class="error" id="ratingError">Please enter a name</div>
         <div class="formControl">
           <button type="submit" id="addBtn">Add</button>
         </div>
diff --git a/style.css b/style.css
index e788a59e..97207c46 100644
--- a/style.css
+++ b/style.css
@@ -130,6 +130,12 @@ main {
   text-align: center;
 }
 
+.inputForm .error {
+  font-size: 0.8rem;
+  color: #bb0000;
+  display: none;
+}
+
 @media screen and (min-width: 600px) {
   main {
     grid-template-columns: repeat(2, 1fr);

From 52d282f05df69726978dd34da56318e522ab4448 Mon Sep 17 00:00:00 2001
From: Vincent Ramdhanie <vramdhanie@gmail.com>
Date: Sun, 16 Aug 2020 21:47:15 -0400
Subject: [PATCH 06/15] Update form names and fixed error messages

---
 index.html | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index 7c288c02..9c9f2383 100644
--- a/index.html
+++ b/index.html
@@ -39,7 +39,7 @@ <h2>Add a new park</h2>
         <label for="established">Established</label>
         <input
           type="text"
-          name="established"
+          name="parkEstablished"
           id="established"
           title="Established"
           placeholder="July 4, 1776"
@@ -48,23 +48,25 @@ <h2>Add a new park</h2>
         <label for="area">Area</label>
         <input
           type="text"
-          name="area"
+          name="parkArea"
           id="area"
           title="Area"
           placeholder="1 acre"
         />
-        <div class="error" id="areaError">Please enter a name</div>
+        <div class="error" id="areaError">Please enter the area</div>
         <label for="rating">Rating</label>
         <input
           type="number"
           min="1"
           max="5"
-          name="rating"
+          name="parkRating"
           id="rating"
           title="rating"
           placeholder="4.9"
         />
-        <div class="error" id="ratingError">Please enter a name</div>
+        <div class="error" id="ratingError">
+          Please enter the rating between 1 and 5 inclusive.
+        </div>
         <div class="formControl">
           <button type="submit" id="addBtn">Add</button>
         </div>

From 53e81988e8d62a1cf0e4408c37c2c8c75e994291 Mon Sep 17 00:00:00 2001
From: Vincent Ramdhanie <vramdhanie@gmail.com>
Date: Fri, 21 Aug 2020 09:35:20 -0400
Subject: [PATCH 07/15] Updated README

---
 README.md | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index f89ba8a2..4afb3a7c 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # National Parks
 
-_Sample project for Front End Web Development course at Thinkful_
+_Starter project for Front End Web Development JavaScript and the DOM module_
 
 ## Introduction
 
@@ -8,22 +8,24 @@ This starter project is used for illustrating the DOM and using JavaScript to in
 
 ## View Demo
 
-For a demonstration of the page visit [this link](https://vramdhanie.github.io/national_parks/).
+For a demonstration of the page visit [this link](https://thinkful-ed.github.io/starter-national-parks/).
 
 ## Getting started
 
-Clone this repository to your local machine.
+Fork this repository then clone your fork to your local machine.
 
 ```bash
-git clone https://github.com/vramdhanie/national_parks.git
+git clone https://github.com/<YOUR_GITHUB_USERNAME>/starter-national-parks.git
 ```
 
-Navigate to the folder containing the repository and start a local server:
+Navigate to the folder containing the repository and start a local server. For example you may use _lite-server_.
 
 ```bash
 npx lite-server
 ```
 
+> **lite-server** is a lightweight _development only_ node server that serves a web app, opens it in the browser, and refreshes when html or javascript changes occur.
+
 Open the code in your favourite editor. For instance, to open VSCode:
 
 ```bash

From f5bc4973a36b9c1347359a94aaa1c24cb8df2157 Mon Sep 17 00:00:00 2001
From: Vincent Ramdhanie <vramdhanie@gmail.com>
Date: Fri, 21 Aug 2020 09:42:56 -0400
Subject: [PATCH 08/15] Updated README

---
 README.md | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index f89ba8a2..4afb3a7c 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # National Parks
 
-_Sample project for Front End Web Development course at Thinkful_
+_Starter project for Front End Web Development JavaScript and the DOM module_
 
 ## Introduction
 
@@ -8,22 +8,24 @@ This starter project is used for illustrating the DOM and using JavaScript to in
 
 ## View Demo
 
-For a demonstration of the page visit [this link](https://vramdhanie.github.io/national_parks/).
+For a demonstration of the page visit [this link](https://thinkful-ed.github.io/starter-national-parks/).
 
 ## Getting started
 
-Clone this repository to your local machine.
+Fork this repository then clone your fork to your local machine.
 
 ```bash
-git clone https://github.com/vramdhanie/national_parks.git
+git clone https://github.com/<YOUR_GITHUB_USERNAME>/starter-national-parks.git
 ```
 
-Navigate to the folder containing the repository and start a local server:
+Navigate to the folder containing the repository and start a local server. For example you may use _lite-server_.
 
 ```bash
 npx lite-server
 ```
 
+> **lite-server** is a lightweight _development only_ node server that serves a web app, opens it in the browser, and refreshes when html or javascript changes occur.
+
 Open the code in your favourite editor. For instance, to open VSCode:
 
 ```bash

From a51d5716bb71713d85c6a26a2a762f1925b788dd Mon Sep 17 00:00:00 2001
From: Vincent Ramdhanie <vramdhanie@gmail.com>
Date: Fri, 21 Aug 2020 09:49:49 -0400
Subject: [PATCH 09/15] Updated README

---
 README.md | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index f89ba8a2..4afb3a7c 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # National Parks
 
-_Sample project for Front End Web Development course at Thinkful_
+_Starter project for Front End Web Development JavaScript and the DOM module_
 
 ## Introduction
 
@@ -8,22 +8,24 @@ This starter project is used for illustrating the DOM and using JavaScript to in
 
 ## View Demo
 
-For a demonstration of the page visit [this link](https://vramdhanie.github.io/national_parks/).
+For a demonstration of the page visit [this link](https://thinkful-ed.github.io/starter-national-parks/).
 
 ## Getting started
 
-Clone this repository to your local machine.
+Fork this repository then clone your fork to your local machine.
 
 ```bash
-git clone https://github.com/vramdhanie/national_parks.git
+git clone https://github.com/<YOUR_GITHUB_USERNAME>/starter-national-parks.git
 ```
 
-Navigate to the folder containing the repository and start a local server:
+Navigate to the folder containing the repository and start a local server. For example you may use _lite-server_.
 
 ```bash
 npx lite-server
 ```
 
+> **lite-server** is a lightweight _development only_ node server that serves a web app, opens it in the browser, and refreshes when html or javascript changes occur.
+
 Open the code in your favourite editor. For instance, to open VSCode:
 
 ```bash

From ac05371136d72109964b845186c2067d8d5342c4 Mon Sep 17 00:00:00 2001
From: Vincent Ramdhanie <vramdhanie@gmail.com>
Date: Fri, 21 Aug 2020 09:51:10 -0400
Subject: [PATCH 10/15] Updated README

---
 README.md | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index f89ba8a2..4afb3a7c 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # National Parks
 
-_Sample project for Front End Web Development course at Thinkful_
+_Starter project for Front End Web Development JavaScript and the DOM module_
 
 ## Introduction
 
@@ -8,22 +8,24 @@ This starter project is used for illustrating the DOM and using JavaScript to in
 
 ## View Demo
 
-For a demonstration of the page visit [this link](https://vramdhanie.github.io/national_parks/).
+For a demonstration of the page visit [this link](https://thinkful-ed.github.io/starter-national-parks/).
 
 ## Getting started
 
-Clone this repository to your local machine.
+Fork this repository then clone your fork to your local machine.
 
 ```bash
-git clone https://github.com/vramdhanie/national_parks.git
+git clone https://github.com/<YOUR_GITHUB_USERNAME>/starter-national-parks.git
 ```
 
-Navigate to the folder containing the repository and start a local server:
+Navigate to the folder containing the repository and start a local server. For example you may use _lite-server_.
 
 ```bash
 npx lite-server
 ```
 
+> **lite-server** is a lightweight _development only_ node server that serves a web app, opens it in the browser, and refreshes when html or javascript changes occur.
+
 Open the code in your favourite editor. For instance, to open VSCode:
 
 ```bash

From 43bbb3829128b906eb68d0f8eddad9c5db77c392 Mon Sep 17 00:00:00 2001
From: Vincent Ramdhanie <vramdhanie@gmail.com>
Date: Fri, 21 Aug 2020 12:12:19 -0400
Subject: [PATCH 11/15] Fix class names to be kebab-case

---
 index.js  | 4 ++--
 style.css | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/index.js b/index.js
index eafac686..f9870c3a 100644
--- a/index.js
+++ b/index.js
@@ -20,7 +20,7 @@ for (rating of ratings) {
   let ratingValue = parseFloat(rating.innerText);
 
   if (ratingValue > 4.7) {
-    rating.classList.add("high_rating");
+    rating.classList.add("high-rating");
     rating.classList.remove("value");
   }
 }
@@ -36,7 +36,7 @@ const newElement = document.createElement("div");
 newElement.innerText = `${numberParks} exciting parks to visit`;
 
 //add the class
-newElement.classList.add("header_statement");
+newElement.classList.add("header-statement");
 
 // insert the new element
 const header = document.querySelector("header");
diff --git a/style.css b/style.css
index 24c8cbbd..a015f9a2 100644
--- a/style.css
+++ b/style.css
@@ -105,7 +105,7 @@ main {
   color: rgba(255, 255, 255, 0.5);
 }
 
-.high_rating {
+.high-rating {
   color: #3ba17c;
   font-size: 1.5rem;
   font-weight: bold;
@@ -113,7 +113,7 @@ main {
   text-align: center;
 }
 
-.header_statement {
+.header-statement {
   color: #ffffff;
   font-size: 1.2rem;
 }

From f65db10634dac0b644cf00d3925175f0701b7a67 Mon Sep 17 00:00:00 2001
From: Vincent Ramdhanie <vramdhanie@gmail.com>
Date: Fri, 21 Aug 2020 12:25:16 -0400
Subject: [PATCH 12/15] Add missing let keyword

---
 index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/index.js b/index.js
index f9870c3a..5bc4303a 100644
--- a/index.js
+++ b/index.js
@@ -2,7 +2,7 @@
 
 const descriptions = document.querySelectorAll(".description");
 
-for (desc of descriptions.values()) {
+for (let desc of descriptions.values()) {
   let content = desc.innerText;
 
   if (content.length > 250) {
@@ -16,7 +16,7 @@ for (desc of descriptions.values()) {
 // select all rating values
 const ratings = document.querySelectorAll(".rating .value");
 
-for (rating of ratings) {
+for (let rating of ratings) {
   let ratingValue = parseFloat(rating.innerText);
 
   if (ratingValue > 4.7) {

From 154273b16c624600956743641dce28aa42f2376c Mon Sep 17 00:00:00 2001
From: Vincent Ramdhanie <vramdhanie@gmail.com>
Date: Wed, 25 Nov 2020 11:11:58 -0400
Subject: [PATCH 13/15] Update HTML file with structure to support validation

---
 index.html | 154 +++++++++++++++++++++++++----------------------------
 1 file changed, 74 insertions(+), 80 deletions(-)

diff --git a/index.html b/index.html
index 9c9f2383..c3c60f13 100644
--- a/index.html
+++ b/index.html
@@ -12,60 +12,72 @@ <h1>National Parks</h1>
     </header>
     <div class="inputForm">
       <h2>Add a new park</h2>
-      <form action="" id="parkForm">
-        <label for="parkName">Name</label>
-        <input
-          type="text"
-          name="parkName"
-          id="parkName"
-          title="Park name"
-          placeholder="Name of park"
-        />
-        <div class="error" id="nameError">Please enter a name</div>
-        <label for="parkLocation">Location</label>
-        <input
-          type="text"
-          name="parkLocation"
-          id="parkLocation"
-          title="Park location"
-          placeholder="State, United States"
-        />
-        <div class="error" id="locationError">Please enter a location</div>
-        <label for="parkDescription">Description</label>
-        <textarea name="parkDescription" id="parkDescription"></textarea>
-        <div class="error" id="descriptionError">
-          Please enter a short description
+      <form action="" id="parkForm" novalidate>
+        <div id="park_name">
+          <label for="name">Name</label>
+          <input
+            type="text"
+            name="name"
+            id="name"
+            title="Park name"
+            placeholder="Name of park"
+          />
+          <div class="error" id="nameError">Please enter a name</div>
         </div>
-        <label for="established">Established</label>
-        <input
-          type="text"
-          name="parkEstablished"
-          id="established"
-          title="Established"
-          placeholder="July 4, 1776"
-        />
-        <div class="error" id="establishedError">Please enter a date</div>
-        <label for="area">Area</label>
-        <input
-          type="text"
-          name="parkArea"
-          id="area"
-          title="Area"
-          placeholder="1 acre"
-        />
-        <div class="error" id="areaError">Please enter the area</div>
-        <label for="rating">Rating</label>
-        <input
-          type="number"
-          min="1"
-          max="5"
-          name="parkRating"
-          id="rating"
-          title="rating"
-          placeholder="4.9"
-        />
-        <div class="error" id="ratingError">
-          Please enter the rating between 1 and 5 inclusive.
+        <div id="park_location">
+          <label for="location">Location</label>
+          <input
+            type="text"
+            name="location"
+            id="location"
+            title="Park location"
+            placeholder="State, United States"
+          />
+          <div class="error" id="locationError">Please enter a location</div>
+        </div>
+        <div id="park_description">
+          <label for="parkDescription">Description</label>
+          <textarea name="description" id="parkDescription"></textarea>
+          <div class="error" id="descriptionError">
+            Please enter a short description
+          </div>
+        </div>
+        <div id="park_established">
+          <label for="established">Established</label>
+          <input
+            type="text"
+            name="established"
+            id="established"
+            title="Established"
+            placeholder="July 4, 1776"
+          />
+          <div class="error" id="establishedError">Please enter a date</div>
+        </div>
+        <div id="park_area">
+          <label for="area">Area</label>
+          <input
+            type="text"
+            name="area"
+            id="area"
+            title="Area"
+            placeholder="1 acre"
+          />
+          <div class="error" id="areaError">Please enter the area</div>
+        </div>
+        <div id="park_rating">
+          <label for="rating">Rating</label>
+          <input
+            type="number"
+            min="1"
+            max="5"
+            name="rating"
+            id="rating"
+            title="rating"
+            placeholder="4.9"
+          />
+          <div class="error" id="ratingError">
+            Please enter the rating between 1 and 5 inclusive.
+          </div>
         </div>
         <div class="formControl">
           <button type="submit" id="addBtn">Add</button>
@@ -89,21 +101,15 @@ <h2>Biscayne National Park</h2>
         <div class="stats">
           <div class="established stat">
             <h3>Established</h3>
-            <div class="value">
-              June 28, 1980
-            </div>
+            <div class="value">June 28, 1980</div>
           </div>
           <div class="area stat">
             <h3>Area</h3>
-            <div class="value">
-              172,971 acres (699.99 km<sup>2</sup>)
-            </div>
+            <div class="value">172,971 acres (699.99 km<sup>2</sup>)</div>
           </div>
           <div class="rating stat">
             <h3>Rating</h3>
-            <div class="value">
-              4.7
-            </div>
+            <div class="value">4.7</div>
           </div>
         </div>
       </section>
@@ -123,9 +129,7 @@ <h2>Grand Canyon National Park</h2>
         <div class="stats">
           <div class="established stat">
             <h3>Established</h3>
-            <div class="value">
-              February 26, 1919
-            </div>
+            <div class="value">February 26, 1919</div>
           </div>
           <div class="area stat">
             <h3>Area</h3>
@@ -133,9 +137,7 @@ <h3>Area</h3>
           </div>
           <div class="rating stat">
             <h3>Rating</h3>
-            <div class="value">
-              4.8
-            </div>
+            <div class="value">4.8</div>
           </div>
         </div>
       </section>
@@ -153,9 +155,7 @@ <h2>Gateway Arch National Park</h2>
         <div class="stats">
           <div class="established stat">
             <h3>Established</h3>
-            <div class="value">
-              February 22, 2018
-            </div>
+            <div class="value">February 22, 2018</div>
           </div>
           <div class="area stat">
             <h3>Area</h3>
@@ -163,9 +163,7 @@ <h3>Area</h3>
           </div>
           <div class="rating stat">
             <h3>Rating</h3>
-            <div class="value">
-              4.7
-            </div>
+            <div class="value">4.7</div>
           </div>
         </div>
       </section>
@@ -184,9 +182,7 @@ <h2>Indiana Dunes National Park</h2>
         <div class="stats">
           <div class="established stat">
             <h3>Established</h3>
-            <div class="value">
-              February 15, 2019
-            </div>
+            <div class="value">February 15, 2019</div>
           </div>
           <div class="area stat">
             <h3>Area</h3>
@@ -194,9 +190,7 @@ <h3>Area</h3>
           </div>
           <div class="rating stat">
             <h3>Rating</h3>
-            <div class="value">
-              4.6
-            </div>
+            <div class="value">4.6</div>
           </div>
         </div>
       </section>

From d934eb007672317d2ed582c6138da63a813092ef Mon Sep 17 00:00:00 2001
From: Gabriel Sanchez <gabrielsz87@gmail.com>
Date: Mon, 12 Dec 2022 10:35:48 -0600
Subject: [PATCH 14/15] add moment library script to starter code

---
 index.html | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/index.html b/index.html
index 988d8abc..7c9ca5ed 100644
--- a/index.html
+++ b/index.html
@@ -190,6 +190,11 @@ <h3>Rating</h3>
         </div>
       </section>
     </main>
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"
+      integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ=="
+      crossorigin="anonymous"
+    ></script>
     <script src="index.js"></script>
   </body>
 </html>

From f36d847bc495bfe3040670639d655efd0d9391dc Mon Sep 17 00:00:00 2001
From: Leonardo Ritts <leonardoritts@gmail.com>
Date: Fri, 26 Apr 2024 19:39:54 -0400
Subject: [PATCH 15/15] Worked on all the steps of the lesson to work on Forms

---
 index.js | 134 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 134 insertions(+)

diff --git a/index.js b/index.js
index 8b137891..e26157a1 100644
--- a/index.js
+++ b/index.js
@@ -1 +1,135 @@
+// const submitHandler = (event) => {
+//   event.preventDefault();
+//   console.log("The form was submitted");
+//   //Get the name input
+//   const parkName = document.querySelector("#name-input").value;
+//   console.log(parkName);
+// };
+const main = () => {
+  //Get the form element
+  const form = document.querySelector("#park-form");
 
+  //Attach the submit handler
+  form.addEventListener("submit", submitHandler);
+};
+window.addEventListener("DOMContentLoaded", main);
+
+function validateNumber(value) {
+  return !isNaN(value);
+}
+
+function validateRange(value, min, max) {
+  return value >= min && value <= max;
+}
+
+const submitHandler = (event) => {
+  event.preventDefault();
+
+  const form = event.target;
+  const formData = new FormData(form);
+
+  const errors = validateForm(formData);
+
+  //clear all previous errors
+  const errorElements = document.querySelectorAll(".error");
+  for (let element of errorElements) {
+    element.style.display = "none";
+  }
+
+  //Display any new errors
+  Object.keys(errors).forEach((key) => {
+    //Fidn the specific error element
+    const errorElement = document.querySelector(`#${key}-form .error`);
+    errorElement.innerHTML = errors[key];
+    errorElement.style.display = "block";
+  });
+
+  // If there are no errors
+  if (!Object.keys(errors).length) {
+    // Create a new element
+    const parkSection = document.createElement("section");
+
+    // Add the park class
+    parkSection.classList.add("park-display");
+
+    // Construct the HTML for this element
+    const content = `
+      <h2>${formData.get("name")}</h2>
+      <div class="location-display">${formData.get("location")}</div>
+      <div class="description-display">${formData.get("description")}</div>
+      <button class="rate-button" title="Add to Favourites">&#9734;</button>
+      <div class="stats">
+        <div class="established-display stat">
+          <h3>Established</h3>
+          <div class="value">${moment(formData.get("established")).format(
+            "MMMM D, YYYY"
+          )}</div>
+        </div>
+        <div class="area-display stat">
+          <h3>Area</h3>
+          <div class="value">${formData.get("area")}</div>
+        </div>
+        <div class="rating-display stat">
+          <h3>Rating</h3>
+          <div class="value">${formData.get("rating")}</div>
+        </div>
+      </div>
+      `;
+
+    // Set the innerHTML
+    parkSection.innerHTML = content;
+
+    // Append to the main element
+    document.querySelector("main").appendChild(parkSection);
+  }
+};
+function validateExists(value) {
+  return value && value.trim();
+}
+function validateForm(formData) {
+  const errors = {};
+
+  // Check if name was entered
+  if (!validateExists(formData.get("name"))) {
+    errors.name = "Please enter a name";
+  }
+
+  // Check if rating was entered
+  if (!validateExists(formData.get("rating"))) {
+    errors.rating = "Please enter a rating";
+  } else {
+    // Check if the rating is a number
+    if (!validateNumber(formData.get("rating"))) {
+      errors.rating = "Rating must be a number";
+    } else {
+      // Because it is a number, convert it
+      const rating = Number.parseFloat(formData.get("rating"));
+      // Check that the rating is between 1 and 5, inclusive
+      if (!validateRange(rating, 1, 5)) {
+        errors.rating = "Rating must be between 1 and 5 inclusive";
+      }
+    }
+  }
+
+  // Check if description was entered
+  if (!validateExists(formData.get("description"))) {
+    errors.description = "Please enter short description";
+  }
+
+  // Check if established date was entered
+  if (!validateExists(formData.get("established"))) {
+    errors.established = "Please enter date";
+  }
+
+  // Check if area was entered
+  if (!validateExists(formData.get("area"))) {
+    errors.area = "Please enter the area of the park";
+  }
+
+  // Check if location date was entered
+  if (!validateExists(formData.get("location"))) {
+    errors.location = "Please enter the location of the park";
+  }
+
+  return errors;
+}