Page 131 - KEC Khaitan C5 Flipbook
P. 131
A. Initialize Variables
HANDS-ON PROJECT Define variables to store user inputs and results:
var temperature = 0;
PROJECT NAME: Temperature Converter App var convertFrom = "";
Objective: var convertTo = "";
var result = 0;
Learn programming basics such as event handling, variables, and conditional logic.
B. Add Event Listener for the Convert Button
Develop problem-solving skills by building a practical, interactive application.
Write code to capture inputs and perform the conversion:
Understand how temperature conversions work in real life.
onEvent("btnConvert", "click", function() {
Step-by-Step Instructions temperature = parseFloat(getText("inputTemp"));
Step 1: Plan the Features convertFrom = getText("convertFrom");
Your Temperature Converter should: convertTo = getText("convertTo");
if (convertFrom == "Celsius" && convertTo == "Fahrenheit") {
Allow users to input a temperature value.
result = (temperature * 9/5) + 32;
Provide options to convert between Celsius, Fahrenheit, and Kelvin. } else if (convertFrom == "Celsius" && convertTo == "Kelvin") {
Display the converted result. result = temperature + 273.15;
Step 2: Set Up the User Interface } else if (convertFrom == "Fahrenheit" && convertTo ==
"Celsius") {
Open Code.org's App Lab:
result = (temperature - 32) * 5/9;
o Navigate to Code.org > Projects > App Lab. } else if (convertFrom == "Fahrenheit" && convertTo == "Kelvin")
Design the Layout: {
result = ((temperature - 32)
o Add a Text Input Box (ID: inputTemp) for the user to enter the temperature.
* 5/9) + 273.15;
o Add a Dropdown Menu (ID: convertFrom) with options: "Celsius," "Fahrenheit," and } else if (convertFrom ==
"Kelvin." "Kelvin" && convertTo ==
o Add another Dropdown Menu (ID: convertTo) with the same options. "Celsius") {
o Add a Button (ID: btnConvert, Text: "Convert") to trigger the conversion. result = temperature -
273.15;
o Add a Label (ID: outputResult) to display the converted temperature. } else if (convertFrom ==
Customize the Design: "Kelvin" && convertTo ==
"Fahrenheit") {
o Use vibrant colors and readable fonts to make the interface appealing.
result = ((temperature -
o Arrange elements neatly for an intuitive user experience. 273.15) * 9/5) + 32;
Step 3: Code the Temperature Converter } else if (convertFrom ==
convertTo) {
Switch to Code Mode to implement the functionality.
result = temperature; // No
conversion needed
} else {
Designing User Interfaces and Simulating Data 129

