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/9-window-storage/Assignment-1/browserinfo.html b/javascript/9-window-storage/Assignment-1/browserinfo.html new file mode 100644 index 00000000..6344dff0 --- /dev/null +++ b/javascript/9-window-storage/Assignment-1/browserinfo.html @@ -0,0 +1,23 @@ + + + + + + Browser Information - Navigation + + + +

🌐 Browser Navigation Example

+ + +
+ + + + + +

+ + + + diff --git a/javascript/9-window-storage/Assignment-1/script.js b/javascript/9-window-storage/Assignment-1/script.js new file mode 100644 index 00000000..bdf120eb --- /dev/null +++ b/javascript/9-window-storage/Assignment-1/script.js @@ -0,0 +1,24 @@ + +document.getElementById("info").innerText = "Current URL: " + window.location.href; + +document.getElementById("goBtn").addEventListener("click", () => { + const url = document.getElementById("urlInput").value.trim(); + if (url) { + + window.location.assign(url); + } else { + alert("Please enter a valid URL!"); + } +}); + +document.getElementById("backBtn").addEventListener("click", () => { + window.history.back(); +}); + +document.getElementById("forwardBtn").addEventListener("click", () => { + window.history.forward(); +}); + +document.getElementById("reloadBtn").addEventListener("click", () => { + window.location.reload(); +}); diff --git a/javascript/9-window-storage/Assignment-1/style.css b/javascript/9-window-storage/Assignment-1/style.css new file mode 100644 index 00000000..77976fbc --- /dev/null +++ b/javascript/9-window-storage/Assignment-1/style.css @@ -0,0 +1,39 @@ +body { + font-family: Arial, sans-serif; + text-align: center; + margin-top: 50px; + background-color: #f9f9f9; +} + +h2 { + color: #333; +} + +input { + padding: 10px; + width: 320px; + border: 1px solid #ccc; + border-radius: 5px; +} + +button { + padding: 8px 15px; + margin: 5px; + cursor: pointer; + border: none; + border-radius: 5px; + background-color: #0078d7; + color: white; + font-size: 15px; + transition: background-color 0.2s; +} + +button:hover { + background-color: #005ea6; +} + +#info { + margin-top: 20px; + font-weight: bold; + color: #555; +} diff --git a/javascript/9-window-storage/Assignment-2/script.js b/javascript/9-window-storage/Assignment-2/script.js new file mode 100644 index 00000000..c56b419d --- /dev/null +++ b/javascript/9-window-storage/Assignment-2/script.js @@ -0,0 +1,20 @@ + +function updateDimensions() { + document.getElementById("innerWidth").textContent = window.innerWidth; + document.getElementById("innerHeight").textContent = window.innerHeight; + document.getElementById("outerWidth").textContent = window.outerWidth; + document.getElementById("outerHeight").textContent = window.outerHeight; + + document.getElementById("screenWidth").textContent = screen.width; + document.getElementById("screenHeight").textContent = screen.height; + document.getElementById("availWidth").textContent = screen.availWidth; + document.getElementById("availHeight").textContent = screen.availHeight; + document.getElementById("colorDepth").textContent = screen.colorDepth; +} + +updateDimensions(); + +window.addEventListener("resize", () => { + updateDimensions(); + console.log("Window resized:", window.innerWidth, "x", window.innerHeight); +}); diff --git a/javascript/9-window-storage/Assignment-2/style.css b/javascript/9-window-storage/Assignment-2/style.css new file mode 100644 index 00000000..4b0a8e0a --- /dev/null +++ b/javascript/9-window-storage/Assignment-2/style.css @@ -0,0 +1,29 @@ +body { + font-family: Arial, sans-serif; + background-color: #f5f7fa; + color: #333; + text-align: center; + margin-top: 50px; +} + +h2 { + color: #2c3e50; +} + +#infoBox { + display: inline-block; + text-align: left; + background-color: #fff; + padding: 20px 30px; + border-radius: 10px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); +} + +p { + margin: 8px 0; + font-size: 16px; +} + +strong { + color: #0078d7; +} diff --git a/javascript/9-window-storage/Assignment-2/window_dimentions.html b/javascript/9-window-storage/Assignment-2/window_dimentions.html new file mode 100644 index 00000000..6a30a226 --- /dev/null +++ b/javascript/9-window-storage/Assignment-2/window_dimentions.html @@ -0,0 +1,26 @@ + + + + + + Window Dimensions + + + +

🖥️ Window & Screen Dimensions

+ +
+

Inner Width: px

+

Inner Height: px

+

Outer Width: px

+

Outer Height: px

+

Screen Width: px

+

Screen Height: px

+

Available Screen Width: px

+

Available Screen Height: px

+

Color Depth:

+
+ + + + diff --git a/javascript/9-window-storage/Assignment-3/script.js b/javascript/9-window-storage/Assignment-3/script.js new file mode 100644 index 00000000..9aa3b8cc --- /dev/null +++ b/javascript/9-window-storage/Assignment-3/script.js @@ -0,0 +1,13 @@ +function scrollToPosition() { + const x = parseInt(document.getElementById("xInput").value) || 0; + const y = parseInt(document.getElementById("yInput").value) || 0; + window.scrollTo(x, y); +} + +function scrollUp() { + window.scrollBy(0, -10); +} + +function scrollDown() { + window.scrollBy(0, 10); +} diff --git a/javascript/9-window-storage/Assignment-3/scroll.html b/javascript/9-window-storage/Assignment-3/scroll.html new file mode 100644 index 00000000..639252d3 --- /dev/null +++ b/javascript/9-window-storage/Assignment-3/scroll.html @@ -0,0 +1,35 @@ + + + + + + Scroll Example + + + +

Scroll to Position

+ +
+ + + + + + + +
+ +
+ + +
+ +
+

Scroll this page to test the scrolling feature!

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit...

+

You’ve reached the bottom!

+
+ + + + diff --git a/javascript/9-window-storage/Assignment-3/style.css b/javascript/9-window-storage/Assignment-3/style.css new file mode 100644 index 00000000..dad60a82 --- /dev/null +++ b/javascript/9-window-storage/Assignment-3/style.css @@ -0,0 +1,34 @@ +body { + font-family: Arial, sans-serif; + padding: 20px; + line-height: 1.6; +} + +.controls, .scroll-buttons { + margin-bottom: 20px; +} + +input { + width: 80px; + margin: 0 10px; + padding: 5px; +} + +button { + margin: 5px; + padding: 8px 12px; + cursor: pointer; + border: none; + background-color: #0078d7; + color: white; + border-radius: 5px; + transition: background-color 0.3s; +} + +button:hover { + background-color: #005fa3; +} + +.content { + height: 2500px; /* So that scrolling works */ +} diff --git a/javascript/9-window-storage/Assignment-4/script.js b/javascript/9-window-storage/Assignment-4/script.js new file mode 100644 index 00000000..009d13c2 --- /dev/null +++ b/javascript/9-window-storage/Assignment-4/script.js @@ -0,0 +1,59 @@ + +let countdown; +let countdownTime = 0; + +function startCountdown() { + const input = document.getElementById("countdownInput").value; + countdownTime = parseInt(input); + + if (isNaN(countdownTime) || countdownTime <= 0) { + alert("Please enter a valid number of seconds!"); + return; + } + + clearInterval(countdown); + + countdown = setInterval(() => { + document.getElementById("countdownDisplay").innerHTML = `Time left: ${countdownTime}s`; + + if (countdownTime <= 0) { + clearInterval(countdown); + document.getElementById("countdownDisplay").innerHTML = "⏰ Time’s up!"; + } else { + countdownTime--; + } + }, 1000); +} + +function resetCountdown() { + clearInterval(countdown); + countdownTime = 0; + document.getElementById("countdownDisplay").innerText = "Time left: 0s"; + document.getElementById("countdownInput").value = ""; +} + +let stopwatch; +let stopwatchTime = 0; +let isRunning = false; + +function startStopwatch() { + if (isRunning) return; + isRunning = true; + + stopwatch = setInterval(() => { + stopwatchTime++; + document.getElementById("stopwatchDisplay").innerText = `Time: ${stopwatchTime}s`; + }, 1000); +} + +function stopStopwatch() { + clearInterval(stopwatch); + isRunning = false; +} + +function resetStopwatch() { + clearInterval(stopwatch); + stopwatchTime = 0; + isRunning = false; + document.getElementById("stopwatchDisplay").innerText = "Time: 0s"; +} diff --git a/javascript/9-window-storage/Assignment-4/stopwatch.html b/javascript/9-window-storage/Assignment-4/stopwatch.html new file mode 100644 index 00000000..0f8c325c --- /dev/null +++ b/javascript/9-window-storage/Assignment-4/stopwatch.html @@ -0,0 +1,30 @@ + + + + + + Timers (Countdown & Stopwatch) + + + +

⏳ Timers Example

+
+

Countdown Timer

+ + + +

Time left: 0s

+
+ +
+
+

Stopwatch

+

Time: 0s

+ + + +
+ + + + diff --git a/javascript/9-window-storage/Assignment-4/style.css b/javascript/9-window-storage/Assignment-4/style.css new file mode 100644 index 00000000..3a84c80b --- /dev/null +++ b/javascript/9-window-storage/Assignment-4/style.css @@ -0,0 +1,44 @@ +body { + font-family: Arial, sans-serif; + padding: 20px; + background-color: #f3f6fb; +} + +h2 { + text-align: center; +} + +.timer-section { + background-color: white; + padding: 20px; + border-radius: 10px; + box-shadow: 0 0 10px rgba(0,0,0,0.1); + margin-bottom: 30px; + text-align: center; +} + +input { + padding: 5px; + width: 150px; + margin-right: 10px; +} + +button { + padding: 8px 15px; + margin: 5px; + border: none; + background-color: #0078d7; + color: white; + border-radius: 5px; + cursor: pointer; + transition: 0.3s; +} + +button:hover { + background-color: #005fa3; +} + +p { + font-size: 18px; + font-weight: bold; +} diff --git a/javascript/9-window-storage/Assignment-5/cookie.html b/javascript/9-window-storage/Assignment-5/cookie.html new file mode 100644 index 00000000..1d79ad5f --- /dev/null +++ b/javascript/9-window-storage/Assignment-5/cookie.html @@ -0,0 +1,34 @@ + + + + + + Cookies Example + + + +

Cookie Manager

+ +
+ + + + + + + + + +
+ + + +
+ +

Current Cookies:

+ 
(No cookies yet)
+
+ + + + diff --git a/javascript/9-window-storage/Assignment-5/script.js b/javascript/9-window-storage/Assignment-5/script.js new file mode 100644 index 00000000..3d7aeef7 --- /dev/null +++ b/javascript/9-window-storage/Assignment-5/script.js @@ -0,0 +1,57 @@ + +function setCookie(name, value, days) { + let date = new Date(); + date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000); + let expires = "expires=" + date.toUTCString(); + document.cookie = `${name}=${value}; ${expires}; path=/`; + alert(`Cookie '${name}' set successfully!`); +} + +function getCookies() { + let cookieObj = {}; + let allCookies = document.cookie.split("; "); + + allCookies.forEach(cookie => { + let [key, val] = cookie.split("="); + if (key && val) cookieObj[key] = val; + }); + + return cookieObj; +} + +function deleteCookie(name) { + document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`; + alert(`Cookie '${name}' deleted.`); +} + +function setCookieHandler() { + const name = document.getElementById("cookieName").value.trim(); + const value = document.getElementById("cookieValue").value.trim(); + const days = parseInt(document.getElementById("expireDays").value) || 7; + + if (!name || !value) { + alert("Please enter both name and value!"); + return; + } + + setCookie(name, value, days); + readCookiesHandler(); +} + +function readCookiesHandler() { + const display = document.getElementById("cookieDisplay"); + const cookies = getCookies(); + display.textContent = Object.keys(cookies).length + ? JSON.stringify(cookies, null, 2) + : "(No cookies found)"; +} + +function deleteCookieHandler() { + const name = document.getElementById("cookieName").value.trim(); + if (!name) { + alert("Please enter cookie name to delete!"); + return; + } + deleteCookie(name); + readCookiesHandler(); +} diff --git a/javascript/9-window-storage/Assignment-5/style.css b/javascript/9-window-storage/Assignment-5/style.css new file mode 100644 index 00000000..3037a625 --- /dev/null +++ b/javascript/9-window-storage/Assignment-5/style.css @@ -0,0 +1,63 @@ +body { + font-family: Arial, sans-serif; + background-color: #fafafa; + text-align: center; + padding: 40px; +} + +h2 { + color: #2c3e50; + margin-bottom: 20px; +} + +.container { + display: inline-block; + background: #fff; + padding: 25px 40px; + border-radius: 10px; + box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); + text-align: left; +} + +label { + display: block; + font-weight: bold; + margin-top: 10px; + color: #34495e; +} + +input { + width: 100%; + padding: 6px; + margin: 5px 0 10px; + border: 1px solid #ccc; + border-radius: 5px; +} + +.btn-group { + text-align: center; + margin-top: 10px; +} + +button { + background-color: #0078d7; + color: white; + border: none; + border-radius: 5px; + padding: 8px 15px; + margin: 5px; + cursor: pointer; + transition: 0.2s; +} + +button:hover { + background-color: #005fa3; +} + +pre { + background: #f0f4f8; + padding: 10px; + border-radius: 8px; + font-size: 14px; + min-height: 60px; +} diff --git a/javascript/9-window-storage/Assignment-6/iframe.html b/javascript/9-window-storage/Assignment-6/iframe.html new file mode 100644 index 00000000..a0acf8b8 --- /dev/null +++ b/javascript/9-window-storage/Assignment-6/iframe.html @@ -0,0 +1,29 @@ + + + + + + Iframe Window + + + +

Iframe Window

+ + + + +

Message received from Parent:

+
(No messages yet)
+ + + + diff --git a/javascript/9-window-storage/Assignment-6/parent.html b/javascript/9-window-storage/Assignment-6/parent.html new file mode 100644 index 00000000..10421ba2 --- /dev/null +++ b/javascript/9-window-storage/Assignment-6/parent.html @@ -0,0 +1,24 @@ + + + + + + Window Messaging - Parent + + + +

Parent Window

+ + + + +

Message received from Iframe:

+
(No messages yet)
+ +
+ + + + + + diff --git a/javascript/9-window-storage/Assignment-6/script.js b/javascript/9-window-storage/Assignment-6/script.js new file mode 100644 index 00000000..8bac3124 --- /dev/null +++ b/javascript/9-window-storage/Assignment-6/script.js @@ -0,0 +1,10 @@ + +const iframe = document.getElementById("childFrame"); +document.getElementById("sendToIframe").addEventListener("click", () => { + const message = document.getElementById("parentMsg").value.trim(); + iframe.contentWindow.postMessage(message || "No message", "*"); +}); +window.onmessage = (event) => { + document.getElementById("receivedFromIframe").textContent = + "From Iframe: " + event.data; +}; diff --git a/javascript/9-window-storage/Assignment-6/style.css b/javascript/9-window-storage/Assignment-6/style.css new file mode 100644 index 00000000..d60ff717 --- /dev/null +++ b/javascript/9-window-storage/Assignment-6/style.css @@ -0,0 +1,23 @@ +body { + font-family: Arial, sans-serif; + text-align: center; + margin: 20px; +} + +input { + padding: 8px; + width: 250px; +} + +button { + padding: 8px 15px; + margin-left: 5px; + cursor: pointer; +} + +iframe { + width: 90%; + height: 250px; + border: 2px solid black; + margin-top: 20px; +} diff --git a/javascript/9-window-storage/Assignment-7/iframe.html b/javascript/9-window-storage/Assignment-7/iframe.html new file mode 100644 index 00000000..436be4af --- /dev/null +++ b/javascript/9-window-storage/Assignment-7/iframe.html @@ -0,0 +1,34 @@ + + + + + + Parent Iframe + + + +

Iframe Window

+ + +

Message from Main: None

+ + + + + + diff --git a/javascript/9-window-storage/Assignment-7/inneriframe.html b/javascript/9-window-storage/Assignment-7/inneriframe.html new file mode 100644 index 00000000..e69de29b diff --git a/javascript/9-window-storage/Assignment-7/window_relationships.html b/javascript/9-window-storage/Assignment-7/window_relationships.html new file mode 100644 index 00000000..9fbc43dc --- /dev/null +++ b/javascript/9-window-storage/Assignment-7/window_relationships.html @@ -0,0 +1,32 @@ + + + + + + Main Window + + + +

Main Window (Top)

+ + +

Message from iframe: None

+ + + + + + diff --git a/javascript/9-window-storage/Assignment-8/local_session.html b/javascript/9-window-storage/Assignment-8/local_session.html new file mode 100644 index 00000000..49a5487f --- /dev/null +++ b/javascript/9-window-storage/Assignment-8/local_session.html @@ -0,0 +1,25 @@ + + + + + + Storage Example + + + +

🧠 LocalStorage and SessionStorage Example

+ +
+ + + + + +
+ +

Stored Data:

+
+ + + + diff --git a/javascript/9-window-storage/Assignment-8/script.js b/javascript/9-window-storage/Assignment-8/script.js new file mode 100644 index 00000000..b7fb8026 --- /dev/null +++ b/javascript/9-window-storage/Assignment-8/script.js @@ -0,0 +1,42 @@ + +const nameInput = document.getElementById("name"); +const emailInput = document.getElementById("email"); +const saveBtn = document.getElementById("saveBtn"); +const output = document.getElementById("output"); + +function displayData() { + const localName = localStorage.getItem("name") || "No data"; + const localEmail = localStorage.getItem("email") || "No data"; + const sessionName = sessionStorage.getItem("name") || "No data"; + const sessionEmail = sessionStorage.getItem("email") || "No data"; + + output.innerHTML = ` +

Local Storage:

+

Name: ${localName}

+

Email: ${localEmail}

+
+

Session Storage:

+

Name: ${sessionName}

+

Email: ${sessionEmail}

+ `; +} + +saveBtn.addEventListener("click", () => { + const name = nameInput.value.trim(); + const email = emailInput.value.trim(); + + if (!name || !email) { + alert("Please enter both name and email!"); + return; + } + localStorage.setItem("name", name); + localStorage.setItem("email", email); + + sessionStorage.setItem("name", name); + sessionStorage.setItem("email", email); + + alert("Data saved successfully!"); + displayData(); +}); + +window.addEventListener("load", displayData); diff --git a/javascript/9-window-storage/Assignment-8/style.css b/javascript/9-window-storage/Assignment-8/style.css new file mode 100644 index 00000000..110ac515 --- /dev/null +++ b/javascript/9-window-storage/Assignment-8/style.css @@ -0,0 +1,34 @@ +body { + font-family: Arial, sans-serif; + padding: 20px; + background: #f5f5f5; +} + +.container { + margin-bottom: 20px; +} + +input { + margin: 5px; + padding: 8px; +} + +button { + padding: 8px 12px; + background: #4caf50; + color: white; + border: none; + cursor: pointer; + border-radius: 6px; +} + +button:hover { + background: #45a049; +} + +#output { + background: white; + padding: 15px; + border-radius: 8px; + box-shadow: 0 0 5px rgba(0,0,0,0.2); +} diff --git a/javascript/9-window-storage/Assignment-9/browser_control.html b/javascript/9-window-storage/Assignment-9/browser_control.html new file mode 100644 index 00000000..c974c301 --- /dev/null +++ b/javascript/9-window-storage/Assignment-9/browser_control.html @@ -0,0 +1,20 @@ + + + + + + Browser Control + + + +

Browser Control Using JavaScript

+ +
+ + + +
+ + + + diff --git a/javascript/9-window-storage/Assignment-9/script.js b/javascript/9-window-storage/Assignment-9/script.js new file mode 100644 index 00000000..3ca15697 --- /dev/null +++ b/javascript/9-window-storage/Assignment-9/script.js @@ -0,0 +1,35 @@ +let newWindow; + +document.getElementById("openBtn").addEventListener("click", () => { + + newWindow = window.open( + "https://www.example.com", + "_blank", + "width=400,height=300" + ); + + if (newWindow) { + alert("New window opened!"); + } else { + alert("Pop-up blocked! Allow pop-ups to open window."); + } +}); + + +document.getElementById("resizeBtn").addEventListener("click", () => { + if (newWindow && !newWindow.closed) { + newWindow.resizeTo(800, 600); + newWindow.focus(); + } else { + alert("Window not open!"); + } +}); + +document.getElementById("closeBtn").addEventListener("click", () => { + if (newWindow && !newWindow.closed) { + newWindow.close(); + alert("Window closed!"); + } else { + alert("No window to close!"); + } +}); diff --git a/javascript/9-window-storage/Assignment-9/style.css b/javascript/9-window-storage/Assignment-9/style.css new file mode 100644 index 00000000..3031f04a --- /dev/null +++ b/javascript/9-window-storage/Assignment-9/style.css @@ -0,0 +1,29 @@ +body { + font-family: Arial, sans-serif; + text-align: center; + padding: 50px; + background-color: #f4f6f9; +} + +h2 { + color: #333; +} + +.buttons { + margin-top: 30px; +} + +button { + margin: 10px; + padding: 10px 20px; + font-size: 16px; + cursor: pointer; + border: none; + background-color: #007bff; + color: white; + border-radius: 5px; +} + +button:hover { + background-color: #0056b3; +}