Skip to content

Commit 6bf1ffd

Browse files
IceTheCoderIceTheCoder
authored
Merge pull request #44 from IceTheCoder/arrays
Arrays
2 parents d2770c4 + d308e77 commit 6bf1ffd

File tree

3 files changed

+353
-0
lines changed

3 files changed

+353
-0
lines changed

‎array-transformation/index.html‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
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 Transformation</title>
7+
<link rel="stylesheet" href="./style.css">
8+
<script src="./script.js"></script>
9+
</head>
10+
<body>
11+
<main>
12+
<h1>Array Transformation</h1>
13+
<form id="array-form" onsubmit="return false">
14+
<label for="array">Type your array, separating each number with a comma</label>
15+
<br>
16+
<input type="text" id="array" name="array">
17+
</form>
18+
<div class="all-items">
19+
<h2>Operations with all items</h2>
20+
<form id="average-of" onsubmit="handleSubmit(event, this.id)">
21+
<label for="average">Average</label>
22+
<input type="submit" value="Run" id="average">
23+
<label for="average-result">Result</label>
24+
<input type="text" id="average-result" disabled>
25+
</form>
26+
<form id="sum-of" onsubmit="handleSubmit(event, this.id)">
27+
<label for="sum">Sum</label>
28+
<input type="submit" value="Run">
29+
<label for="sum-result">Result</label>
30+
<input type="text" id="sum-result" disabled>
31+
</form>
32+
<form id="product-of" onsubmit="handleSubmit(event, this.id)">
33+
<label for="product">Product</label>
34+
<input type="submit" value="Run">
35+
<label for="product-result">Result</label>
36+
<input type="text" id="product-result" disabled>
37+
</form>
38+
</div>
39+
<div class="each-item">
40+
<h2>Operations with each item</h2>
41+
<form id="addition" onsubmit="handleSubmit(event, this.id)">
42+
<div class="content">
43+
<label for="add">Add</label>
44+
<input type="number" id="add" name="add" step="0.00000000000000001">
45+
</div>
46+
<input type="submit" value="Run">
47+
</form>
48+
<form id="subtraction" onsubmit="handleSubmit(event, this.id)">
49+
<div class="content">
50+
<label for="subtract">Subtract</label>
51+
<input type="number" id="subtract" name="subtract" step="0.00000000000000001">
52+
</div>
53+
<input type="submit" value="Run">
54+
</form>
55+
<form id="multiplication" onsubmit="handleSubmit(event, this.id)">
56+
<div class="content">
57+
<label for="multiply">Multiply</label>
58+
<input type="number" id="multiply" name="multiply" step="0.00000000000000001">
59+
</div>
60+
<input type="submit" value="Run">
61+
</form>
62+
<form id="division" onsubmit="handleSubmit(event, this.id)">
63+
<div class="content">
64+
<label for="divide">Divide</label>
65+
<input type="number" id="divide" name="divide" step="0.00000000000000001">
66+
</div>
67+
<input type="submit" value="Run">
68+
</form>
69+
<form id="square-of" onsubmit="handleSubmit(event, this.id)">
70+
<label for="square">Square</label>
71+
<input type="submit" value="Run" id="square">
72+
</form>
73+
<form id="square-root" onsubmit="handleSubmit(event, this.id)">
74+
<label for="sqrt">Square Root</label>
75+
<input type="submit" value="Run" id="sqrt">
76+
</form>
77+
<form id="integer" onsubmit="handleSubmit(event, this.id)">
78+
<label for="int">Turn to integer</label>
79+
<input type="submit" value="Run" id="int">
80+
</form>
81+
</div>
82+
<div class="filter">
83+
<h2>Filter</h2>
84+
<form id="greater-than" onsubmit="handleSubmit(event, this.id)">
85+
<div class="content">
86+
<label for="greater">Show only numbers greater than</label>
87+
<input type="number" id="greater" name="greater" step="0.00000000000000001">
88+
</div>
89+
<input type="submit" value="Run">
90+
</form>
91+
<form id="smaller-than" onsubmit="handleSubmit(event, this.id)">
92+
<div class="content">
93+
<label for="greater">Show only numbers smaller than</label>
94+
<input type="number" id="smaller" name="smaller" step="0.00000000000000001">
95+
</div>
96+
<input type="submit" value="Run">
97+
</form>
98+
<form id="divisible-by" onsubmit="handleSubmit(event, this.id)">
99+
<div class="content">
100+
<label for="divisible">Show only numbers divisible by</label>
101+
<input type="number" id="divisible" name="divisible" step="0.00000000000000001">
102+
</div>
103+
<input type="submit" value="Run">
104+
</form>
105+
</div>
106+
</main>
107+
</body>
108+
</html>

