Techdegree F.E.W.D. Slack Challenge Project 01

Dom Manipulation Practice App

Overview

---

The project is based on the beloved Treehouse landing page for the techdegree. The page contains three widgets that you will manipulate with JavaScript to complete the functionality to the page.

Instructions

---

The HTML and CSS files are already set up for you. The JavaScript file contains references to the various elements on the page as well as defined event listeners for the form submit buttons, alert notification banner close icon, and project list ul. You will therefore use the JavaScript file to complete the tasks. The complete folder contains an example of the completed project.

1. Create a function that will take the data from the "Create a Project" form and append to the DOM using the project list ul widget.

2. Create a function that will add a project to the select menu for the second form.

3. Create a function that will validate the forms.

4. Create a function that will reset the forms.

5. Using the pre-defined alertMessage variable, create a function that will show the alert banner with the appropriate background-color and message that will depend on the outcome of the forms. For example, if the user leaves the "Project Name" field blank, show an alert with the warning background and a message.

6. Using the closeIcon event listener, create a way for users to close the alert notification banner.

7. Using the pre-defined projectList event listener, create a wat for users to toggle the display of the project description for the top project widget.

Bronze Challenge

The alert notification banner isn't visible to the user when using the second form with the page scrolled. Find a way to make the alert notification banner visible to the user so they can see the status of the app. For example, you could find a way to send the user back to the top of the page to see the element.

Silver Challenge

Create a new form widget named "Remove Invitees" that users can use to select a student and a project to remove invitees for.

The complete folder contains an example of the completed project that you can compare with when you have finished to see the different solutions.

Make sure to share your completed project on slack and feel free to collaborate with others on it. Have fun!