Skip to content

Commit 7539a36

Browse files
prowebdev119prowebdev119
committed
Initial commit
0 parents  commit 7539a36

File tree

6 files changed

+378
-0
lines changed

6 files changed

+378
-0
lines changed

‎.gitattributes

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# Auto detect text files and perform LF normalization
2+
* text=auto

‎assert/background.webp

263 KB
Binary file not shown.

‎final version.zip

266 KB
Binary file not shown.

‎index.html

+108
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Document</title>
9+
<link href="./style.css" rel="stylesheet" />
10+
</head>
11+
12+
<body>
13+
<div id="model" class="showModel hideModel">
14+
<div class="openModal">Take home finals are <span>easier?</span></div>
15+
</div>
16+
<div class="header">
17+
CSE 134 - final Project Completion Fastest Times
18+
<p id="timer"></p>
19+
</div>
20+
<div class="main">
21+
<div class="main_title">Fastest Completion Times Leaderboard:</div>
22+
<div class="mainbox">
23+
<div class="yeargroup">
24+
<div class="box_title">This Year</div>
25+
<div class="item_row">
26+
<div>🥇</div>
27+
<p id="std_cur_1" class="text gold"></p>
28+
</div>
29+
<div class="item_row">
30+
<div>🥈</div>
31+
<p id="std_cur_2" class="text silver"></p>
32+
</div>
33+
<div class="item_row">
34+
<div>🥉</div>
35+
<p id="std_cur_3" class="text bronze"></p>
36+
</div>
37+
<div class="item_row">
38+
<div>4</div>
39+
<p id="std_cur_4" class="text"></p>
40+
</div>
41+
<div class="item_row">
42+
<div>5</div>
43+
<p id="std_cur_5" class="text"></p>
44+
</div>
45+
<div class="item_row">
46+
<div>6</div>
47+
<p id="std_cur_6" class="text"></p>
48+
</div>
49+
<div class="item_row">
50+
<div>7</div>
51+
<p id="std_cur_7" class="text"></p>
52+
</div>
53+
</div>
54+
<div class="yeargroup">
55+
<div class="box_title">
56+
Previous Years
57+
<div class="dropdown" onchange={selectOption(event)}>
58+
<select>
59+
<option value="2018">2018</option>
60+
<option value="2019">2019</option>
61+
<option value="2020">2020</option>
62+
<option value="2021">2021</option>
63+
</select>
64+
</div>
65+
</div>
66+
<div class="item_row">
67+
<div>🥇</div>
68+
<p id="std_1" class="text gold"></p>
69+
</div>
70+
<div class="item_row">
71+
<div>🥈</div>
72+
<p id="std_2" class="text silver"></p>
73+
</div>
74+
<div class="item_row">
75+
<div>🥉</div>
76+
<p id="std_3" class="text bronze"></p>
77+
</div>
78+
<div class="item_row">
79+
<div>4</div>
80+
<p id="std_4" class="text"></p>
81+
</div>
82+
<div class="item_row">
83+
<div>5</div>
84+
<p id="std_5" class="text"></p>
85+
</div>
86+
<div class="item_row">
87+
<div>6</div>
88+
<p id="std_6" class="text"></p>
89+
</div>
90+
<div class="item_row">
91+
<div>7</div>
92+
<p id="std_7" class="text"></p>
93+
</div>
94+
</div>
95+
</div>
96+
<div class="question">
97+
<div id="button">
98+
<img src="https://introweb.tech/cse134-final/question.svg" alt="?">
99+
</div>
100+
</div>
101+
</div>
102+
<div class="footer">
103+
Made with ❤️ in Summer 2022 - <a href="https://www.freelancer.com/u/Olechkashusar272" target="_blank">UCSD</a>
104+
</div>
105+
</body>
106+
<script src="./script.js"></script>
107+
108+
</html>

