diff --git a/README.md b/README.md index fd1e0cd7..4afb3a7c 100644 --- a/README.md +++ b/README.md @@ -18,13 +18,19 @@ Fork this repository then clone your fork to your local machine. git clone https://github.com//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 diff --git a/index.html b/index.html index 4cee5f1f..7c9ca5ed 100644 --- a/index.html +++ b/index.html @@ -10,11 +10,80 @@ +
+

Add a new park

+
+
+ + +
Please enter a name
+
+
+ + +
Please enter a location
+
+
+ + +
+ Please enter a short description +
+
+
+ + +
Please enter a date
+
+
+ + +
Please enter the area
+
+
+ + +
+ Please enter the rating between 1 and 5 inclusive. +
+
+
+ +
+
+
-
+

Biscayne National Park

-
Florida, United States
-
+
Florida, United States
+
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 @@

Biscayne National Park

-
+

Established

-
- June 28, 1980 -
+
June 28, 1980
-
+

Area

-
- 172,971 acres (699.99 km2) -
+
172,971 acres (699.99 km2)
-
+

Rating

-
- 4.7 -
+
4.7
-
+

Grand Canyon National Park

-
Arizona, United States
-
+
Arizona, United States
+
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,29 +122,25 @@

Grand Canyon National Park

-
+

Established

-
- February 26, 1919 -
+
February 26, 1919
-
+

Area

4,926 km2
-
+

Rating

-
- 4.8 -
+
4.8
-
+

Gateway Arch National Park

-
Missouri, United States
-
+
Missouri, United States
+
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 @@ -89,29 +148,25 @@

Gateway Arch National Park

-
+

Established

-
- February 22, 2018 -
+
February 22, 2018
-
+

Area

37 ha
-
+

Rating

-
- 4.7 -
+
4.7
-
+

Indiana Dunes National Park

-
Indiana, United States
-
+
Indiana, United States
+
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 @@

Indiana Dunes National Park

-
+

Established

-
- February 15, 2019 -
+
February 15, 2019
-
+

Area

60.97 km2
-
+

Rating

-
- 4.6 -
+
4.6
+ diff --git a/index.js b/index.js index e69de29b..e26157a1 100644 --- a/index.js +++ b/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 = ` +

${formData.get("name")}

+
${formData.get("location")}
+
${formData.get("description")}
+ +
+
+

Established

+
${moment(formData.get("established")).format( + "MMMM D, YYYY" + )}
+
+
+

Area

+
${formData.get("area")}
+
+
+

Rating

+
${formData.get("rating")}
+
+
+ `; + + // 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; +} diff --git a/style.css b/style.css index 5c210b99..51d1bab6 100644 --- a/style.css +++ b/style.css @@ -29,7 +29,13 @@ main { max-width: 1400px; } -.park { +.sorter { + width: 90%; + margin: 0 auto; + padding: 6px; +} + +.park-display { box-shadow: 0 0 3px 2px rgba(115, 66, 48, 0.2); border-radius: 6px; position: relative; @@ -40,7 +46,7 @@ main { flex-direction: column; } -.park > h2 { +.park-display > h2 { background-color: #734230; color: #fcc988; padding: 4px; @@ -50,13 +56,13 @@ main { margin-top: 0; } -.location { +.location-display { font-weight: 300; font-size: 0.8rem; padding-left: 4px; } -.description { +.description-display { margin-top: 4px; padding: 4px; flex: 1; @@ -105,6 +111,37 @@ main { color: rgba(255, 255, 255, 0.5); } +.input-form { + 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); +} + +.input-form label { + font-weight: bold; + display: block; + margin-top: 4px; +} + +.input-form input, +.input-form textarea { + width: 100%; +} + +.input-form .form-control { + padding: 6px; + text-align: center; +} + +.input-form .error { + font-size: 0.8rem; + color: #bb0000; + display: none; +} + @media screen and (min-width: 600px) { main { grid-template-columns: repeat(2, 1fr);