# Hybrid Exercises
# 1. Regular Expressions
Learn about Regular Expressions
# Exercise - Form Validation
Create a private GitHub repo to hold your solution to this exercise. Use this Github GIST (opens new window) as your starter code. Make sure that your solution has the index.html file at the root of the repo, your CSS files in a css folder, and your script in a js folder.
The starter file has an HTML form that needs to have some validation done in JavaScript.
You will hae to write your own CSS to properly format / style / design the page.
Use a DOMContentLoaded listener to add a submit listener to the HTML form plus change listeners to all the <input> elements, except the submit button.
Create a single function for each <input> element to validate that it has been filled out correctly. Use a single Regular Expression to represent what a valid value for each field would be. The change listener for each <input> should call the one specific function for its own validation.
When the validation fails, write a message in the <span class="error"> that follows each input.
For the <select> you need to make sure that one of the options is selected.
The submit listener should call each of the other functions to validate each of the inputs. This way there is a validation happening after each field is filled in an a second validation when the user clicks the submit button.
# Submission
To submit this exercise, you will need to invite your instructor to your private repo.
In BS LMS you will need to submit the URL of your repo.
Due Week 4 (See BS LMS for the exact time and date for submission)
# 2. ES6 Modules
Learn about MapBox Static Images
Create a private GitHub repo to hold your solution to this exercise. Use this Github GIST (opens new window) as your starter code. Make sure that your solution has the index.html file at the root of the repo, your CSS files in a css folder, and your script in a js folder.
The starter code is a simple application that will render a MapBox Static map image in the lower part of the page. It will use a default location in San Francisco for the map image.
Two of the three dropdowns at the top work to reload the image with different levels of zoom and different map styles.
Your first job is to update the script in the APP namespace with the functionality to re-render the map image with different pitch levels.
Second, create a separate JS file that will be imported into the const GEO namespace in the main.js file.
The new JS file needs to have a namespace object that gets exported. It needs to have properties for the navigator.geolocation option values, a function that will allow for changing those option values, and another function that can be called to find the user's current location. The function that determines the current location needs to accept two parameters, which are the callback functions for success and failure from the APP namespace.
You will need to create the APP callback function for failure. It needs to display a modal with a message about the failure.
Lastly, update the CSS for the form elements and nav area so it is responsive. Also create the CSS for the modal message. You can change any other CSS you want.
# Submission
To submit this exercise, you will need to invite your instructor to your private repo.
In BS LMS you will need to submit the URL of your repo.
Due Week 7
# 3. Babel
Follow the Babel page link below to learn about Babel and see the exercise details.
Learn about Babel and the Exercise
Due Week 10
# 4. MapBox
Follow the Mapbox page link for exercise details.
Learn how to get started with MapBox
Due Week 13