- Local Storage (Weight: 10%) When the user clicks one of the buttons in the top right corner
(gold or gray), the system stores the color in the local storage and changes the color of “Best
Cakes” to either gold or gray. When the page first loads, it reads the color in the local storage,
and styles “Best Cakes” accordingly. Write code in the set_color function (in script.js) so that the
color is stored in the local storage. Write code in show_color function (in script.js) so that the
color is red from local storage and used to color “Best Cakes”.
- Building the cakes table based on JSON (Weight: 45%) Write JS code in the show_cakes
function in script.js that does the following: The code loops through the cakes in data.js so that
it generates HTML for data rows that show the number, cake name, calories, whether the cake
is nut free, dairy free, and gluten free. The generated HTML should be shown in the body of the
cakes table (id=cakes). Some data need to be shown in this way. If the calories are greater than
4500, show the calories in red. Otherwise, if the calories are greater than 4200, show it in
orange. Otherwise, show it in green (see Figure 1). You can add styling in style.css to help you
with this part.
For the nut-free, dairy-free, and gluten-free attributes, if the value is true, show a checkmark
symbol (which is ✔). Otherwise, show a symbol dash symbol (-). Again, have a look at
Figure 1.
Also, there is a search box on top of the cakes table. When the user types letters, the system will
find cakes with names that match the names of the cakes in the data. Also, the search can find
cakes based on the allergy type (e.g. nut free/cake free/etc.)
- Building the leaflet map (Weight: 30%) Show a leaflet map for Abu Dhabi. The map should be
centered in these coordinates: 24.4539,54.3773, and with a zoom level of 12.
Then, write a script (in the function show_map) that loops through the locations data in data.js
(the variable locations). Add these as markers on the map. When the user clicks a marker, it
shows the name of the location. See Figure 2.
- Form Validation (Weight: 15%) Validate the Order Your Cake form according to this logic:
The name must be at least 10 characters long.
If the user chooses a pecan pie cake, and nut allergies, an error message should show
up: “Sorry, pecan pies have nuts”. If the user chooses a cheese cake and dairy allergies,
an error message should show up: “Sorry, cheese cakes have dairy”.
required Output
Here is the Attached Files