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/4-control-structures-loops/Assignment-1/conditions.html b/javascript/4-control-structures-loops/Assignment-1/conditions.html new file mode 100644 index 00000000..ae664095 --- /dev/null +++ b/javascript/4-control-structures-loops/Assignment-1/conditions.html @@ -0,0 +1,28 @@ + + + + + + Grading System Assignment + + + + +
+

Grading System

+ +
+ + +
+ +
+ +
+ +
Result will appear here...
+
+ + + + diff --git a/javascript/4-control-structures-loops/Assignment-1/script.js b/javascript/4-control-structures-loops/Assignment-1/script.js new file mode 100644 index 00000000..8f6efb06 --- /dev/null +++ b/javascript/4-control-structures-loops/Assignment-1/script.js @@ -0,0 +1,20 @@ +function calculateGrade() { + let marks = Number(document.getElementById("marks").value); + let grade = ""; + + + if (marks >= 90) { + grade = "A"; + } else if (marks >= 75 && marks <= 89) { + grade = "B"; + } else if (marks >= 50 && marks <= 74) { + grade = "C"; + } else if (marks < 50) { + grade = "F"; + } else { + grade = "Invalid Input"; + } + + + document.getElementById("result").innerHTML = `Grade: ${grade}`; +} diff --git a/javascript/4-control-structures-loops/Assignment-1/style.css b/javascript/4-control-structures-loops/Assignment-1/style.css new file mode 100644 index 00000000..8d383b01 --- /dev/null +++ b/javascript/4-control-structures-loops/Assignment-1/style.css @@ -0,0 +1,63 @@ +body { + font-family: "Segoe UI", Arial, sans-serif; + background: #f8f9fa; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.container { + background: #fff; + padding: 25px 30px; + border-radius: 15px; + box-shadow: 0 0 10px rgba(0,0,0,0.2); + width: 350px; + text-align: center; +} + +h2 { + color: #ff5722; + margin-bottom: 20px; +} + +.row { + margin-bottom: 15px; +} + +label { + display: block; + margin-bottom: 8px; + font-weight: bold; +} + +input { + padding: 8px; + width: 80%; + border: 1px solid #ccc; + border-radius: 5px; +} + +button { + background: linear-gradient(90deg, #ff5722, #ff007f); + border: none; + color: white; + padding: 10px 15px; + border-radius: 8px; + font-weight: bold; + cursor: pointer; + width: 60%; +} + +button:hover { + opacity: 0.85; +} + +#result { + margin-top: 20px; + background: #f0f0f0; + padding: 10px; + border-radius: 8px; + font-weight: bold; + color: #333; +} diff --git a/javascript/4-control-structures-loops/Assignment-10/arraysum.html b/javascript/4-control-structures-loops/Assignment-10/arraysum.html new file mode 100644 index 00000000..9f9d62ad --- /dev/null +++ b/javascript/4-control-structures-loops/Assignment-10/arraysum.html @@ -0,0 +1,30 @@ + + + + + + Array Sum and Average + + + + +
+

Array Sum & Average Calculator

+ +
+ + +
+ +
+ +
+ +
+ Results will appear here... +
+
+ + + + diff --git a/javascript/4-control-structures-loops/Assignment-10/script.js b/javascript/4-control-structures-loops/Assignment-10/script.js new file mode 100644 index 00000000..931e9b90 --- /dev/null +++ b/javascript/4-control-structures-loops/Assignment-10/script.js @@ -0,0 +1,30 @@ +function calculateArray() { + const input = document.getElementById("numbers").value.trim(); + const result = document.getElementById("result"); + + if (input === "") { + result.innerHTML = "⚠️ Please enter some numbers separated by commas!"; + return; + } + + const numArray = input.split(",").map(item => Number(item.trim())); + + if (numArray.some(isNaN)) { + result.innerHTML = "⚠️ Please enter only valid numbers separated by commas!"; + return; + } + + let sum = 0; + + for (let num of numArray) { + sum += num; + } + + const average = sum / numArray.length; + + result.innerHTML = ` + ✅ Entered Numbers: [${numArray.join(", ")}]
+ ➕ Sum: ${sum}
+ ➗ Average: ${average.toFixed(2)} + `; +} diff --git a/javascript/4-control-structures-loops/Assignment-10/style.css b/javascript/4-control-structures-loops/Assignment-10/style.css new file mode 100644 index 00000000..84d33bb4 --- /dev/null +++ b/javascript/4-control-structures-loops/Assignment-10/style.css @@ -0,0 +1,65 @@ +body { + font-family: "Poppins", sans-serif; + background: #f7f9fb; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.container { + background: #fff; + padding: 30px; + border-radius: 15px; + box-shadow: 0 0 10px rgba(0,0,0,0.2); + width: 400px; + text-align: center; +} + +h2 { + color: #ff5722; + margin-bottom: 20px; +} + +.row { + margin-bottom: 15px; +} + +label { + display: block; + margin-bottom: 8px; + font-weight: bold; +} + +input { + padding: 8px; + width: 80%; + border: 1px solid #ccc; + border-radius: 5px; +} + +button { + background: linear-gradient(90deg, #ff5722, #ff007f); + border: none; + color: white; + padding: 10px 15px; + border-radius: 8px; + font-weight: bold; + cursor: pointer; + width: 60%; + transition: 0.2s ease; +} + +button:hover { + opacity: 0.9; + transform: scale(1.05); +} + +#result { + margin-top: 20px; + background: #f0f0f0; + padding: 10px; + border-radius: 8px; + font-weight: bold; + line-height: 1.8; +} diff --git a/javascript/4-control-structures-loops/Assignment-11/charfreq.html b/javascript/4-control-structures-loops/Assignment-11/charfreq.html new file mode 100644 index 00000000..d1286022 --- /dev/null +++ b/javascript/4-control-structures-loops/Assignment-11/charfreq.html @@ -0,0 +1,30 @@ + + + + + + Character Frequency Counter + + + + +
+

Character Frequency Counter

+ +
+ + +
+ +
+ +
+ +
+ Result will appear here... +
+
+ + + +< diff --git a/javascript/4-control-structures-loops/Assignment-11/script.js b/javascript/4-control-structures-loops/Assignment-11/script.js new file mode 100644 index 00000000..422ce6c3 --- /dev/null +++ b/javascript/4-control-structures-loops/Assignment-11/script.js @@ -0,0 +1,24 @@ +function countCharacters() { + const text = document.getElementById("textInput").value; + const resultDiv = document.getElementById("result"); + + if (text.trim() === "") { + resultDiv.innerHTML = "⚠️ Please enter a string!"; + return; + } + + const frequency = {}; + + for (let index in text) { + let char = text[index]; + frequency[char] = (frequency[char] || 0) + 1; + } + + let output = `

Character Frequency:

`; + + resultDiv.innerHTML = output; +} diff --git a/javascript/4-control-structures-loops/Assignment-11/style.css b/javascript/4-control-structures-loops/Assignment-11/style.css new file mode 100644 index 00000000..1c1fe041 --- /dev/null +++ b/javascript/4-control-structures-loops/Assignment-11/style.css @@ -0,0 +1,67 @@ +body { + font-family: "Poppins", sans-serif; + background: #f7f9fb; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.container { + background: #fff; + padding: 30px; + border-radius: 15px; + box-shadow: 0 0 10px rgba(0,0,0,0.2); + width: 420px; + text-align: center; +} + +h2 { + color: #ff5722; + margin-bottom: 20px; +} + +.row { + margin-bottom: 15px; +} + +label { + display: block; + margin-bottom: 8px; + font-weight: bold; +} + +input { + padding: 8px; + width: 80%; + border: 1px solid #ccc; + border-radius: 5px; +} + +button { + background: linear-gradient(90deg, #ff5722, #ff007f); + border: none; + color: white; + padding: 10px 15px; + border-radius: 8px; + font-weight: bold; + cursor: pointer; + width: 60%; + transition: 0.2s ease; +} + +button:hover { + opacity: 0.9; + transform: scale(1.05); +} + +#result { + margin-top: 20px; + background: #f0f0f0; + padding: 10px; + border-radius: 8px; + font-weight: bold; + text-align: left; + line-height: 1.8; + word-wrap: break-word; +} diff --git a/javascript/4-control-structures-loops/Assignment-12/prime.html b/javascript/4-control-structures-loops/Assignment-12/prime.html new file mode 100644 index 00000000..6b6fc56d --- /dev/null +++ b/javascript/4-control-structures-loops/Assignment-12/prime.html @@ -0,0 +1,33 @@ + + + + + + Prime Numbers Finder + + + + +
+

Prime Numbers Finder

+ +
+ + +
+ +
+ + +
+ +
+ +
+ +
Result will appear here...
+
+ + + + diff --git a/javascript/4-control-structures-loops/Assignment-12/script.js b/javascript/4-control-structures-loops/Assignment-12/script.js new file mode 100644 index 00000000..e1f7f8a6 --- /dev/null +++ b/javascript/4-control-structures-loops/Assignment-12/script.js @@ -0,0 +1,34 @@ +function findPrimes() { + const start = parseInt(document.getElementById("start").value); + const end = parseInt(document.getElementById("end").value); + const resultDiv = document.getElementById("result"); + + if (isNaN(start) || isNaN(end) || start < 2 || end < 2 || start > end) { + resultDiv.innerHTML = "⚠️ Please enter a valid range (start >= 2 and start ≤ end)"; + return; + } + + let primes = []; + + + for (let num = start; num <= end; num++) { + let isPrime = true; + + for (let i = 2; i < num; i++) { + if (num % i === 0) { + isPrime = false; + break; + } + } + + if (isPrime) { + primes.push(num); + } + } + + if (primes.length > 0) { + resultDiv.innerHTML = `

Prime Numbers between ${start} and ${end}:

${primes.join(", ")}`; + } else { + resultDiv.innerHTML = `No prime numbers found in the range ${start} to ${end}.`; + } +} diff --git a/javascript/4-control-structures-loops/Assignment-12/style.css b/javascript/4-control-structures-loops/Assignment-12/style.css new file mode 100644 index 00000000..1c1fe041 --- /dev/null +++ b/javascript/4-control-structures-loops/Assignment-12/style.css @@ -0,0 +1,67 @@ +body { + font-family: "Poppins", sans-serif; + background: #f7f9fb; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.container { + background: #fff; + padding: 30px; + border-radius: 15px; + box-shadow: 0 0 10px rgba(0,0,0,0.2); + width: 420px; + text-align: center; +} + +h2 { + color: #ff5722; + margin-bottom: 20px; +} + +.row { + margin-bottom: 15px; +} + +label { + display: block; + margin-bottom: 8px; + font-weight: bold; +} + +input { + padding: 8px; + width: 80%; + border: 1px solid #ccc; + border-radius: 5px; +} + +button { + background: linear-gradient(90deg, #ff5722, #ff007f); + border: none; + color: white; + padding: 10px 15px; + border-radius: 8px; + font-weight: bold; + cursor: pointer; + width: 60%; + transition: 0.2s ease; +} + +button:hover { + opacity: 0.9; + transform: scale(1.05); +} + +#result { + margin-top: 20px; + background: #f0f0f0; + padding: 10px; + border-radius: 8px; + font-weight: bold; + text-align: left; + line-height: 1.8; + word-wrap: break-word; +} diff --git a/javascript/4-control-structures-loops/Assignment-13/pyramid.html b/javascript/4-control-structures-loops/Assignment-13/pyramid.html new file mode 100644 index 00000000..2ec3dbc4 --- /dev/null +++ b/javascript/4-control-structures-loops/Assignment-13/pyramid.html @@ -0,0 +1,28 @@ + + + + + + Pyramid Pattern + + + + +
+

Pyramid Pattern Generator

+ +
+ + +
+ +
+ +
+ + 
Pattern will appear here...
+
+ + + + diff --git a/javascript/4-control-structures-loops/Assignment-13/script.js b/javascript/4-control-structures-loops/Assignment-13/script.js new file mode 100644 index 00000000..f2c3ffae --- /dev/null +++ b/javascript/4-control-structures-loops/Assignment-13/script.js @@ -0,0 +1,26 @@ +function generatePyramid() { + const rows = parseInt(document.getElementById("rows").value); + const resultDiv = document.getElementById("result"); + + if (isNaN(rows) || rows <= 0) { + resultDiv.textContent = "⚠️ Please enter a valid positive number of rows."; + return; + } + + let pattern = ""; + + for (let i = 1; i <= rows; i++) { + + for (let space = 1; space <= rows - i; space++) { + pattern += " "; + } + + for (let star = 1; star <= 2 * i - 1; star++) { + pattern += "*"; + } + + pattern += "\n"; + } + + resultDiv.textContent = pattern; +} diff --git a/javascript/4-control-structures-loops/Assignment-13/style.css b/javascript/4-control-structures-loops/Assignment-13/style.css new file mode 100644 index 00000000..bc053f35 --- /dev/null +++ b/javascript/4-control-structures-loops/Assignment-13/style.css @@ -0,0 +1,67 @@ +body { + font-family: "Poppins", sans-serif; + background: #f7f9fb; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.container { + background: #fff; + padding: 30px; + border-radius: 15px; + box-shadow: 0 0 10px rgba(0,0,0,0.2); + width: 420px; + text-align: center; +} + +h2 { + color: #ff5722; + margin-bottom: 20px; +} + +.row { + margin-bottom: 15px; +} + +label { + display: block; + margin-bottom: 8px; + font-weight: bold; +} + +input { + padding: 8px; + width: 80%; + border: 1px solid #ccc; + border-radius: 5px; +} + +button { + background: linear-gradient(90deg, #ff5722, #ff007f); + border: none; + color: white; + padding: 10px 15px; + border-radius: 8px; + font-weight: bold; + cursor: pointer; + width: 60%; + transition: 0.2s ease; +} + +button:hover { + opacity: 0.9; + transform: scale(1.05); +} + +pre { + margin-top: 20px; + background: #f0f0f0; + padding: 10px; + border-radius: 8px; + font-weight: bold; + text-align: left; + white-space: pre; + font-family: monospace; +} diff --git a/javascript/4-control-structures-loops/Assignment-14/printname.html b/javascript/4-control-structures-loops/Assignment-14/printname.html new file mode 100644 index 00000000..1b323a59 --- /dev/null +++ b/javascript/4-control-structures-loops/Assignment-14/printname.html @@ -0,0 +1,24 @@ + + + + + + Print Your Name (2D Array) + + + + +
+

Print Your Name using 2D Array

+

Check the console (Ctrl + Shift + I → Console tab) to see the printed pattern.

+ +
+

Console Output Screenshot:

+ + Console Output Screenshot +
+
+ + + + diff --git a/javascript/4-control-structures-loops/Assignment-14/screenshot.png b/javascript/4-control-structures-loops/Assignment-14/screenshot.png new file mode 100644 index 00000000..d52b1a3b Binary files /dev/null and b/javascript/4-control-structures-loops/Assignment-14/screenshot.png differ diff --git a/javascript/4-control-structures-loops/Assignment-14/script.js b/javascript/4-control-structures-loops/Assignment-14/script.js new file mode 100644 index 00000000..73bd4a35 --- /dev/null +++ b/javascript/4-control-structures-loops/Assignment-14/script.js @@ -0,0 +1,17 @@ + +const namePattern = [ + ["L", " U", " U", " CCCC", " K", " K", " Y", " Y"], + ["L", " U", " U", " C", " K", " K", " Y", " Y"], + ["L", " U", " U", " C", " KK", " Y"], + ["L", " U", " U", " C", " K", " K", " Y"], + ["LLLLL", " UUU", " CCCC", " K", " K", " Y"] +]; + +console.log("Printing Name Pattern (LUCKY):\n"); +for (const row of namePattern) { + let line = ""; + for (const col of row) { + line += col + " "; + } + console.log(line); +} diff --git a/javascript/4-control-structures-loops/Assignment-14/style.css b/javascript/4-control-structures-loops/Assignment-14/style.css new file mode 100644 index 00000000..170149d2 --- /dev/null +++ b/javascript/4-control-structures-loops/Assignment-14/style.css @@ -0,0 +1,36 @@ +body { + font-family: "Poppins", sans-serif; + background: #f7f9fb; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.container { + background: #fff; + padding: 30px; + border-radius: 15px; + box-shadow: 0 0 10px rgba(0,0,0,0.2); + width: 450px; + text-align: center; +} + +h2 { + color: #ff5722; + margin-bottom: 10px; +} + +p { + color: #333; +} + +.screenshot { + margin-top: 20px; +} + +.screenshot img { + width: 100%; + border-radius: 10px; + border: 1px solid #ccc; +} diff --git a/javascript/4-control-structures-loops/Assignment-2/leapyear.html b/javascript/4-control-structures-loops/Assignment-2/leapyear.html new file mode 100644 index 00000000..9b80c8dd --- /dev/null +++ b/javascript/4-control-structures-loops/Assignment-2/leapyear.html @@ -0,0 +1,28 @@ + + + + + + Leap Year Checker + + + + +
+

Leap Year Checker

+ +
+ + +
+ +
+ +
+ +
Result will appear here...
+
+ + + + diff --git a/javascript/4-control-structures-loops/Assignment-2/script.js b/javascript/4-control-structures-loops/Assignment-2/script.js new file mode 100644 index 00000000..1d45ee8c --- /dev/null +++ b/javascript/4-control-structures-loops/Assignment-2/script.js @@ -0,0 +1,16 @@ +function checkLeapYear() { + let year = Number(document.getElementById("year").value); + let result = ""; + + if (!year) { + result = "Please enter a valid year!"; + } + else if ((year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0)) { + result = `${year} is a Leap Year ✅`; + } + else { + result = `${year} is Not a Leap Year ❌`; + } + + document.getElementById("result").innerHTML = result; +} diff --git a/javascript/4-control-structures-loops/Assignment-2/style.css b/javascript/4-control-structures-loops/Assignment-2/style.css new file mode 100644 index 00000000..e7e76211 --- /dev/null +++ b/javascript/4-control-structures-loops/Assignment-2/style.css @@ -0,0 +1,62 @@ +body { + font-family: "Segoe UI", Arial, sans-serif; + background: #f7f9fb; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.container { + background: #fff; + padding: 25px 30px; + border-radius: 15px; + box-shadow: 0 0 10px rgba(0,0,0,0.2); + width: 350px; + text-align: center; +} + +h2 { + color: #ff5722; + margin-bottom: 20px; +} + +.row { + margin-bottom: 15px; +} + +label { + display: block; + margin-bottom: 8px; + font-weight: bold; +} + +input { + padding: 8px; + width: 80%; + border: 1px solid #ccc; + border-radius: 5px; +} + +button { + background: linear-gradient(90deg, #ff5722, #ff007f); + border: none; + color: white; + padding: 10px 15px; + border-radius: 8px; + font-weight: bold; + cursor: pointer; + width: 60%; +} + +button:hover { + opacity: 0.85; +} + +#result { + margin-top: 20px; + background: #f0f0f0; + padding: 10px; + border-radius: 8px; + font-weight: bold; +} diff --git a/javascript/4-control-structures-loops/Assignment-3/script.js b/javascript/4-control-structures-loops/Assignment-3/script.js new file mode 100644 index 00000000..5ab83fd2 --- /dev/null +++ b/javascript/4-control-structures-loops/Assignment-3/script.js @@ -0,0 +1,32 @@ +function calculate(operator) { + let num1 = Number(document.getElementById("num1").value); + let num2 = Number(document.getElementById("num2").value); + let result; + + if (isNaN(num1) || isNaN(num2)) { + document.getElementById("result").innerHTML = "Please enter valid numbers!"; + return; + } + + switch (operator) { + case '+': + result = num1 + num2; + break; + case '-': + result = num1 - num2; + break; + case '*': + result = num1 * num2; + break; + case '/': + result = num2 !== 0 ? num1 / num2 : "Cannot divide by zero!"; + break; + case '%': + result = num1 % num2; + break; + default: + result = "Invalid Operator!"; + } + + document.getElementById("result").innerHTML = `Result: ${result}`; +} diff --git a/javascript/4-control-structures-loops/Assignment-3/simplecalculator.html b/javascript/4-control-structures-loops/Assignment-3/simplecalculator.html new file mode 100644 index 00000000..d340bee9 --- /dev/null +++ b/javascript/4-control-structures-loops/Assignment-3/simplecalculator.html @@ -0,0 +1,32 @@ + + + + + + Simple Calculator + + + + +
+

Simple Calculator

+ +
+ + +
+ +
+ + + + + +
+ +
Result will appear here...
+
+ + + + diff --git a/javascript/4-control-structures-loops/Assignment-3/style.css b/javascript/4-control-structures-loops/Assignment-3/style.css new file mode 100644 index 00000000..deccf5eb --- /dev/null +++ b/javascript/4-control-structures-loops/Assignment-3/style.css @@ -0,0 +1,61 @@ +body { + font-family: "Segoe UI", Arial, sans-serif; + background: #f7f9fb; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.container { + background: #fff; + padding: 30px; + border-radius: 15px; + box-shadow: 0 0 10px rgba(0,0,0,0.2); + width: 350px; + text-align: center; +} + +h2 { + color: #ff5722; + margin-bottom: 20px; +} + +.calc-box input { + padding: 10px; + margin: 8px; + width: 130px; + border: 1px solid #ccc; + border-radius: 8px; + text-align: center; +} + +.buttons { + margin-top: 15px; +} + +button { + background: linear-gradient(90deg, #ff5722, #ff007f); + border: none; + color: white; + padding: 10px 15px; + border-radius: 8px; + font-weight: bold; + cursor: pointer; + margin: 5px; + width: 50px; + transition: 0.2s ease-in-out; +} + +button:hover { + opacity: 0.85; + transform: scale(1.05); +} + +#result { + margin-top: 20px; + background: #f0f0f0; + padding: 10px; + border-radius: 8px; + font-weight: bold; +} diff --git a/javascript/4-control-structures-loops/Assignment-4/largestnum.html b/javascript/4-control-structures-loops/Assignment-4/largestnum.html new file mode 100644 index 00000000..f76a5f34 --- /dev/null +++ b/javascript/4-control-structures-loops/Assignment-4/largestnum.html @@ -0,0 +1,38 @@ + + + + + + Find the Largest Number + + + + +
+

Find the Largest Number

+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ +
+ +
Result will appear here...
+
+ + + + diff --git a/javascript/4-control-structures-loops/Assignment-4/script.js b/javascript/4-control-structures-loops/Assignment-4/script.js new file mode 100644 index 00000000..eeec15db --- /dev/null +++ b/javascript/4-control-structures-loops/Assignment-4/script.js @@ -0,0 +1,22 @@ +function findLargest() { + let num1 = Number(document.getElementById("num1").value); + let num2 = Number(document.getElementById("num2").value); + let num3 = Number(document.getElementById("num3").value); + let result = ""; + + + if (isNaN(num1) || isNaN(num2) || isNaN(num3)) { + result = "⚠️ Please enter all three numbers!"; + } else { + + if (num1 >= num2 && num1 >= num3) { + result = `${num1} is the largest number.`; + } else if (num2 >= num1 && num2 >= num3) { + result = `${num2} is the largest number.`; + } else { + result = `${num3} is the largest number.`; + } + } + + document.getElementById("result").innerHTML = result; +} diff --git a/javascript/4-control-structures-loops/Assignment-4/style.css b/javascript/4-control-structures-loops/Assignment-4/style.css new file mode 100644 index 00000000..75f070af --- /dev/null +++ b/javascript/4-control-structures-loops/Assignment-4/style.css @@ -0,0 +1,63 @@ +body { + font-family: "Segoe UI", Arial, sans-serif; + background: #f7f9fb; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.container { + background: #fff; + padding: 30px; + border-radius: 15px; + box-shadow: 0 0 10px rgba(0,0,0,0.2); + width: 350px; + text-align: center; +} + +h2 { + color: #ff5722; + margin-bottom: 20px; +} + +.row { + margin-bottom: 15px; +} + +label { + display: inline-block; + width: 90px; + font-weight: bold; +} + +input { + padding: 8px; + width: 150px; + border: 1px solid #ccc; + border-radius: 5px; +} + +button { + background: linear-gradient(90deg, #ff5722, #ff007f); + border: none; + color: white; + padding: 10px 15px; + border-radius: 8px; + font-weight: bold; + cursor: pointer; + transition: 0.2s ease; +} + +button:hover { + opacity: 0.85; + transform: scale(1.05); +} + +#result { + margin-top: 20px; + background: #f0f0f0; + padding: 10px; + border-radius: 8px; + font-weight: bold; +} diff --git a/javascript/4-control-structures-loops/Assignment-5/evenodd.html b/javascript/4-control-structures-loops/Assignment-5/evenodd.html new file mode 100644 index 00000000..d2100564 --- /dev/null +++ b/javascript/4-control-structures-loops/Assignment-5/evenodd.html @@ -0,0 +1,28 @@ + + + + + + Odd or Even Checker + + + + +
+

Odd or Even Checker

+ +
+ + +
+ +
+ +
+ +
Result will appear here...
+
+ + + + diff --git a/javascript/4-control-structures-loops/Assignment-5/script.js b/javascript/4-control-structures-loops/Assignment-5/script.js new file mode 100644 index 00000000..7515e3fa --- /dev/null +++ b/javascript/4-control-structures-loops/Assignment-5/script.js @@ -0,0 +1,14 @@ +function checkOddEven() { + let number = Number(document.getElementById("number").value); + let result = ""; + + if (isNaN(number)) { + result = "⚠️ Please enter a valid number!"; + } else { + result = (number % 2 === 0) + ? `${number} is an Even number ✅` + : `${number} is an Odd number 🔹`; + } + + document.getElementById("result").innerHTML = result; +} diff --git a/javascript/4-control-structures-loops/Assignment-5/style.css b/javascript/4-control-structures-loops/Assignment-5/style.css new file mode 100644 index 00000000..a3813f96 --- /dev/null +++ b/javascript/4-control-structures-loops/Assignment-5/style.css @@ -0,0 +1,64 @@ +body { + font-family: "Segoe UI", Arial, sans-serif; + background: #f7f9fb; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.container { + background: #fff; + padding: 30px; + border-radius: 15px; + box-shadow: 0 0 10px rgba(0,0,0,0.2); + width: 350px; + text-align: center; +} + +h2 { + color: #ff5722; + margin-bottom: 20px; +} + +.row { + margin-bottom: 15px; +} + +label { + display: block; + margin-bottom: 8px; + font-weight: bold; +} + +input { + padding: 8px; + width: 80%; + border: 1px solid #ccc; + border-radius: 5px; +} + +button { + background: linear-gradient(90deg, #ff5722, #ff007f); + border: none; + color: white; + padding: 10px 15px; + border-radius: 8px; + font-weight: bold; + cursor: pointer; + width: 60%; + transition: 0.2s ease; +} + +button:hover { + opacity: 0.85; + transform: scale(1.05); +} + +#result { + margin-top: 20px; + background: #f0f0f0; + padding: 10px; + border-radius: 8px; + font-weight: bold; +} diff --git a/javascript/4-control-structures-loops/Assignment-6/calci.html b/javascript/4-control-structures-loops/Assignment-6/calci.html new file mode 100644 index 00000000..e8918d34 --- /dev/null +++ b/javascript/4-control-structures-loops/Assignment-6/calci.html @@ -0,0 +1,38 @@ + + + + + + Simple Interest Calculator + + + + +
+

Simple Interest Calculator

+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ +
+ +
Result will appear here...
+
+ + + + diff --git a/javascript/4-control-structures-loops/Assignment-6/script.js b/javascript/4-control-structures-loops/Assignment-6/script.js new file mode 100644 index 00000000..cfc2c7fb --- /dev/null +++ b/javascript/4-control-structures-loops/Assignment-6/script.js @@ -0,0 +1,25 @@ +function calculateInterest() { + let principal = Number(document.getElementById("principal").value); + let rate = Number(document.getElementById("rate").value); + let time = Number(document.getElementById("time").value); + let result = ""; + + + if (principal <= 0 || rate <= 0 || time <= 0) { + result = "⚠️ Please enter valid positive values for all fields!"; + } else { + + let simpleInterest = (principal * rate * time) / 100; + let totalAmount = principal + simpleInterest; + + result = ` + Principal: ₹${principal.toFixed(2)}
+ Rate: ${rate.toFixed(2)}%
+ Time: ${time.toFixed(2)} years

+ 💰 Simple Interest: ₹${simpleInterest.toFixed(2)}
+ 💵 Total Amount: ₹${totalAmount.toFixed(2)} + `; + } + + document.getElementById("result").innerHTML = result; +} diff --git a/javascript/4-control-structures-loops/Assignment-6/style.css b/javascript/4-control-structures-loops/Assignment-6/style.css new file mode 100644 index 00000000..f1a4097f --- /dev/null +++ b/javascript/4-control-structures-loops/Assignment-6/style.css @@ -0,0 +1,64 @@ +body { + font-family: "Segoe UI", Arial, sans-serif; + background: #f7f9fb; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.container { + background: #fff; + padding: 30px; + border-radius: 15px; + box-shadow: 0 0 10px rgba(0,0,0,0.2); + width: 380px; + text-align: center; +} + +h2 { + color: #ff5722; + margin-bottom: 20px; +} + +.row { + margin-bottom: 15px; +} + +label { + display: block; + margin-bottom: 8px; + font-weight: bold; +} + +input { + padding: 8px; + width: 80%; + border: 1px solid #ccc; + border-radius: 5px; +} + +button { + background: linear-gradient(90deg, #ff5722, #ff007f); + border: none; + color: white; + padding: 10px 15px; + border-radius: 8px; + font-weight: bold; + cursor: pointer; + width: 60%; + transition: 0.2s ease; +} + +button:hover { + opacity: 0.85; + transform: scale(1.05); +} + +#result { + margin-top: 20px; + background: #f0f0f0; + padding: 10px; + border-radius: 8px; + font-weight: bold; +} diff --git a/javascript/4-control-structures-loops/Assignment-7/script.js b/javascript/4-control-structures-loops/Assignment-7/script.js new file mode 100644 index 00000000..9d93e766 --- /dev/null +++ b/javascript/4-control-structures-loops/Assignment-7/script.js @@ -0,0 +1,21 @@ +function generateTable() { + const num = Number(document.getElementById("number").value); + const resultDiv = document.getElementById("result"); + let output = ""; + + if (isNaN(num) || num === 0) { + resultDiv.innerHTML = "⚠️ Please enter a valid non-zero number!"; + return; + } + + output += `

Multiplication Table for ${num}

`; + output += ""; + + for (let i = 1; i <= 10; i++) { + output += ``; + } + + output += "
${num} × ${i}= ${num * i}
"; + + resultDiv.innerHTML = output; +} diff --git a/javascript/4-control-structures-loops/Assignment-7/style.css b/javascript/4-control-structures-loops/Assignment-7/style.css new file mode 100644 index 00000000..a6278085 --- /dev/null +++ b/javascript/4-control-structures-loops/Assignment-7/style.css @@ -0,0 +1,65 @@ +body { + font-family: "Poppins", sans-serif; + background: #f7f9fb; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.container { + background: #fff; + padding: 30px; + border-radius: 15px; + box-shadow: 0 0 10px rgba(0,0,0,0.2); + width: 380px; + text-align: center; +} + +h2 { + color: #ff5722; + margin-bottom: 20px; +} + +.row { + margin-bottom: 15px; +} + +label { + display: block; + margin-bottom: 8px; + font-weight: bold; +} + +input { + padding: 8px; + width: 80%; + border: 1px solid #ccc; + border-radius: 5px; +} + +button { + background: linear-gradient(90deg, #ff5722, #ff007f); + border: none; + color: white; + padding: 10px 15px; + border-radius: 8px; + font-weight: bold; + cursor: pointer; + width: 60%; + transition: 0.2s ease; +} + +button:hover { + opacity: 0.9; + transform: scale(1.05); +} + +#result { + margin-top: 20px; + background: #f0f0f0; + padding: 10px; + border-radius: 8px; + font-weight: bold; + line-height: 1.8; +} diff --git a/javascript/4-control-structures-loops/Assignment-7/table.html b/javascript/4-control-structures-loops/Assignment-7/table.html new file mode 100644 index 00000000..8aac44e5 --- /dev/null +++ b/javascript/4-control-structures-loops/Assignment-7/table.html @@ -0,0 +1,29 @@ + + + + + + + Multiplication Table Generator + + + + +
+

Multiplication Table Generator

+ +
+ + +
+ +
+ +
+ +
Your table will appear here...
+
+ + + + diff --git a/javascript/4-control-structures-loops/Assignment-8/script.js b/javascript/4-control-structures-loops/Assignment-8/script.js new file mode 100644 index 00000000..43f91328 --- /dev/null +++ b/javascript/4-control-structures-loops/Assignment-8/script.js @@ -0,0 +1,20 @@ +function calculateSum() { + const num = Number(document.getElementById("number").value); + const result = document.getElementById("result"); + + if (isNaN(num) || num <= 0) { + result.innerHTML = "⚠️ Please enter a valid positive number!"; + return; + } + + let i = 1; + let sum = 0; + + + while (i <= num) { + sum += i; + i++; + } + + result.innerHTML = `✅ The sum of numbers from 1 to ${num} is ${sum}`; +} diff --git a/javascript/4-control-structures-loops/Assignment-8/style.css b/javascript/4-control-structures-loops/Assignment-8/style.css new file mode 100644 index 00000000..5cb691c1 --- /dev/null +++ b/javascript/4-control-structures-loops/Assignment-8/style.css @@ -0,0 +1,64 @@ +body { + font-family: "Poppins", sans-serif; + background: #f7f9fb; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.container { + background: #fff; + padding: 30px; + border-radius: 15px; + box-shadow: 0 0 10px rgba(0,0,0,0.2); + width: 380px; + text-align: center; +} + +h2 { + color: #ff5722; + margin-bottom: 20px; +} + +.row { + margin-bottom: 15px; +} + +label { + display: block; + margin-bottom: 8px; + font-weight: bold; +} + +input { + padding: 8px; + width: 80%; + border: 1px solid #ccc; + border-radius: 5px; +} + +button { + background: linear-gradient(90deg, #ff5722, #ff007f); + border: none; + color: white; + padding: 10px 15px; + border-radius: 8px; + font-weight: bold; + cursor: pointer; + width: 60%; + transition: 0.2s ease; +} + +button:hover { + opacity: 0.9; + transform: scale(1.05); +} + +#result { + margin-top: 20px; + background: #f0f0f0; + padding: 10px; + border-radius: 8px; + font-weight: bold; +} diff --git a/javascript/4-control-structures-loops/Assignment-8/sum.html b/javascript/4-control-structures-loops/Assignment-8/sum.html new file mode 100644 index 00000000..923f555d --- /dev/null +++ b/javascript/4-control-structures-loops/Assignment-8/sum.html @@ -0,0 +1,28 @@ + + + + + + Sum of Numbers + + + + +
+

Sum of Numbers Calculator

+ +
+ + +
+ +
+ +
+ +

Result will appear here...

+
+ + + + diff --git a/javascript/4-control-structures-loops/Assignment-9/fact.html b/javascript/4-control-structures-loops/Assignment-9/fact.html new file mode 100644 index 00000000..2e224d62 --- /dev/null +++ b/javascript/4-control-structures-loops/Assignment-9/fact.html @@ -0,0 +1,30 @@ + + + + + + Factorial Calculator (do-while) + + + +
+

Factorial Calculator (do-while)

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

Result and steps will appear here...

+
+
+ + + + diff --git a/javascript/4-control-structures-loops/Assignment-9/script.js b/javascript/4-control-structures-loops/Assignment-9/script.js new file mode 100644 index 00000000..31928474 --- /dev/null +++ b/javascript/4-control-structures-loops/Assignment-9/script.js @@ -0,0 +1,47 @@ +function computeFactorial() { + const input = document.getElementById("number"); + const out = document.getElementById("output"); + const raw = input.value.trim(); + + if (raw === "") { + out.innerHTML = `

Please enter a number.

`; + return; + } + + const n = Number(raw); + + if (!Number.isFinite(n) || n < 0 || !Number.isInteger(n)) { + out.innerHTML = `

Enter a non-negative integer (0, 1, 2, ...).

`; + return; + } + + if (n === 0) { + out.innerHTML = ` +

0! = 1 (by definition)

+

Final Result: 1

+ `; + return; + } + + let i = n; + let factorial = 1; + const factors = []; + + do { + factors.push(i); + factorial *= i; + i--; + } while (i >= 1); + + + const stepStr = factors.join(" × "); + out.innerHTML = ` +

${stepStr} = ${factorial}

+

Final Result: ${n}! = ${factorial}

+ `; +} + +function clearAll() { + document.getElementById("number").value = ""; + document.getElementById("output").innerHTML = `

Result and steps will appear here...

`; +} diff --git a/javascript/4-control-structures-loops/Assignment-9/style.css b/javascript/4-control-structures-loops/Assignment-9/style.css new file mode 100644 index 00000000..c4bbabe5 --- /dev/null +++ b/javascript/4-control-structures-loops/Assignment-9/style.css @@ -0,0 +1,66 @@ +:root{ + --accent: #ff5722; + --accent2: #ff007f; + --bg: #f7f9fb; + --card: #fff; +} + +*{box-sizing:border-box} +body{ + margin:0; + font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif; + background:var(--bg); + display:flex; + align-items:center; + justify-content:center; + height:100vh; +} + +.container{ + width:380px; + background:var(--card); + padding:26px; + border-radius:12px; + box-shadow:0 8px 24px rgba(0,0,0,0.08); + text-align:center; +} + +h2{ color:var(--accent); margin:0 0 14px 0 } + +.row{ margin:12px 0 } +label{ display:block; margin-bottom:6px; font-weight:600; font-size:0.95rem } +input[type="number"]{ + width:100%; + padding:10px 12px; + border:1px solid #ddd; + border-radius:8px; + font-size:1rem; +} + +.actions{ display:flex; gap:8px; justify-content:center } +button{ + padding:10px 14px; + border-radius:8px; + border:none; + background:linear-gradient(90deg,var(--accent),var(--accent2)); + color:white; + font-weight:700; + cursor:pointer; +} +button.muted{ + background:#eee; color:#333; font-weight:600; +} + +#output{ + margin-top:16px; + text-align:left; + background:#f0f0f0; + padding:12px; + border-radius:8px; + min-height:56px; +} + +#output .steps{ font-family: monospace; white-space:pre-wrap; word-break:break-word } +#output .final{ margin-top:10px; font-weight:800; color:#0b6d3a } +#output .error{ color:#b00020; font-weight:700 } +#output .hint{ color:#666 }