Skip to content

Commit a4ae9e8

Browse files
enmirazeenmiraze
committed
udpate
1 parent 53f22b6 commit a4ae9e8

File tree

5 files changed

+451
-0
lines changed

5 files changed

+451
-0
lines changed

‎projects/gd-matrix/index-5-1.html

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Number Tracker</title>
5+
<style>
6+
/* CSS styles go here */
7+
table {
8+
width: 100%;
9+
border-collapse: collapse;
10+
}
11+
th, td {
12+
border: 1px solid black;
13+
padding: 8px;
14+
}
15+
th {
16+
text-align: left;
17+
}
18+
#input-form {
19+
margin-bottom: 20px;
20+
}
21+
</style>
22+
</head>
23+
<body>
24+
<h1>Number Tracker</h1>
25+
<div id="input-form">
26+
<label for="number-input">Enter a number between 1 and 36:</label>
27+
<input type="number" id="number-input" min="1" max="36">
28+
<button onclick="addNumber()">Add</button>
29+
</div>
30+
<p id="added-numbers"></p>
31+
<table>
32+
<thead>
33+
<tr>
34+
<th>1st Dozen</th>
35+
<th>2nd Dozen</th>
36+
<th>3rd Dozen</th>
37+
</tr>
38+
</thead>
39+
40+
<tbody id="number-table">
41+
<tr>
42+
<td id="dozen1-count">0</td>
43+
<td id="dozen2-count">0</td>
44+
<td id="dozen3-count">0</td>
45+
</tr>
46+
</tbody>
47+
</table>
48+
49+
<script>
50+
var addedNumbers = []; // array to store added numbers
51+
var dozen1Count = 0;
52+
var dozen2Count = 0;
53+
var dozen3Count = 0;
54+
function addNumber() {
55+
var input = document.getElementById("number-input");
56+
var number = input.value;
57+
if (!number) {
58+
alert("Please enter a number between 1 and 36.");
59+
return;
60+
}
61+
addedNumbers.unshift(number); // add number to the beginning of the array
62+
input.value = "";
63+
updateAddedNumbers();
64+
updateTrackerTable(number);
65+
}
66+
function updateAddedNumbers() {
67+
var addedNumbersElem = document.getElementById("added-numbers");
68+
addedNumbersElem.innerHTML = addedNumbers.join(", "); // join array with commas
69+
}
70+
function updateTrackerTable(number) {
71+
if (number <= 12) {
72+
dozen1Count++;
73+
} else if (number <= 24) {
74+
dozen2Count++;
75+
} else {
76+
dozen3Count++;
77+
}
78+
document.getElementById("dozen1-count").innerHTML = dozen1Count;
79+
document.getElementById("dozen2-count").innerHTML = dozen2Count;
80+
document.getElementById("dozen3-count").innerHTML = dozen3Count;
81+
}
82+
</script>
83+
</body>
84+
</html>

‎projects/gd-matrix/index-5-2-1.html

