diff --git a/css/advanced/Assignment-1/index.html b/css/advanced/Assignment-1/index.html new file mode 100644 index 00000000..e69de29b diff --git a/css/advanced/Assignment-1/style.css b/css/advanced/Assignment-1/style.css new file mode 100644 index 00000000..3e7719f6 --- /dev/null +++ b/css/advanced/Assignment-1/style.css @@ -0,0 +1,69 @@ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: Arial, sans-serif; + line-height: 1.6; +} + +header { + background: #0d0a99; + color: #fff; + padding: 20px; + text-align: center; +} + +nav ul { + list-style: none; + display: flex; + justify-content: center; + gap: 20px; + margin-top: 10px; +} + +nav a { + color: #fff; + text-decoration: none; +} + +main { + display: flex; + padding: 20px; + gap: 20px; +} + +article { + flex: 3; + background: #2c13a8; + color: #fff; + padding: 20px; + border-radius: 8px; +} + +aside { + flex: 1; + background: #4d119b; + color: #fff; + padding: 20px; + border-radius: 8px; +} + +footer { + background: #3f12ba; + color: #fff; + text-align: center; + padding: 15px; + margin-top: 20px; + bottom: auto; +} + +@media (max-width: 768px) { + main { + flex-direction: column; + flex:1; + } +} diff --git a/css/advanced/Assignment-2/animations.html b/css/advanced/Assignment-2/animations.html new file mode 100644 index 00000000..45bcfc50 --- /dev/null +++ b/css/advanced/Assignment-2/animations.html @@ -0,0 +1,60 @@ + + + + + + CSS Animation & Media Queries + + + +
Hello Guys..!
+ + diff --git a/javascript/8-events/Assignment-1/bubbling_delegation.html b/javascript/8-events/Assignment-1/bubbling_delegation.html new file mode 100644 index 00000000..9f815e00 --- /dev/null +++ b/javascript/8-events/Assignment-1/bubbling_delegation.html @@ -0,0 +1,15 @@ + + + + + + Event Delegation & Bubbling + + + +

Event Delegation and Bubbling Example

+
+ + + + diff --git a/javascript/8-events/Assignment-1/script.js b/javascript/8-events/Assignment-1/script.js new file mode 100644 index 00000000..de9664c6 --- /dev/null +++ b/javascript/8-events/Assignment-1/script.js @@ -0,0 +1,35 @@ + +const table = document.getElementById("myTable"); +for (let i = 0; i < 10; i++) { + const row = table.insertRow(); + for (let j = 0; j < 10; j++) { + const cell = row.insertCell(); + cell.textContent = `${i + 1},${j + 1}`; // Display cell position + } +} +table.addEventListener("mouseover", (event) => { + if (event.target.tagName === "TD") { + const cell = event.target; + const row = cell.parentNode; + const colIndex = cell.cellIndex; + + for (let td of row.children) { + td.classList.add("highlight"); + } + + for (let r of table.rows) { + r.cells[colIndex].classList.add("highlight"); + } + } +}); + +table.addEventListener("mouseout", (event) => { + + if (event.target.tagName === "TD") { + for (let row of table.rows) { + for (let cell of row.cells) { + cell.classList.remove("highlight"); + } + } + } +}); diff --git a/javascript/8-events/Assignment-1/style.css b/javascript/8-events/Assignment-1/style.css new file mode 100644 index 00000000..351b46f4 --- /dev/null +++ b/javascript/8-events/Assignment-1/style.css @@ -0,0 +1,16 @@ +table { + border-collapse: collapse; + margin: 20px; +} + +td { + border: 1px solid black; + padding: 10px; + width: 50px; + text-align: center; + cursor: pointer; +} + +.highlight { + background-color: yellow; +} diff --git a/javascript/8-events/Assignment-2/keyboardevents.html b/javascript/8-events/Assignment-2/keyboardevents.html new file mode 100644 index 00000000..9e3abe2d --- /dev/null +++ b/javascript/8-events/Assignment-2/keyboardevents.html @@ -0,0 +1,37 @@ + + + + Keyboard Events Example + + + +

Keyboard Events: Keydown & Keyup

+
KeyDown Events:
+
KeyUp Events:
+ + + + diff --git a/javascript/8-events/Assignment-2/script.js b/javascript/8-events/Assignment-2/script.js new file mode 100644 index 00000000..e4e4e11b --- /dev/null +++ b/javascript/8-events/Assignment-2/script.js @@ -0,0 +1,16 @@ +const keydownDiv = document.getElementById("keydownDiv"); +const keyupDiv = document.getElementById("keyupDiv"); + +let pressedKeys = new Set(); + + +window.addEventListener("keydown", (event) => { + pressedKeys.add(event.key); + const combo = Array.from(pressedKeys).join(" + "); + keydownDiv.textContent = `KeyDown: ${combo}`; +}); + +window.addEventListener("keyup", (event) => { + pressedKeys.delete(event.key); + keyupDiv.textContent = `KeyUp: ${event.key}`; +}); diff --git a/javascript/8-events/Assignment-3/event_propagation.html b/javascript/8-events/Assignment-3/event_propagation.html new file mode 100644 index 00000000..58b29841 --- /dev/null +++ b/javascript/8-events/Assignment-3/event_propagation.html @@ -0,0 +1,23 @@ + + + + + Event Propagation Example + + + +

Event Propagation: Capture, Target, and Bubble

+ +
+ Level 1 +
+ Level 2 +
+ Level 3 (Click Me) +
+
+
+ + + + diff --git a/javascript/8-events/Assignment-3/script.js b/javascript/8-events/Assignment-3/script.js new file mode 100644 index 00000000..0de5b491 --- /dev/null +++ b/javascript/8-events/Assignment-3/script.js @@ -0,0 +1,15 @@ + +const level1 = document.getElementById("level1"); +const level2 = document.getElementById("level2"); +const level3 = document.getElementById("level3"); +level1.addEventListener("click", () => { + alert("Level 1 (Capture Phase)"); +}, true); + +level2.addEventListener("click", () => { + alert("Level 2 (Bubble Phase)"); +}); + +level3.addEventListener("click", () => { + alert("Level 3 (Target Phase)"); +}); diff --git a/javascript/8-events/Assignment-3/style.css b/javascript/8-events/Assignment-3/style.css new file mode 100644 index 00000000..949c45c0 --- /dev/null +++ b/javascript/8-events/Assignment-3/style.css @@ -0,0 +1,20 @@ +#level1, #level2, #level3 { + padding: 40px; + margin: 10px; + border: 2px solid black; + text-align: center; + font-weight: bold; + cursor: pointer; +} + +#level1 { + background-color: #ffd6d6; +} + +#level2 { + background-color: #d6ffd6; +} + +#level3 { + background-color: #d6d6ff; +} diff --git a/javascript/8-events/Assignment-4/prevent_default.html b/javascript/8-events/Assignment-4/prevent_default.html new file mode 100644 index 00000000..297b7732 --- /dev/null +++ b/javascript/8-events/Assignment-4/prevent_default.html @@ -0,0 +1,45 @@ + + + + + + Prevent Default Example + + + + +
+ + + + + + + +
+ +

+ + + + + diff --git a/javascript/8-events/Assignment-4/script.js b/javascript/8-events/Assignment-4/script.js new file mode 100644 index 00000000..7b465666 --- /dev/null +++ b/javascript/8-events/Assignment-4/script.js @@ -0,0 +1,12 @@ +document.getElementById("myForm").addEventListener("submit", function(event) { + const name = document.getElementById("name").value.trim(); + const email = document.getElementById("email").value.trim(); + const message = document.getElementById("message"); + if (name === "" || email === "") { + event.preventDefault(); + message.textContent = "Please fill out all fields before submitting!"; + } else { + message.style.color = "green"; + message.textContent = "Form submitted successfully!"; + } +}); diff --git a/javascript/8-events/Assignment-5/script.js b/javascript/8-events/Assignment-5/script.js new file mode 100644 index 00000000..f975c9ad --- /dev/null +++ b/javascript/8-events/Assignment-5/script.js @@ -0,0 +1,12 @@ + +const parentDiv = document.getElementById("parentDiv"); +const childDiv = document.getElementById("childDiv"); + +parentDiv.addEventListener("click", function() { + alert("Parent div clicked!"); +}); + +childDiv.addEventListener("click", function(event) { + alert("Child div clicked!"); + event.stopPropagation(); +}); diff --git a/javascript/8-events/Assignment-5/stop_propagation.html b/javascript/8-events/Assignment-5/stop_propagation.html new file mode 100644 index 00000000..47347df8 --- /dev/null +++ b/javascript/8-events/Assignment-5/stop_propagation.html @@ -0,0 +1,35 @@ + + + + + + Stop Event Propagation Example + + + + +
+ Parent Div +
+ Child Div (Click Me) +
+
+ + + + diff --git a/javascript/8-events/Assignment-6/form_validations.html b/javascript/8-events/Assignment-6/form_validations.html new file mode 100644 index 00000000..1972e8a7 --- /dev/null +++ b/javascript/8-events/Assignment-6/form_validations.html @@ -0,0 +1,31 @@ + + + + + + Form Validation + + + + +

Registration Form

+ +
+ + + + + + + + + + + + + +
+ + + + diff --git a/javascript/8-events/Assignment-6/script.js b/javascript/8-events/Assignment-6/script.js new file mode 100644 index 00000000..38bb32d7 --- /dev/null +++ b/javascript/8-events/Assignment-6/script.js @@ -0,0 +1,60 @@ +const form = document.getElementById("registerForm"); +const username = document.getElementById("username"); +const email = document.getElementById("email"); +const password = document.getElementById("password"); + +const usernameError = document.getElementById("usernameError"); +const emailError = document.getElementById("emailError"); +const passwordError = document.getElementById("passwordError"); + +username.addEventListener("input", () => { + if (username.value.trim().length < 3) { + usernameError.textContent = "Username must be at least 3 characters"; + username.classList.add("invalid"); + username.classList.remove("valid"); + } else { + usernameError.textContent = ""; + username.classList.add("valid"); + username.classList.remove("invalid"); + } +}); + +email.addEventListener("input", () => { + const emailPattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/; + if (!email.value.match(emailPattern)) { + emailError.textContent = "Please enter a valid email"; + email.classList.add("invalid"); + email.classList.remove("valid"); + } else { + emailError.textContent = ""; + email.classList.add("valid"); + email.classList.remove("invalid"); + } +}); + +password.addEventListener("input", () => { + if (password.value.length < 6) { + passwordError.textContent = "Password must be at least 6 characters"; + password.classList.add("invalid"); + password.classList.remove("valid"); + } else { + passwordError.textContent = ""; + password.classList.add("valid"); + password.classList.remove("invalid"); + } +}); + + +form.addEventListener("submit", (e) => { + e.preventDefault(); + + if ( + username.classList.contains("valid") && + email.classList.contains("valid") && + password.classList.contains("valid") + ) { + alert("Form submitted successfully!"); + } else { + alert("Please fix errors before submitting."); + } +}); diff --git a/javascript/8-events/Assignment-6/style.css b/javascript/8-events/Assignment-6/style.css new file mode 100644 index 00000000..7269e825 --- /dev/null +++ b/javascript/8-events/Assignment-6/style.css @@ -0,0 +1,49 @@ +body { + font-family: Arial; + background-color: #f2f2f2; + padding: 20px; +} + +form { + background: #fff; + padding: 20px; + border-radius: 8px; + width: 300px; +} + +label { + display: block; + margin-top: 10px; + font-weight: bold; +} + +input { + width: 100%; + padding: 8px; + margin-top: 5px; + border: 1px solid #ccc; + border-radius: 4px; +} + +.error { + color: red; + font-size: 12px; +} + +input.valid { + border-color: green; +} + +input.invalid { + border-color: red; +} + +button { + margin-top: 15px; + padding: 10px; + background-color: #007bff; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; +} diff --git a/javascript/8-events/Assignment-7/mutation_observer.html b/javascript/8-events/Assignment-7/mutation_observer.html new file mode 100644 index 00000000..bd534dfb --- /dev/null +++ b/javascript/8-events/Assignment-7/mutation_observer.html @@ -0,0 +1,17 @@ + + + + + + Inline Editing with Mutation Observer + + + +
+ This is editable text. + ✏️ +
+ + + + diff --git a/javascript/8-events/Assignment-7/script.js b/javascript/8-events/Assignment-7/script.js new file mode 100644 index 00000000..da0607b3 --- /dev/null +++ b/javascript/8-events/Assignment-7/script.js @@ -0,0 +1,24 @@ +const editableDiv = document.getElementById("editableDiv"); + +const observer = new MutationObserver((mutations) => { + mutations.forEach((mutation) => { + if (mutation.addedNodes.length > 0) { + mutation.addedNodes.forEach((node) => { + if (node.tagName === "TEXTAREA") { + console.log("Textarea added to DOM ✅"); + node.addEventListener("blur", () => { + const newText = node.value.trim() || "No text entered"; + editableDiv.innerHTML = `${newText} ✏️`; + }); + } + }); + } + }); +}); + +observer.observe(editableDiv, { childList: true }); + +editableDiv.addEventListener("click", () => { + const currentText = document.getElementById("textContent").textContent; + editableDiv.innerHTML = ``; +}); diff --git a/javascript/8-events/Assignment-7/style.css b/javascript/8-events/Assignment-7/style.css new file mode 100644 index 00000000..9d6048a9 --- /dev/null +++ b/javascript/8-events/Assignment-7/style.css @@ -0,0 +1,26 @@ +body { + font-family: Arial, sans-serif; + padding: 30px; +} + +.editable { + display: inline-flex; + align-items: center; + border: 1px solid #ccc; + padding: 10px; + border-radius: 8px; + background-color: #f9f9f9; + cursor: pointer; +} + +.icon { + margin-left: 10px; +} + +textarea { + width: 250px; + height: 60px; + border-radius: 6px; + font-size: 16px; + padding: 6px; +}