Skip to content

Durga arrays js #537

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Saidurgasatturi wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Durga arrays js #537

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
aa636fa
durga-html-advancedtags
Saidurgasatturi Sep 30, 2025
7895e32
durga-arrays-js
Saidurgasatturi Nov 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Empty file added css/advanced/Assignment-1/index.html
View file
Open in desktop
Empty file.
69 changes: 69 additions & 0 deletions css/advanced/Assignment-1/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot Nov 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The flex: 1 property here will have no effect because its parent, the <body> element, is not a flex container. This line appears to be unnecessary and can be removed without changing the layout.

}
}
60 changes: 60 additions & 0 deletions css/advanced/Assignment-2/animations.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Animation & Media Queries</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #f0f0f0;
}
.box {
width: 150px;
height: 150px;
background: #3498db;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-weight: bold;
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-50px);
}
}
@media (max-width: 768px) {
.box {
width: 120px;
height: 120px;
font-size: 14px;
background: #e67e22;
}
}

@media (max-width: 480px) {
.box {
width: 90px;
height: 90px;
font-size: 12px;
background: #2ecc71;
}
}
</style>
Comment on lines +7 to +55
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot Nov 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The PR description includes a checklist for best practices, which states to "Avoid inline styles unless absolutely necessary" and "Use modular CSS files". Placing a large block of CSS within a <style> tag in the HTML file goes against the principle of separation of concerns, making the code harder to maintain. It is recommended to move this CSS to an external stylesheet.

</head>
<body>
<div class="box">Hello Guys..!</div>
</body>
</html>
58 changes: 58 additions & 0 deletions html/5-projects/Assignment-1/personal-homepage.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Personal Homepage</title>
</head>
<body>

<header>
<h1>Welcome to My Homepage</h1>
<p>A short introduction about myself</p>
</header>

<main>
<section id="about">
<h2>About Me</h2>
<p>Hello! My name is Sai Durga. I am passionate about web development and always eager to learn new technologies.</p>
</section>

<section id="education">
<h2>Education</h2>
<p>I am a recent Graduate of <strong>Bachelor’s Degree</strong> in Information Technology.</p>
</section>
<section id="skills">
<h2>Skills</h2>
<ul>
<li>HTML5 & CSS3</li>
<li>JavaScript</li>
<li>Java</li>
<li>SQL</li>
</ul>
</section>
<section id="contact">
<h2>Contact Me</h2>
<form>
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot Nov 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The <form> tag is missing the action and method attributes. The action attribute specifies where to send the form-data when a form is submitted, and method specifies the HTTP method to use (e.g., "GET" or "POST"). Including these attributes is a best practice as it makes the form's purpose and behavior clear, even in a static example.

Suggested change
<form>
<form action="#" method="post">

<label for="name">Full Name:</label><br>
<input type="text" id="name" name="name" required><br><br>

<label for="email">Email Address:</label><br>
<input type="email" id="email" name="email" required><br><br>

<label for="dob">Date of Birth:</label><br>
<input type="date" id="dob" name="dob"><br><br>

<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="4"></textarea><br><br>
Comment on lines +37 to +46
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot Nov 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Using <br> tags to create vertical space between form elements is not a recommended practice. Layout and spacing should be handled by CSS using properties like margin or padding. This approach improves the separation of content (HTML) and presentation (CSS), leading to more maintainable and accessible code.

Suggested change
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email Address:</label><br>
<input type="email" id="email" name="email" required><br><br>
<label for="dob">Date of Birth:</label><br>
<input type="date" id="dob" name="dob"><br><br>
<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="4"></textarea><br><br>
<input type="text" id="name" name="name" required>
<label for="email">Email Address:</label>
<input type="email" id="email" name="email" required>
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob">
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4"></textarea>


<input type="submit" value="Send">
</form>
</section>
</main>

<footer>
<p>&copy; 2025 Sai Durga. All rights reserved.</p>
</footer>

</body>
</html>
24 changes: 24 additions & 0 deletions javascript/6-arrays-objects-strings/Assignment-1/customarray.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Array Flatten</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>Custom Array Flatten Function</h2>

<div class="container">
<label>Enter Nested Array:</label><br>
<input type="text" id="inputArray" placeholder='Ex: [1,2,[3,5],[5,[6,7]]]' size="40">
<br><br>
<button onclick="flattenArray()">Flatten Array</button>
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot Nov 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Using onclick attributes in HTML is an outdated practice that mixes content (HTML) with behavior (JavaScript). The PR's best practices checklist also advises against this. It's recommended to add event listeners programmatically from your script file. This improves code organization and maintainability.

Suggested change
<button onclick="flattenArray()">Flatten Array</button>
<button id="flattenBtn">Flatten Array</button>


<h3>Result:</h3>
<p id="result"></p>
</div>

<script src="script.js"></script>
</body>
</html>
24 changes: 24 additions & 0 deletions javascript/6-arrays-objects-strings/Assignment-1/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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));
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot Nov 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Using result = result.concat(...) inside a recursive function can be inefficient for large or deeply nested arrays, as concat creates a new array with every call. A more performant approach is to push elements into a single result array. Using the spread syntax with push is a more modern and often faster alternative.

Suggested change
result = result.concat(customFlatten(element));
result.push(...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(", ")} ]`;
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot Nov 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

It's a best practice to use textContent instead of innerHTML when you are not intentionally rendering HTML content. Using textContent is safer as it automatically sanitizes the input, preventing potential Cross-Site Scripting (XSS) vulnerabilities.

Suggested change
document.getElementById("result").innerHTML = `[ ${flattened.join(", ")} ]`;
document.getElementById("result").textContent = `[ ${flattened.join(", ")} ]`;

} catch (error) {
document.getElementById("result").innerHTML = "❌ Invalid input! Please enter a valid array format.";
}
}
42 changes: 42 additions & 0 deletions javascript/6-arrays-objects-strings/Assignment-1/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
23 changes: 23 additions & 0 deletions javascript/6-arrays-objects-strings/Assignment-10/arrayloop.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Array Loop Performance Comparison</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>16. Performance Optimization – Loop Comparison</h2>

<div class="container">
<label>Enter Array Size:</label>
<input type="number" id="arraySize" placeholder="e.g. 1000000">
<button onclick="comparePerformance()">Compare</button>
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot Nov 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Using onclick attributes in HTML is an outdated practice that mixes content (HTML) with behavior (JavaScript). The PR's best practices checklist also advises against this. It's recommended to add event listeners programmatically from your script file. This improves code organization and maintainability.

Suggested change
<button onclick="comparePerformance()">Compare</button>
<button id="compareBtn">Compare</button>


<h3>Results:</h3>
<pre id="output"></pre>
</div>

<script src="script.js"></script>
</body>
</html>
36 changes: 36 additions & 0 deletions javascript/6-arrays-objects-strings/Assignment-10/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"}`;
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot Nov 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

This long, nested ternary operator is difficult to read and understand. For better maintainability, it should be refactored into a more readable structure. This will also make the code easier to extend if you decide to compare more looping methods in the future.

Here's an example of a more readable approach:

const times = {
  'for loop': forTime,
  'for...of loop': forOfTime,
  'forEach loop': forEachTime
};
let fastestLoop = '';
let minTime = Infinity;
for (const loop in times) {
  if (times[loop] < minTime) {
    minTime = times[loop];
    fastestLoop = loop;
  }
}
result += `\nFastest: ${fastestLoop}`;


output.textContent = result;
}
40 changes: 40 additions & 0 deletions javascript/6-arrays-objects-strings/Assignment-10/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
Loading