Let's get started with a JavaScript Web Page!

  1. Login into your Code.Org account.
  2. Click on your name.
  3. Choose: My Projects
  4. Click on your My First Web Site project.
  5. Click on the Add HTML button.
  6. Right click on: new-5.html
  7. Choose: Rename
  8. Name this file: temperature.html
  9. Delete all the lines in this file.
  10. Copy the JavaScript Prompt Page Template (HTML) code (below).
  11. Paste that code into your temperature.html file.
  12. Change your page title, your Author name, and your page heading to something appropriate
  13. Click: Refresh and Save

JavaScript Page Template (HTML)

<!doctype html>
<html>
  <head>
    <title>page title goes here</title>
    <!-- put your name in this comment line -->
    <link href="style.css" rel="stylesheet"/>
    <script>
      /* put your name in this comment line */
      function convertTemp () {
        var fName = document.forms["myForm"]["firstName"].value;
        var lName = document.forms["myForm"]["lastName"].value;
        var fTemp = document.forms["myForm"]["tempF"].value;
        var cTemp = (fTemp - 32) * 5 / 9;
        alert("Hello " + fName + " " + lName + " " + fTemp + "F converts to " + cTemp + "C");
      }
    </script>
  </head>
  <body>
      <nav>
      <a href="index.html">Home</a> |
      <a href="table.html">Table</a> |
      <a href="form.html">Form</a> |
      <a href="multimedia.html">Multimedia</a> |
      <a href="javascript.html">JavaScript</a> |
      <a href="temperature.html" class="selected">Temperature</a> |
      <a href="js_styles.html">JS Styles</a>
    </nav>
    <h1>put page heading here</h1>
    <p>Required fields marked with: <span style="color: red; font-weight: bold;">*</span> </p> 
    <form id="myForm" name="myForm" method="POST" onsubmit="convertTemp()">
      <fieldset>
        <legend>put name of form here</legend>
        <span style="color: red; font-weight: bold;">*</span> 
        <label for="firstName">First Name: </label>
        <input type="text" id="firstName" name="firstName" size="25" 
        required placeholder="Enter your first name here"><br>
        <span style="color: red; font-weight: bold;">*</span> <label for="lastName">Last Name:
        </label>
        <input type="text" id="lastName" name="lastName" size="25" 
        required placeholder="Enter your last name here"><br>
        <span style="color: red; font-weight: bold;">*</span> <label for="tempF">Fahrenheit Temperature:
        </label>
        <input type="number" id="tempF" name="tempF" size="2" required><br>
        <input type="submit" id="submit" name="submit" value="Convert">
      </fieldset>
    </form>
    <div id="today"></div>
    <script>
      document.getElementById("today").innerHTML = Date();
    </script>
    <p>This page was last modified on: 
     <script>document.write(document.lastModified);</script>.</p>
  </body>
</html>

JavaScript Styles (CSS)

#today {
  color: navy;
  font-size: 8pt;
  font-style: italic;
  text-align: right;
}

Example