Question

In: Computer Science

HTML/CSS/JavaScript Create a page that converts 4 different measurements (i.e. length, volume, area, distance) to either...

HTML/CSS/JavaScript

Create a page that converts 4 different measurements (i.e. length, volume, area, distance) to either Imperial or Metric values. When a value is entered into one of the fields, the converted amount is displayed in the other corresponding field.

Example:

Converting between litres and gallons. If you enter 25 for gallons, the value of 113.50 litres should be displayed.

Converting between gallons and litres. If you enter 75 litres, the value of 16.52 gallons should be displayed. (Note, 1 Imperial gallon is 4.54 litres)

Example:

Converting between metres and feet. If you enter 125 for feet, the value of 38.10 metres should be displayed.

Example:

Converting square metres to feet. If you enter 95 for square metres, the value of 1022.57 square feet should be displayed.

Your page will require JavaScript ‘event handlers’ that will respond to changes in the number field and call the correct functions. Your answers should display to 2 significant digits. Your page must use CSS to create an interesting and pleasing interface

Solutions

Expert Solution

HTML Page :

<!DOCTYPE html>

<htmL>

<style>
input[type=text] {
  padding: 12px;
  border: 2px solid teal;
  border-radius: 4px;
  resize: vertical;
  font-family:cursive;
}
h4 {
  font-family: verdana;
}
h1 {
  font-family: verdana;
}
</style>
<body>

<center>

<!--Page Header -->
<h1>Unit Convertor<h1>

<!-- creating header and two input field for meter and feet -->
<!-- oninput function called when user input some value in input fields -->
<!-- this.value specify current input field value -->
<!-- first parameter of oninput function is input value and second is destination unit -->
<h4>Convert between Meter and Feet</h4>
<input type="text" id="meter" oninput="distanceConversion(this.value,'feet')" placeholder="Value in Meter">
<input type="text" id="feet" oninput="distanceConversion(this.value,'meter')" placeholder="Value in Feet">

<!-- creating header and two input field for liter ang gallon -->
<h4>Convert between Liter and Gallon</h4>
<input type="text" id="liter" oninput="volumeConversion(this.value,'gallon')" placeholder="Value in Liter">
<input type="text" id="gallon" oninput="volumeConversion(this.value,'liter')" placeholder="Value in Gallon">

<!-- creating header and two input field for sq meter and sq feet -->
<h4>Convert between Square Meter and Square Feet</h4>
<input type="text" id="sq-meter" oninput="areaConversion(this.value,'sq-feet')" placeholder="Value in Square Meter">
<input type="text" id="sq-feet" oninput="areaConversion(this.value,'sq-meter')" placeholder="Value in Square Feet">

<!-- creating header and two input field for inch and Feet -->
<h4>Convert between Inch and Feet</h4>
<input type="text" id="inch-length" oninput="lengthConversion(this.value,'feet-length')" placeholder="Value in Inch">
<input type="text" id="feet-length" oninput="lengthConversion(this.value,'inch-length')" placeholder="Value in Feet">


<!-- javascript code -->
<script>

<!--  distanceCoversion is used to convert between feet and meter-->
<!-- toFixe(2) is used to display upto two decimal place -->
function distanceConversion(value,destination) {
    if(destination == 'feet') {
    // update feet input field value
    document.getElementById("feet").value = (value * 3.28).toFixed(2);
    }
    else if(destination == 'meter') {
    // update meter field value
    document.getElementById("meter").value = (value / 3.281).toFixed(2);
    }
  }
<!--  volumeConversion is used to convert between gallon and liter -->
function volumeConversion(value,destination) {
        if(destination == 'gallon') {
        // update gallon field value
        document.getElementById("gallon").value = (value / 4.54).toFixed(2);
        }
        else if(destination == 'liter') {
        // update liter field value
        document.getElementById("liter").value = (value * 4.54).toFixed(2);
      }
}
<!--  areaConversion is used to convert sq feet and sq meter -->
function areaConversion(value,destination) {
        if(destination == 'sq-feet') {
          // update sq feet field value
        document.getElementById("sq-feet").value = (value * 10.764).toFixed(2);
        }
        else if(destination == 'sq-meter') {
          // update sq meter field value
        document.getElementById("sq-meter").value = (value / 10.764).toFixed(2);
      }
}

<!--  lengthConversion is used to convert between gallon and liter -->
function lengthConversion(value,destination) {
    if(destination == 'feet-length') {
      // update feet field value
    document.getElementById("feet-length").value = (value / 12).toFixed(2);
    }
    else if(destination == 'inch-length') {
      // update inch field value
    document.getElementById("inch-length").value = (value * 12).toFixed(2);
    }
  }

