javascript

Recipes should contain a Name and a comma separated list of Ingredients with a minimum of 3 ingredients.

Display each recipe which is found in the "recipeList" array variable, its' name and its' ingredient list, in the "Saved Recipes" section of the page.

When a user fills in both the Name and Ingredients form fields, they should be able to save their recipe list to their browser's localStorage and show their recipe in the "Saved Recipes" section of the web page.

If one of the form fields is not filled out and the user tries to Save the form, display a message to the user notifying them which field is missing and needs to be filled out and how. i.e. If the Ingredients field does not contain a comma separated list of at least 3 ingredients, display an alert window or DOM message letting the user what is missing: "Your Ingredients list should contain 3 or more comma separated items."

After the user saves their recipe, the form fields should be cleared and the Name field should be focused.

When a user refreshes or leaves the web page, they should see a list of recipes that they have saved in the past when revisiting the web app. You should be getting this information from the browser's localStorage.

The HTML for a saved recipe in the Saved Recipes section of the page should match the following HTML template:

Chicken Soup

• carrots
• beans
• onions
• chicken stock