Your First JavaScript Project

Apply everything you've learned to create a simple interactive web page!

Learning Objectives

Combine HTML, CSS, and JavaScript
Create interactive elements on a web page
Understand event handling in JavaScript

Explanation

It's time to put all your JavaScript knowledge together and create an interactive web page! One of the most powerful aspects of JavaScript is its ability to respond to user events. Common events in web browsers: - click: When an element is clicked - submit: When a form is submitted - mouseover/mouseout: When the mouse enters/leaves an element - keydown/keyup: When a keyboard key is pressed/released - load: When a page or image finishes loading There are several ways to handle events in JavaScript: 1. Using HTML attributes (not recommended for larger projects): <button onclick="alert('Hello!')">Click me</button> 2. Using event properties (slightly better): document.getElementById("myButton").onclick = function() { alert('Hello!'); }; 3. Using event listeners (the modern, recommended approach): document.getElementById("myButton").addEventListener("click", function() { alert('Hello!'); }); For this project, you'll create a simple interactive web page that: - Gets user input - Processes that input with JavaScript - Updates the page based on the input This demonstrates the core concept of dynamic web pages!

Code Example

// HTML for your project
/*
<!DOCTYPE html>
<html>
<head>
  <title>My First JavaScript Project</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 600px;
      margin: 0 auto;
      padding: 20px;
    }
    .result {
      margin-top: 20px;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      background-color: #f9f9f9;
    }
    button {
      background-color: #4CAF50;
      color: white;
      padding: 10px 15px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    button:hover {
      background-color: #45a049;
    }
    input {
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 4px;
      width: 100%;
      box-sizing: border-box;
      margin: 8px 0;
    }
  </style>
</head>
<body>
  <h1>Temperature Converter</h1>
  
  <div>
    <label for="celsius">Enter temperature in Celsius:</label>
    <input type="number" id="celsius" placeholder="0">
    <button id="convert">Convert to Fahrenheit</button>
  </div>
  
  <div id="result" class="result" style="display: none;">
    <p>The temperature in Fahrenheit is: <span id="fahrenheit">32</span>°F</p>
  </div>

  <script src="script.js"></script>
</body>
</html>
*/

// JavaScript (script.js)
// Wait until the document is fully loaded
document.addEventListener("DOMContentLoaded", function() {
  // Get references to HTML elements
  const celsiusInput = document.getElementById("celsius");
  const convertButton = document.getElementById("convert");
  const resultDiv = document.getElementById("result");
  const fahrenheitSpan = document.getElementById("fahrenheit");
  
  // Add click event listener to the button
  convertButton.addEventListener("click", function() {
    // Get the Celsius temperature from the input
    const celsius = parseFloat(celsiusInput.value);
    
    // Check if the input is a valid number
    if (isNaN(celsius)) {
      alert("Please enter a valid number!");
      return;
    }
    
    // Convert Celsius to Fahrenheit
    const fahrenheit = (celsius * 9/5) + 32;
    
    // Display the result (rounded to 1 decimal place)
    fahrenheitSpan.textContent = fahrenheit.toFixed(1);
    resultDiv.style.display = "block";
  });
  
  // Add event listener for pressing Enter in the input field
  celsiusInput.addEventListener("keyup", function(event) {
    if (event.key === "Enter") {
      convertButton.click();
    }
  });
});

Try It Yourself!

Create a simple temperature converter that takes a Celsius temperature and converts it to Fahrenheit!

JavaScript Editor

// HTML for your project
/*
<!DOCTYPE html>
<html>
<head>
  <title>My First JavaScript Project</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 600px;
      margin: 0 auto;
      padding: 20px;
    }
    .result {
      margin-top: 20px;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      background-color: #f9f9f9;
    }
    button {
      background-color: #4CAF50;
      color: white;
      padding: 10px 15px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    button:hover {
      background-color: #45a049;
    }
    input {
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 4px;
      width: 100%;
      box-sizing: border-box;
      margin: 8px 0;
    }
  </style>
</head>
<body>
  <h1>Temperature Converter</h1>
  
  <div>
    <label for="celsius">Enter temperature in Celsius:</label>
    <input type="number" id="celsius" placeholder="0">
    <button id="convert">Convert to Fahrenheit</button>
  </div>
  
  <div id="result" class="result" style="display: none;">
    <p>The temperature in Fahrenheit is: <span id="fahrenheit">32</span>°F</p>
  </div>

// JavaScript (script.js)
// Wait until the document is fully loaded
document.addEventListener("DOMContentLoaded", function() {
  // Get references to HTML elements
  const celsiusInput = document.getElementById("celsius");
  const convertButton = document.getElementById("convert");
  const resultDiv = document.getElementById("result");
  const fahrenheitSpan = document.getElementById("fahrenheit");
  
  // Add click event listener to the button
  convertButton.addEventListener("click", function() {
    // Get the Celsius temperature from the input
    const celsius = parseFloat(celsiusInput.value);
    
    // Check if the input is a valid number
    if (isNaN(celsius)) {
      alert("Please enter a valid number!");
      return;
    }
    
    // Convert Celsius to Fahrenheit
    const fahrenheit = (celsius * 9/5) + 32;
    
    // Display the result (rounded to 1 decimal place)
    fahrenheitSpan.textContent = fahrenheit.toFixed(1);
    resultDiv.style.display = "block";
  });
  
  // Add event listener for pressing Enter in the input field
  celsiusInput.addEventListener("keyup", function(event) {
    if (event.key === "Enter") {
      convertButton.click();
    }
  });
});

Mini Quiz

Test your knowledge with these quick questions!

1. What is the recommended approach for handling events in JavaScript?

Using HTML onclick attributes

Using event properties (element.onclick = function() {})

Using addEventListener method

Using alert() functions

2. What does the DOMContentLoaded event do?

It triggers when the user clicks on an element

It triggers when the basic HTML document has loaded, without waiting for images and stylesheets

It triggers when the user submits a form

It triggers when there's an error in the JavaScript code

Your Progress

Lesson ProgressIn Progress

Est. time: 15-20 min

150 points

Module Progress

JavaScript Fundamentals2/10 completed

Complete all lessons to earn the Code Fundamentalist badge!

Rewards

Complete this lesson

Earn 150 points

Complete this module

Earn the Code Fundamentalist badge