+ See the Pen Contact Form by Deliana Escobari (@Sunny-Dee) + on CodePen.
+ + +## Activity 4 + +To complete this activity, you will need to complete the following steps: + +1. Click on the try it yourself! button to open the editor +2. Change the part that says<YOUR EMAIL HERE!> to your personal email if you have one. If you don't, use `email@nuevofoundation.org`
+3. If you do, try to send a test message and see if it works
+4. Add any styling to the form. For example, try changing font or color of the form
+
+Try it yourself!
diff --git a/content/english/web-basics/activity-4.md b/content/english/web-basics/activity-4.md
index 8d8667bdfa..c7ffec03eb 100644
--- a/content/english/web-basics/activity-4.md
+++ b/content/english/web-basics/activity-4.md
@@ -1,29 +1,71 @@
----
-title: "Activity 4 - Try the form and change the style"
-date: 2019-09-03T17:53:41-07:00
-draft: false
-weight: 9
-hidden: true
----
-
-## Adding a Contact Form
-
-Finally, we will add a contact form to let people reach us if they are interested in Benji.
-
-Most browsers do not support sending emails directly from the contact form because it's an easy way for trouble makers to send spam to users. Spam is an irrelevant or inappropriate message sent over the internet. Therefore, to send a form, we will use a free service called [FormSpree](https://formspree.io/). If we want the messages in the contact form to go to our email, we will first need to confirm it with FormSpree. This confirmation method keeps bad actors from just putting down anyone’s email in a contact form and spamming the victim.
-
-- See the Pen Contact Form by Deliana Escobari (@Sunny-Dee) - on CodePen.
- - -## Activity 4 - -To complete this activity, you will need to complete the following steps: - -1. Click on the try it yourself! button to open the editor -2. Change the part that says<YOUR EMAIL HERE!> to your personal email if you have one. If you don't, use `email@nuevofoundation.org`
-3. If you do, try to send a test message and see if it works
-4. Add any styling to the form. For example, try changing font or color of the form
-
-Try it yourself!
+---
+title: "Activity 4 - JavaScript"
+date: 2024-09-16T15:25:51.25-07:00
+draft: true
+weight: 9
+---
+
+
+## Making your webpage interactive with JS
+
+Now that we have elements on our screen and know how to style them with CSS, let's make our website more interesting and interactive. We may want to add animations or buttons that our site visitors can click on. We can do this by adding code logic to our page using JavaScript.
+
+## JavaScript (JS)
+
+JavaScript is a programming language often used to make websites interactive and control their behavior. It allows you to add logic to your page, for example, if you click a button, then something on the page changes in response!
+
+
+
+We'll cover the very basics to get your started.
+
+Similar to CSS, JS files work closely with HTML tags to select different items on the page.
+
+See this example below:
++ See the Pen + Adding JavaScript by Jessie Houghton (@houghj16) + on CodePen. +
+ + +Click on the "HTML" tab on the top left corner to see the HTML code, the "CSS" tab to see the CSS code, and the "JS" tab to see the JS code. + +Remember how we used the `class` attribute or the `id` attribute with CSS to give the corresponding HTML tags a style? We can use that same `id` with JavaScript to select that element. + +You'll notice in the example above, even though we made the info `div` teal in exercise 2, since the JavaScript functiondocument.getElementById("info").style.color = "black"; runs after the styling is applied, it changed the color back to black. Note that this is another way to change the style of an element, although CSS is preferred.
+
+Just like CSS, JS has a syntax (or way of writing) in the JS file so the computer understands what you're asking it to do. You'll use special keywords like `document` and functions like `getElementById` to give the computer instructions. There are too many keywords and functions to introduce now, but an important thing to remember is to end each line with a `;`. Additionally, you can add comments to your code using `//` to help you remember what the code is doing.
+
+With a little practice, JavaScript can enable you to do almost anything you want with your websites such as create games, animate 2D and 3D graphics, keep track of data in a database, and much more. Here are some good resources to learn more.
+
+- w3schools JavaScript and HTML DOM References
+- JavaScript Basics from MDN Web Docs
+
+## How to add an alert button
+
+You might've noticed in the example, we added a new button "Pet Benji" next to our image of Benji. When you click on it, it adds an alert on the screen that says "Thanks for the pets!" and adds a message from Benji to the page. How did we do that?
+
+
+
+- We added a new HTML element with the unique id `"pet-button"` to the HTML ``
+- We added an empty HTML element with the unique id `"message"` to the HTML ``
+- Then, in the JS, we used `document.querySelector("#pet-button")` to find the element with id `"pet-button"`, and added a click event listener that calls the `alert` function with the message `"Thanks for the pets!"` Note that the alert may look different depending on your browser.
+
+
+
+{{% notice tip %}}
+
+Inside the curly brackets `{}` of the function, you can call whatever JavaScript code you'd like! Check out the resource links above to get ideas of what else you can do.
+
+{{% /notice %}}
+
+## Activity 4 - Adding another alert button to your website
+
+Now, it's your turn to try it out! To complete this activity, you will need to complete the following steps:
+
+1. Click on the try it yourself! button to open the editor
+2. Add a new HTML button element to the HTML page with a unique ID. For example, ``
+3. Add the corresponding JS to the JS page to add a click event listener to the button.
+4. Click on the button to see if it works!
+
+Try it yourself!
diff --git a/content/english/web-basics/activity-5.md b/content/english/web-basics/activity-5.md
index a1a644f6ad..5dd1b17c7e 100644
--- a/content/english/web-basics/activity-5.md
+++ b/content/english/web-basics/activity-5.md
@@ -1,5 +1,5 @@
---
-title: "Activity 4 - The final exercise"
+title: "Activity 5 - The final exercise"
date: 2019-09-03T17:53:41-07:00
draft: false
weight: 10
@@ -15,5 +15,6 @@ Using what you've learned, let's try to create a site that describes you! Try an
4. Add an image to your site
5. A list
6. Embed a gif or video
+7. Add a button
Show your style!
diff --git a/content/english/web-basics/media/alert.png b/content/english/web-basics/media/alert.png
new file mode 100644
index 0000000000..722b2f8384
Binary files /dev/null and b/content/english/web-basics/media/alert.png differ
diff --git a/content/english/web-basics/media/clickingButton.png b/content/english/web-basics/media/clickingButton.png
new file mode 100644
index 0000000000..46e6df5048
Binary files /dev/null and b/content/english/web-basics/media/clickingButton.png differ
diff --git a/content/english/web-basics/media/sample-event-listener-code.png b/content/english/web-basics/media/sample-event-listener-code.png
new file mode 100644
index 0000000000..fd90a1725e
Binary files /dev/null and b/content/english/web-basics/media/sample-event-listener-code.png differ