Summary

Topics

Class

Exercise

Reading time

Topics HOME

DOM

Node (DOM)

NodeList

document.querySelectorAll()

Node tree

window.alert

Class HOME DCI Class Repository

More DOM

Exercise HOME

Menu Styling

In the repository, there is an index.html starting file which has the skeleton of an online menu.

Style the menu by following the instructions below.

Rules:

• All changes to the menu should be done in JavaScript (no CSS);


• The page should be responsive.

Instructions:

1. Change the font of the body element;


2. Center the text of h1 on the page;


3. The menu headings have a class named category. Select the elements by class name. Then, change the color and font-style of each element;


4. Create a function named colorGenerator that returns a different color(use HEX colors 👍🏻). The returned random color should also include
   set transparency. Select the unordered lists with the class of food-category. Give each list a different background color using the function that you created;


5. Align the food-category lists in a row on desktop. Make sure that the page is responsive and also works on mobile;


6. Select the warning at the end of the page by its id warning. Select the id without using a querySelector. Change the size and font of the warning;


7. Select all even allergy-info items. Give the even items a different background color;


8. Make the allergy-warning appear as a column in the center of the page;


9. The descriptions in the footer should also be styled, e.g. a rounded border with a background color. They should appear in a column for mobile and in a row for desktop.

Images:

• Desktop version
  
• Mobile version
  
  

Notes:

• Follow the instructions to create a menu. You can add any additional styling;


• See reference images.

Solution:

Menu Styling

Reading time HOME

CSS: interview questions

HTML related interview questions