Need Help in Json

  1. 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”.
  2. 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 &#10004). 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.)
  3. 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.
  4. 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