Lekcja 1 - ćwiczenia i zadanie

.gitignore

@@ -0,0 +1 @@
+.DS_Store

Lekcja_01/cwA.html

@@ -0,0 +1,32 @@
+<!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 size = 100;
+
+            $("#b1").on("click", function() {
+                let enlarge = confirm("Shall I enlarge, sir?")
+                size = enlarge ? size*2 : size/3
+                $("#d1").css("width", `${size}px`)
+                $("#d1").css("height", `${size}px`)
+            })
+        })
+    </script>
+    <style>
+        #d1 {
+            background-color: green;
+            width: 100px;
+            height: 100px;
+        }
+    </style>
+</head>
+<body>
+    <button id="b1">Zmiana rozmiaru</button><br>
+    <div id="d1"></div>
+</body>
+</html>

Lekcja_01/cwB.html

@@ -0,0 +1,30 @@
+<!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 left = true
+            
+            $("#d1").on("click", function() {
+                left ? $("#d1").css("float", "right") : $("#d1").css("float", "left")
+                left = !left
+            })
+        })
+    </script>
+    <style>
+        #d1 {
+            width: 100px;
+            height: 100px;
+            background-color: blue;
+            float: left;
+        }
+    </style>
+</head>
+<body>
+    <div id="d1"></div>
+</body>
+</html>

Lekcja_01/cwC.html

@@ -0,0 +1,35 @@
+<!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 movetoright = true
+            let top = 0
+            let left = 0
+
+            $("#d1").on("click", function () {
+                movetoright ? left += 50 : top += 50
+                movetoright ? $("#d1").css("left", `${left}px`) : $("#d1").css("top", `${top}px`)
+                movetoright = !movetoright
+            })
+        })
+    </script>
+    <style>
+        #d1 {
+            position: absolute;
+            top: 0px;
+            left: 0px;
+            width: 100px;
+            height: 100px;
+            background-color: cornflowerblue;
+        }
+    </style>
+</head>
+<body>
+    <div id="d1"></div>
+</body>
+</html>

Lekcja_01/cwD.html

@@ -0,0 +1,46 @@
+<!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 size = 100;
+            let counter = 0;
+
+            $("#d1").on("mouseover", function () {
+                counter++
+                $("#d1").text(counter)
+                if(counter == 5) {
+                    size *= 2
+                    $("#d1").css("width", `${size}px`)
+                    $("#d1").css("height", `${size}px`)
+                    counter = 0
+                }
+            })
+            $("#d1").on("mouseleave", function () {
+                $("#d1").text("")
+            })
+        })
+    </script>
+    <style>
+        body {
+            background-color: skyblue;
+        }
+        #d1 {
+            width: 100px;
+            height: 100px;
+            background-color: azure;
+            color: seagreen;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+    </style>
+</head>
+<body>
+    <div id="d1"></div>
+</body>
+</html>

Lekcja_01/cwE.html

@@ -0,0 +1,34 @@
+<!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 counter = 0
+
+            $("#d1").on("click", function () {
+                ++counter % 2 == 0 ? $("#d1").css("background-color", "green") : $("#d1").css("background-color", "red")
+                $("#d1").text(counter)                
+            })
+        })
+    </script>
+    <style>
+        #d1 {
+            width: 100px;
+            height: 100px;
+            background-color: green;
+            color: azure;
+            font-size: 2em;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+    </style>
+</head>
+<body>
+    <div id="d1">0</div>
+</body>
+</html>

Lekcja_01/index.html

@@ -0,0 +1,17 @@
+<!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 () {
+            console.log("Strona się załadowała")
+        })
+    </script>
+</head>
+<body>
+    test
+</body>
+</html>

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>