Scribd
Upload
5 views1 page

Tutorial

The document outlines two exercises focused on web development skills. The first exercise involves designing a visually appealing and responsive recipe web page using HTML, CSS, and JavaScript. The second exercise requires creating a hotel bill calculator that includes user input for stay information, detailed charge breakdowns, validation messages, and a responsive layout.

Uploaded by

stormemrv
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views1 page

Tutorial

The document outlines two exercises focused on web development skills. The first exercise involves designing a visually appealing and responsive recipe web page using HTML, CSS, and JavaScript. The second exercise requires creating a hotel bill calculator that includes user input for stay information, detailed charge breakdowns, validation messages, and a responsive layout.

Uploaded by

stormemrv
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Exercise 1: Recipe Web Page Design

Your task in this exercise is to design and develop a Recipe Web Page.

The objective is to create a visually appealing, responsive, and well-structured recipe page using
HTML, CSS, and JavaScript where necessary.

Exercise 2: Hotel Bill Calculator

In this exercise, you are required to develop a Hotel Bill Calculator and style it.

Your application should allow users to:

●​ Enter customer and hotel stay information and calculate the total hotel bill after
submitting the form.
●​ Display a detailed breakdown of charges such as room cost, number of nights,
additional services, taxes, or discounts where applicable.
●​ Receive appropriate validation messages whenever any required field is left empty
or incomplete.
●​ Navigate and complete the form entirely using the keyboard.
●​ View a responsive layout that adapts properly to different screen sizes and devices.
●​ Observe hover and focus effects on all interactive elements within the page.

You might also like