Question

1) Create a simple AJAX page that converts US Dollars to British Pounds - (use exchange rate as of 10/24 - $1 = .80 British P

0 0
Add a comment Improve this question Transcribed image text
Answer #1

Code

index.html

<!DOCTYPE html>

<html>

<head>

<title>USD to British pounds converter</title>

<style>

body {

background-color: white;

font-family: Arial, Helvetica, sans-serif;

}

td{

    padding: 10px;

}

#inputBox{

    padding: 40px;

}

#goBtn:hover{

    cursor: pointer;

}

#errormsg{

    color: red;

}

#valnumber{

    display: none;

}

#required{

    display: none;

}

</style>

<script>

function convert(){

    document.getElementById("required").style.display = "none";

    document.getElementById("valnumber").style.display = "none";

    var usd = document.getElementById("inputusd").value;

    if(usd==""){ // check if the input is empty

         document.getElementById("required").style.display = "block";

         return;

    }

    else if(isNaN(usd)){ // check if input is not a valid number

          document.getElementById("valnumber").style.display = "block";

          return;

    }  

    var xmlhttp = new XMLHttpRequest();

        xmlhttp.onreadystatechange = function() {

            if (this.readyState == 4 && this.status == 200) {

                document.getElementById("usd").innerHTML = usd;

                document.getElementById("bp").innerHTML = this.responseText;

            }

        };

    var url = "http://127.0.0.1:8090/converter.php" + '?q=' + usd;

    xmlhttp.open("GET", url, true);

    xmlhttp.send();

}

</script>

</head>

<body>

<div id="inputBox">

<table>

    <tr>

       <td>USD</td>

        <td><input type="text" Style="width: 150px;" id="inputusd"/> </td>

        <td id="errormsg"><span id="required">Please enter a value</span><span id="valnumber">Enter a valid number</span></td>

    </tr>

    <tr>

        <td colspan="2" style="text-align:center">

        <button id="goBtn" type="button" onclick="convert()">Convert</button>

        </td>

    </tr>

</table>

<div style="margin-left: 10px;">

<span id="usd">1</span> USD = <span id="bp">0.8</span> British Pounds

</div>

</div>

</body>

</html>

converter.php

<?php

header("Access-Control-Allow-Origin: *");

// get the q parameter from URL

$q = $_REQUEST["q"];

$r = $q * 0.8;

echo $r;

?>

Output

1. Initial screen

USD Convert 1 USD = 0.8 British Pounds

2. Case: Text input is blank

USD Please enter a value Convert 1 USD = 0.8 British Pounds

3. Case: Input is not a valid number

USD SSS SSS Enter a valid number Convert 1 USD = 0.8 British Pounds

4. Case: Valid input

USD 150 Convert 150 USD = 120 British Pounds

Note

I have given the code for HTML file (index.html) and PHP file(converter.php). On valid input, an AJAX call is made to converter.php to convert it to British Pounds. I am running the PHP file with server IP address 127.0.0.1 and port 8090. Please replace the URL in the AJAX call with the appropriate value.

Please like/upvote!

