UNIT 9 • STAGE 5 OF 7

Your First JavaScript

Make the form interactive: show a thank-you message on submit

Home All Units Unit 9 ← Stage 4 Stage 6 →
UNIT
STEP 1

What Is JavaScript?

HTML builds the structure of a page. CSS controls how it looks. JavaScript controls how it behaves. With JavaScript, your page can respond to things the user does: clicks, keyboard input, form submissions.

Right now your submit button reloads the page when clicked. That is the browser's default behavior. In this stage you will write JavaScript that intercepts that click and shows a thank-you message instead.

You will use three tools for this:

  • document.getElementById(), finds an element on the page by its id attribute and gives you control over it
  • addEventListener('submit', ...), listens for the form's submit event and runs your code when it fires
  • e.preventDefault(), stops the browser's default behavior (the page reload) so your code can run instead
  • style.display, changes whether an element is visible ('block') or hidden ('none')

JavaScript lives inside <script> tags

You write JavaScript between <script> and </script> tags, placed just before the closing </body> tag. This placement means the HTML loads first, so your JavaScript can find the elements it needs to work with.

STEP 2

Add the Thank-You CSS

First you need to style the thank-you message that JavaScript will reveal. Add this CSS just above </style>:

👉 Add inside <style>, just above </style>: #thank-you {
  display: none;
  background: #e6f4ea;
  border: 2px solid #2d4a1e;
  border-radius: 8px;
  padding: 24px 28px;
  margin-top: 24px;
  max-width: 560px;
}

#thank-you h3 {
  font-size: 1.25rem;
  color: #2d4a1e;
  margin-bottom: 8px;
}

#thank-you p {
  font-size: 0.9375rem;
  color: #374151;
  line-height: 1.7;
}
STEP 3

Add the Thank-You HTML

Find the closing </form> tag inside your #community-form section. Add the thank-you <div> right after </form>, still inside .form-wrap:

👉 Add after </form>, before </div> (the closing of .form-wrap): <div id="thank-you">
  <h3>Thank you for contributing!</h3>
  <p>Your recipe and food memory are a gift to this community. Sharing what we know about traditional foods keeps this knowledge alive for the next seven generations.</p>
</div>

Notice that #thank-you has display: none in the CSS. It exists on the page but is invisible. JavaScript will change this to display: block when the form is submitted.

STEP 4

Write the JavaScript

Find the closing </body> tag at the very bottom of your code. Add this just before it:

👉 Add just before </body>: <script>

  var form = document.getElementById('recipe-form');
  var thankYou = document.getElementById('thank-you');

  form.addEventListener('submit', function(e) {
    e.preventDefault();
    form.style.display = 'none';
    thankYou.style.display = 'block';
  });

</script>
STEP 5

Why This Code?

  • document.getElementById('recipe-form'), searches the HTML document for the element with id="recipe-form" and stores a reference to it in the variable form. Now you have a handle on that element.
  • document.getElementById('thank-you'), does the same for the thank-you <div>. Stored in the variable thankYou.
  • form.addEventListener('submit', function(e) { ... }), tells the browser: whenever this form fires a submit event, run the code inside the curly braces. The e in function(e) is the event object, which gives you access to that event.
  • e.preventDefault(), the submit event's default behavior is to send the form data and reload the page. This line cancels that so your code runs instead.
  • form.style.display = 'none', hides the form after submission. The user no longer needs to see it.
  • thankYou.style.display = 'block', reveals the thank-you message. The CSS had it hidden; this one line makes it appear.

Try it in the preview!

After adding the JavaScript, scroll down in your preview to the form section. Fill in any text and click Submit. The form should disappear and the thank-you message should appear in its place. That is your first JavaScript interaction working live.

Stage 5 Complete!

Your page now responds to user input. In Stage 6 you will polish the page: refining spacing, adding a footer, and making the whole thing feel finished.

Code Editor
Live Preview
Relentless Feather © 2026 Relentless Feather. All rights reserved.