3.3 You are building a pizza ordering assistant. The user types a size option: small, medium, or large.     

·         Small: “You selected a small pizza. R60 – enough for one person!”

·         Medium: “Medium pizza selected. R100 – a good choice for two.”

·         Large: “A large pizza! R140 – perfect for the whole family!”

If the input is anything else, show:

Task:

·         Prompt the user to select a pizza size.

·         Use if...else if to display price and portion info.

·         Show an error for invalid input.

Your manager has provided an image of the desired JS App (see below) and asked you to design a JavaScript page. (15 Marks)

3.1 Create a webpage using HTML and CSS with a sign-up form titled “Richfield Gym Membership Registration”. The form must display exactly as the images provided. Additionally, the border colour of the cards on membership type must change on mouse hover. (25 Marks)

3.2 Using 3.1 as reference, when the submit button on the form is clicked, validate personal information section using the following rules:

(10 Marks)

Question Two (30 Marks)

2.2 You have been appointed as a junior web developer tasked with creating a simple promotional webpage for the Pretoria Zoo. Your manager has provided an image of the zoo (see below), your task is to design a basic Web page. The social media links must be functional and opens the social media platform in a new tab.  When the update button is clicked, its content will be changed as shown on the image.  Create the website using html and CSS. Implement the functionality of the button using JQUERY. The table rows must display blue background color when hovered.

Paragraph text= “Discover the wonders of wildlife at Pretoria Zoo, one of South Africa's most beloved zoological parks! Home to over 4,000 animals from around the globe, our zoo offers an unforgettable experience for visitors of all ages. From majestic African elephants to colorful tropical birds, every visit promises new discoveries and memorable encounters with nature's most fascinating creatures.”

Facebook= https://www.facebook.com/

Instagram=” https://www.instagram.com/”

 X= “https://x.com/“

JQUERY     : <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

1.4 Briefly explain the role of HTML, CSS, JavaScript, and jQuery in web development.(5 Marks)

1.3 Describe any five effective website caching techniques used to enhance website performance. (5 Marks)

1.2 Discuss five advantages of optimizing images in web development (5 Marks)

1.1 How can CSS and JS be optimized to improve performance? (5 Marks)

Question Four (25 marks)

Given the images and code snippet above, You are tasked with creating a webpage for a local restaurant called “Taste of Africa”. Your page must include:

• A header with the restaurant name and logo (logo.png)
• A navigation menu with links: Home, Menu, About Us, Contact
• A main section with:

• Two featured dishes (use jollof.jpg and bobotie.jpg, include name, description, and price)

(25 marks)

Question Five (25 marks)

You are required to write the CSS code to style the “Taste of Africa” restaurant webpage as shown above. You must use an external CSS file named style.css and include an explanation of where and how the file should be linked in the HTML document.

Your CSS must include the following:

Header Styling:

• Set the background color to #f8f4e5
• Add padding
• Ensure the content (logo and restaurant name) is centered

Navigation Menu Styling:

• Use a horizontal layout with flex or a suitable technique
• Set background color to #513B1C
• Set text color to white (#ffffff)
• On hover, change the background color to #7D5E2A

Featured Dishes Layout:

• Use appropriate CSS layout techniques (e.g., Flexbox) to display at least two dishes side by side (25 marks)