Add a comment
Know the answer?
Add Answer to:
1) Create a simple AJAX page that converts US Dollars to British Pounds - (use exchange...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions
  • Create an HTML5 page that contains a form to collect the following data. The text in...

    Create an HTML5 page that contains a form to collect the following data. The text in bold indicates the id value that should be assigned to each html control: Product (drop down list) product – iPad, iPhone 6S, Galaxy 5S, Moto X, and so on Quantity (number) quantity Unit price (number) unit_price Discount (%)(number) discount_rate Date (date)   order_date First Name (text box)   first_name Last Name (text box)   last_name Payment type (drop down list)   payment_type – Visa, Master, Discover, Amex, and...

  • Purpose of the assignment To apply simple JavaScript concepts to create a Fahrenheit to Celsius (and...

    Purpose of the assignment To apply simple JavaScript concepts to create a Fahrenheit to Celsius (and Celsius to Fahrenheit) conversion program. I need both please! What’s required of you. Having looked at some basic examples of JavaScript on http://www.w3schools.com and at the “simple math with forms/inputs and validation” example in detail , I would like you to now apply those concepts to create a simple page that lets users type in some temperature value in the Fahrenheit/Celsius scale and when...

  • VII JAVA ASSIGNMENT. Write a program with a graphical interface that allows the user to convert...

    VII JAVA ASSIGNMENT. Write a program with a graphical interface that allows the user to convert an amount of money between U.S. dollars (USD), euros (EUR), and British pounds (GBP). The user interface should have the following elements: a text box to enter the amount to be converted, two combo boxes to allow the user to select the currencies, a button to make the conversion, and a label to show the result. Display a warning if the user does not...

  • please write code in java language and do not add any break, continue or goto statements...

    please write code in java language and do not add any break, continue or goto statements Write a program with a graphical interface that allows the user to convert an amount of money between U.S. dollars (USD), euros (EUR), and British pounds (GBP). The user interface should have the following elements: a text box to enter the amount to be converted, two combo boxes to allow the user to select the currencies, a button to make the conversion, and a...

  • Project 10-1 Convert lengths In this assignment, you’ll add code to a form that converts the valu...

    Project 10-1 Convert lengths In this assignment, you’ll add code to a form that converts the value the user enters based on the selected conversion type. The application should handle the following conversions: From To Conversion Miles - Kilometers: 1 mile = 1.6093 kilometers Kilometers - Miles: 1 kilometer = 0.6214 miles Feet - Meters: 1 foot = 0.3048 meters Meters - Feet: 1 meter = 3.2808 feet Inches - Centimeters: 1 inch = 2.54 centimeters Centimeters - Inches: 1...

  • NEED HELP with HTML with Javascript embedding for form validation project below. I have my code...

    NEED HELP with HTML with Javascript embedding for form validation project below. I have my code below but I'm stuck with validation. If anyone can fix it, I'd really appreciate. ****************************************************************************** CODE: <!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. --> <html> <head> <title>Nice</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script> var textFromTextArea; function getWords(){ var text =...

  • Assignment Overview This assignment will give you more experience on the use of strings and iterations....

    Assignment Overview This assignment will give you more experience on the use of strings and iterations. The goal of this project is to use Google’s currency converter API to convert currencies in Python and display the result to user by processing the returned results. Assignment Background The acronym API stands for “Application Programming Interface”. It is usually a series of functions, methods or classes that supports the interaction of the programmer (the application developer, i.e., you) with some particular program....

  • C++ Fraction calculator Need help with code, cant use "using namespace std" Objectives Create and use...

    C++ Fraction calculator Need help with code, cant use "using namespace std" Objectives Create and use functions. Use a custom library and namespace. Use reference variables as parameters to return values from functions. Create a robust user interface with input error checking. Use exceptions to indicate errors. Resources kishio.h kishio.cpp Assignment requirements You will need eight methods (including main). One is given to you. Their requirements are specified below: menu: The menu function takes no arguments, but returns a char...

  • New Perspectives on HTML5 and CSS3. Solve Chapter 13 Case Problem 3. mas_register.js "use strict"; /*...

    New Perspectives on HTML5 and CSS3. Solve Chapter 13 Case Problem 3. mas_register.js "use strict"; /* New Perspectives on HTML5, CSS3, and JavaScript 6th Edition Tutorial 13 Case Problem 3 Filename: mas_register.js Author: Date: Function List ============= formTest() Performs a validation test on the selection of the conference session package and the conference discount number calcCart() Calculates the cost of the registration and saves data in session storage    writeSessionValues() Writes data values from session storage in to the registration...

  • Don't attempt if you can't attempt fully, i will dislike a nd negative comments would be...

    Don't attempt if you can't attempt fully, i will dislike a nd negative comments would be given Please it's a request. c++ We will read a CSV files of a data dump from the GoodReads 2 web site that contains information about user-rated books (e.g., book tit le, publication year, ISBN number, average reader rating, and cover image URL). The information will be stored and some simple statistics will be calculated. Additionally, for extra credit, the program will create an...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT