Add click handler for image

Author: Argenis Contreras

first-website/index.html

@@ -49,5 +49,7 @@ <h1 style="text-align: center;">Mozzila is cool </h1>
 <p class="quote">"JavaScript is the language of web browsers" - John Doe</p>
 
 <p>Sed scelerisque commodo odio, ut consectetur arcu sodales in. Curabitur vitae rhoncus arcu. Mauris hendrerit rhoncus diam sit amet hendrerit. Suspendisse potenti. Aenean semper rhoncus mi, non semper urna porta nec. Quisque condimentum est et ultricies aliquam. Etiam et eros in dolor tempus maximus eu id turpis. Aliquam ac leo sed ligula tincidunt vulputate. Suspendisse sagittis et mauris in euismod. Integer suscipit sapien sit amet nunc finibus, sed faucibus dui dictum. Phasellus ac velit nisi.</p>
+
+<script src="scripts/main.js?v=2"></script>
   </body>
 </html>

first-website/scripts/main.js

@@ -0,0 +1,20 @@
+function sayOuch() {
+  const message = "Ouch! Stop poking me!";
+
+  // Visible + debuggable feedback (some embedded previews can block alert popups).
+  console.log(message);
+
+  const heading = document.querySelector("h1");
+  if (heading) {
+    heading.textContent = message;
+  }
+
+  alert(message);
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+  const foxImage = document.querySelector("img");
+  if (foxImage) {
+    foxImage.onclick = sayOuch;
+  }
+});