Connecting The JS & HTML

Before you get started, make sure you have the script tag in your HTML so it can access your JS file.

<script src="script.js"></script>

Collecting The User Input

We will start by printing the user’s input to the console. This helps us confirm that our JavaScript is properly connected to the HTML and that we can access what the user types.

First, we need to make sure the code runs only after the HTML has fully loaded. We can do that by adding an event listener for "DOMContentLoaded". This event tells the browser to wait until all the elements on the page are ready before running our code.

document.addEventListener("DOMContentLoaded", () => { });

Inside the curly brackets, we will select the input and button elements using their IDs. This allows JavaScript to interact with those elements.