</script>

</body>

</html>

Sample Output :

Please refer to the Screenshot of the code given below to understand indentation of the code :

venereology answered 4 months ago
Next > < Previous

Related Solutions

Project 2c (Javascript/HTML/CSS)– Mouse Chase: Create a page with a nice, shiny, pretty button on it....
Project 2c (Javascript/HTML/CSS)– Mouse Chase: Create a page with a nice, shiny, pretty button on it. The button should say ‘Click to receive $10!’ However, any time the user’s mouse cursor gets over the button, the button should move to a random location on the page, making the button essentially impossible to click! However, if they do somehow manage to click the button, redirect the user to an image of a 10 trillion Zimbabwe Dollar. Finally, the background color of...
Develop a personal web page for yourself using HTML, CSS, and Javascript Use the following HTML...
Develop a personal web page for yourself using HTML, CSS, and Javascript Use the following HTML tags to design your webpage: <h1>...</h1>,<h3>...</h3>, <h6>...</h6>, <p>...</p>, <b>...</b>, <i>...</i>, <a>...</a>, <img...>, <table>... </table>, <div>...</div>, <form>...</form>, <input type="text">, and <input type= "submit"> Use an external css to change the default style of your webpage. You must use at least one element selector, one id selector, and one class selector Using text input and submit button, allow the user to change the background color of...
Using HTML and JAVASCRIPT Create a Content area on the main entry page will include inputs...
Using HTML and JAVASCRIPT Create a Content area on the main entry page will include inputs for customer entry for the following: Entry field (with labeling) for the Customer's name Entry field (with labeling) for the Customer's email address Entry field (with labeling) for which room the customer is planning on painting Entry field (with labeling) for the width of the room Entry field (with labeling) for the length of the room Entry field (with labeling) using a colour box...
Create 1 HTML page and 1 CSS file for all the styles. Your html page will...
Create 1 HTML page and 1 CSS file for all the styles. Your html page will be a small gallery of images using the Polaroid style. The page should have at least 1 row of 3 images. You can choose any theme of images. Don't pick random images, make them all have a theme. Add an h1 tag for the header of your page. Style the h1 tag with a color, size, and font family. Include a paragraph tag under...
Create a footer for web page using HTML,CSS,Javascript. The footer should contain 1.Back to top button...
Create a footer for web page using HTML,CSS,Javascript. The footer should contain 1.Back to top button 2.Random logo 3.Copyright content
The code to create a Search/Filter Data with Javascript or html from html page.
The code to create a Search/Filter Data with Javascript or html from html page.
Debug3-4.css You’ve been given the initial HTML and CSS code for this web page, but there...
Debug3-4.css You’ve been given the initial HTML and CSS code for this web page, but there are several errors in the CSS stylesheet. Use your knowledge of CSS to locate and fix the errors. The body element should have a width that is 90% of the width of the browser window ranging from a minimum of 600 pixels up to a maximum of 1024 pixels. Fix the syntax errors in the body style rule that defines the width of the...
Using brackets you will need to create the HTML page and CSS style sheet for the...
Using brackets you will need to create the HTML page and CSS style sheet for the given Form example. Form 1: create an HTML page with a form that contains a text input field. The label for the text field should be “City”. Beneath it should be a submit button “Lookup”. Place a horizontal line beneath the Lookup button and add three radio buttons labeled “Beginner”, “Intermediate”, and “Advanced”. Your page should have a title and a header in the...
Task 1: HTML and CSS Create a website using HTML5 and CSS3 only. Please no JavaScript...
Task 1: HTML and CSS Create a website using HTML5 and CSS3 only. Please no JavaScript or Bootstrap. Website theme can be anything you want: a country, a town, a place, a hobby, people (yourself, your family...), pets, flowers, food, or anything that you find interesting or useful. It may be about real people/places/things or fictitious. Part 1: Content (HTML) After you decide the theme of your website, create HTML pages with the content you want to present. Remember to...
2. HTML/CSS/JavaScript Under 'project’ create a subdirectory titled ‘travelsite’. Create a slide show for a travel...
2. HTML/CSS/JavaScript Under 'project’ create a subdirectory titled ‘travelsite’. Create a slide show for a travel and tourism company. Use between 8 and 12 pictures that will automatically change every 1 to 3 seconds. You may use the pictures from Assignment 1 and add more to the collection. The slide show will have the following features: Use a background image. The pictures must use a type of ‘transition’ ie Fade in/Fade out when the pictures change. Each picture must include...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT