Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit d7accf6

Browse files
object
1 parent e77516b commit d7accf6

File tree

8 files changed

+481
-0
lines changed

8 files changed

+481
-0
lines changed

‎ArrayOFObject/app.js

Lines changed: 185 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,185 @@
1+
const students = [
2+
{
3+
name: "Aarav Singh",
4+
fatherName: "Rajesh Singh",
5+
rollNo: "001",
6+
marks: 85,
7+
topics: ["Mathematics", "Physics", "Chemistry"],
8+
},
9+
{
10+
name: "Meera Sharma",
11+
fatherName: "Suresh Sharma",
12+
rollNo: "002",
13+
marks: 90,
14+
topics: ["Biology", "Chemistry", "Mathematics"],
15+
},
16+
{
17+
name: "Rohan Gupta",
18+
fatherName: "Anil Gupta",
19+
rollNo: "003",
20+
marks: 78,
21+
topics: ["History", "Geography", "Political Science"],
22+
},
23+
{
24+
name: "Ananya Verma",
25+
fatherName: "Pankaj Verma",
26+
rollNo: "004",
27+
marks: 88,
28+
topics: ["English", "Mathematics", "Computer Science"],
29+
},
30+
{
31+
name: "Vikram Mehta",
32+
fatherName: "Sunil Mehta",
33+
rollNo: "005",
34+
marks: 92,
35+
topics: ["Physics", "Chemistry", "Mathematics"],
36+
},
37+
{
38+
name: "Sneha Patel",
39+
fatherName: "Mahesh Patel",
40+
rollNo: "006",
41+
marks: 81,
42+
topics: ["Biology", "Chemistry", "Physics"],
43+
},
44+
{
45+
name: "Rahul Jain",
46+
fatherName: "Vikas Jain",
47+
rollNo: "007",
48+
marks: 76,
49+
topics: ["Mathematics", "Computer Science", "Physics"],
50+
},
51+
{
52+
name: "Priya Kumar",
53+
fatherName: "Arun Kumar",
54+
rollNo: "008",
55+
marks: 84,
56+
topics: ["History", "Geography", "Economics"],
57+
},
58+
{
59+
name: "Nikhil Roy",
60+
fatherName: "Amit Roy",
61+
rollNo: "009",
62+
marks: 89,
63+
topics: ["Mathematics", "Physics", "Computer Science"],
64+
},
65+
{
66+
name: "Isha Desai",
67+
fatherName: "Ravi Desai",
68+
rollNo: "010",
69+
marks: 93,
70+
topics: ["Biology", "Chemistry", "Physics"],
71+
},
72+
{
73+
name: "Amit Malhotra",
74+
fatherName: "Vivek Malhotra",
75+
rollNo: "011",
76+
marks: 77,
77+
topics: ["History", "Political Science", "Economics"],
78+
},
79+
{
80+
name: "Kavya Kapoor",
81+
fatherName: "Raj Kapoor",
82+
rollNo: "012",
83+
marks: 91,
84+
topics: ["Mathematics", "Physics", "Computer Science"],
85+
},
86+
{
87+
name: "Sahil Reddy",
88+
fatherName: "Prakash Reddy",
89+
rollNo: "013",
90+
marks: 86,
91+
topics: ["Biology", "Chemistry", "Mathematics"],
92+
},
93+
{
94+
name: "Anushka Singh",
95+
fatherName: "Ravi Singh",
96+
rollNo: "014",
97+
marks: 80,
98+
topics: ["History", "Geography", "Political Science"],
99+
},
100+
{
101+
name: "Rajiv Nair",
102+
fatherName: "Vinod Nair",
103+
rollNo: "015",
104+
marks: 87,
105+
topics: ["Physics", "Chemistry", "Computer Science"],
106+
},
107+
{
108+
name: "Divya Joshi",
109+
fatherName: "Ramesh Joshi",
110+
rollNo: "016",
111+
marks: 79,
112+
topics: ["Mathematics", "English", "Computer Science"],
113+
},
114+
{
115+
name: "Arjun Rao",
116+
fatherName: "Sanjay Rao",
117+
rollNo: "017",
118+
marks: 83,
119+
topics: ["Physics", "Mathematics", "Computer Science"],
120+
},
121+
{
122+
name: "Snehal Patel",
123+
fatherName: "Nitin Patel",
124+
rollNo: "018",
125+
marks: 94,
126+
topics: ["Biology", "Chemistry", "Physics"],
127+
},
128+
{
129+
name: "Kabir Das",
130+
fatherName: "Manoj Das",
131+
rollNo: "019",
132+
marks: 82,
133+
topics: ["History", "Geography", "Political Science"],
134+
},
135+
{
136+
name: "Pooja Sharma",
137+
fatherName: "Ashok Sharma",
138+
rollNo: "020",
139+
marks: 95,
140+
topics: ["Mathematics", "Physics", "Chemistry"],
141+
},
142+
];
143+
144+
var table = document.getElementById("user_table");
145+
146+
students.forEach((data, ind) => {
147+
// console.log("ind==>", data, ind);
148+
let tr = `<tr>
149+
<td>${ind + 1}</td>
150+
<td>${data.name}</td>
151+
<td>${data.rollNo}</td>
152+
<td>${data.marks}</td>
153+
</tr>`;
154+
155+
table.innerHTML += tr;
156+
});
157+
158+
const above90 = students.filter((data) => data.marks >= 90);
159+
const above80 = students.filter((data) => data.marks >= 80 && data.marks < 90);
160+
function showAbove80() {
161+
table.innerHTML = "";
162+
above80.forEach((data, ind) => {
163+
let tr = `<tr>
164+
<td>${ind + 1}</td>
165+
<td>${data.name}</td>
166+
<td>${data.rollNo}</td>
167+
<td>${data.marks}</td>
168+
</tr>`;
169+
table.innerHTML += tr;
170+
});
171+
}
172+
173+
function showAbove90() {
174+
table.innerHTML = "";
175+
above90.forEach((data, ind) => {
176+
let tr = `<tr>
177+
<td>${ind + 1}</td>
178+
<td>${data.name}</td>
179+
<td>${data.rollNo}</td>
180+
<td>${data.marks}</td>
181+
</tr>`;
182+
183+
table.innerHTML += tr;
184+
});
185+
}

