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/html/5-projects/Assignment-1/personal-homepage.html b/html/5-projects/Assignment-1/personal-homepage.html new file mode 100644 index 00000000..3d9da888 --- /dev/null +++ b/html/5-projects/Assignment-1/personal-homepage.html @@ -0,0 +1,58 @@ + + + + + My Personal Homepage + + + +
+

Welcome to My Homepage

+

A short introduction about myself

+
+ +
+
+

About Me

+

Hello! My name is Sai Durga. I am passionate about web development and always eager to learn new technologies.

+
+ +
+

Education

+

I am a recent Graduate of Bachelor’s Degree in Information Technology.

+
+
+

Skills

+ +
+
+

Contact Me

+
+
+

+ +
+

+ +
+

+ +
+

+ + +
+
+
+ + + + + diff --git a/javascript/6-arrays-objects-strings/Assignment-1/customarray.html b/javascript/6-arrays-objects-strings/Assignment-1/customarray.html new file mode 100644 index 00000000..01d61c3b --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-1/customarray.html @@ -0,0 +1,24 @@ + + + + + + Custom Array Flatten + + + +

Custom Array Flatten Function

+ +
+
+ +

+ + +

Result:

+

+
+ + + + diff --git a/javascript/6-arrays-objects-strings/Assignment-1/script.js b/javascript/6-arrays-objects-strings/Assignment-1/script.js new file mode 100644 index 00000000..c8e29bde --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-1/script.js @@ -0,0 +1,24 @@ +// Function to recursively flatten an array +function customFlatten(arr) { + let result = []; + for (let element of arr) { + if (Array.isArray(element)) { + result = result.concat(customFlatten(element)); + } else { + result.push(element); + } + } + return result; +} + +function flattenArray() { + let input = document.getElementById("inputArray").value; + + try { + let arr = JSON.parse(input); + let flattened = customFlatten(arr); + document.getElementById("result").innerHTML = `[ ${flattened.join(", ")} ]`; + } catch (error) { + document.getElementById("result").innerHTML = "❌ Invalid input! Please enter a valid array format."; + } +} diff --git a/javascript/6-arrays-objects-strings/Assignment-1/style.css b/javascript/6-arrays-objects-strings/Assignment-1/style.css new file mode 100644 index 00000000..3cf5a83f --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-1/style.css @@ -0,0 +1,42 @@ +body { + font-family: Arial, sans-serif; + background-color: #f7f9fc; + text-align: center; + margin-top: 50px; +} + +.container { + display: inline-block; + background-color: #fff; + padding: 20px 30px; + border-radius: 12px; + box-shadow: 0 4px 8px rgba(0,0,0,0.2); +} + +input { + padding: 8px; + font-size: 16px; + width: 70%; + border-radius: 6px; + border: 1px solid #ccc; +} + +button { + padding: 10px 20px; + background-color: #007bff; + color: white; + border: none; + border-radius: 6px; + cursor: pointer; +} + +button:hover { + background-color: #0056b3; +} + +#result { + margin-top: 15px; + font-size: 18px; + font-weight: bold; + color: #333; +} diff --git a/javascript/6-arrays-objects-strings/Assignment-10/arrayloop.html b/javascript/6-arrays-objects-strings/Assignment-10/arrayloop.html new file mode 100644 index 00000000..30000851 --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-10/arrayloop.html @@ -0,0 +1,23 @@ + + + + + + Array Loop Performance Comparison + + + +

16. Performance Optimization – Loop Comparison

+ +
+ + + + +

Results:

+

+  
+ + + + diff --git a/javascript/6-arrays-objects-strings/Assignment-10/script.js b/javascript/6-arrays-objects-strings/Assignment-10/script.js new file mode 100644 index 00000000..8ff0c51d --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-10/script.js @@ -0,0 +1,36 @@ +function comparePerformance() { + const size = parseInt(document.getElementById("arraySize").value); + const output = document.getElementById("output"); + + if (!size || size <= 0) { + alert("Please enter a valid array size!"); + return; + } + + const arr = Array.from({ length: size }, (_, i) => i); + + let result = ""; + let start = performance.now(); + let sum = 0; + for (let i = 0; i < arr.length; i++) { + sum += arr[i]; + } + let forTime = performance.now() - start; + result += `for loop: ${forTime.toFixed(3)} ms\n`; + start = performance.now(); + sum = 0; + for (const num of arr) { + sum += num; + } + let forOfTime = performance.now() - start; + result += `for...of loop: ${forOfTime.toFixed(3)} ms\n`; + + start = performance.now(); + sum = 0; + arr.forEach(num => sum += num); + let forEachTime = performance.now() - start; + result += `forEach loop: ${forEachTime.toFixed(3)} ms\n`; + result += `\nFastest: ${Math.min(forTime, forOfTime, forEachTime) === forTime ? "for loop" : Math.min(forOfTime, forEachTime) === forOfTime ? "for...of loop" : "forEach loop"}`; + + output.textContent = result; +} diff --git a/javascript/6-arrays-objects-strings/Assignment-10/style.css b/javascript/6-arrays-objects-strings/Assignment-10/style.css new file mode 100644 index 00000000..ab08ba6a --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-10/style.css @@ -0,0 +1,40 @@ +body { + font-family: Arial, sans-serif; + background-color: #f3f6fa; + padding: 20px; +} + +.container { + background-color: white; + padding: 20px; + border-radius: 10px; + width: 420px; + box-shadow: 0 2px 5px rgba(0,0,0,0.1); +} + +input { + width: 100%; + margin: 8px 0; + padding: 8px; + border: 1px solid #ccc; + border-radius: 5px; +} + +button { + background-color: #007bff; + color: white; + border: none; + padding: 8px 14px; + border-radius: 6px; + cursor: pointer; +} + +button:hover { + background-color: #0056b3; +} + +pre { + background-color: #f2f2f2; + padding: 12px; + border-radius: 6px; +} diff --git a/javascript/6-arrays-objects-strings/Assignment-11/restspread.html b/javascript/6-arrays-objects-strings/Assignment-11/restspread.html new file mode 100644 index 00000000..8f2866d0 --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-11/restspread.html @@ -0,0 +1,27 @@ + + + + + + Array Manipulation with Rest and Spread + + + +

17. Array Manipulation with Rest and Spread

+ +
+ + + + + + + + +

Result:

+

+  
+ + + + diff --git a/javascript/6-arrays-objects-strings/Assignment-11/script.js b/javascript/6-arrays-objects-strings/Assignment-11/script.js new file mode 100644 index 00000000..8633cc2e --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-11/script.js @@ -0,0 +1,19 @@ +function combineArrays() { + const arr1Input = document.getElementById("array1").value; + const arr2Input = document.getElementById("array2").value; + const output = document.getElementById("output"); + + const arr1 = arr1Input.split(",").map(Number); + const arr2 = arr2Input.split(",").map(Number); + + const combined = [...arr1, ...arr2]; + + const uniqueArray = []; + for (let num of combined) { + if (!uniqueArray.includes(num)) { + uniqueArray.push(num); + } + } + + output.textContent = `Combined Unique Array: [${uniqueArray.join(", ")}]`; +} diff --git a/javascript/6-arrays-objects-strings/Assignment-11/style.css b/javascript/6-arrays-objects-strings/Assignment-11/style.css new file mode 100644 index 00000000..ebb99d59 --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-11/style.css @@ -0,0 +1,40 @@ +body { + font-family: Arial, sans-serif; + background-color: #eef3f8; + padding: 20px; +} + +.container { + background-color: white; + padding: 20px; + border-radius: 10px; + width: 420px; + box-shadow: 0 2px 6px rgba(0,0,0,0.1); +} + +input { + width: 100%; + padding: 8px; + margin: 8px 0; + border: 1px solid #ccc; + border-radius: 6px; +} + +button { + background-color: #007bff; + color: white; + border: none; + padding: 8px 14px; + border-radius: 6px; + cursor: pointer; +} + +button:hover { + background-color: #0056b3; +} + +pre { + background-color: #f2f2f2; + padding: 10px; + border-radius: 6px; +} diff --git a/javascript/6-arrays-objects-strings/Assignment-12/combinearray.html b/javascript/6-arrays-objects-strings/Assignment-12/combinearray.html new file mode 100644 index 00000000..27a1d7de --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-12/combinearray.html @@ -0,0 +1,24 @@ + + + + + + Combining Array Methods + + + +

18. Combining Array Methods

+ +
+ + + + + +

Result:

+

+  
+ + + + diff --git a/javascript/6-arrays-objects-strings/Assignment-12/script.js b/javascript/6-arrays-objects-strings/Assignment-12/script.js new file mode 100644 index 00000000..ab7f6f93 --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-12/script.js @@ -0,0 +1,20 @@ +function processNumbers() { + const input = document.getElementById("numbers").value; + const output = document.getElementById("output"); + + const arr = input.split(",").map(Number); + const result = arr + .filter(num => num % 2 === 0) + .map(num => num * 2) + .reduce((sum, num) => sum + num, 0); + + + const evens = arr.filter(num => num % 2 === 0); + const doubled = evens.map(num => num * 2); + + output.textContent = +`Original Array: [${arr.join(", ")}] +Even Numbers: [${evens.join(", ")}] +Doubled Numbers: [${doubled.join(", ")}] +Sum of Doubled Evens: ${result}`; +} diff --git a/javascript/6-arrays-objects-strings/Assignment-12/style.css b/javascript/6-arrays-objects-strings/Assignment-12/style.css new file mode 100644 index 00000000..f1e63ffc --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-12/style.css @@ -0,0 +1,40 @@ +body { + font-family: Arial, sans-serif; + background-color: #eef3f8; + padding: 20px; +} + +.container { + background-color: #fff; + padding: 20px; + border-radius: 10px; + width: 420px; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); +} + +input { + width: 100%; + padding: 8px; + margin: 8px 0; + border: 1px solid #ccc; + border-radius: 6px; +} + +button { + background-color: #007bff; + color: white; + border: none; + padding: 8px 14px; + border-radius: 6px; + cursor: pointer; +} + +button:hover { + background-color: #0056b3; +} + +pre { + background-color: #f2f2f2; + padding: 10px; + border-radius: 6px; +} diff --git a/javascript/6-arrays-objects-strings/Assignment-13/objectmanipulation.html b/javascript/6-arrays-objects-strings/Assignment-13/objectmanipulation.html new file mode 100644 index 00000000..366729e6 --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-13/objectmanipulation.html @@ -0,0 +1,27 @@ + + + + + + Object Manipulation with Dynamic Keys + + + +

1. Object Manipulation with Dynamic Keys

+ +
+ + + + + + + + +

Current Object:

+

+  
+ + + + diff --git a/javascript/6-arrays-objects-strings/Assignment-13/script.js b/javascript/6-arrays-objects-strings/Assignment-13/script.js new file mode 100644 index 00000000..57b59751 --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-13/script.js @@ -0,0 +1,23 @@ + +let userObject = {}; + +function addToObject() { + const key = document.getElementById("keyInput").value.trim(); + const value = document.getElementById("valueInput").value.trim(); + const output = document.getElementById("output"); + + if (key === "" || value === "") { + output.textContent = "⚠️ Please enter both key and value."; + return; + } + + if (userObject.hasOwnProperty(key)) { + output.textContent = `🔁 Key "${key}" already exists. Value will be updated.`; + } else { + output.textContent = `✅ Added new key "${key}" to the object.`; + } + + userObject[key] = value; + + output.textContent += `\n\n📦 Current Object:\n${JSON.stringify(userObject, null, 2)}`; +} diff --git a/javascript/6-arrays-objects-strings/Assignment-13/style.css b/javascript/6-arrays-objects-strings/Assignment-13/style.css new file mode 100644 index 00000000..186fd665 --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-13/style.css @@ -0,0 +1,53 @@ +body { + font-family: Arial, sans-serif; + background-color: #f3f5f9; + padding: 30px; +} + +h2 { + color: #333; +} + +.container { + background-color: #fff; + padding: 20px; + width: 400px; + border-radius: 10px; + box-shadow: 0 4px 10px rgba(0,0,0,0.1); +} + +label { + display: block; + margin-top: 10px; + font-weight: bold; +} + +input { + width: 100%; + padding: 8px; + margin-top: 4px; + margin-bottom: 10px; + border: 1px solid #ccc; + border-radius: 5px; +} + +button { + background-color: #007bff; + color: white; + border: none; + padding: 10px 16px; + border-radius: 6px; + cursor: pointer; + margin-top: 5px; +} + +button:hover { + background-color: #0056b3; +} + +pre { + background-color: #f8f8f8; + padding: 12px; + border-radius: 6px; + font-size: 15px; +} diff --git a/javascript/6-arrays-objects-strings/Assignment-14/deepclone.html b/javascript/6-arrays-objects-strings/Assignment-14/deepclone.html new file mode 100644 index 00000000..da0335a7 --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-14/deepclone.html @@ -0,0 +1,23 @@ + + + + + + Deep Clone an Object + + + +

2. Deep Clone an Object

+ +
+

Problem: Create a deep clone of a nested object so that changes to the clone don’t affect the original.

+ + + +

Results:

+

+  
+ + + + diff --git a/javascript/6-arrays-objects-strings/Assignment-14/script.js b/javascript/6-arrays-objects-strings/Assignment-14/script.js new file mode 100644 index 00000000..a91b4d9d --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-14/script.js @@ -0,0 +1,43 @@ + +function deepClone(obj) { + + if (typeof obj !== "object" || obj === null) { + return obj; + } + const clone = Array.isArray(obj) ? [] : {}; + + for (let key in obj) { + if (obj.hasOwnProperty(key)) { + clone[key] = deepClone(obj[key]); + } + } + + return clone; +} + +function cloneObject() { + const output = document.getElementById("output"); + + let obj = { + a: 1, + b: { + c: 2, + d: [3, 4, 5] + } + }; + + let clone = deepClone(obj); + + clone.b.c = 99; + clone.b.d.push(6); + + output.textContent = ` +Original Object: +${JSON.stringify(obj, null, 2)} + +Cloned & Modified Object: +${JSON.stringify(clone, null, 2)} + +✅ Result: Changes in clone DO NOT affect original object. +`; +} diff --git a/javascript/6-arrays-objects-strings/Assignment-14/style.css b/javascript/6-arrays-objects-strings/Assignment-14/style.css new file mode 100644 index 00000000..4c2773fa --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-14/style.css @@ -0,0 +1,39 @@ +body { + font-family: Arial, sans-serif; + background-color: #f3f5f9; + padding: 30px; +} + +h2 { + color: #333; +} + +.container { + background-color: #fff; + padding: 20px; + width: 450px; + border-radius: 10px; + box-shadow: 0 4px 10px rgba(0,0,0,0.1); +} + +button { + background-color: #28a745; + color: white; + border: none; + padding: 10px 16px; + border-radius: 6px; + cursor: pointer; + margin-top: 10px; +} + +button:hover { + background-color: #1e7e34; +} + +pre { + background-color: #f8f8f8; + padding: 12px; + border-radius: 6px; + font-size: 15px; + margin-top: 15px; +} diff --git a/javascript/6-arrays-objects-strings/Assignment-15/objectinheritence.html b/javascript/6-arrays-objects-strings/Assignment-15/objectinheritence.html new file mode 100644 index 00000000..394fe69f --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-15/objectinheritence.html @@ -0,0 +1,29 @@ + + + + + + Object Inheritance Using Prototypes + + + +

3. Object Inheritance Using Prototypes

+ +
+

Problem: Create Person and Employee objects, where Employee inherits from Person using prototypes.

+ + + + + + + + + +

Output:

+

+  
+ + + + diff --git a/javascript/6-arrays-objects-strings/Assignment-15/script.js b/javascript/6-arrays-objects-strings/Assignment-15/script.js new file mode 100644 index 00000000..c7239867 --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-15/script.js @@ -0,0 +1,41 @@ +// Base object - Person +let Person = { + name: '', + greet: function() { + return `Hello, ${this.name}!`; + } +}; + +let Employee = Object.create(Person); +Employee.job = ''; +Employee.greet = function() { + return `Hello, ${this.name} the ${this.job}!`; +}; + +function createEmployee() { + const nameInput = document.getElementById('nameInput').value.trim(); + const jobInput = document.getElementById('jobInput').value.trim(); + const output = document.getElementById('output'); + + if (!nameInput || !jobInput) { + output.textContent = "⚠️ Please enter both name and job."; + return; + } + + const newEmployee = Object.create(Employee); + newEmployee.name = nameInput; + newEmployee.job = jobInput; + + const greeting = newEmployee.greet(); + const prototypeCheck = Object.getPrototypeOf(newEmployee) === Employee; + + output.textContent = ` +Greeting: ${greeting} + +Prototype Chain: +newEmployee → Employee → Person + +Prototype Check: +Object.getPrototypeOf(newEmployee) === Employee → ${prototypeCheck} +`; +} diff --git a/javascript/6-arrays-objects-strings/Assignment-15/style.css b/javascript/6-arrays-objects-strings/Assignment-15/style.css new file mode 100644 index 00000000..07cb2fd9 --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-15/style.css @@ -0,0 +1,52 @@ +body { + font-family: "Segoe UI", sans-serif; + background-color: #f4f7fb; + padding: 40px; +} + +h2 { + color: #333; +} + +.container { + background: #fff; + padding: 20px 25px; + border-radius: 10px; + box-shadow: 0 3px 10px rgba(0,0,0,0.1); + width: 420px; +} + +label { + display: block; + margin-top: 12px; + font-weight: bold; +} + +input { + width: 95%; + padding: 8px; + border-radius: 5px; + border: 1px solid #ccc; + margin-bottom: 10px; +} + +button { + background-color: #007bff; + color: white; + border: none; + padding: 10px 14px; + border-radius: 6px; + cursor: pointer; +} + +button:hover { + background-color: #0056b3; +} + +pre { + background-color: #f8f8f8; + padding: 10px; + border-radius: 6px; + font-size: 15px; + margin-top: 15px; +} diff --git a/javascript/6-arrays-objects-strings/Assignment-16/objectmerging.html b/javascript/6-arrays-objects-strings/Assignment-16/objectmerging.html new file mode 100644 index 00000000..121d0b4c --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-16/objectmerging.html @@ -0,0 +1,30 @@ + + + + + + 4. Object Merging (Deep Merge) + + + +

4. Object Merging (Deep Merge)

+ +
+

Problem: Merge two objects into one, overwriting existing properties. + Ensure it works even for nested objects (deep merge).

+ + + + + + + + + +

Output:

+

+  
+ + + + diff --git a/javascript/6-arrays-objects-strings/Assignment-16/script.js b/javascript/6-arrays-objects-strings/Assignment-16/script.js new file mode 100644 index 00000000..86490f2c --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-16/script.js @@ -0,0 +1,39 @@ + +function deepMerge(target, source) { + + for (let key in source) { + if ( + source[key] && + typeof source[key] === "object" && + !Array.isArray(source[key]) + ) { + + if (!target[key] || typeof target[key] !== "object") { + target[key] = {}; + } + deepMerge(target[key], source[key]); + } else { + + target[key] = source[key]; + } + } + return target; +} + + +function mergeObjects() { + const output = document.getElementById("output"); + + try { + + const obj1 = JSON.parse(document.getElementById("obj1Input").value); + const obj2 = JSON.parse(document.getElementById("obj2Input").value); + + + const result = deepMerge(structuredClone(obj1), obj2); + + output.textContent = JSON.stringify(result, null, 2); + } catch (err) { + output.textContent = "⚠️ Invalid JSON format. Please check your input."; + } +} diff --git a/javascript/6-arrays-objects-strings/Assignment-16/style.css b/javascript/6-arrays-objects-strings/Assignment-16/style.css new file mode 100644 index 00000000..c8a3fbef --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-16/style.css @@ -0,0 +1,53 @@ +body { + font-family: "Segoe UI", sans-serif; + background-color: #eef2f7; + padding: 40px; +} + +h2 { + color: #222; +} + +.container { + background: #fff; + padding: 20px 25px; + border-radius: 12px; + box-shadow: 0 3px 10px rgba(0,0,0,0.1); + width: 480px; +} + +label { + display: block; + margin-top: 12px; + font-weight: 600; +} + +textarea { + width: 95%; + padding: 10px; + border: 1px solid #ccc; + border-radius: 6px; + font-family: monospace; + margin-bottom: 10px; +} + +button { + background-color: #007bff; + color: white; + border: none; + padding: 10px 16px; + border-radius: 6px; + cursor: pointer; +} + +button:hover { + background-color: #0056b3; +} + +pre { + background-color: #f8f8f8; + padding: 12px; + border-radius: 6px; + font-size: 15px; + margin-top: 15px; +} diff --git a/javascript/6-arrays-objects-strings/Assignment-17/methodchaining.html b/javascript/6-arrays-objects-strings/Assignment-17/methodchaining.html new file mode 100644 index 00000000..9d7c21af --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-17/methodchaining.html @@ -0,0 +1,29 @@ + + + + + + 5. Method Chaining in Objects + + + +

5. Method Chaining in Objects (Class Example)

+ +
+

Problem: Implement a class with methods setName(), setAge(), and greet() that can be chained together.

+ + + + + + + + + +

Output:

+

+
+ + + + diff --git a/javascript/6-arrays-objects-strings/Assignment-17/script.js b/javascript/6-arrays-objects-strings/Assignment-17/script.js new file mode 100644 index 00000000..94b28a72 --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-17/script.js @@ -0,0 +1,38 @@ + +class Person { + constructor() { + this.name = ""; + this.age = 0; + } + + + setName(name) { + this.name = name; + return this; + } + + setAge(age) { + this.age = age; + return this; + } + + greet() { + const message = `Hello, I am ${this.name}, ${this.age} years old.`; + document.getElementById("output").textContent = message; + return this; + } +} + +function createPerson() { + const name = document.getElementById("name").value.trim(); + const age = document.getElementById("age").value.trim(); + + if (!name || !age) { + document.getElementById("output").textContent = "⚠️ Please enter both name and age."; + return; + } + + const person = new Person().setName(name).setAge(age).greet(); + + console.log(person); +} diff --git a/javascript/6-arrays-objects-strings/Assignment-17/style.css b/javascript/6-arrays-objects-strings/Assignment-17/style.css new file mode 100644 index 00000000..c83b0248 --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-17/style.css @@ -0,0 +1,53 @@ +body { + font-family: "Poppins", sans-serif; + background-color: #f0f4f9; + padding: 40px; +} + +h2 { + color: #333; +} + +.container { + background: white; + padding: 25px; + border-radius: 12px; + box-shadow: 0 3px 10px rgba(0,0,0,0.1); + width: 400px; +} + +label { + display: block; + margin-top: 12px; + font-weight: 600; +} + +input { + width: 95%; + padding: 8px; + margin-bottom: 12px; + border: 1px solid #ccc; + border-radius: 6px; +} + +button { + background-color: #007bff; + color: white; + border: none; + padding: 10px 16px; + border-radius: 6px; + cursor: pointer; +} + +button:hover { + background-color: #0056b3; +} + +#output { + background-color: #f8f9fa; + padding: 10px; + border-radius: 6px; + font-size: 16px; + color: #222; + min-height: 30px; +} diff --git a/javascript/6-arrays-objects-strings/Assignment-18/script.js b/javascript/6-arrays-objects-strings/Assignment-18/script.js new file mode 100644 index 00000000..50066677 --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-18/script.js @@ -0,0 +1,13 @@ +function calculateWordLengths() { + const input = document.getElementById("inputStr").value.trim(); + + if (input === "") { + document.getElementById("result").innerText = "Please enter a sentence."; + return; + } + + const words = input.split(" "); + const lengths = words.map(word => word.length); + + document.getElementById("result").innerText = lengths.join(" "); +} diff --git a/javascript/6-arrays-objects-strings/Assignment-18/stringlength.html b/javascript/6-arrays-objects-strings/Assignment-18/stringlength.html new file mode 100644 index 00000000..d45b09fc --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-18/stringlength.html @@ -0,0 +1,23 @@ + + + + + + String Word Length Calculator + + + +
+

String Word Length Calculator

+ +
+ + + +

Output:

+

+
+ + + + diff --git a/javascript/6-arrays-objects-strings/Assignment-18/style.css b/javascript/6-arrays-objects-strings/Assignment-18/style.css new file mode 100644 index 00000000..d520f5a8 --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-18/style.css @@ -0,0 +1,44 @@ +body { + font-family: Arial, sans-serif; + background-color: #f5f5f5; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.container { + background: white; + padding: 25px 30px; + border-radius: 12px; + box-shadow: 0 4px 15px rgba(0,0,0,0.1); + text-align: center; + width: 350px; +} + +input { + width: 80%; + padding: 8px; + margin: 10px 0; + border: 1px solid #ccc; + border-radius: 6px; +} + +button { + padding: 8px 15px; + background-color: #007bff; + color: white; + border: none; + border-radius: 6px; + cursor: pointer; +} + +button:hover { + background-color: #0056b3; +} + +#result { + font-weight: bold; + color: #333; + margin-top: 10px; +} diff --git a/javascript/6-arrays-objects-strings/Assignment-19/script.js b/javascript/6-arrays-objects-strings/Assignment-19/script.js new file mode 100644 index 00000000..e14b4ad3 --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-19/script.js @@ -0,0 +1,13 @@ +function findFirstAndLast() { + const input = document.getElementById("inputStr").value.trim(); + + if (input === "") { + document.getElementById("result").innerText = "null"; + return; + } + + const firstChar = input.charAt(0); + const lastChar = input.charAt(input.length - 1); + + document.getElementById("result").innerText = `${firstChar} ${lastChar}`; +} diff --git a/javascript/6-arrays-objects-strings/Assignment-19/stringindexing.html b/javascript/6-arrays-objects-strings/Assignment-19/stringindexing.html new file mode 100644 index 00000000..f1ec2b9b --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-19/stringindexing.html @@ -0,0 +1,23 @@ + + + + + + String Indexing + + + +
+

String Indexing

+ +
+ + + +

Output:

+

+
+ + + + diff --git a/javascript/6-arrays-objects-strings/Assignment-19/style.css b/javascript/6-arrays-objects-strings/Assignment-19/style.css new file mode 100644 index 00000000..2b633b67 --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-19/style.css @@ -0,0 +1,44 @@ +body { + font-family: Arial, sans-serif; + background-color: #f9fafb; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.container { + background: white; + padding: 25px 30px; + border-radius: 12px; + box-shadow: 0 4px 15px rgba(0,0,0,0.1); + text-align: center; + width: 350px; +} + +input { + width: 80%; + padding: 8px; + margin: 10px 0; + border: 1px solid #ccc; + border-radius: 6px; +} + +button { + padding: 8px 15px; + background-color: #007bff; + color: white; + border: none; + border-radius: 6px; + cursor: pointer; +} + +button:hover { + background-color: #0056b3; +} + +#result { + font-weight: bold; + color: #333; + margin-top: 10px; +} diff --git a/javascript/6-arrays-objects-strings/Assignment-2/script.js b/javascript/6-arrays-objects-strings/Assignment-2/script.js new file mode 100644 index 00000000..c6837dc2 --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-2/script.js @@ -0,0 +1,61 @@ +class Stack { + constructor() { + this.items = []; + } + + push(element) { + this.items.push(element); + } + + pop() { + if (this.isEmpty()) { + return "Stack Underflow (No elements to pop)"; + } + return this.items.pop(); + } + + peek() { + if (this.isEmpty()) { + return "Stack is empty"; + } + return this.items[this.items.length - 1]; + } + + isEmpty() { + return this.items.length === 0; + } + + display() { + return `[ ${this.items.join(", ")} ]`; + } +} + +const stack = new Stack(); + +function pushElement() { + const input = document.getElementById("element").value; + if (input === "") { + document.getElementById("result").innerText = "⚠️ Please enter a value to push."; + return; + } + stack.push(input); + document.getElementById("stackDisplay").innerText = stack.display(); + document.getElementById("result").innerText = `✅ Pushed: ${input}`; + document.getElementById("element").value = ""; +} + +function popElement() { + const popped = stack.pop(); + document.getElementById("stackDisplay").innerText = stack.display(); + document.getElementById("result").innerText = `🧺 Popped: ${popped}`; +} + +function peekElement() { + const top = stack.peek(); + document.getElementById("result").innerText = `👀 Top Element: ${top}`; +} + +function checkEmpty() { + const empty = stack.isEmpty(); + document.getElementById("result").innerText = empty ? "✅ Stack is empty" : "❌ Stack is not empty"; +} diff --git a/javascript/6-arrays-objects-strings/Assignment-2/stackdatastructure.html b/javascript/6-arrays-objects-strings/Assignment-2/stackdatastructure.html new file mode 100644 index 00000000..73c12527 --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-2/stackdatastructure.html @@ -0,0 +1,29 @@ + + + + + + Stack Data Structure + + + +

Stack Data Structure Implementation

+ +
+ +

+ + + + + +

Stack Elements:

+

[ ]

+ +

Result:

+

+
+ + + + diff --git a/javascript/6-arrays-objects-strings/Assignment-2/style.css b/javascript/6-arrays-objects-strings/Assignment-2/style.css new file mode 100644 index 00000000..031a9cc3 --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-2/style.css @@ -0,0 +1,42 @@ +body { + font-family: Arial, sans-serif; + background-color: #f2f7fa; + text-align: center; + margin-top: 50px; +} + +.container { + display: inline-block; + background-color: #fff; + padding: 20px 30px; + border-radius: 12px; + box-shadow: 0 4px 8px rgba(0,0,0,0.2); +} + +input { + padding: 8px; + width: 60%; + font-size: 16px; + border-radius: 6px; + border: 1px solid #ccc; +} + +button { + padding: 8px 16px; + margin: 5px; + background-color: #007bff; + color: white; + border: none; + border-radius: 6px; + cursor: pointer; +} + +button:hover { + background-color: #0056b3; +} + +#stackDisplay, #result { + font-size: 18px; + color: #333; + font-weight: bold; +} diff --git a/javascript/6-arrays-objects-strings/Assignment-20/escapesequences.html b/javascript/6-arrays-objects-strings/Assignment-20/escapesequences.html new file mode 100644 index 00000000..bf57ca17 --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-20/escapesequences.html @@ -0,0 +1,23 @@ + + + + + + Escape Sequences + + + +
+

Escape Sequences Replacer

+ +
+ + + +

Output:

+

+
+ + + + diff --git a/javascript/6-arrays-objects-strings/Assignment-20/script.js b/javascript/6-arrays-objects-strings/Assignment-20/script.js new file mode 100644 index 00000000..d475f8af --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-20/script.js @@ -0,0 +1,9 @@ +function replaceEscapeSequences() { + const input = document.getElementById("inputStr").value; + + const output = input + .replace(/\\n/g, "\\\\n") + .replace(/\\t/g, "\\\\t"); + + document.getElementById("result").innerText = output; +} diff --git a/javascript/6-arrays-objects-strings/Assignment-20/style.css b/javascript/6-arrays-objects-strings/Assignment-20/style.css new file mode 100644 index 00000000..e6db9b8d --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-20/style.css @@ -0,0 +1,45 @@ +body { + font-family: Arial, sans-serif; + background-color: #f1f5f9; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.container { + background: white; + padding: 25px 30px; + border-radius: 12px; + box-shadow: 0 4px 15px rgba(0,0,0,0.1); + text-align: center; + width: 360px; +} + +input { + width: 80%; + padding: 8px; + margin: 10px 0; + border: 1px solid #ccc; + border-radius: 6px; +} + +button { + padding: 8px 15px; + background-color: #007bff; + color: white; + border: none; + border-radius: 6px; + cursor: pointer; +} + +button:hover { + background-color: #0056b3; +} + +#result { + font-weight: bold; + color: #333; + margin-top: 10px; + word-wrap: break-word; +} diff --git a/javascript/6-arrays-objects-strings/Assignment-21/script.js b/javascript/6-arrays-objects-strings/Assignment-21/script.js new file mode 100644 index 00000000..7c56d35b --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-21/script.js @@ -0,0 +1,11 @@ +function sortString() { + const input = document.getElementById("inputStr").value; + + if (input.trim() === "") { + document.getElementById("result").innerText = "Please enter a string."; + return; + } + const sortedString = input.split("").sort().join(""); + + document.getElementById("result").innerText = sortedString; +} diff --git a/javascript/6-arrays-objects-strings/Assignment-21/sortchar.html b/javascript/6-arrays-objects-strings/Assignment-21/sortchar.html new file mode 100644 index 00000000..72da5d53 --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-21/sortchar.html @@ -0,0 +1,23 @@ + + + + + + Sort Characters in String + + + +
+

String Sorting

+ +
+ + + +

Output:

+

+
+ + + + diff --git a/javascript/6-arrays-objects-strings/Assignment-21/style.css b/javascript/6-arrays-objects-strings/Assignment-21/style.css new file mode 100644 index 00000000..3e8a5fbe --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-21/style.css @@ -0,0 +1,45 @@ +body { + font-family: Arial, sans-serif; + background-color: #f5f5f5; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.container { + background: white; + padding: 25px; + border-radius: 12px; + box-shadow: 0 2px 10px rgba(0,0,0,0.1); + width: 350px; + text-align: center; +} + +input { + width: 80%; + padding: 8px; + margin-top: 10px; + margin-bottom: 10px; + border-radius: 6px; + border: 1px solid #ccc; +} + +button { + padding: 8px 15px; + border: none; + background-color: #007bff; + color: white; + border-radius: 6px; + cursor: pointer; +} + +button:hover { + background-color: #0056b3; +} + +#result { + font-weight: bold; + color: #333; + margin-top: 10px; +} diff --git a/javascript/6-arrays-objects-strings/Assignment-22/script.js b/javascript/6-arrays-objects-strings/Assignment-22/script.js new file mode 100644 index 00000000..73111f02 --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-22/script.js @@ -0,0 +1,13 @@ +function generateGreeting() { + const name = document.getElementById("nameInput").value.trim(); + const age = document.getElementById("ageInput").value.trim(); + const result = document.getElementById("result"); + + if (!name || !age) { + result.innerText = "Please enter both name and age."; + return; + } + const message = `Hello, my name is ${name} and I am ${age} years old.`; + + result.innerText = message; +} diff --git a/javascript/6-arrays-objects-strings/Assignment-22/style.css b/javascript/6-arrays-objects-strings/Assignment-22/style.css new file mode 100644 index 00000000..9d661e22 --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-22/style.css @@ -0,0 +1,45 @@ +body { + font-family: Arial, sans-serif; + background-color: #f0f2f5; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.container { + background: white; + padding: 25px; + border-radius: 10px; + box-shadow: 0 2px 10px rgba(0,0,0,0.1); + width: 350px; + text-align: center; +} + +input { + width: 80%; + padding: 8px; + margin-top: 5px; + border-radius: 5px; + border: 1px solid #ccc; +} + +button { + padding: 8px 15px; + border: none; + background-color: #007bff; + color: white; + border-radius: 6px; + cursor: pointer; + margin-top: 10px; +} + +button:hover { + background-color: #0056b3; +} + +#result { + font-weight: bold; + color: #333; + margin-top: 15px; +} diff --git a/javascript/6-arrays-objects-strings/Assignment-22/templateliterals.html b/javascript/6-arrays-objects-strings/Assignment-22/templateliterals.html new file mode 100644 index 00000000..339cbeae --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-22/templateliterals.html @@ -0,0 +1,27 @@ + + + + + + Template Literals Greeting + + + +
+

Greeting with Template Literals

+ +
+

+ +
+

+ + + +

Output:

+

+
+ + + + diff --git a/javascript/6-arrays-objects-strings/Assignment-23/script.js b/javascript/6-arrays-objects-strings/Assignment-23/script.js new file mode 100644 index 00000000..8e3aeaa6 --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-23/script.js @@ -0,0 +1,15 @@ +function getUnicodeValues() { + const inputStr = document.getElementById("stringInput").value.trim(); + const result = document.getElementById("result"); + + if (!inputStr) { + result.innerText = "Please enter a string."; + return; + } + const unicodeArray = []; + for (let i = 0; i < inputStr.length; i++) { + unicodeArray.push(inputStr.charCodeAt(i)); + } + + result.innerText = `[ ${unicodeArray.join(", ")} ]`; +} diff --git a/javascript/6-arrays-objects-strings/Assignment-23/style.css b/javascript/6-arrays-objects-strings/Assignment-23/style.css new file mode 100644 index 00000000..69933608 --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-23/style.css @@ -0,0 +1,46 @@ +body { + font-family: Arial, sans-serif; + background-color: #eef2f7; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.container { + background: white; + padding: 25px; + border-radius: 12px; + box-shadow: 0 2px 10px rgba(0,0,0,0.1); + width: 360px; + text-align: center; +} + +input { + width: 80%; + padding: 8px; + margin-top: 5px; + border-radius: 5px; + border: 1px solid #ccc; +} + +button { + padding: 8px 15px; + border: none; + background-color: #007bff; + color: white; + border-radius: 6px; + cursor: pointer; + margin-top: 10px; +} + +button:hover { + background-color: #0056b3; +} + +#result { + font-weight: bold; + color: #222; + margin-top: 15px; + white-space: pre-wrap; +} diff --git a/javascript/6-arrays-objects-strings/Assignment-23/unicode_and_encoding.html b/javascript/6-arrays-objects-strings/Assignment-23/unicode_and_encoding.html new file mode 100644 index 00000000..ba24ce88 --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-23/unicode_and_encoding.html @@ -0,0 +1,24 @@ + + + + + + Unicode Values Finder + + + +
+

Unicode and Encoding

+ +
+

+ + + +

Output:

+

+
+ + + + diff --git a/javascript/6-arrays-objects-strings/Assignment-3/queueds.html b/javascript/6-arrays-objects-strings/Assignment-3/queueds.html new file mode 100644 index 00000000..5995e769 --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-3/queueds.html @@ -0,0 +1,29 @@ + + + + + + Queue Data Structure + + + +

Queue Data Structure Implementation

+ +
+ +

+ + + + + +

Queue Elements:

+

[ ]

+ +

Result:

+

+
+ + + + diff --git a/javascript/6-arrays-objects-strings/Assignment-3/script.js b/javascript/6-arrays-objects-strings/Assignment-3/script.js new file mode 100644 index 00000000..c2692ead --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-3/script.js @@ -0,0 +1,61 @@ + +class Queue { + constructor() { + this.items = []; + } + + enqueue(element) { + this.items.push(element); + } + dequeue() { + if (this.isEmpty()) { + return "Queue Underflow (No elements to dequeue)"; + } + return this.items.shift(); + } + + peek() { + if (this.isEmpty()) { + return "Queue is empty"; + } + return this.items[0]; + } + + isEmpty() { + return this.items.length === 0; + } + + display() { + return `[ ${this.items.join(", ")} ]`; + } +} + +const queue = new Queue(); + +function enqueueElement() { + const input = document.getElementById("element").value; + if (input === "") { + document.getElementById("result").innerText = "⚠️ Please enter a value to enqueue."; + return; + } + queue.enqueue(input); + document.getElementById("queueDisplay").innerText = queue.display(); + document.getElementById("result").innerText = `✅ Enqueued: ${input}`; + document.getElementById("element").value = ""; +} + +function dequeueElement() { + const removed = queue.dequeue(); + document.getElementById("queueDisplay").innerText = queue.display(); + document.getElementById("result").innerText = `🧺 Dequeued: ${removed}`; +} + +function peekElement() { + const next = queue.peek(); + document.getElementById("result").innerText = `👀 Next Element: ${next}`; +} + +function checkEmpty() { + const empty = queue.isEmpty(); + document.getElementById("result").innerText = empty ? "✅ Queue is empty" : "❌ Queue is not empty"; +} diff --git a/javascript/6-arrays-objects-strings/Assignment-3/style.css b/javascript/6-arrays-objects-strings/Assignment-3/style.css new file mode 100644 index 00000000..af1717c0 --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-3/style.css @@ -0,0 +1,42 @@ +body { + font-family: Arial, sans-serif; + background-color: #eef6f9; + text-align: center; + margin-top: 50px; +} + +.container { + display: inline-block; + background-color: #fff; + padding: 25px 35px; + border-radius: 12px; + box-shadow: 0 4px 10px rgba(0,0,0,0.2); +} + +input { + padding: 8px; + width: 60%; + font-size: 16px; + border-radius: 6px; + border: 1px solid #ccc; +} + +button { + padding: 8px 16px; + margin: 5px; + background-color: #28a745; + color: white; + border: none; + border-radius: 6px; + cursor: pointer; +} + +button:hover { + background-color: #218838; +} + +#queueDisplay, #result { + font-size: 18px; + color: #333; + font-weight: bold; +} diff --git a/javascript/6-arrays-objects-strings/Assignment-4/join.html b/javascript/6-arrays-objects-strings/Assignment-4/join.html new file mode 100644 index 00000000..9009166b --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-4/join.html @@ -0,0 +1,23 @@ + + + + + + Join Array of Strings + + + +

Join Array of Words into a Sentence

+ +
+ +

+ + +

Result:

+

+
+ + + + diff --git a/javascript/6-arrays-objects-strings/Assignment-4/script.js b/javascript/6-arrays-objects-strings/Assignment-4/script.js new file mode 100644 index 00000000..bfb2fddd --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-4/script.js @@ -0,0 +1,17 @@ +function convertToSentence() { + let input = document.getElementById("wordsInput").value; + + if (input.trim() === "") { + document.getElementById("result").innerText = "⚠️ Please enter some words!"; + return; + } + + let wordsArray = input.split(",").map(word => word.trim()).filter(Boolean); + + let sentence = wordsArray.join(" "); + + sentence = sentence.charAt(0).toUpperCase() + sentence.slice(1); + if (!sentence.endsWith(".")) sentence += "."; + + document.getElementById("result").innerText = sentence; +} diff --git a/javascript/6-arrays-objects-strings/Assignment-4/style.css b/javascript/6-arrays-objects-strings/Assignment-4/style.css new file mode 100644 index 00000000..0617ed57 --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-4/style.css @@ -0,0 +1,43 @@ +body { + font-family: Arial, sans-serif; + background-color: #f5f7fa; + text-align: center; + margin-top: 60px; +} + +.container { + background: #ffffff; + display: inline-block; + padding: 25px 40px; + border-radius: 12px; + box-shadow: 0 5px 12px rgba(0,0,0,0.2); +} + +input { + padding: 8px; + width: 70%; + border: 1px solid #ccc; + border-radius: 8px; + font-size: 16px; +} + +button { + padding: 10px 18px; + background-color: #007bff; + color: white; + border: none; + border-radius: 8px; + cursor: pointer; + font-size: 16px; +} + +button:hover { + background-color: #0056b3; +} + +#result { + font-size: 18px; + color: #333; + font-weight: bold; + margin-top: 10px; +} diff --git a/javascript/6-arrays-objects-strings/Assignment-5/Arraychuncking.html b/javascript/6-arrays-objects-strings/Assignment-5/Arraychuncking.html new file mode 100644 index 00000000..fe37088e --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-5/Arraychuncking.html @@ -0,0 +1,27 @@ + + + + + + Array Chunking + + + +

Array Chunking Program

+ +
+
+

+ +
+

+ + + +

Result:

+

+
+ + + + diff --git a/javascript/6-arrays-objects-strings/Assignment-5/script.js b/javascript/6-arrays-objects-strings/Assignment-5/script.js new file mode 100644 index 00000000..74db4fcc --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-5/script.js @@ -0,0 +1,28 @@ +function chunkArray(arr, size) { + let result = []; + + for (let i = 0; i < arr.length; i += size) { + + let chunk = arr.slice(i, i + size); + result.push(chunk); + } + + return result; +} + +function chunkArrayHandler() { + let input = document.getElementById("arrayInput").value; + let size = parseInt(document.getElementById("chunkSize").value); + let resultElement = document.getElementById("result"); + + if (input.trim() === "" || isNaN(size) || size <= 0) { + resultElement.innerText = "⚠️ Please enter a valid array and chunk size!"; + return; + } + + let arr = input.split(",").map(num => parseInt(num.trim())).filter(n => !isNaN(n)); + + let chunked = chunkArray(arr, size); + + resultElement.innerText = JSON.stringify(chunked); +} diff --git a/javascript/6-arrays-objects-strings/Assignment-5/style.css b/javascript/6-arrays-objects-strings/Assignment-5/style.css new file mode 100644 index 00000000..1dafe466 --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-5/style.css @@ -0,0 +1,44 @@ +body { + font-family: 'Segoe UI', sans-serif; + background-color: #f4f6f8; + text-align: center; + margin-top: 60px; +} + +.container { + background: white; + display: inline-block; + padding: 30px 50px; + border-radius: 12px; + box-shadow: 0 5px 15px rgba(0,0,0,0.2); +} + +input { + padding: 8px; + width: 70%; + border-radius: 8px; + border: 1px solid #ccc; + font-size: 16px; + margin-bottom: 10px; +} + +button { + padding: 10px 18px; + background-color: #007bff; + color: white; + border: none; + border-radius: 8px; + cursor: pointer; + font-size: 16px; +} + +button:hover { + background-color: #0056b3; +} + +#result { + margin-top: 15px; + font-size: 18px; + font-weight: bold; + color: #333; +} diff --git a/javascript/6-arrays-objects-strings/Assignment-6/removeduplicates.html b/javascript/6-arrays-objects-strings/Assignment-6/removeduplicates.html new file mode 100644 index 00000000..d8b80d98 --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-6/removeduplicates.html @@ -0,0 +1,24 @@ + + + + + + Remove Duplicates from Array + + + +

Remove Duplicates from an Array

+ +
+
+

+ + + +

Result:

+

+
+ + + + diff --git a/javascript/6-arrays-objects-strings/Assignment-6/script.js b/javascript/6-arrays-objects-strings/Assignment-6/script.js new file mode 100644 index 00000000..a03c54ba --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-6/script.js @@ -0,0 +1,27 @@ +function removeDuplicates(arr) { + let uniqueArr = []; + + for (let i = 0; i < arr.length; i++) { + if (!uniqueArr.includes(arr[i])) { + uniqueArr.push(arr[i]); + } + } + + return uniqueArr; +} + +function removeDuplicatesHandler() { + let input = document.getElementById("arrayInput").value; + let resultElement = document.getElementById("result"); + + if (input.trim() === "") { + resultElement.innerText = "⚠️ Please enter a valid array!"; + return; + } + + let arr = input.split(",").map(num => parseInt(num.trim())).filter(n => !isNaN(n)); + + let result = removeDuplicates(arr); + + resultElement.innerText = "Unique Array: " + JSON.stringify(result); +} diff --git a/javascript/6-arrays-objects-strings/Assignment-6/style.css b/javascript/6-arrays-objects-strings/Assignment-6/style.css new file mode 100644 index 00000000..e8289ec7 --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-6/style.css @@ -0,0 +1,44 @@ +body { + font-family: 'Poppins', sans-serif; + background-color: #f4f6f8; + text-align: center; + margin-top: 60px; +} + +.container { + background: #fff; + display: inline-block; + padding: 30px 50px; + border-radius: 12px; + box-shadow: 0 4px 12px rgba(0,0,0,0.2); +} + +input { + padding: 10px; + width: 70%; + border-radius: 8px; + border: 1px solid #ccc; + font-size: 16px; + margin-bottom: 15px; +} + +button { + padding: 10px 18px; + background-color: #28a745; + color: white; + border: none; + border-radius: 8px; + cursor: pointer; + font-size: 16px; +} + +button:hover { + background-color: #1e7e34; +} + +#result { + margin-top: 15px; + font-size: 18px; + font-weight: bold; + color: #333; +} diff --git a/javascript/6-arrays-objects-strings/Assignment-7/frequent.html b/javascript/6-arrays-objects-strings/Assignment-7/frequent.html new file mode 100644 index 00000000..c02f692d --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-7/frequent.html @@ -0,0 +1,24 @@ + + + + + + Most Frequent Element + + + +

Find the Most Frequent Element in an Array

+ +
+
+

+ + + +

Result:

+

+
+ + + + diff --git a/javascript/6-arrays-objects-strings/Assignment-7/script.js b/javascript/6-arrays-objects-strings/Assignment-7/script.js new file mode 100644 index 00000000..d228feb2 --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-7/script.js @@ -0,0 +1,34 @@ +function mostFrequent(arr) { + const freqMap = arr.reduce((acc, num) => { + acc[num] = (acc[num] || 0) + 1; + return acc; + }, {}); + + let maxCount = 0; + let mostFrequentElement = null; + + for (let key in freqMap) { + if (freqMap[key] > maxCount) { + maxCount = freqMap[key]; + mostFrequentElement = key; + } + } + + return mostFrequentElement; +} + +function findMostFrequent() { + let input = document.getElementById("arrayInput").value; + let resultElement = document.getElementById("result"); + + if (input.trim() === "") { + resultElement.innerText = "⚠️ Please enter array elements."; + return; + } + + let arr = input.split(",").map(num => parseInt(num.trim())).filter(n => !isNaN(n)); + + let mostCommon = mostFrequent(arr); + + resultElement.innerText = `Most Frequent Element: ${mostCommon}`; +} diff --git a/javascript/6-arrays-objects-strings/Assignment-7/style.css b/javascript/6-arrays-objects-strings/Assignment-7/style.css new file mode 100644 index 00000000..5d99cfcf --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-7/style.css @@ -0,0 +1,43 @@ +body { + font-family: 'Poppins', sans-serif; + background-color: #f0f8ff; + text-align: center; + margin-top: 60px; +} + +.container { + background: #fff; + display: inline-block; + padding: 30px 50px; + border-radius: 12px; + box-shadow: 0 5px 15px rgba(0,0,0,0.2); +} + +input { + padding: 8px; + width: 70%; + border-radius: 8px; + border: 1px solid #ccc; + font-size: 16px; +} + +button { + padding: 10px 18px; + background-color: #007bff; + color: white; + border: none; + border-radius: 8px; + cursor: pointer; + font-size: 16px; +} + +button:hover { + background-color: #0056b3; +} + +#result { + margin-top: 15px; + font-size: 18px; + font-weight: bold; + color: #333; +} diff --git a/javascript/6-arrays-objects-strings/Assignment-8/arraydestructing.html b/javascript/6-arrays-objects-strings/Assignment-8/arraydestructing.html new file mode 100644 index 00000000..a4520491 --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-8/arraydestructing.html @@ -0,0 +1,27 @@ + + + + + + Array Destructuring - Swap Values + + + +

Swap Two Numbers Using Array Destructuring

+ +
+
+

+ +
+

+ + + +

Result:

+

+
+ + + + diff --git a/javascript/6-arrays-objects-strings/Assignment-8/script.js b/javascript/6-arrays-objects-strings/Assignment-8/script.js new file mode 100644 index 00000000..f789cf29 --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-8/script.js @@ -0,0 +1,20 @@ +function swapValues() { + let a = parseInt(document.getElementById("numA").value); + let b = parseInt(document.getElementById("numB").value); + let resultElement = document.getElementById("result"); + + if (isNaN(a) || isNaN(b)) { + resultElement.innerText = "⚠️ Please enter valid numbers for both fields."; + return; + } + + let beforeSwap = `Before Swapping → a = ${a}, b = ${b}`; + + + [a, b] = [b, a]; + + + let afterSwap = `After Swapping → a = ${a}, b = ${b}`; + + resultElement.innerText = `${beforeSwap}\n${afterSwap}`; +} diff --git a/javascript/6-arrays-objects-strings/Assignment-8/style.css b/javascript/6-arrays-objects-strings/Assignment-8/style.css new file mode 100644 index 00000000..480a7b3c --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-8/style.css @@ -0,0 +1,44 @@ +body { + font-family: 'Poppins', sans-serif; + background-color: #f4f9ff; + text-align: center; + margin-top: 60px; +} + +.container { + display: inline-block; + background: #fff; + padding: 25px 50px; + border-radius: 12px; + box-shadow: 0 5px 10px rgba(0,0,0,0.2); +} + +input { + width: 70%; + padding: 8px; + border-radius: 8px; + border: 1px solid #ccc; + font-size: 16px; +} + +button { + margin-top: 10px; + padding: 10px 20px; + background-color: #007bff; + color: white; + border: none; + border-radius: 8px; + cursor: pointer; + font-size: 16px; +} + +button:hover { + background-color: #0056b3; +} + +#result { + margin-top: 15px; + font-weight: bold; + font-size: 18px; + color: #333; +} diff --git a/javascript/6-arrays-objects-strings/Assignment-9/script.js b/javascript/6-arrays-objects-strings/Assignment-9/script.js new file mode 100644 index 00000000..7505c347 --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-9/script.js @@ -0,0 +1,33 @@ +function transposeMatrix(matrix) { + let transposed = []; + + for (let i = 0; i < matrix[0].length; i++) { + let newRow = []; + for (let j = 0; j < matrix.length; j++) { + newRow.push(matrix[j][i]); + } + + transposed.push(newRow); + } + + return transposed; +} + +function handleTranspose() { + const inputText = document.getElementById("matrixInput").value.trim(); + if (!inputText) { + alert("Please enter a matrix!"); + return; + } + + const rows = inputText.split("\n").map(row => row.split(",").map(Number)); + + document.getElementById("originalOutput").textContent = JSON.stringify(rows, null, 2); + + try { + const result = transposeMatrix(rows); + document.getElementById("transposedOutput").textContent = JSON.stringify(result, null, 2); + } catch (error) { + alert("Error: Please ensure the matrix is rectangular (all rows same length)."); + } +} diff --git a/javascript/6-arrays-objects-strings/Assignment-9/style.css b/javascript/6-arrays-objects-strings/Assignment-9/style.css new file mode 100644 index 00000000..6d964bb6 --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-9/style.css @@ -0,0 +1,37 @@ +body { + font-family: Arial, sans-serif; + background-color: #f3f6fa; + padding: 20px; +} + +.container { + background-color: white; + padding: 20px; + border-radius: 10px; + width: 400px; + box-shadow: 0 2px 5px rgba(0,0,0,0.1); +} + +textarea { + width: 100%; + margin-bottom: 10px; +} + +button { + background-color: #0066ff; + color: white; + padding: 8px 12px; + border: none; + border-radius: 6px; + cursor: pointer; +} + +button:hover { + background-color: #004bcc; +} + +pre { + background-color: #f2f2f2; + padding: 10px; + border-radius: 6px; +} diff --git a/javascript/6-arrays-objects-strings/Assignment-9/transpose.html b/javascript/6-arrays-objects-strings/Assignment-9/transpose.html new file mode 100644 index 00000000..94e9ce69 --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignment-9/transpose.html @@ -0,0 +1,27 @@ + + + + + + Transpose Matrix + + + +

15. Multi-Dimensional Array Operations – Transpose Matrix

+ +
+
+
+ + + +

Original Matrix:

+

+
+    

Transposed Matrix:

+

+  
+ + + + diff --git a/javascript/6-arrays-objects-strings/Assignmnet-24/script.js b/javascript/6-arrays-objects-strings/Assignmnet-24/script.js new file mode 100644 index 00000000..b0615acd --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignmnet-24/script.js @@ -0,0 +1,13 @@ +function padString() { + const inputStr = document.getElementById("stringInput").value.trim(); + const result = document.getElementById("result"); + + if (!inputStr) { + result.innerText = "Please enter a string."; + return; + } + + const paddedString = inputStr.padStart(10, "0"); + + result.innerText = `Padded String: ${paddedString}`; +} diff --git a/javascript/6-arrays-objects-strings/Assignmnet-24/stringpadding.html b/javascript/6-arrays-objects-strings/Assignmnet-24/stringpadding.html new file mode 100644 index 00000000..466b6758 --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignmnet-24/stringpadding.html @@ -0,0 +1,24 @@ + + + + + + String Padding + + + +
+

String Padding

+ +
+

+ + + +

Output:

+

+
+ + + + diff --git a/javascript/6-arrays-objects-strings/Assignmnet-24/style.css b/javascript/6-arrays-objects-strings/Assignmnet-24/style.css new file mode 100644 index 00000000..e289d711 --- /dev/null +++ b/javascript/6-arrays-objects-strings/Assignmnet-24/style.css @@ -0,0 +1,46 @@ +body { + font-family: Arial, sans-serif; + background-color: #f2f5fa; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.container { + background: white; + padding: 25px; + border-radius: 12px; + box-shadow: 0 2px 10px rgba(0,0,0,0.1); + width: 360px; + text-align: center; +} + +input { + width: 80%; + padding: 8px; + margin-top: 5px; + border-radius: 5px; + border: 1px solid #ccc; +} + +button { + padding: 8px 15px; + border: none; + background-color: #007bff; + color: white; + border-radius: 6px; + cursor: pointer; + margin-top: 10px; +} + +button:hover { + background-color: #0056b3; +} + +#result { + font-weight: bold; + color: #222; + margin-top: 15px; + white-space: pre-wrap; +}