+89
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Number Tracker</title>
5+
<style>
6+
/* CSS styles go here */
7+
table {
8+
width: 100%;
9+
border-collapse: collapse;
10+
}
11+
th, td {
12+
border: 1px solid black;
13+
padding: 8px;
14+
}
15+
th {
16+
text-align: left;
17+
}
18+
#input-form {
19+
margin-bottom: 20px;
20+
}
21+
</style>
22+
</head>
23+
<body>
24+
<h1>Number Tracker</h1>
25+
<div id="input-form">
26+
<label for="number-input">Enter a number between 1 and 36:</label>
27+
<input type="number" id="number-input" min="1" max="36">
28+
<button onclick="addNumber()">Add</button>
29+
</div>
30+
<table>
31+
<thead>
32+
<tr>
33+
<th>1st Dozen</th>
34+
<th>2nd Dozen</th>
35+
<th>3rd Dozen</th>
36+
</tr>
37+
</thead>
38+
<tbody id="number-table">
39+
<!-- Numbers will be added to this table as rows -->
40+
</tbody>
41+
</table>
42+
<p id="added-numbers"></p>
43+
<script>
44+
var addedNumbers = []; // array to store added numbers
45+
function addNumber() {
46+
var input = document.getElementById("number-input");
47+
var number = input.value;
48+
if (!number) {
49+
alert("Please enter a number between 1 and 36.");
50+
return;
51+
}
52+
addedNumbers.unshift(number); // add number to the beginning of the array
53+
input.value = "";
54+
updateAddedNumbers();
55+
if (addedNumbers.length % 3 == 0) {
56+
var dozen1Count = 0;
57+
var dozen2Count = 0;
58+
var dozen3Count = 0;
59+
for (var i = 0; i < 3; i++) {
60+
var number = addedNumbers[i];
61+
if (number <= 12) {
62+
dozen1Count++;
63+
} else if (number <= 24) {
64+
dozen2Count++;
65+
} else {
66+
dozen3Count++;
67+
}
68+
}
69+
var table = document.getElementById("number-table");
70+
var row = table.insertRow();
71+
var dozen1 = row.insertCell(0);
72+
var dozen2 = row.insertCell(1);
73+
var dozen3 = row.insertCell(2);
74+
dozen1.innerHTML = dozen1Count;
75+
dozen2.innerHTML = dozen2Count;
76+
dozen3.innerHTML = dozen3Count;
77+
dozen1Count = 0;
78+
dozen2Count = 0;
79+
dozen3Count = 0;
80+
addedNumbers.splice(0,3);
81+
}
82+
}
83+
function updateAddedNumbers() {
84+
var addedNumbersElem = document.getElementById("added-numbers");
85+
addedNumbersElem.innerHTML = addedNumbers.join(", "); // join array with commas
86+
}
87+
</script>
88+
</body>
89+
</html>

‎projects/gd-matrix/index-5-2.html

+89
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Number Tracker</title>
5+
<style>
6+
/* CSS styles go here */
7+
table {
8+
width: 100%;
9+
border-collapse: collapse;
10+
}
11+
th, td {
12+
border: 1px solid black;
13+
padding: 8px;
14+
}
15+
th {
16+
text-align: left;
17+
}
18+
#input-form {
19+
margin-bottom: 20px;
20+
}
21+
</style>
22+
</head>
23+
<body>
24+
<h1>Number Tracker</h1>
25+
<div id="input-form">
26+
<label for="number-input">Enter a number between 1 and 36:</label>
27+
<input type="number" id="number-input" min="1" max="36">
28+
<button onclick="addNumber()">Add</button>
29+
</div>
30+
<table>
31+
<thead>
32+
<tr>
33+
<th>1st Dozen</th>
34+
<th>2nd Dozen</th>
35+
<th>3rd Dozen</th>
36+
</tr>
37+
</thead>
38+
<tbody id="number-table">
39+
<!-- Numbers will be added to this table as rows -->
40+
</tbody>
41+
</table>
42+
<p id="added-numbers"></p>
43+
<script>
44+
var addedNumbers = []; // array to store added numbers
45+
function addNumber() {
46+
var input = document.getElementById("number-input");
47+
var number = input.value;
48+
if (!number) {
49+
alert("Please enter a number between 1 and 36.");
50+
return;
51+
}
52+
addedNumbers.unshift(number); // add number to the beginning of the array
53+
input.value = "";
54+
updateAddedNumbers();
55+
if (addedNumbers.length % 3 == 0) {
56+
var dozen1Count = 0;
57+
var dozen2Count = 0;
58+
var dozen3Count = 0;
59+
for (var i = 0; i < 3; i++) {
60+
var number = addedNumbers[i];
61+
if (number <= 12) {
62+
dozen1Count++;
63+
} else if (number <= 24) {
64+
dozen2Count++;
65+
} else {
66+
dozen3Count++;
67+
}
68+
}
69+
var table = document.getElementById("number-table");
70+
var row = table.insertRow();
71+
var dozen1 = row.insertCell(0);
72+
var dozen2 = row.insertCell(1);
73+
var dozen3 = row.insertCell(2);
74+
dozen1.innerHTML = dozen1Count;
75+
dozen2.innerHTML = dozen2Count;
76+
dozen3.innerHTML = dozen3Count;
77+
dozen1Count = 0;
78+
dozen2Count = 0;
79+
dozen3Count = 0;
80+
addedNumbers.splice(0,3);
81+
}
82+
}
83+
function updateAddedNumbers() {
84+
var addedNumbersElem = document.getElementById("added-numbers");
85+
addedNumbersElem.innerHTML = addedNumbers.join(", "); // join array with commas
86+
}
87+
</script>
88+
</body>
89+
</html>

