Lekcja 1 - ćwiczenia i zadanie

Lekcja_01/zad.html

@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="pl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>jQuery Lekcja 1</title>
+    <script src="lib/jquery.js"></script>
+    <script>
+        $(document).ready(function () {
+            let events = false
+
+            $("#b1").on("click", function () {
+                if(events) {
+                    $("#d1").off("mouseover")
+                    $("#d1").off("mouseleave")
+
+                    $("#b1").css("background-color", "gray")
+                    $("#tytul").text("obsługa zdarzeń usunięta")
+                } else {
+                    $("#d1").on("mouseover", function () { 
+                        $("#d1").html("<b>text bold</b><br><i>text italic</i>")
+                        $("#d1").css("background-color", "red")
+                    })
+                    $("#d1").on("mouseleave", function () {
+                        $("#d1").empty()
+                        $("#d1").css("background-color", "gray")
+                    })
+                    
+                    $("#b1").css("background-color", "red")
+                    $("#tytul").text("obsługa zdarzeń dodana")
+                }
+                events = !events
+            })
+        })
+    </script>
+    <style>
+        * {
+            font-family: monospace;
+        }
+        body {
+            text-align: center;
+        }
+        #tytul {
+            color: blue;
+        }
+        #b1 {
+            border: none;
+            padding: 1em;
+            background-color: gray;
+            margin: 1em;
+        }
+        #b1:hover {
+            cursor: pointer;
+        }
+        #d1 {
+            width: 400px;
+            height: 400px;
+            margin: 0 auto;
+            background-color: gray;
+            padding: 1em;
+            font-size: 3em;
+            color: white;
+        }
+    </style>
+</head>
+<body>
+    <h1 id="tytul">T: jQuery - zdarzenia</h1><br>
+    <button id="b1">DODAJ / USUŃ</button><br><br><br>
+    <div id="d1"></div>
+</body>
+</html>