‎array-transformation/script.js‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
function parseArray() {
2+
let array = [];
3+
let text = document.getElementById("array").value;
4+
let element = "";
5+
for (let i = 0; i < text.length; i++) {
6+
if (Number.isNaN(text[i]) && text[i] !== ",") {
7+
alert("Type a valid array!");
8+
break;
9+
}
10+
if (text[i] === ",") {
11+
array.push(Number(element));
12+
element = "";
13+
continue;
14+
}
15+
element += text[i];
16+
if (i === text.length - 1) {
17+
array.push(Number(element));
18+
}
19+
}
20+
return array;
21+
}
22+
23+
function handleSubmit(event, formId) {
24+
event.preventDefault();
25+
26+
let array = parseArray();
27+
let sum = 0;
28+
29+
switch (formId) {
30+
// EACH ITEM
31+
case "addition":
32+
for (i = 0; i < array.length; i++) {
33+
array[i] = add(array[i], Number(document.getElementById("add").value));
34+
}
35+
break;
36+
case "subtraction":
37+
for (i = 0; i < array.length; i++) {
38+
array[i] = subtract(array[i], Number(document.getElementById("subtract").value));
39+
}
40+
break;
41+
case "multiplication":
42+
for (i = 0; i < array.length; i++) {
43+
array[i] = multiply(array[i], Number(document.getElementById("multiply").value));
44+
}
45+
break;
46+
case "division":
47+
for (i = 0; i < array.length; i++) {
48+
array[i] = divide(array[i], Number(document.getElementById("divide").value));
49+
}
50+
break;
51+
case "square-of":
52+
for (i = 0; i < array.length; i++) {
53+
array[i] = square(array[i]);
54+
}
55+
break;
56+
case "square-root":
57+
for (i = 0; i < array.length; i++) {
58+
array[i] = sqrt(array[i]);
59+
}
60+
break;
61+
case "integer":
62+
for (i = 0; i < array.length; i++) {
63+
array[i] = parseInt(array[i]);
64+
}
65+
// FILTER
66+
case "greater-than":
67+
for (i = 0; i < array.length; i++) {
68+
if (array[i] <= Number(document.getElementById("greater").value)) {
69+
array.splice(i, 1);
70+
i--; // Make sure we don't skip over anything.
71+
}
72+
}
73+
break;
74+
case "smaller-than":
75+
for (i = 0; i < array.length; i++) {
76+
if (array[i] >= Number(document.getElementById("smaller").value)) {
77+
array.splice(i, 1);
78+
i--;
79+
}
80+
}
81+
break;
82+
case "divisible-by":
83+
for (i = 0; i < array.length; i++) {
84+
if (array[i] % Number(document.getElementById("divisible").value) !== 0) {
85+
array.splice(i, 1);
86+
i--;
87+
}
88+
}
89+
break;
90+
// ALL ITEMS
91+
case "average-of":
92+
for (i = 0; i < array.length; i++) {
93+
sum += array[i];
94+
}
95+
let average = sum / array.length;
96+
document.getElementById("average-result").value = average;
97+
break;
98+
case "sum-of":
99+
for (i = 0; i < array.length; i++) {
100+
sum += array[i];
101+
}
102+
document.getElementById("sum-result").value = sum;
103+
break;
104+
case "product-of":
105+
product = 1;
106+
for (i = 0; i < array.length; i++) {
107+
product *= array[i];
108+
}
109+
document.getElementById("product-result").value = product;
110+
break;
111+
}
112+
113+
// Update array
114+
let text = ""
115+
116+
for (i = 0; i < array.length; i++) {
117+
if (i !== 0) {
118+
text += `, ${array[i]}`;
119+
} else {
120+
text += `${array[i]}`;
121+
}
122+
}
123+
124+
document.getElementById("array").value = text;
125+
}
126+
127+
const add = (a, b) => a + b;
128+
const subtract = (a, b) => a - b;
129+
const multiply = (a, b) => a * b;
130+
const divide = (a, b) => a / b;
131+
const square = (a) => a * a;
132+
const sqrt = (a) => Math.sqrt(a);
133+
const compare = (a, b) => a > b;
134+
const equal = (a, b) => a = b;
135+
const divisible = (a, b) => a % b === 0;

‎array-transformation/style.css‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
/* We need this to make sure the up/down increment/decrement buttons are hidden on inputs */
2+
input::-webkit-outer-spin-button,
3+
input::-webkit-inner-spin-button {
4+
-webkit-appearance: none;
5+
-moz-appearance: none;
6+
margin: 0;
7+
}
8+
9+
input[type=number] {
10+
-moz-appearance:textfield;
11+
}
12+
13+
body {
14+
background: #121212;
15+
display: flex;
16+
flex-direction: column;
17+
justify-content: center;
18+
flex-wrap: wrap;
19+
align-content: center;
20+
}
21+
22+
main {
23+
max-width: 450px;
24+
}
25+
26+
* {
27+
font-family: 'Roboto', Arial, sans-serif;
28+
color: white;
29+
}
30+
31+
input {
32+
color: black;
33+
}
34+
35+
h1 {
36+
font-size: 46px;
37+
text-align: center;
38+
}
39+
40+
h2 {
41+
font-size: 30px;
42+
text-align: center;
43+
}
44+
45+
label {
46+
font-size: 24px;
47+
}
48+
label[for=array] {
49+
text-align: center;
50+
}
51+
52+
input {
53+
width: 100px;
54+
font-size: 18px;
55+
margin: 0 10px;
56+
}
57+
58+
input[type=submit] {
59+
margin-left: auto;
60+
margin-top: 5px;
61+
margin-bottom: 5px;
62+
border: none;
63+
border-radius: 0;
64+
text-align: center;
65+
padding: 0;
66+
background: #c0e3fc;
67+
color: #2A3132;
68+
height: 25px;
69+
text-decoration: none;
70+
font-weight: normal;
71+
}
72+
73+
input[type=number] {
74+
height: 25px;
75+
padding: 0 4px;
76+
border-radius: 0;
77+
border: none;
78+
}
79+
80+
.content {
81+
display: flex;
82+
justify-content: space-between;
83+
align-items: center;
84+
width: 230px;
85+
}
86+
87+
.filter form .content {
88+
width: auto;
89+
}
90+
91+
.filter form label {
92+
margin-top: 10px;
93+
}
94+
95+
form {
96+
display: flex;
97+
flex-direction: row;
98+
align-items: center;
99+
}
100+
101+
.all-items form input[type=submit] {
102+
width: 48px;
103+
margin-left: auto;
104+
}
105+
106+
#array-form {
107+
display: flex;
108+
flex-direction: column;
109+
align-items: center;
110+
}

0 commit comments

Comments
 (0)