‎projects/gd-matrix/index-5-3.html

+100
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<title>Number Tracker</title>
6+
<style>
7+
/* CSS styles go here */
8+
table {
9+
width: 100%;
10+
border-collapse: collapse;
11+
}
12+
13+
th,
14+
td {
15+
border: 1px solid black;
16+
padding: 8px;
17+
}
18+
19+
th {
20+
text-align: left;
21+
}
22+
23+
#input-form {
24+
margin-bottom: 20px;
25+
}
26+
</style>
27+
</head>
28+
29+
<body>
30+
<h1>Number Tracker</h1>
31+
<div id="input-form">
32+
<label for="number-input">Enter a number between 1 and 36:</label>
33+
<input type="number" id="number-input" min="1" max="36">
34+
<button onclick="addNumber()">Add</button>
35+
</div>
36+
<table>
37+
<thead>
38+
<tr>
39+
<th>1st Dozen</th>
40+
<th>2nd Dozen</th>
41+
<th>3rd Dozen</th>
42+
</tr>
43+
</thead>
44+
<tbody id="number-table">
45+
<tr>
46+
<td id="dozen1-count">0</td>
47+
<td id="dozen2-count">0</td>
48+
<td id="dozen3-count">0</td>
49+
</tr>
50+
</tbody>
51+
</table>
52+
<p id="added-numbers"></p>
53+
<script>
54+
var addedNumbers = []; // array to store added numbers
55+
var spins = 0;
56+
function addNumber() {
57+
var input = document.getElementById("number-input");
58+
var number = input.value;
59+
if (!number) {
60+
alert("Please enter a number between 1 and 36.");
61+
return;
62+
}
63+
addedNumbers.unshift(number); // add number to the beginning of the array
64+
input.value = "";
65+
updateAddedNumbers();
66+
var dozen1Count = document.getElementById("dozen1-count");
67+
var dozen2Count = document.getElementById("dozen2-count");
68+
var dozen3Count = document.getElementById("dozen3-count");
69+
if (number <= 12) {
70+
dozen1Count.innerHTML++;
71+
} else if (number <= 24) {
72+
dozen2Count.innerHTML++;
73+
} else {
74+
dozen3Count.innerHTML++;
75+
}
76+
spins++;
77+
if (spins === 3) {
78+
spins = 0;
79+
var table = document.getElementById("number-table");
80+
var row = table.insertRow();
81+
var dozen1 = row.insertCell(0);
82+
var dozen2 = row.insertCell(1);
83+
var dozen3 = row.insertCell(2);
84+
dozen1.innerHTML = dozen1Count.innerHTML;
85+
dozen2.innerHTML = dozen2Count.innerHTML;
86+
dozen3.innerHTML = dozen3Count.innerHTML;
87+
dozen1Count.innerHTML = 0;
88+
dozen2Count.innerHTML = 0;
89+
dozen3Count.innerHTML = 0;
90+
}
91+
}
92+
function updateAddedNumbers() {
93+
var addedNumbersElem = document.getElementById("added-numbers");
94+
addedNumbersElem.innerHTML = addedNumbers.join(", "); // join array with commas
95+
}
96+
</script>
97+
98+
</body>
99+
100+
</html>

0 commit comments

Comments
 (0)