‎script.js

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
const yearArray = [2018, 2019, 2020, 2021];
2+
3+
const std_1 = document.getElementById('std_1');
4+
const std_2 = document.getElementById('std_2');
5+
const std_3 = document.getElementById('std_3');
6+
const std_4 = document.getElementById('std_4');
7+
const std_5 = document.getElementById('std_5');
8+
const std_6 = document.getElementById('std_6');
9+
const std_7 = document.getElementById('std_7');
10+
11+
function secoundToHours(given_seconds) {
12+
hours = Math.floor(given_seconds / 3600);
13+
minutes = Math.floor((given_seconds - (hours * 3600)) / 60);
14+
seconds = given_seconds - (hours * 3600) - (minutes * 60);
15+
16+
timeString = hours.toString().padStart(2, '0') + ':' +
17+
minutes.toString().padStart(2, '0') + ':' +
18+
seconds.toString().padStart(2, '0');
19+
20+
return timeString
21+
}
22+
23+
document.getElementById('button').addEventListener('click', (evene) => {
24+
document.getElementById('model').classList.remove('hideModel')
25+
document.getElementById('model').addEventListener('click', () => {
26+
document.getElementById('model').classList.add('hideModel')
27+
})
28+
})
29+
30+
31+
async function AssignInitialData() {
32+
localStorage.setItem('stu_data', JSON.stringify({ 2018: [], 2019: [], 2020: [], 2021: [] }));
33+
const data = await FetchData(2018);
34+
const currentdata = await FetchData(2022);
35+
const stu_data = JSON.parse(localStorage.getItem('stu_data'));
36+
stu_data[2018] = data;
37+
stu_data[2022] = currentdata;
38+
localStorage.setItem('stu_data', JSON.stringify(stu_data));
39+
40+
41+
for (let i = 1; i <= 7; i++) {
42+
document.getElementById(`std_cur_${i}`).innerHTML = `${stu_data[2022][i - 1]['name']} ${secoundToHours(stu_data[2022][i - 1]['time'])}`
43+
}
44+
for (let i = 1; i <= 7; i++) {
45+
document.getElementById(`std_${i}`).innerHTML = `${stu_data[2018][i - 1]['name']} ${secoundToHours(stu_data[2018][i - 1]['time'])}`
46+
}
47+
48+
yearArray.map(async (item) => {
49+
const data = await FetchData(item);
50+
const stu_data = JSON.parse(localStorage.getItem('stu_data'));
51+
stu_data[item] = data;
52+
localStorage.setItem('stu_data', JSON.stringify(stu_data));
53+
return item;
54+
})
55+
56+
setInterval(() => {
57+
var currentDay = new Date();
58+
var securrentSecound = currentDay.getSeconds() + (60 * (currentDay.getMinutes() + (60 * currentDay.getHours())));
59+
document.getElementById('timer').innerHTML = `${secoundToHours(86400 - securrentSecound)}`
60+
}, 1000)
61+
62+
}
63+
64+
65+
async function FetchData(year) {
66+
const responce = await fetch(`https://introweb.tech/cse134-final/fake-data.php/?year=${year}`);
67+
const data = await responce.json();
68+
data.sort(function (a, b) { return a.time - b.time; });
69+
return data;
70+
}
71+
72+
async function selectOption(event) {
73+
const stu_data = JSON.parse(localStorage.getItem('stu_data'));
74+
if (stu_data[event.target.value].length == 0) {
75+
const data = await FetchData(event.target.value);
76+
stu_data[event.target.value] = data;
77+
localStorage.setItem('stu_data', JSON.stringify(stu_data));
78+
}
79+
for (let i = 1; i <= 7; i++) {
80+
document.getElementById(`std_${i}`).innerHTML = `${stu_data[event.target.value][i - 1]['name']} ${secoundToHours(stu_data[event.target.value][i - 1]['time'])}`
81+
}
82+
}
83+
84+
AssignInitialData();

‎style.css