‎ArrayOFObject/index.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Array Of Object</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<h1>ARRAY OF OBJECTS</h1>
11+
12+
<div class="buttonMain">
13+
<button onclick="showAbove80()">Between 80 & 90</button>
14+
<button onclick="showAbove90()">Above 90</button>
15+
</div>
16+
<table >
17+
<tr>
18+
<th>No</th>
19+
<th>Name</th>
20+
<th>Roll No</th>
21+
<th>Marks</th>
22+
</tr>
23+
<tbody id="user_table">
24+
25+
</tbody>
26+
</table>
27+
<script src="app.js"></script>
28+
</body>
29+
</html>

‎ArrayOFObject/style.css

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
h1 {
2+
text-align: center;
3+
}
4+
5+
table {
6+
width: 800px;
7+
border: 1px solid black;
8+
margin: 0px auto;
9+
}
10+
11+
th {
12+
border-bottom: 1px solid black;
13+
padding: 10px;
14+
}
15+
16+
td {
17+
padding: 10px 15px;
18+
border-bottom: 1px solid lightcoral;
19+
text-align: center;
20+
}
21+
.buttonMain{
22+
width: 100%;
23+
text-align: center;
24+
margin-bottom: 20px;
25+
margin-top: 20px;
26+
}
27+
.buttonMain button{
28+
border: none;
29+
padding: 10px;
30+
border-radius: 10px;
31+
cursor: pointer;
32+
background-color: blue;
33+
color: white;
34+
}
35+
.buttonMain button:hover{
36+
transition: 0.3s ease-in all;
37+
background-color: lightskyblue;
38+
color: blue;
39+
}

‎ForEachLoop/app.js

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
var arrOfObjects = [
2+
{
3+
type: "Man",
4+
img: "https://images.unsplash.com/photo-1581382575275-97901c2635b7?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8bWFufGVufDB8fDB8fHww",
5+
},
6+
{
7+
type: "T Shirt",
8+
img: "https://media.istockphoto.com/id/514685863/photo/going-for-the-laid-back-look.webp?a=1&b=1&s=612x612&w=0&k=20&c=FPZOEW5h37yf8PYBvWISfE1f1xbEmrd3e2kE84EiWN4=",
9+
},
10+
{
11+
type: "Shirt",
12+
img: "https://images.unsplash.com/photo-1740711152088-88a009e877bb?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTl8fG1hbiUyMHNoaXJ0fGVufDB8fDB8fHww",
13+
},
14+
{
15+
type: "Shoes",
16+
img: "https://images.unsplash.com/photo-1664505504065-31f8937d2261?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8bWFuJTIwc2hvZXN8ZW58MHx8MHx8fDA%3D",
17+
},
18+
{
19+
type: "Bag",
20+
img: "https://images.unsplash.com/photo-1665832102447-a853788f620c?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8bWFuJTIwYmFnfGVufDB8fDB8fHww",
21+
},
22+
{
23+
type: "Wallet",
24+
img: "https://images.unsplash.com/photo-1675582090584-4ae9400f7326?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fG1hbiUyMHdhbGxldHxlbnwwfHwwfHx8MA%3D%3D",
25+
},
26+
];
27+
28+
// for (var i = 0; i < arrOfObjects.length; i++) {
29+
// console.log(i, arrOfObjects[i]);
30+
// }
31+
32+
// arrOfObjects[1].type = 'Australian Cow'
33+
34+
arrOfObjects.splice(1, 1);
35+
console.log(arrOfObjects);
36+
37+
38+
arrOfObjects.forEach(function (item, i) {
39+
console.log(i, item.type);
40+
41+
});

‎ForEachLoop/index.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>For Each</title>
7+
</head>
8+
<body>
9+
<script src="app.js"></script>
10+
</body>
11+
</html>

‎Index.html

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,45 @@ <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"
9999
</svg>
100100
</a>
101101
</div>
102+
<div class="max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
103+
<a href="#">
104+
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">For Each Loop</h5>
105+
</a>
106+
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
107+
<a href="ForEachLoop/index.html" class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
108+
Read more
109+
<svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
110+
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
111+
</svg>
112+
</a>
113+
</div>
114+
</div>
115+
<div class="main flex text-center mt-10">
116+
<div class="max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
117+
<a href="#">
118+
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Object</h5>
119+
</a>
120+
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
121+
<a href="Object/index.html" class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
122+
Read more
123+
<svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
124+
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
125+
</svg>
126+
</a>
127+
</div>
128+
<div class="max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
129+
<a href="#">
130+
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Array Of Object</h5>
131+
</a>
132+
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
133+
<a href="ArrayOFObject/index.html" class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
134+
Read more
135+
<svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
136+
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
137+
</svg>
138+
</a>
139+
</div>
140+
102141
</div>
103142
</body>
104143
</html>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /