Skip to content

Commit e27cf2b

Browse files
Pankaj-StrPankaj-Str
authored
Create index.html
1 parent 7f42297 commit e27cf2b

File tree

1 file changed

+205
-0
lines changed
  • Other_Example/Assignment Exercises/Array Transformation Project

1 file changed

+205
-0
lines changed

‎Other_Example/Assignment Exercises/Array Transformation Project/index.html‎

Lines changed: 205 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,205 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>@codeswithpankaj.com Array Transformation Utility</title>
6+
<style>
7+
body {
8+
font-family: Arial, sans-serif;
9+
max-width: 800px;
10+
margin: 0 auto;
11+
padding: 20px;
12+
background-color: #f4f4f4;
13+
}
14+
.container {
15+
background-color: white;
16+
border-radius: 10px;
17+
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
18+
padding: 30px;
19+
}
20+
.input-section {
21+
display: flex;
22+
gap: 10px;
23+
margin-bottom: 20px;
24+
}
25+
input, button {
26+
padding: 10px;
27+
}
28+
.result-section {
29+
background-color: #f9f9f9;
30+
border-radius: 5px;
31+
padding: 20px;
32+
margin-top: 20px;
33+
}
34+
.btn {
35+
background-color: #007bff;
36+
color: white;
37+
border: none;
38+
padding: 10px 15px;
39+
border-radius: 5px;
40+
cursor: pointer;
41+
margin-right: 10px;
42+
}
43+
.result-card {
44+
background-color: #e9ecef;
45+
border-radius: 5px;
46+
padding: 15px;
47+
margin-bottom: 15px;
48+
}
49+
</style>
50+
</head>
51+
<body>
52+
<div class="container">
53+
<h1>Array Transformation Utility</h1>
54+
<p>@codeswithpankaj.com</p>
55+
56+
<div class="input-section">
57+
<input
58+
type="text"
59+
id="numberInput"
60+
placeholder="Enter numbers (comma-separated)"
61+
>
62+
<button class="btn" onclick="processArray()">Analyze Array</button>
63+
</div>
64+
65+
<div id="resultsContainer" class="result-section" style="display: none;">
66+
<div class="result-card">
67+
<h3>Original Array</h3>
68+
<p id="originalArray"></p>
69+
</div>
70+
71+
<div class="result-card">
72+
<h3>Even Numbers</h3>
73+
<p id="evenNumbers"></p>
74+
</div>
75+
76+
<div class="result-card">
77+
<h3>Odd Numbers</h3>
78+
<p id="oddNumbers"></p>
79+
</div>
80+
81+
<div class="result-card">
82+
<h3>Squared Values</h3>
83+
<p id="squaredValues"></p>
84+
</div>
85+
86+
<div class="result-card">
87+
<h3>Sorting</h3>
88+
<p><strong>Ascending:</strong> <span id="ascendingSort"></span></p>
89+
<p><strong>Descending:</strong> <span id="descendingSort"></span></p>
90+
</div>
91+
92+
<div class="result-card">
93+
<h3>Array Statistics</h3>
94+
<p><strong>Minimum:</strong> <span id="minValue"></span></p>
95+
<p><strong>Maximum:</strong> <span id="maxValue"></span></p>
96+
<p><strong>Average:</strong> <span id="averageValue"></span></p>
97+
<p><strong>Sum:</strong> <span id="sumValue"></span></p>
98+
</div>
99+
</div>
100+
</div>
101+
102+
<script>
103+
class ArrayTransformer {
104+
constructor(numbers) {
105+
// Convert input to array of numbers, removing any non-numeric values
106+
this.numbers = numbers
107+
.split(',')
108+
.map(num => parseFloat(num.trim()))
109+
.filter(num => !isNaN(num));
110+
}
111+
112+
// Filter even numbers
113+
filterEvenNumbers() {
114+
return this.numbers.filter(num => num % 2 === 0);
115+
}
116+
117+
// Filter odd numbers
118+
filterOddNumbers() {
119+
return this.numbers.filter(num => num % 2 !== 0);
120+
}
121+
122+
// Map to squared values
123+
mapToSquares() {
124+
return this.numbers.map(num => num ** 2);
125+
}
126+
127+
// Find minimum value
128+
findMinimum() {
129+
return Math.min(...this.numbers);
130+
}
131+
132+
// Find maximum value
133+
findMaximum() {
134+
return Math.max(...this.numbers);
135+
}
136+
137+
// Calculate average
138+
calculateAverage() {
139+
if (this.numbers.length === 0) return 0;
140+
const sum = this.numbers.reduce((a, b) => a + b, 0);
141+
return (sum / this.numbers.length).toFixed(2);
142+
}
143+
144+
// Calculate sum
145+
calculateSum() {
146+
return this.numbers.reduce((a, b) => a + b, 0);
147+
}
148+
149+
// Sort in ascending order
150+
sortAscending() {
151+
return [...this.numbers].sort((a, b) => a - b);
152+
}
153+
154+
// Sort in descending order
155+
sortDescending() {
156+
return [...this.numbers].sort((a, b) => b - a);
157+
}
158+
}
159+
160+
function processArray() {
161+
// Get input
162+
const numberInput = document.getElementById('numberInput').value;
163+
164+
// Validate input
165+
if (!numberInput.trim()) {
166+
alert('Please enter some numbers');
167+
return;
168+
}
169+
170+
// Create transformer
171+
const transformer = new ArrayTransformer(numberInput);
172+
173+
// Get result containers
174+
const resultsContainer = document.getElementById('resultsContainer');
175+
const originalArray = document.getElementById('originalArray');
176+
const evenNumbers = document.getElementById('evenNumbers');
177+
const oddNumbers = document.getElementById('oddNumbers');
178+
const squaredValues = document.getElementById('squaredValues');
179+
const ascendingSort = document.getElementById('ascendingSort');
180+
const descendingSort = document.getElementById('descendingSort');
181+
const minValue = document.getElementById('minValue');
182+
const maxValue = document.getElementById('maxValue');
183+
const averageValue = document.getElementById('averageValue');
184+
const sumValue = document.getElementById('sumValue');
185+
186+
// Populate results
187+
originalArray.textContent = transformer.numbers.join(', ');
188+
evenNumbers.textContent = transformer.filterEvenNumbers().join(', ');
189+
oddNumbers.textContent = transformer.filterOddNumbers().join(', ');
190+
squaredValues.textContent = transformer.mapToSquares().join(', ');
191+
192+
ascendingSort.textContent = transformer.sortAscending().join(', ');
193+
descendingSort.textContent = transformer.sortDescending().join(', ');
194+
195+
minValue.textContent = transformer.findMinimum();
196+
maxValue.textContent = transformer.findMaximum();
197+
averageValue.textContent = transformer.calculateAverage();
198+
sumValue.textContent = transformer.calculateSum();
199+
200+
// Show results
201+
resultsContainer.style.display = 'block';
202+
}
203+
</script>
204+
</body>
205+
</html>

0 commit comments

Comments
 (0)