Form starter

README.md

@@ -18,13 +18,19 @@ Fork this repository then clone your fork to your local machine.
 git clone https://github.com/<YOUR_GITHUB_USERNAME>/starter-national-parks.git
 ```
 
-Navigate to the folder containing the repository and and open the folder in VS Code:
+Navigate to the folder containing the repository and start a local server. For example you may use _lite-server_.
 
 ```bash
-code .
+npx lite-server
 ```
 
-Using VSCode, run the website with the [Live Server extension](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) that you installed in an earlier module.
+> **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
+code .
+```
 
 ## Screen Shots
 

index.html

@@ -10,11 +10,80 @@
     <header class="banner">
       <h1>National Parks</h1>
     </header>
+    <div class="input-form">
+      <h2>Add a new park</h2>
+      <form action="" id="park-form" novalidate>
+        <div id="name-form">
+          <label for="name-input">Name</label>
+          <input
+            type="text"
+            name="name"
+            id="name-input"
+            title="Park name"
+          />
+          <div class="error" id="name-error">Please enter a name</div>
+        </div>
+        <div id="location-form">
+          <label for="location-input">Location</label>
+          <input
+            type="text"
+            name="location"
+            id="location-input"
+            title="Park location"
+          />
+          <div class="error" id="location-error">Please enter a location</div>
+        </div>
+        <div id="description-form">
+          <label for="description-input">Description</label>
+          <textarea name="description" id="description-input"></textarea>
+          <div class="error" id="description-error">
+            Please enter a short description
+          </div>
+        </div>
+        <div id="established-form">
+          <label for="established-input">Established</label>
+          <input
+            type="text"
+            name="established"
+            id="established-input"
+            title="Established"
+          />
+          <div class="error" id="established-error">Please enter a date</div>
+        </div>
+        <div id="area-form">
+          <label for="area-input">Area</label>
+          <input
+            type="text"
+            name="area"
+            id="area-input"
+            title="Area"
+          />
+          <div class="error" id="area-error">Please enter the area</div>
+        </div>
+        <div id="rating-form">
+          <label for="rating-input">Rating</label>
+          <input
+            type="number"
+            min="1"
+            max="5"
+            name="rating"
+            id="rating-input"
+            title="rating"
+          />
+          <div class="error" id="rating-error">
+            Please enter the rating between 1 and 5 inclusive.
+          </div>
+        </div>
+        <div class="form-control">
+          <button type="submit" id="add-button">Add</button>
+        </div>
+      </form>
+    </div>
     <main>
-      <section class="park">
+      <section class="park-display">
         <h2>Biscayne National Park</h2>
-        <div class="location">Florida, United States</div>
-        <div class="description">
+        <div class="location-display">Florida, United States</div>
+        <div class="description-display">
           Biscayne National Park encompasses coral reefs, islands and shoreline
           mangrove forest in the northern Florida Keys. Its reefs and islands
           are accessible only by boat. Dolphins, turtles and pelicans live in
@@ -25,31 +94,25 @@ <h2>Biscayne National Park</h2>
         </div>
         <button class="rate-button" title="Add to Favourites">&#9734;</button>
         <div class="stats">
-          <div class="established stat">
+          <div class="established-display stat">
             <h3>Established</h3>
-            <div class="value">
-              June 28, 1980
-            </div>
+            <div class="value">June 28, 1980</div>
           </div>
-          <div class="area stat">
+          <div class="area-display 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">
+          <div class="rating-display stat">
             <h3>Rating</h3>
-            <div class="value">
-              4.7
-            </div>
+            <div class="value">4.7</div>
           </div>
         </div>
       </section>
 
-      <section class="park">
+      <section class="park-display">
         <h2>Grand Canyon National Park</h2>
-        <div class="location">Arizona, United States</div>
-        <div class="description">
+        <div class="location-display">Arizona, United States</div>
+        <div class="description-display">
           Grand Canyon National Park, in Arizona, is home to much of the immense
           Grand Canyon, with its layered bands of red rock revealing millions of
           years of geological history. Viewpoints include Mather Point, Yavapai
@@ -59,59 +122,51 @@ <h2>Grand Canyon National Park</h2>
         </div>
         <button class="rate-button" title="Add to Favourites">&#9734;</button>
         <div class="stats">
-          <div class="established stat">
+          <div class="established-display stat">
             <h3>Established</h3>
-            <div class="value">
-              February 26, 1919
-            </div>
+            <div class="value">February 26, 1919</div>
           </div>
-          <div class="area stat">
+          <div class="area-display stat">
             <h3>Area</h3>
             <div class="value">4,926 km<sup>2</sup></div>
           </div>
-          <div class="rating stat">
+          <div class="rating-display stat">
             <h3>Rating</h3>
-            <div class="value">
-              4.8
-            </div>
+            <div class="value">4.8</div>
           </div>
         </div>
       </section>
 
-      <section class="park">
+      <section class="park-display">
         <h2>Gateway Arch National Park</h2>
-        <div class="location">Missouri, United States</div>
-        <div class="description">
+        <div class="location-display">Missouri, United States</div>
+        <div class="description-display">
           Gateway Arch National Park, formerly known as the Jefferson National
           Expansion Memorial until 2018, is an American national park located in
           St. Louis, Missouri, near the starting point of the Lewis and Clark
           Expedition.
         </div>
         <button class="rate-button" title="Add to Favourites">&#9734;</button>
         <div class="stats">
-          <div class="established stat">
+          <div class="established-display stat">
             <h3>Established</h3>
-            <div class="value">
-              February 22, 2018
-            </div>
+            <div class="value">February 22, 2018</div>
           </div>
-          <div class="area stat">
+          <div class="area-display stat">
             <h3>Area</h3>
             <div class="value">37 ha</div>
           </div>
-          <div class="rating stat">
+          <div class="rating-display stat">
             <h3>Rating</h3>
-            <div class="value">
-              4.7
-            </div>
+            <div class="value">4.7</div>
           </div>
         </div>
       </section>
 
-      <section class="park">
+      <section class="park-display">
         <h2>Indiana Dunes National Park</h2>
-        <div class="location">Indiana, United States</div>
-        <div class="description">
+        <div class="location-display">Indiana, United States</div>
+        <div class="description-display">
           Indiana Dunes National Park is a United States National Park located
           in Northwestern Indiana, managed by the National Park Service. It was
           authorized by Congress in 1966 as the Indiana Dunes National
@@ -120,25 +175,26 @@ <h2>Indiana Dunes National Park</h2>
         </div>
         <button class="rate-button" title="Add to Favourites">&#9734;</button>
         <div class="stats">
-          <div class="established stat">
+          <div class="established-display stat">
             <h3>Established</h3>
-            <div class="value">
-              February 15, 2019
-            </div>
+            <div class="value">February 15, 2019</div>
           </div>
-          <div class="area stat">
+          <div class="area-display stat">
             <h3>Area</h3>
             <div class="value">60.97 km<sup>2</sup></div>
           </div>
-          <div class="rating stat">
+          <div class="rating-display stat">
             <h3>Rating</h3>
-            <div class="value">
-              4.6
-            </div>
+            <div class="value">4.6</div>
           </div>
         </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>

index.js

@@ -0,0 +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;
+}