Skip to content

Commit 9417134

Browse files
jamesqquickjamesqquick
committed
Final project folders based on videos and updated readme
1 parent a271622 commit 9417134

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

100 files changed

+4850
-354
lines changed

‎1. Create Home Page and Application Styling/app.css

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
:root {
2+
background-color: #ecf5ff;
3+
font-size: 62.5%;
4+
}
5+
6+
* {
7+
box-sizing: border-box;
8+
font-family: Arial, Helvetica, sans-serif;
9+
margin: 0;
10+
padding: 0;
11+
color: #333;
12+
}
13+
14+
h1,
15+
h2,
16+
h3,
17+
h4 {
18+
margin-bottom: 1rem;
19+
}
20+
21+
h1 {
22+
font-size: 5.4rem;
23+
color: #56a5eb;
24+
margin-bottom: 5rem;
25+
}
26+
27+
h1 > span {
28+
font-size: 2.4rem;
29+
font-weight: 500;
30+
}
31+
32+
h2 {
33+
font-size: 4.2rem;
34+
margin-bottom: 4rem;
35+
font-weight: 700;
36+
}
37+
38+
h3 {
39+
font-size: 2.8rem;
40+
font-weight: 500;
41+
}
42+
43+
/* UTILITIES */
44+
45+
.container {
46+
width: 100vw;
47+
height: 100vh;
48+
display: flex;
49+
justify-content: center;
50+
align-items: center;
51+
max-width: 80rem;
52+
margin: 0 auto;
53+
}
54+
55+
.container > * {
56+
width: 100%;
57+
}
58+
59+
.flex-column {
60+
display: flex;
61+
flex-direction: column;
62+
}
63+
64+
.flex-center {
65+
justify-content: center;
66+
align-items: center;
67+
}
68+
69+
.justify-center {
70+
justify-content: center;
71+
}
72+
73+
.text-center {
74+
text-align: center;
75+
}
76+
77+
.hidden {
78+
display: none;
79+
}
80+
81+
/* BUTTONS */
82+
.btn {
83+
font-size: 1.8rem;
84+
padding: 1rem 0;
85+
width: 20rem;
86+
text-align: center;
87+
border: 0.1rem solid #56a5eb;
88+
margin-bottom: 1rem;
89+
text-decoration: none;
90+
color: #56a5eb;
91+
background-color: white;
92+
}
93+
94+
.btn:hover {
95+
cursor: pointer;
96+
box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5);
97+
transform: translateY(-0.1rem);
98+
transition: transform 150ms;
99+
}
100+
101+
.btn[disabled]:hover {
102+
cursor: not-allowed;
103+
box-shadow: none;
104+
transform: none;
105+
}

‎index.html renamed to ‎1. Create Home Page and Application Styling/index.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,11 @@
99
</head>
1010
<body>
1111
<div class="container">
12-
<div id="home" class="flex-center flex-column ">
12+
<div id="home" class="flex-center flex-column">
1313
<h1>Quick Quiz</h1>
1414
<a class="btn" href="/game.html">Play</a>
1515
<a class="btn" href="/highscores.html">High Scores</a>
1616
</div>
1717
</div>
18-
<script src="app.js"></script>
1918
</body>
2019
</html>

‎app.css renamed to ‎10. Fetch Questions from Local JSON File/app.css

Lines changed: 45 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,56 @@
1-
/* Resets */
1+
:root {
2+
background-color: #ecf5ff;
3+
font-size: 62.5%;
4+
}
5+
26
* {
3-
-webkit-box-sizing: border-box;
47
box-sizing: border-box;
58
font-family: Arial, Helvetica, sans-serif;
69
margin: 0;
710
padding: 0;
811
color: #333;
912
}
1013

11-
html {
12-
background-color: #ecf5ff;
13-
}
14-
15-
/* TEXT */
1614
h1,
1715
h2,
1816
h3,
1917
h4 {
20-
margin-bottom: 10px;
18+
margin-bottom: 1rem;
2119
}
2220

2321
h1 {
24-
font-size: 54px;
22+
font-size: 5.4rem;
2523
color: #56a5eb;
26-
margin-bottom: 50px;
24+
margin-bottom: 5rem;
2725
}
2826

2927
h1 > span {
30-
font-size: 24px;
28+
font-size: 2.4rem;
3129
font-weight: 500;
3230
}
3331

3432
h2 {
35-
font-size: 42px;
36-
margin-bottom: 40px;
37-
font-weight: 500;
33+
font-size: 4.2rem;
34+
margin-bottom: 4rem;
35+
font-weight: 700;
3836
}
3937

4038
h3 {
41-
font-size: 28px;
39+
font-size: 2.8rem;
4240
font-weight: 500;
4341
}
4442

45-
.text-xl {
46-
font-size: 100px;
47-
}
48-
49-
/* Utilities */
43+
/* UTILITIES */
5044

5145
.container {
5246
width: 100vw;
5347
height: 100vh;
5448
display: flex;
55-
padding: 20px;
5649
justify-content: center;
5750
align-items: center;
51+
max-width: 80rem;
5852
margin: 0 auto;
59-
max-width: 800px;
53+
padding: 2rem;
6054
}
6155

6256
.container > * {
@@ -85,59 +79,49 @@ h3 {
8579
display: none;
8680
}
8781

88-
#end,
89-
#game {
90-
position: relative;
91-
}
92-
93-
/* FORMS */
94-
95-
form {
96-
width: 100%;
97-
display: flex;
98-
align-items: center;
99-
flex-direction: column;
100-
}
101-
102-
input {
103-
margin-bottom: 10px;
104-
display: block;
105-
width: 200px;
106-
padding: 15px;
107-
font-size: 18px;
108-
border: none;
109-
box-shadow: 0 1px 14px 0 rgba(86, 185, 235, 0.5);
110-
}
111-
112-
input::placeholder {
113-
color: #aaa;
114-
}
115-
select {
116-
display: block;
117-
}
82+
/* BUTTONS */
11883
.btn {
119-
font-size: 18px;
120-
padding: 10px 0;
121-
width: 200px;
84+
font-size: 1.8rem;
85+
padding: 1rem 0;
86+
width: 20rem;
12287
text-align: center;
123-
border: 1px solid #56a5eb;
124-
margin-bottom: 10px;
88+
border: 0.1rem solid #56a5eb;
89+
margin-bottom: 1rem;
12590
text-decoration: none;
12691
color: #56a5eb;
12792
background-color: white;
12893
}
12994

13095
.btn:hover {
13196
cursor: pointer;
132-
box-shadow: 0 4px 14px 0 rgba(86, 185, 235, 0.5);
133-
transform: translateY(-1px);
134-
transition: -webkit-transform 150ms;
97+
box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5);
98+
transform: translateY(-0.1rem);
13599
transition: transform 150ms;
136-
transition: transform 150ms, -webkit-transform 150ms;
137100
}
138101

139102
.btn[disabled]:hover {
140103
cursor: not-allowed;
141104
box-shadow: none;
142105
transform: none;
143106
}
107+
108+
/* FORMS */
109+
form {
110+
width: 100%;
111+
display: flex;
112+
flex-direction: column;
113+
align-items: center;
114+
}
115+
116+
input {
117+
margin-bottom: 1rem;
118+
width: 20rem;
119+
padding: 1.5rem;
120+
font-size: 1.8rem;
121+
border: none;
122+
box-shadow: 0 0.1rem 1.4rem 0 rgba(86, 185, 235, 0.5);
123+
}
124+
125+
input::placeholder {
126+
color: #aaa;
127+
}

‎end.html renamed to ‎10. Fetch Questions from Local JSON File/end.html

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,32 +4,31 @@
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7-
<title>Quick Quiz</title>
7+
<title>Congrats!</title>
88
<link rel="stylesheet" href="app.css" />
99
</head>
10-
1110
<body>
1211
<div class="container">
1312
<div id="end" class="flex-center flex-column">
14-
<h1 class="text-xl" id="finalScore"></h1>
13+
<h1 id="finalScore"></h1>
1514
<form>
16-
<!-- <label for="username">Username</label> -->
1715
<input
1816
type="text"
1917
name="username"
2018
id="username"
2119
placeholder="username"
2220
/>
2321
<button
24-
class="btn"
2522
type="submit"
23+
class="btn"
2624
id="saveScoreBtn"
2725
onclick="saveHighScore(event)"
2826
disabled
2927
>
3028
Save
3129
</button>
3230
</form>
31+
<a class="btn" href="/game.html">Play Again</a>
3332
<a class="btn" href="/">Go Home</a>
3433
</div>
3534
</div>

‎10. Fetch Questions from Local JSON File/end.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
const username = document.getElementById("username");
2+
const saveScoreBtn = document.getElementById("saveScoreBtn");
3+
const finalScore = document.getElementById("finalScore");
4+
const mostRecentScore = localStorage.getItem("mostRecentScore");
5+
6+
const highScores = JSON.parse(localStorage.getItem("highScores")) || [];
7+
8+
const MAX_HIGH_SCORES = 5;
9+
10+
finalScore.innerText = mostRecentScore;
11+
12+
username.addEventListener("keyup", () => {
13+
saveScoreBtn.disabled = !username.value;
14+
});
15+
16+
saveHighScore = e => {
17+
console.log("clicked the save button!");
18+
e.preventDefault();
19+
20+
const score = {
21+
score: Math.floor(Math.random() * 100),
22+
name: username.value
23+
};
24+
highScores.push(score);
25+
highScores.sort((a, b) => b.score - a.score);
26+
highScores.splice(5);
27+
28+
localStorage.setItem("highScores", JSON.stringify(highScores));
29+
window.location.assign("/");
30+
};

0 commit comments

Comments
 (0)