Scribd
Upload
12 views3 pages

Lab Act 1 - Finals

Activity kung gusto mo :)

Uploaded by

Custom 1
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
12 views3 pages

Lab Act 1 - Finals

Activity kung gusto mo :)

Uploaded by

Custom 1
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
You are on page 1/ 3

/ 70

Name: _____________________________ Section: _________ Date: _________ Score: ____________

Actual Exam Task: Create a Converter Web App (70 points)

Instructions:
You are tasked with creating a web application called "Converter App" using HTML, CSS
and JavaScript. This app will allow users to convert weights, distance and temperature.
Follow the instructions below to build the app step by step. Each step is graded based
on accuracy and completion.

Part 1. Project Setup (5 points)

1. Create an HTML Document with the following:


o HTML – index.html
o CSS – l1finals2firstletterofnamelastname.css (la1finalsecampano.css)
o JavaScript – l1finals2firstletterofnamelastname.js (lafinalsecampano.js)

Part 2. Pages/Parts Layout (5 points)

2. Add 3 more pages/parts within your html document:


Pages/parts
o WeightConverter
o LengthConverter
o TemperatureConverter

Part 3. User Interface (20 points)

3. Index.html (5 points)
o make this your initial page
o this should contain buttons or components that will call the other pages/parts of
the web application.
4. other pages/parts of the web application
o WeightConverter (5 points)
a. should contain the following:
• A label at the top showing Weight Converter
• An input text for entering the weight, put a placeholder
• A label with “From Unit:: “
• A dropdown list (Kilograms, Grams, Pound)
• A label with “To Unit: “
• A dropdown list (KIlograms, Grams, Pound)
• A Button labeled “Convert”
• A text to display the conversion result
• A back button to call the initial page.
o LengthConverter (5 points)
a. should contain the following:
• A label at the top showing Length Converter
• An input text for entering the weight, put a placeholder
• A label with “From Unit:: “
• A dropdown list (Kilometers, Meters, Feet)
• A label with “To Unit: “
• A dropdown list (Kilometers, Meters, Feet)
• A Button labeled “Convert”
• A text to display the conversion result
• A back button to call the initial page.
o TemperatureConverter (5 points)
a. should contain the following:
• A label at the top showing Termperature Converter
• An input text for entering the weight, put a placeholder
• A label with “From Unit:: “
• A dropdown list (Celsius, Fahrenheit, Kelvin)
• A label with “To Unit: “
• A dropdown list (Celsius, Fahrenheit, Kelvin)
• A Button labeled “Convert”
• A text to display the conversion result
• A back button to call the initial page.

Part 3. Java Script Implementation (35 points):

5. Index.html (5 points)
o make sure that each button will call the appropriate converter page.
6. WeightConverter (10 points)
o Retrieve user input from the input and ensure it's a valid number.
o Use the selected "From Unit" and "To Unit" from the dropdown list to perform
the weight conversion.
o Display the conversion result in the text when the user clicks the "Convert"
button.
o Write a function named convertWeight to handle the weight conversion
logic. Use the following Conversion rates:

Kilograms = 1000 grams


Kilograms = 2.20462 lbs.
Grams =0.00220462 lbs.

7. LengthConverter (10 points)


o Retrieve user input from the input and ensure it's a valid number.
o Use the selected "From Unit" and "To Unit" from the dropdown list to perform
the weight conversion.
o Display the conversion result in the text when the user clicks the "Convert"
button.
o Write a function named convertLength to handle the distance (length)
conversion logic. Use the following Conversion rates:

Kilometers = 1000 meters


Kilometers = 3280 feet
Feet = 0.3048

8. TemperatureConverter (10 points)


o Retrieve user input from the input and ensure it's a valid number.
o Use the selected "From Unit" and "To Unit" from the dropdown list to perform
the weight conversion.
o Display the conversion result in the text when the user clicks the "Convert"
button.
o Write a function named convertTemperature to handle the temperature
conversion logic. Use the following Conversion formula:

Celsius to Fahrenheit = (oC x 9/5) + 32


Celsius to Kelvin = oC + 273.15
Fahrenheit to Celsius = (32°F − 32) × 5/9
Part 4. Testing and Checking (5 points)

10. Run the web app. Verify the following:


o The app runs without crashing or errors.
o Conversion works accurately for all combinations of units

Scoring Rubric (70 points)


• Web App Setup: 5 points
• Pages and Layouts: 5 points
• UI Design (CSS): 20 points
• Logic Implementation (JavaScript): 35 points
• Testing and Submission: 5 points
• Bonus (optional): 5 points for polished UI and extra features.

This lab activity assesses your ability to build a fully functional web application using html, css
and JavaScript. Follow each step carefully and test your web app thoroughly before submission.

God bless!

You might also like