Add script that toggles class of header - task 4

wendymunyasi · Oct 26, 2022 · af1a943 · af1a943
1 parent 94ebb55
commit af1a943
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 0 deletions.
diff --git a/0x15-javascript-web_jquery/4-main.html b/0x15-javascript-web_jquery/4-main.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <title>Holberton School</title>
+  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
+  <style>
+    .red {
+      color: #FF0000;
+    }
+
+    .green {
+      color: #00FF00;
+    }
+  </style>
+</head>
+
+<body>
+  <header class="green">
+    First HTML page
+  </header>
+  <div id="toggle_header">Toggle header</div>
+  <footer>
+    Holberton School - 2017
+  </footer>
+  <script type="text/javascript" src="4-script.js"></script>
+</body>
+
+</html>
diff --git a/0x15-javascript-web_jquery/4-script.js b/0x15-javascript-web_jquery/4-script.js
@@ -0,0 +1,6 @@
+// script that toggles the class of the <header> element when the user
+// clicks on the tag DIV#toggle_header
+const $ = window.$;
+$('#toggle_header').bind('click', function () {
+  $('header').toggleClass('green red');
+});