Skip to content

Commit 8964124

Browse files
jamesqquickjamesqquick
committed
Initial commit with (ugly) working trivia app. attempting to break functionality out into separate files
0 parents  commit 8964124

File tree

7 files changed

+595
-0
lines changed

7 files changed

+595
-0
lines changed

‎.vscode/launch.json

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
// Use IntelliSense to learn about possible attributes.
3+
// Hover to view descriptions of existing attributes.
4+
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
5+
"version": "0.2.0",
6+
"configurations": [
7+
{
8+
"type": "chrome",
9+
"request": "launch",
10+
"name": "Launch Chrome against localhost",
11+
"url": "http://localhost:5500",
12+
"webRoot": "${workspaceFolder}"
13+
}
14+
]
15+
}

‎ReadMe.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# Design and Build a Quiz Application From Scratch
2+
3+
ES6 Features (arrow functions, spread operator, const and let)
4+
5+
JavaScript - array functions (splice, map, sort), localStorage, fetch API
6+
7+
CSS - flexbox

‎app.css

Lines changed: 240 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,240 @@
1+
/* Resets */
2+
body,
3+
html {
4+
margin: 0;
5+
padding: 0;
6+
}
7+
* {
8+
-webkit-box-sizing: border-box;
9+
box-sizing: border-box;
10+
}
11+
12+
/* Utilities */
13+
14+
.container {
15+
width: 100vw;
16+
height: 100vh;
17+
display: flex;
18+
justify-content: center;
19+
align-items: center;
20+
margin: 0 auto;
21+
max-width: 800px;
22+
}
23+
24+
.container > * {
25+
width: 100%;
26+
}
27+
.full {
28+
height: 100vh;
29+
width: 100vw;
30+
padding: 4rem;
31+
}
32+
33+
.flex-column {
34+
display: -webkit-box;
35+
display: -ms-flexbox;
36+
display: flex;
37+
-webkit-box-orient: vertical;
38+
-webkit-box-direction: normal;
39+
-ms-flex-direction: column;
40+
flex-direction: column;
41+
}
42+
43+
.flex-center {
44+
-webkit-box-pack: center;
45+
-ms-flex-pack: center;
46+
justify-content: center;
47+
-webkit-box-align: center;
48+
49+
-ms-flex-align: center;
50+
align-items: center;
51+
}
52+
53+
.justify-center {
54+
-webkit-box-pack: center;
55+
-ms-flex-pack: center;
56+
justify-content: center;
57+
}
58+
59+
.text-center {
60+
text-align: center;
61+
}
62+
63+
.hidden {
64+
display: none;
65+
}
66+
67+
#end,
68+
#game {
69+
position: relative;
70+
}
71+
72+
/* GAME */
73+
74+
.question {
75+
text-align: center;
76+
}
77+
78+
.choice-container {
79+
display: flex;
80+
margin-bottom: 5px;
81+
border: 1px solid black;
82+
}
83+
84+
.choice-prefix {
85+
font-size: 18px;
86+
margin: 0;
87+
padding: 15px 0;
88+
width: 50px;
89+
text-align: center;
90+
border-right: 1px solid black;
91+
}
92+
93+
.choice {
94+
flex-grow: 1;
95+
font-size: 18px;
96+
margin: 0;
97+
padding: 15px;
98+
}
99+
100+
.choice-container:hover {
101+
-webkit-box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.15);
102+
box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.15);
103+
-webkit-transform: translateY(-2px);
104+
transform: translateY(-2px);
105+
-webkit-transition: -webkit-transform 150ms;
106+
transition: -webkit-transform 150ms;
107+
transition: transform 150ms;
108+
transition: transform 150ms, -webkit-transform 150ms;
109+
cursor: pointer;
110+
}
111+
112+
.correct {
113+
-webkit-animation: correct 1s;
114+
animation: correct 1s;
115+
}
116+
117+
.incorrect {
118+
-webkit-animation: incorrect 750ms;
119+
animation: incorrect 750ms;
120+
}
121+
122+
#hud {
123+
display: flex;
124+
justify-content: space-between;
125+
}
126+
127+
@-webkit-keyframes correct {
128+
0% {
129+
border-color: green;
130+
background-color: green;
131+
}
132+
25% {
133+
border-color: green;
134+
background-color: green;
135+
}
136+
100% {
137+
border-color: black;
138+
background-color: white;
139+
}
140+
}
141+
142+
@keyframes correct {
143+
0% {
144+
border-color: green;
145+
background-color: green;
146+
}
147+
25% {
148+
border-color: green;
149+
background-color: green;
150+
}
151+
100% {
152+
border-color: black;
153+
background-color: white;
154+
}
155+
}
156+
157+
@-webkit-keyframes incorrect {
158+
0% {
159+
border-color: red;
160+
background-color: red;
161+
}
162+
25% {
163+
border-color: red;
164+
background-color: red;
165+
}
166+
100% {
167+
border-color: black;
168+
background-color: white;
169+
}
170+
}
171+
172+
@keyframes incorrect {
173+
0% {
174+
border-color: red;
175+
background-color: red;
176+
}
177+
25% {
178+
border-color: red;
179+
background-color: red;
180+
}
181+
100% {
182+
border-color: black;
183+
background-color: white;
184+
}
185+
}
186+
187+
/* FORMS */
188+
189+
form {
190+
width: 100%;
191+
}
192+
193+
label,
194+
input {
195+
display: block;
196+
width: 100%;
197+
}
198+
199+
label {
200+
margin-bottom: 5px;
201+
}
202+
input,
203+
select {
204+
margin-bottom: 10px;
205+
height: 40px;
206+
}
207+
select {
208+
display: block;
209+
}
210+
button {
211+
font-size: 16px;
212+
height: 40px;
213+
width: 200px;
214+
border: 1px solid black;
215+
margin-bottom: 10px;
216+
}
217+
218+
button:hover {
219+
cursor: pointer;
220+
-webkit-box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.15);
221+
box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.15);
222+
-webkit-transform: translateY(-2px);
223+
transform: translateY(-2px);
224+
-webkit-transition: -webkit-transform 150ms;
225+
transition: -webkit-transform 150ms;
226+
transition: transform 150ms;
227+
transition: transform 150ms, -webkit-transform 150ms;
228+
}
229+
230+
button[disabled] {
231+
color: white;
232+
background: grey;
233+
border: none;
234+
}
235+
236+
button[disabled]:hover {
237+
cursor: not-allowed;
238+
box-shadow: none;
239+
transform: none;
240+
}

0 commit comments

Comments
 (0)