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/5-functions-error-handling/Assignment-1/fibonacci.html b/javascript/5-functions-error-handling/Assignment-1/fibonacci.html new file mode 100644 index 00000000..2f4cab00 --- /dev/null +++ b/javascript/5-functions-error-handling/Assignment-1/fibonacci.html @@ -0,0 +1,23 @@ + + + + + + Fibonacci Series using Recursion + + + +
+

Fibonacci Series (Recursive - Function Declaration)

+ + + + + + +
+
+ + + + diff --git a/javascript/5-functions-error-handling/Assignment-1/script.js b/javascript/5-functions-error-handling/Assignment-1/script.js new file mode 100644 index 00000000..2d95008c --- /dev/null +++ b/javascript/5-functions-error-handling/Assignment-1/script.js @@ -0,0 +1,19 @@ + +function fibonacci(n) { + if (n <= 1) return n; + return fibonacci(n - 1) + fibonacci(n - 2); +} + +function generateFibonacci() { + const num = parseInt(document.getElementById("num").value); + let series = []; + + for (let i = 0; i < num; i++) { + series.push(fibonacci(i)); + } + + document.getElementById("result").innerHTML = + `Fibonacci Series up to ${num} terms:
${series.join(', ')}`; + + console.log("Fibonacci Series:", series); +} diff --git a/javascript/5-functions-error-handling/Assignment-1/style.css b/javascript/5-functions-error-handling/Assignment-1/style.css new file mode 100644 index 00000000..1a5ced3d --- /dev/null +++ b/javascript/5-functions-error-handling/Assignment-1/style.css @@ -0,0 +1,46 @@ +body { + font-family: Arial, sans-serif; + margin: 40px; + background-color: #f5f5f5; +} + +.container { + background: white; + padding: 20px; + border-radius: 12px; + box-shadow: 0 0 10px rgba(0,0,0,0.1); + max-width: 400px; + margin: auto; +} + +h2 { + text-align: center; + color: #333; +} + +input, button { + padding: 10px; + width: 100%; + margin-top: 10px; + font-size: 16px; +} + +button { + background-color: #2196f3; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; +} + +button:hover { + background-color: #1976d2; +} + +#result { + margin-top: 15px; + background: #e8f5e9; + padding: 10px; + border-radius: 8px; + font-weight: bold; +} diff --git a/javascript/5-functions-error-handling/Assignment-10/lexical.html b/javascript/5-functions-error-handling/Assignment-10/lexical.html new file mode 100644 index 00000000..b1504829 --- /dev/null +++ b/javascript/5-functions-error-handling/Assignment-10/lexical.html @@ -0,0 +1,29 @@ + + + + + + Lexical Scoping in Nested Functions + + + +
+

Lexical Scoping - Nested Functions Example

+ + + + + + + + + + + + +
+
+ + + + diff --git a/javascript/5-functions-error-handling/Assignment-10/script.js b/javascript/5-functions-error-handling/Assignment-10/script.js new file mode 100644 index 00000000..aeda6894 --- /dev/null +++ b/javascript/5-functions-error-handling/Assignment-10/script.js @@ -0,0 +1,26 @@ + + +function outerFunction(word1) { + + return function middleFunction(word2) { + + return function innerFunction(word3) { + return `${word1} ${word2} ${word3}!`; + }; + }; +} + +function generateMessage() { + const first = document.getElementById("first").value.trim(); + const second = document.getElementById("second").value.trim(); + const third = document.getElementById("third").value.trim(); + + if (!first || !second || !third) { + document.getElementById("result").innerHTML = "

Please fill all fields!

"; + return; + } + + const message = outerFunction(first)(middle = second)(third); + + document.getElementById("result").innerText = `Result: ${message}`; +} diff --git a/javascript/5-functions-error-handling/Assignment-10/style.css b/javascript/5-functions-error-handling/Assignment-10/style.css new file mode 100644 index 00000000..b1aabab4 --- /dev/null +++ b/javascript/5-functions-error-handling/Assignment-10/style.css @@ -0,0 +1,60 @@ +body { + font-family: Arial, sans-serif; + background-color: #f3f3f3; + margin: 40px; +} + +.container { + background: white; + padding: 30px; + border-radius: 12px; + box-shadow: 0 0 10px rgba(0,0,0,0.1); + width: 380px; + margin: auto; +} + +h2 { + text-align: center; + color: #333; +} + +label { + display: block; + margin-top: 10px; + font-weight: bold; +} + +input { + width: 100%; + padding: 10px; + margin-top: 5px; + font-size: 16px; + border-radius: 6px; + border: 1px solid #ccc; +} + +button { + width: 100%; + padding: 10px; + margin-top: 15px; + background-color: #3949ab; + color: white; + border: none; + border-radius: 6px; + font-size: 16px; + cursor: pointer; +} + +button:hover { + background-color: #283593; +} + +#result { + margin-top: 20px; + background: #e8eaf6; + padding: 10px; + border-radius: 6px; + text-align: center; + font-weight: bold; + color: #1a237e; +} diff --git a/javascript/5-functions-error-handling/Assignment-11/higherorder.html b/javascript/5-functions-error-handling/Assignment-11/higherorder.html new file mode 100644 index 00000000..68c01978 --- /dev/null +++ b/javascript/5-functions-error-handling/Assignment-11/higherorder.html @@ -0,0 +1,27 @@ + + + + + + Higher-Order Function - repeatAction() + + + +
+

Higher-Order Function Example

+

Use repeatAction() to repeat a task multiple times.

+ + + + + + + + + + +
+ + + + diff --git a/javascript/5-functions-error-handling/Assignment-11/script.js b/javascript/5-functions-error-handling/Assignment-11/script.js new file mode 100644 index 00000000..914e3157 --- /dev/null +++ b/javascript/5-functions-error-handling/Assignment-11/script.js @@ -0,0 +1,28 @@ + + +function repeatAction(action, n) { + for (let i = 0; i < n; i++) { + action(i); + } +} + +function createList() { + const text = document.getElementById("itemText").value.trim(); + const count = Number(document.getElementById("count").value); + const list = document.getElementById("itemList"); + + list.innerHTML = ""; + + if (!text || count <= 0) { + list.innerHTML = "

Please enter valid text and count!

"; + return; + } + + const addItem = (index) => { + const li = document.createElement("li"); + li.textContent = `${index + 1}. ${text}`; + list.appendChild(li); + }; + + repeatAction(addItem, count); +} diff --git a/javascript/5-functions-error-handling/Assignment-11/style.css b/javascript/5-functions-error-handling/Assignment-11/style.css new file mode 100644 index 00000000..90c2e050 --- /dev/null +++ b/javascript/5-functions-error-handling/Assignment-11/style.css @@ -0,0 +1,68 @@ +body { + font-family: Arial, sans-serif; + background-color: #f3f3f3; + margin: 40px; +} + +.container { + background: white; + padding: 30px; + border-radius: 12px; + box-shadow: 0 0 10px rgba(0,0,0,0.1); + width: 380px; + margin: auto; +} + +h2 { + text-align: center; + color: #333; +} + +p { + font-size: 14px; + color: #666; + text-align: center; +} + +label { + display: block; + margin-top: 10px; + font-weight: bold; +} + +input { + width: 100%; + padding: 10px; + margin-top: 5px; + font-size: 16px; + border-radius: 6px; + border: 1px solid #ccc; +} + +button { + width: 100%; + padding: 10px; + margin-top: 15px; + background-color: #0288d1; + color: white; + border: none; + border-radius: 6px; + font-size: 16px; + cursor: pointer; +} + +button:hover { + background-color: #0277bd; +} + +ul { + margin-top: 20px; + padding-left: 20px; + list-style-type: disc; +} + +li { + padding: 5px; + font-size: 16px; + color: #01579b; +} diff --git a/javascript/5-functions-error-handling/Assignment-12/highorderarrow.html b/javascript/5-functions-error-handling/Assignment-12/highorderarrow.html new file mode 100644 index 00000000..26157460 --- /dev/null +++ b/javascript/5-functions-error-handling/Assignment-12/highorderarrow.html @@ -0,0 +1,27 @@ + + + + + + Higher-Order Function with Arrow Callback + + + +
+

Higher-Order Function with Arrow Function

+

Filter numbers greater than a given limit using a callback.

+ + + + + + + + + +
+
+ + + + diff --git a/javascript/5-functions-error-handling/Assignment-12/script.js b/javascript/5-functions-error-handling/Assignment-12/script.js new file mode 100644 index 00000000..dd00efd7 --- /dev/null +++ b/javascript/5-functions-error-handling/Assignment-12/script.js @@ -0,0 +1,21 @@ + +function processArray(numbers, callback) { + return callback(numbers); +} + +function filterNumbers() { + const numbersInput = document.getElementById("numbers").value.trim(); + const limit = Number(document.getElementById("limit").value); + const resultDiv = document.getElementById("result"); + + if (!numbersInput || isNaN(limit)) { + resultDiv.innerHTML = "

Please enter valid numbers and limit!

"; + return; + } + + const numbersArray = numbersInput.split(",").map(num => Number(num.trim())); + + const filtered = processArray(numbersArray, nums => nums.filter(n => n <= limit)); + + resultDiv.innerText = `Filtered Array: [ ${filtered.join(", ")} ]`; +} diff --git a/javascript/5-functions-error-handling/Assignment-12/style.css b/javascript/5-functions-error-handling/Assignment-12/style.css new file mode 100644 index 00000000..2b12b6c1 --- /dev/null +++ b/javascript/5-functions-error-handling/Assignment-12/style.css @@ -0,0 +1,66 @@ +body { + font-family: Arial, sans-serif; + background-color: #f9f9f9; + margin: 40px; +} + +.container { + background: white; + padding: 30px; + border-radius: 12px; + box-shadow: 0 0 10px rgba(0,0,0,0.1); + width: 400px; + margin: auto; +} + +h2 { + text-align: center; + color: #333; +} + +p { + font-size: 14px; + color: #666; + text-align: center; +} + +label { + display: block; + margin-top: 10px; + font-weight: bold; +} + +input { + width: 100%; + padding: 10px; + margin-top: 5px; + font-size: 16px; + border-radius: 6px; + border: 1px solid #ccc; +} + +button { + width: 100%; + padding: 10px; + margin-top: 15px; + background-color: #43a047; + color: white; + border: none; + border-radius: 6px; + font-size: 16px; + cursor: pointer; +} + +button:hover { + background-color: #2e7d32; +} + +#result { + margin-top: 20px; + background: #e8f5e9; + padding: 10px; + border-radius: 6px; + color: #1b5e20; + text-align: center; + font-weight: bold; +} diff --git a/javascript/5-functions-error-handling/Assignment-13/syntax.html b/javascript/5-functions-error-handling/Assignment-13/syntax.html new file mode 100644 index 00000000..6cf60e10 --- /dev/null +++ b/javascript/5-functions-error-handling/Assignment-13/syntax.html @@ -0,0 +1,40 @@ + + + + Error Handling - JSON Parsing + + +

JSON Parsing Example

+ + + + +

+ + + + diff --git a/javascript/5-functions-error-handling/Assignment-14/runtime_error.html b/javascript/5-functions-error-handling/Assignment-14/runtime_error.html new file mode 100644 index 00000000..5afad3d0 --- /dev/null +++ b/javascript/5-functions-error-handling/Assignment-14/runtime_error.html @@ -0,0 +1,20 @@ + + + + + + Runtime Error Handling + + + +

Find User City

+ + + + + +

+ + + + diff --git a/javascript/5-functions-error-handling/Assignment-14/script.js b/javascript/5-functions-error-handling/Assignment-14/script.js new file mode 100644 index 00000000..4547d74a --- /dev/null +++ b/javascript/5-functions-error-handling/Assignment-14/script.js @@ -0,0 +1,22 @@ + +const users = { + "lucky": { "address": { "city": "Hyderabad" } }, + "durga": { "address": { "city": "Vijayawada" } }, + "sakshi": { "address": { "city": "Chennai" } } +}; + +function findCity() { + const input = document.getElementById("username").value.trim(); + const result = document.getElementById("result"); + + try { + + const city = users[input].address.city; + result.innerHTML = `🏙️ City of ${input} is ${city}`; + result.classList.remove("error"); + } + catch (error) { + result.innerHTML = `❌ Error: User ${input} not found in records.`; + result.classList.add("error"); + } +} diff --git a/javascript/5-functions-error-handling/Assignment-14/style.css b/javascript/5-functions-error-handling/Assignment-14/style.css new file mode 100644 index 00000000..e23ffda1 --- /dev/null +++ b/javascript/5-functions-error-handling/Assignment-14/style.css @@ -0,0 +1,37 @@ +body { + font-family: Arial, sans-serif; + margin: 40px; + background-color: #f4f7fc; +} + +h2 { + color: #2d3e50; +} + +input, button { + padding: 8px 10px; + margin: 8px 0; + font-size: 16px; + border-radius: 5px; + border: 1px solid #ccc; +} + +button { + background-color: #3a86ff; + color: white; + border: none; + cursor: pointer; +} + +button:hover { + background-color: #265dc5; +} + +#result { + margin-top: 20px; + font-weight: bold; +} + +.error { + color: red; +} diff --git a/javascript/5-functions-error-handling/Assignment-15/finally_block.html b/javascript/5-functions-error-handling/Assignment-15/finally_block.html new file mode 100644 index 00000000..e9bcfddf --- /dev/null +++ b/javascript/5-functions-error-handling/Assignment-15/finally_block.html @@ -0,0 +1,20 @@ + + + + + + Error Handling with Finally Block + + + +

Find User City (with Default City)

+ + + + + +

+ + + + diff --git a/javascript/5-functions-error-handling/Assignment-15/script.js b/javascript/5-functions-error-handling/Assignment-15/script.js new file mode 100644 index 00000000..89ed4730 --- /dev/null +++ b/javascript/5-functions-error-handling/Assignment-15/script.js @@ -0,0 +1,31 @@ + +const users = { + "lucky": { "address": { "city": "Hyderabad" } }, + "durga": { "address": { "city": "Vijayawada" } }, + "sakshi": { "address": { "city": "Chennai" } } +}; + + +const default_city = "Pune"; + +function findCity() { + const input = document.getElementById("username").value.trim(); + const result = document.getElementById("result"); + let city; + + try { + + city = users[input].address.city; + result.innerHTML = `🏙️ City of ${input} is ${city}`; + result.classList.remove("error"); + } + catch (error) { + result.innerHTML = `❌ Error: User ${input} not found in records.`; + result.classList.add("error"); + } + finally { + if (!city) { + result.innerHTML += `
🌆 Default city: ${default_city}`; + } + } +} diff --git a/javascript/5-functions-error-handling/Assignment-15/style.css b/javascript/5-functions-error-handling/Assignment-15/style.css new file mode 100644 index 00000000..5982e07c --- /dev/null +++ b/javascript/5-functions-error-handling/Assignment-15/style.css @@ -0,0 +1,37 @@ +body { + font-family: Arial, sans-serif; + background-color: #f3f8ff; + margin: 40px; +} + +h2 { + color: #273c75; +} + +input, button { + padding: 8px 10px; + margin: 10px 0; + font-size: 16px; + border-radius: 5px; + border: 1px solid #ccc; +} + +button { + background-color: #4070f4; + color: white; + cursor: pointer; + border: none; +} + +button:hover { + background-color: #265dc5; +} + +#result { + margin-top: 20px; + font-weight: bold; +} + +.error { + color: red; +} diff --git a/javascript/5-functions-error-handling/Assignment-16/custom_error.html b/javascript/5-functions-error-handling/Assignment-16/custom_error.html new file mode 100644 index 00000000..3f37afb7 --- /dev/null +++ b/javascript/5-functions-error-handling/Assignment-16/custom_error.html @@ -0,0 +1,28 @@ + + + + + + Custom Error Handling - Calculator + + + +

🔢 Calculator with Custom Error Handling

+ +
+ + + + + +

+
+ + + + diff --git a/javascript/5-functions-error-handling/Assignment-16/script.js b/javascript/5-functions-error-handling/Assignment-16/script.js new file mode 100644 index 00000000..3c5e0abe --- /dev/null +++ b/javascript/5-functions-error-handling/Assignment-16/script.js @@ -0,0 +1,39 @@ +function calculate() { + const num1 = document.getElementById("num1").value.trim(); + const num2 = document.getElementById("num2").value.trim(); + const operator = document.getElementById("operator").value; + const result = document.getElementById("result"); + + try { + const n1 = parseFloat(num1); + const n2 = parseFloat(num2); + if (isNaN(n1) || isNaN(n2)) { + throw new Error("❌ Invalid number input. Please enter numeric values."); + } + let output; + switch (operator) { + case "+": + output = n1 + n2; + break; + case "-": + output = n1 - n2; + break; + case "*": + output = n1 * n2; + break; + case "/": + if (n2 === 0) throw new Error("🚫 Division by zero is not allowed."); + output = n1 / n2; + break; + default: + throw new Error("⚠️ Unsupported operator. Use +, -, *, or /."); + } + + result.innerHTML = `✅ Result: ${output}`; + result.className = "success"; + } + catch (error) { + result.innerHTML = error.message; + result.className = "error"; + } +} diff --git a/javascript/5-functions-error-handling/Assignment-16/style.css b/javascript/5-functions-error-handling/Assignment-16/style.css new file mode 100644 index 00000000..6b33b963 --- /dev/null +++ b/javascript/5-functions-error-handling/Assignment-16/style.css @@ -0,0 +1,52 @@ +body { + font-family: "Poppins", sans-serif; + background-color: #f9fbff; + text-align: center; + margin-top: 80px; +} + +h2 { + color: #273c75; +} + +.container { + background: #ffffff; + display: inline-block; + padding: 25px 40px; + border-radius: 10px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); +} + +input, select { + padding: 8px 10px; + margin: 10px; + font-size: 16px; + border-radius: 5px; + border: 1px solid #ccc; +} + +button { + background-color: #4070f4; + color: white; + border: none; + padding: 8px 15px; + border-radius: 5px; + cursor: pointer; +} + +button:hover { + background-color: #265dc5; +} + +#result { + margin-top: 15px; + font-weight: bold; +} + +.error { + color: red; +} + +.success { + color: green; +} diff --git a/javascript/5-functions-error-handling/Assignment-17/error_object.html b/javascript/5-functions-error-handling/Assignment-17/error_object.html new file mode 100644 index 00000000..a1f1ec88 --- /dev/null +++ b/javascript/5-functions-error-handling/Assignment-17/error_object.html @@ -0,0 +1,26 @@ + + + + + + Error Object - Banking System + + + +

🏦 Banking System - Withdraw Amount

+ +
+ + + + + + + + +

+
+ + + + diff --git a/javascript/5-functions-error-handling/Assignment-17/script.js b/javascript/5-functions-error-handling/Assignment-17/script.js new file mode 100644 index 00000000..2a17e94e --- /dev/null +++ b/javascript/5-functions-error-handling/Assignment-17/script.js @@ -0,0 +1,35 @@ +function withdrawAmount() { + const balance = parseFloat(document.getElementById("balance").value); + const withdraw = parseFloat(document.getElementById("withdraw").value); + const result = document.getElementById("result"); + + try { + if (isNaN(balance) || isNaN(withdraw)) { + throw { + errorCode: 101, + errorMessage: "Invalid input. Please enter valid numbers." + }; + } + + if (withdraw <= 0) { + throw { + errorCode: 102, + errorMessage: "Withdrawal amount must be greater than zero." + }; + } + + if (withdraw > balance) { + throw { + errorCode: 103, + errorMessage: "Insufficient balance. Withdrawal denied." + }; + } + const newBalance = balance - withdraw; + result.innerHTML = `✅ Withdrawal successful! Remaining Balance: ₹${newBalance.toFixed(2)}`; + result.className = "success"; + } + catch (err) { + result.innerHTML = `❌ Error ${err.errorCode}: ${err.errorMessage}`; + result.className = "error"; + } +} diff --git a/javascript/5-functions-error-handling/Assignment-17/style.css b/javascript/5-functions-error-handling/Assignment-17/style.css new file mode 100644 index 00000000..67d6d03b --- /dev/null +++ b/javascript/5-functions-error-handling/Assignment-17/style.css @@ -0,0 +1,55 @@ +body { + font-family: "Poppins", sans-serif; + background-color: #f5f7ff; + text-align: center; + margin-top: 80px; +} + +.container { + background-color: white; + display: inline-block; + padding: 30px 40px; + border-radius: 12px; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); +} + +label { + display: block; + font-weight: bold; + margin-top: 10px; +} + +input { + padding: 8px; + margin: 10px; + width: 200px; + border-radius: 5px; + border: 1px solid #ccc; +} + +button { + padding: 8px 20px; + border: none; + background-color: #007bff; + color: white; + border-radius: 5px; + cursor: pointer; + margin-top: 10px; +} + +button:hover { + background-color: #0056b3; +} + +#result { + margin-top: 20px; + font-size: 16px; +} + +.error { + color: red; +} + +.success { + color: green; +} diff --git a/javascript/5-functions-error-handling/Assignment-2/functionexpression.html b/javascript/5-functions-error-handling/Assignment-2/functionexpression.html new file mode 100644 index 00000000..e9c13145 --- /dev/null +++ b/javascript/5-functions-error-handling/Assignment-2/functionexpression.html @@ -0,0 +1,23 @@ + + + + + + Sorting Numbers using Function Expression + + + +
+

Sort Numbers (Function Expression)

+ + + + + + +
+
+ + + + diff --git a/javascript/5-functions-error-handling/Assignment-2/script.js b/javascript/5-functions-error-handling/Assignment-2/script.js new file mode 100644 index 00000000..4e7f5244 --- /dev/null +++ b/javascript/5-functions-error-handling/Assignment-2/script.js @@ -0,0 +1,28 @@ + +const sortArray = function(arr) { + return arr.sort((a, b) => a - b); +}; + +function sortNumbers() { + const input = document.getElementById("numbers").value; + + if (!input.trim()) { + document.getElementById("result").innerHTML = "

Please enter some numbers!

"; + return; + } + + const numArray = input.split(",").map(Number); + const sortedArray = sortArray(numArray); + let tableHTML = ` + + + ${sortedArray.map((num, i) => ``).join('')} +
IndexValue
${i + 1}${num}
+ `; + + document.getElementById("result").innerHTML = ` +

Sorted Array:

${tableHTML} + `; + + console.log("Sorted Array:", sortedArray); +} diff --git a/javascript/5-functions-error-handling/Assignment-2/style.css b/javascript/5-functions-error-handling/Assignment-2/style.css new file mode 100644 index 00000000..c1c7f2f7 --- /dev/null +++ b/javascript/5-functions-error-handling/Assignment-2/style.css @@ -0,0 +1,58 @@ +body { + font-family: Arial, sans-serif; + margin: 40px; + background-color: #f5f5f5; +} + +.container { + background: white; + padding: 20px; + border-radius: 12px; + box-shadow: 0 0 10px rgba(0,0,0,0.1); + max-width: 450px; + margin: auto; +} + +h2 { + text-align: center; + color: #333; +} + +input, button { + padding: 10px; + width: 100%; + margin-top: 10px; + font-size: 16px; +} + +button { + background-color: #4caf50; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; +} + +button:hover { + background-color: #388e3c; +} + +#result { + margin-top: 20px; +} + +table { + width: 100%; + border-collapse: collapse; + margin-top: 10px; +} + +th, td { + padding: 10px; + text-align: center; + border: 1px solid #ccc; +} + +th { + background-color: #f1f1f1; +} diff --git a/javascript/5-functions-error-handling/Assignment-3/arrow.html b/javascript/5-functions-error-handling/Assignment-3/arrow.html new file mode 100644 index 00000000..f695143c --- /dev/null +++ b/javascript/5-functions-error-handling/Assignment-3/arrow.html @@ -0,0 +1,20 @@ + + + + + + Arrow Function - Event Handling + + + +
+

Counter using Arrow Function

+

Click the button to increase the counter:

+ +

0

+ +
+ + + + diff --git a/javascript/5-functions-error-handling/Assignment-3/script.js b/javascript/5-functions-error-handling/Assignment-3/script.js new file mode 100644 index 00000000..b0f33de9 --- /dev/null +++ b/javascript/5-functions-error-handling/Assignment-3/script.js @@ -0,0 +1,9 @@ +let count = 0; + +const incrementCounter = () => { + count++; + document.getElementById("counter").innerText = count; + console.log("Button clicked", count); +}; + +document.getElementById("incrementBtn").addEventListener("click", incrementCounter); diff --git a/javascript/5-functions-error-handling/Assignment-3/style.css b/javascript/5-functions-error-handling/Assignment-3/style.css new file mode 100644 index 00000000..7af46ac0 --- /dev/null +++ b/javascript/5-functions-error-handling/Assignment-3/style.css @@ -0,0 +1,40 @@ +body { + font-family: Arial, sans-serif; + background-color: #f5f5f5; + margin: 40px; +} + +.container { + background: white; + padding: 30px; + border-radius: 12px; + box-shadow: 0 0 10px rgba(0,0,0,0.1); + text-align: center; + width: 300px; + margin: auto; +} + +h2 { + color: #333; +} + +button { + background-color: #ff9800; + color: white; + border: none; + padding: 12px 20px; + border-radius: 6px; + font-size: 16px; + cursor: pointer; + margin-top: 15px; +} + +button:hover { + background-color: #f57c00; +} + +#counter { + font-size: 48px; + color: #4caf50; + margin: 15px 0; +} diff --git a/javascript/5-functions-error-handling/Assignment-4/iife.html b/javascript/5-functions-error-handling/Assignment-4/iife.html new file mode 100644 index 00000000..5c53b325 --- /dev/null +++ b/javascript/5-functions-error-handling/Assignment-4/iife.html @@ -0,0 +1,24 @@ + + + + + + IIFE Example - Default Initialization + + + +
+

IIFE - Default Values Setup

+ + + + + + + +

+
+ + + + diff --git a/javascript/5-functions-error-handling/Assignment-4/script.js b/javascript/5-functions-error-handling/Assignment-4/script.js new file mode 100644 index 00000000..2009558e --- /dev/null +++ b/javascript/5-functions-error-handling/Assignment-4/script.js @@ -0,0 +1,10 @@ + +(function() { + console.log("IIFE executed automatically on page load"); + const defaultName = "John Doe"; + const defaultEmail = "johndoe@example.com"; + document.getElementById("username").value = defaultName; + document.getElementById("email").value = defaultEmail; + document.getElementById("message").innerText = + `Default values have been initialized automatically.`; +})(); diff --git a/javascript/5-functions-error-handling/Assignment-4/style.css b/javascript/5-functions-error-handling/Assignment-4/style.css new file mode 100644 index 00000000..b602750b --- /dev/null +++ b/javascript/5-functions-error-handling/Assignment-4/style.css @@ -0,0 +1,43 @@ +body { + font-family: Arial, sans-serif; + background-color: #f5f5f5; + margin: 40px; +} + +.container { + background: white; + padding: 30px; + border-radius: 12px; + box-shadow: 0 0 10px rgba(0,0,0,0.1); + width: 350px; + margin: auto; +} + +h2 { + text-align: center; + color: #333; +} + +label { + display: block; + margin-top: 10px; + font-weight: bold; +} + +input { + width: 100%; + padding: 10px; + margin-top: 5px; + font-size: 16px; + border-radius: 6px; + border: 1px solid #ccc; +} + +#message { + margin-top: 15px; + background-color: #e3f2fd; + padding: 10px; + border-radius: 6px; + color: #1565c0; + text-align: center; +} diff --git a/javascript/5-functions-error-handling/Assignment-5/functionwithdiffpara.html b/javascript/5-functions-error-handling/Assignment-5/functionwithdiffpara.html new file mode 100644 index 00000000..9d34fa04 --- /dev/null +++ b/javascript/5-functions-error-handling/Assignment-5/functionwithdiffpara.html @@ -0,0 +1,27 @@ + + + + + + Function with Default Parameters - Rectangle Area + + + +
+

Rectangle Area Calculator

+

Leave fields empty to use default values.

+ + + + + + + + + +
+
+ + + + diff --git a/javascript/5-functions-error-handling/Assignment-5/script.js b/javascript/5-functions-error-handling/Assignment-5/script.js new file mode 100644 index 00000000..589dd610 --- /dev/null +++ b/javascript/5-functions-error-handling/Assignment-5/script.js @@ -0,0 +1,19 @@ + +function calculateRectangleArea(length = 5, width = 3) { + return length * width; +} + +function calculateArea() { + const lengthInput = document.getElementById("length").value; + const widthInput = document.getElementById("width").value; + + const length = lengthInput ? Number(lengthInput) : undefined; + const width = widthInput ? Number(widthInput) : undefined; + + const area = calculateRectangleArea(length, width); + + document.getElementById("result").innerText = + `Area of Rectangle = ${area} sq. units`; + + console.log(`Calculated area: ${area}`); +} diff --git a/javascript/5-functions-error-handling/Assignment-5/style.css b/javascript/5-functions-error-handling/Assignment-5/style.css new file mode 100644 index 00000000..edc08684 --- /dev/null +++ b/javascript/5-functions-error-handling/Assignment-5/style.css @@ -0,0 +1,60 @@ +body { + font-family: Arial, sans-serif; + background-color: #f5f5f5; + margin: 40px; +} + +.container { + background: white; + padding: 30px; + border-radius: 12px; + box-shadow: 0 0 10px rgba(0,0,0,0.1); + width: 350px; + margin: auto; +} + +h2 { + text-align: center; + color: #333; +} + +label { + display: block; + margin-top: 10px; + font-weight: bold; +} + +input { + width: 100%; + padding: 10px; + margin-top: 5px; + font-size: 16px; + border-radius: 6px; + border: 1px solid #ccc; +} + +button { + width: 100%; + padding: 10px; + background-color: #1976d2; + color: white; + border: none; + border-radius: 6px; + font-size: 16px; + margin-top: 15px; + cursor: pointer; +} + +button:hover { + background-color: #0d47a1; +} + +#result { + margin-top: 20px; + background: #e3f2fd; + padding: 10px; + border-radius: 6px; + color: #0d47a1; + text-align: center; + font-weight: bold; +} diff --git a/javascript/5-functions-error-handling/Assignment-6/restparam.html b/javascript/5-functions-error-handling/Assignment-6/restparam.html new file mode 100644 index 00000000..bb9e2845 --- /dev/null +++ b/javascript/5-functions-error-handling/Assignment-6/restparam.html @@ -0,0 +1,23 @@ + + + + + + Rest Parameters - Sum of Numbers + + + +
+

Sum of Numbers using Rest Parameters

+

Enter numbers separated by commas:

+ + + + + +
+
+ + + + diff --git a/javascript/5-functions-error-handling/Assignment-6/script.js b/javascript/5-functions-error-handling/Assignment-6/script.js new file mode 100644 index 00000000..17fd19d5 --- /dev/null +++ b/javascript/5-functions-error-handling/Assignment-6/script.js @@ -0,0 +1,23 @@ + +function sumAll(...numbers) { + return numbers.reduce((total, num) => total + num, 0); +} + +function calculateSum() { + const input = document.getElementById("numbers").value; + + if (!input.trim()) { + document.getElementById("result").innerHTML = "

Please enter some numbers!

"; + return; + } + + const numArray = input.split(",").map(Number); + + const total = sumAll(...numArray); + + document.getElementById("result").innerText = + `Sum of numbers = ${total}`; + + console.log("Numbers:", numArray); + console.log("Sum:", total); +} diff --git a/javascript/5-functions-error-handling/Assignment-6/style.css b/javascript/5-functions-error-handling/Assignment-6/style.css new file mode 100644 index 00000000..08f46d63 --- /dev/null +++ b/javascript/5-functions-error-handling/Assignment-6/style.css @@ -0,0 +1,54 @@ +body { + font-family: Arial, sans-serif; + background-color: #f5f5f5; + margin: 40px; +} + +.container { + background: white; + padding: 30px; + border-radius: 12px; + box-shadow: 0 0 10px rgba(0,0,0,0.1); + width: 350px; + margin: auto; +} + +h2 { + text-align: center; + color: #333; +} + +input { + width: 100%; + padding: 10px; + margin-top: 10px; + font-size: 16px; + border-radius: 6px; + border: 1px solid #ccc; +} + +button { + width: 100%; + padding: 10px; + background-color: #009688; + color: white; + border: none; + border-radius: 6px; + font-size: 16px; + margin-top: 15px; + cursor: pointer; +} + +button:hover { + background-color: #00796b; +} + +#result { + margin-top: 20px; + background: #e0f7fa; + padding: 10px; + border-radius: 6px; + color: #004d40; + text-align: center; + font-weight: bold; +} diff --git a/javascript/5-functions-error-handling/Assignment-7/nestedfunc.html b/javascript/5-functions-error-handling/Assignment-7/nestedfunc.html new file mode 100644 index 00000000..a4cd4cee --- /dev/null +++ b/javascript/5-functions-error-handling/Assignment-7/nestedfunc.html @@ -0,0 +1,27 @@ + + + + + + Nested Functions with Default Values + + + +
+

Rectangle Calculator (Nested Functions)

+

Enter values or leave blank to use defaults (Length = 5, Width = 3):

+ + + + + + + + + +
+
+ + + + diff --git a/javascript/5-functions-error-handling/Assignment-7/script.js b/javascript/5-functions-error-handling/Assignment-7/script.js new file mode 100644 index 00000000..f19c7cd1 --- /dev/null +++ b/javascript/5-functions-error-handling/Assignment-7/script.js @@ -0,0 +1,31 @@ + +function rectangleCalculator(length = 5, width = 3) { + + function calculateArea() { + return length * width; + } + + const perimeter = 2 * (length + width); + const area = calculateArea(); + + return { perimeter, area }; +} +function calculateRectangle() { + const lengthInput = document.getElementById("length").value; + const widthInput = document.getElementById("width").value; + + const length = lengthInput ? Number(lengthInput) : undefined; + const width = widthInput ? Number(widthInput) : undefined; + + const results = rectangleCalculator(length, width); + + document.getElementById("result").innerHTML = ` + Perimeter of Rectangle = ${results.perimeter} units
+ Area of Rectangle = ${results.area} sq. units + `; + + console.log("Length:", length || 5); + console.log("Width:", width || 3); + console.log("Perimeter:", results.perimeter); + console.log("Area:", results.area); +} diff --git a/javascript/5-functions-error-handling/Assignment-7/style.css b/javascript/5-functions-error-handling/Assignment-7/style.css new file mode 100644 index 00000000..ebd20a1a --- /dev/null +++ b/javascript/5-functions-error-handling/Assignment-7/style.css @@ -0,0 +1,60 @@ +body { + font-family: Arial, sans-serif; + background-color: #f5f5f5; + margin: 40px; +} + +.container { + background: white; + padding: 30px; + border-radius: 12px; + box-shadow: 0 0 10px rgba(0,0,0,0.1); + width: 380px; + margin: auto; +} + +h2 { + text-align: center; + color: #333; +} + +label { + display: block; + margin-top: 10px; + font-weight: bold; +} + +input { + width: 100%; + padding: 10px; + margin-top: 5px; + font-size: 16px; + border-radius: 6px; + border: 1px solid #ccc; +} + +button { + width: 100%; + padding: 10px; + background-color: #3f51b5; + color: white; + border: none; + border-radius: 6px; + font-size: 16px; + margin-top: 15px; + cursor: pointer; +} + +button:hover { + background-color: #303f9f; +} + +#result { + margin-top: 20px; + background: #e8eaf6; + padding: 10px; + border-radius: 6px; + color: #1a237e; + text-align: center; + font-weight: bold; +} diff --git a/javascript/5-functions-error-handling/Assignment-8/callbackfunc.html b/javascript/5-functions-error-handling/Assignment-8/callbackfunc.html new file mode 100644 index 00000000..2262bade --- /dev/null +++ b/javascript/5-functions-error-handling/Assignment-8/callbackfunc.html @@ -0,0 +1,23 @@ + + + + + + Callback Functions with Default Parameters + + + +
+

Callback Function Example

+

Enter any text to process (default behavior: convert to uppercase):

+ + + + + +
+
+ + + + diff --git a/javascript/5-functions-error-handling/Assignment-8/script.js b/javascript/5-functions-error-handling/Assignment-8/script.js new file mode 100644 index 00000000..821a7202 --- /dev/null +++ b/javascript/5-functions-error-handling/Assignment-8/script.js @@ -0,0 +1,24 @@ + +function handleText(input, callback = (text) => text.toUpperCase()) { + + return callback(input); +} + +function processInput() { + const inputText = document.getElementById("userInput").value.trim(); + + if (!inputText) { + document.getElementById("result").innerHTML = "

Please enter some text!

"; + return; + } + + const result1 = handleText(inputText); + + + + document.getElementById("result").innerText = + `Processed Text: ${result1}`; + + console.log("Original:", inputText); + console.log("Processed:", result1); +} diff --git a/javascript/5-functions-error-handling/Assignment-8/style.css b/javascript/5-functions-error-handling/Assignment-8/style.css new file mode 100644 index 00000000..1fa2dbdf --- /dev/null +++ b/javascript/5-functions-error-handling/Assignment-8/style.css @@ -0,0 +1,59 @@ +body { + font-family: Arial, sans-serif; + background-color: #f5f5f5; + margin: 40px; +} + +.container { + background: white; + padding: 30px; + border-radius: 12px; + box-shadow: 0 0 10px rgba(0,0,0,0.1); + width: 380px; + margin: auto; +} + +h2 { + text-align: center; + color: #333; +} + +p { + font-size: 14px; + color: #555; +} + +input { + width: 100%; + padding: 10px; + margin-top: 10px; + font-size: 16px; + border-radius: 6px; + border: 1px solid #ccc; +} + +button { + width: 100%; + padding: 10px; + background-color: #8e24aa; + color: white; + border: none; + border-radius: 6px; + font-size: 16px; + margin-top: 15px; + cursor: pointer; +} + +button:hover { + background-color: #6a1b9a; +} + +#result { + margin-top: 20px; + background: #f3e5f5; + padding: 10px; + border-radius: 6px; + color: #4a148c; + text-align: center; + font-weight: bold; +} diff --git a/javascript/5-functions-error-handling/Assignment-9/bankaccount.html b/javascript/5-functions-error-handling/Assignment-9/bankaccount.html new file mode 100644 index 00000000..e6dca5de --- /dev/null +++ b/javascript/5-functions-error-handling/Assignment-9/bankaccount.html @@ -0,0 +1,27 @@ + + + + + + Private Variables with Closures - Bank Account + + + +
+

🏦 Bank Account with Closures

+ + + + +
+ + + +
+ +
+
+ + + + diff --git a/javascript/5-functions-error-handling/Assignment-9/script.js b/javascript/5-functions-error-handling/Assignment-9/script.js new file mode 100644 index 00000000..75f23ca5 --- /dev/null +++ b/javascript/5-functions-error-handling/Assignment-9/script.js @@ -0,0 +1,46 @@ + +function createBankAccount() { + let balance = 0; + + return { + deposit: function(amount) { + if (amount > 0) { + balance += amount; + return `Deposited ₹${amount}.`; + } else { + return "Enter a valid amount to deposit."; + } + }, + + withdraw: function(amount) { + if (amount > 0 && amount <= balance) { + balance -= amount; + return `Withdrew ₹${amount}.`; + } else if (amount > balance) { + return "Insufficient balance!"; + } else { + return "Enter a valid amount to withdraw."; + } + }, + + checkBalance: function() { + return `Current Balance: ₹${balance}`; + } + }; +} + +const myAccount = createBankAccount(); + +function deposit() { + const amount = Number(document.getElementById("amount").value); + document.getElementById("result").innerText = myAccount.deposit(amount); +} + +function withdraw() { + const amount = Number(document.getElementById("amount").value); + document.getElementById("result").innerText = myAccount.withdraw(amount); +} + +function checkBalance() { + document.getElementById("result").innerText = myAccount.checkBalance(); +} diff --git a/javascript/5-functions-error-handling/Assignment-9/style.css b/javascript/5-functions-error-handling/Assignment-9/style.css new file mode 100644 index 00000000..0f565c3f --- /dev/null +++ b/javascript/5-functions-error-handling/Assignment-9/style.css @@ -0,0 +1,56 @@ +body { + font-family: Arial, sans-serif; + background-color: #f2f2f2; + margin: 40px; +} + +.container { + background: white; + padding: 30px; + border-radius: 12px; + box-shadow: 0 0 10px rgba(0,0,0,0.1); + width: 350px; + margin: auto; + text-align: center; +} + +h2 { + color: #2e7d32; + margin-bottom: 20px; +} + +input { + width: 80%; + padding: 10px; + font-size: 16px; + border-radius: 6px; + border: 1px solid #ccc; +} + +.buttons { + margin-top: 20px; +} + +button { + padding: 10px 15px; + margin: 5px; + border: none; + border-radius: 6px; + background-color: #2e7d32; + color: white; + cursor: pointer; + font-size: 14px; +} + +button:hover { + background-color: #1b5e20; +} + +#result { + margin-top: 20px; + font-weight: bold; + background: #e8f5e9; + padding: 10px; + border-radius: 6px; + color: #1b5e20; +}