+184
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
* {
2+
margin: 0px;
3+
padding: 0px;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background-image: url('./assert/background.webp');
9+
background-size: cover;
10+
background-repeat: no-repeat;
11+
width: 100vw;
12+
height: 100vh;
13+
position: relative;
14+
}
15+
.header{
16+
background-color: #E6EFF8;
17+
color: black;
18+
font-size: 30px;
19+
padding: 10px 10px;
20+
display: flex;
21+
justify-content: space-between;
22+
align-items: center;
23+
font-weight: bold;
24+
font-family: sans-serif;
25+
}
26+
#timer{
27+
display: flex;
28+
justify-content: flex-end;
29+
}
30+
.main{
31+
position: relative;
32+
width: 800px;
33+
border-radius: 20px;
34+
background-color: white;
35+
box-shadow: 10px 10px 20px black;
36+
color: black;
37+
margin: auto;
38+
margin-top: 200px;
39+
padding: 20px;
40+
font-family: sans-serif;
41+
font-weight: bold;
42+
display: flex;
43+
flex-direction: column;
44+
justify-content: space-between;
45+
}
46+
.main_title{
47+
font-size: 25px;
48+
padding-bottom: 30px;
49+
}
50+
.question{
51+
width: 98%;
52+
display: flex;
53+
justify-content: flex-end;
54+
}
55+
#button{
56+
width: 30px;
57+
height: 30px;
58+
cursor: pointer;
59+
}
60+
.mainbox {
61+
display: flex;
62+
flex-direction: row;
63+
align-items: center;
64+
justify-content: space-between;
65+
padding-right: 40px;
66+
}
67+
.box_title{
68+
display: flex;
69+
font-size: 20px;
70+
font-family: sans-serif;
71+
font-weight: bold;
72+
padding-bottom: 10px;
73+
}
74+
.item_row{
75+
display: flex;
76+
align-items: center;
77+
padding: 5px 0;
78+
}
79+
.item_row div{
80+
padding-right: 5px;
81+
width: 30px;
82+
display: flex;
83+
justify-content: center;
84+
}
85+
.gold{
86+
color: orange;
87+
}
88+
.silver{
89+
color: gray;
90+
}
91+
.bronze{
92+
color: brown;
93+
}
94+
.dropdown{
95+
padding-left: 20px;
96+
}
97+
.footer{
98+
background: rgb(172,173,172, 0.5);
99+
padding: 20px 0;
100+
display: flex;
101+
justify-content: center;
102+
align-items: center;
103+
position: fixed;
104+
bottom: 0;
105+
width: 100%;
106+
color: black;
107+
font-weight: bold;
108+
font-family: sans-serif;
109+
}
110+
.text {
111+
font-weight: bold;
112+
font-size: larger;
113+
padding: 5px 0;
114+
}
115+
.openModal{
116+
width: 500px;
117+
height: 200px;
118+
margin: auto;
119+
background-color: orange;
120+
z-index: 11;
121+
display: flex;
122+
justify-content: center;
123+
align-items: center;
124+
border-radius: 10px;
125+
font-size: 20px;
126+
color: black;
127+
font-weight: bold;
128+
font-family: sans-serif;
129+
}
130+
.openModal span{
131+
font-style: italic;
132+
padding-left: 10px;
133+
}
134+
.showModel {
135+
position: absolute;
136+
top: 0;
137+
right: 0;
138+
width: 100%;
139+
height: 100%;
140+
background-color: rgba(0, 0, 0, 0.705);
141+
color: white;
142+
display: flex;
143+
justify-content: center;
144+
align-items: center;
145+
z-index: 10;
146+
}
147+
148+
.hideModel {
149+
position: absolute;
150+
top: 0;
151+
right: 0;
152+
width: 100%;
153+
height: 100%;
154+
background-color: rgba(0, 0, 0, 0.705);
155+
color: white;
156+
display: none;
157+
}
158+
159+
@media(max-width: 800px){
160+
.main{
161+
width: auto;
162+
}
163+
}
164+
@media(max-width: 576px){
165+
.header{
166+
font-size: 20px;
167+
}
168+
.main{
169+
width: 90%;
170+
margin-top: 10px;
171+
}
172+
.main_title{
173+
padding-bottom: 0;
174+
}
175+
.mainbox{
176+
flex-direction: column;
177+
}
178+
.yeargroup{
179+
padding-top: 20px;
180+
}
181+
.openModal{
182+
width: 80%;
183+
}
184+
}

0 commit comments

Comments
 (0)