Let's get started with a JavaScript Prompt Web Page!

  1. Open Notepad++
    1. Open your index.html file
    2. Open your styles.css file
    3. Click: New -> File
    4. Copy the JavaScript Prompt Page Template (HTML) code (below)
    5. Paste that code into your new file
    6. Click: Save
    7. Name the file: js_prompt.html
    8. Change the Save as type:
      to: Hyper Text Markup Language file (*.html)
    9. Click: New -> File
    10. Copy the JavaScript Prompt Code Template (JS) code (below)
    11. Paste that code into your new file
    12. Click: Save
    13. Save that file in your includes folder
    14. Name the file: prompt.js
    15. Change the Save as type:
      to: JavaScript file (*.js)
    16. Change your page title, your Author name, and your page heading to something appropriate
    17. Open your styles.css file
    18. Copy the JavaScript Prompt Styles (CSS) code (below)
    19. Paste that code into your styles.css file
    20. Change some styles
    21. In your index.html file
    22. Add a link to this page. Change: <li>Create a Javascript Page</li>
      to: <li><a href="javascript.html">Create a Javascript Page</a></li>
    23. Save your changes
    24. Click: Run
    25. Choose: Launch in IE
      or Launch in Chrome
      or Launch in Firefox
    26. View your web page
    27. Make any changes
    28. Save your changes

JavaScript Prompt Page Template (HTML)

<!doctype html>
<html>
  <head>
    <title>page title goes here</title>
    <!-- Author: put your name in this comment line -->
    <link href="includes/styles.css" rel="stylesheet"/>
    <script src="includes/prompt.js"></script>
  </head>
  <body onload="promptMe();">
    <h1>put page heading here</h1>
    <div id="promptDiv">
    </div>
    <div id="confirmDiv">
    </div>
    <p>This page was last modified on: 
     <script>document.write(document.lastModified);</script>.</p>
  </body>
</html>

JavaScript Prompt Code (JS)

/* put your name in this comment line */
function promptMe () {
  var person = prompt("Please enter your name", "Bob Dylan");
  if (person != null) {
    document.getElementById("promptDiv").innerHTML =
    "Hello " + person + "! How are you today?";
  }
  if (confirm("OK to continue?")) {
    document.getElementById("confirmDiv").innerHTML =
    "You clicked 'OK'";
  } else {
    document.getElementById("confirmDiv").innerHTML =
    "You clicked '<span style=\"color: red; font-weight: bold;\">Cancel</span>'";
  }
}

Example