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
   126   127   128   129   130   131   132   133   134   135   136