Skip to content

Commit a271622

Browse files
jamesqquickjamesqquick
committed
Styling updated. Need to use rem for sizes
1 parent dbf8d18 commit a271622

File tree

9 files changed

+105
-73
lines changed

9 files changed

+105
-73
lines changed

‎app.css‎

Lines changed: 49 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,11 @@
55
font-family: Arial, Helvetica, sans-serif;
66
margin: 0;
77
padding: 0;
8+
color: #333;
9+
}
10+
11+
html {
12+
background-color: #ecf5ff;
813
}
914

1015
/* TEXT */
@@ -15,12 +20,39 @@ h4 {
1520
margin-bottom: 10px;
1621
}
1722

23+
h1 {
24+
font-size: 54px;
25+
color: #56a5eb;
26+
margin-bottom: 50px;
27+
}
28+
29+
h1 > span {
30+
font-size: 24px;
31+
font-weight: 500;
32+
}
33+
34+
h2 {
35+
font-size: 42px;
36+
margin-bottom: 40px;
37+
font-weight: 500;
38+
}
39+
40+
h3 {
41+
font-size: 28px;
42+
font-weight: 500;
43+
}
44+
45+
.text-xl {
46+
font-size: 100px;
47+
}
48+
1849
/* Utilities */
1950

2051
.container {
2152
width: 100vw;
2253
height: 100vh;
2354
display: flex;
55+
padding: 20px;
2456
justify-content: center;
2557
align-items: center;
2658
margin: 0 auto;
@@ -62,51 +94,48 @@ h4 {
6294

6395
form {
6496
width: 100%;
97+
display: flex;
98+
align-items: center;
99+
flex-direction: column;
65100
}
66101

67-
label,
68102
input {
103+
margin-bottom: 10px;
69104
display: block;
70-
width: 100%;
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);
71110
}
72111

73-
label {
74-
margin-bottom: 5px;
75-
}
76-
input,
77-
select {
78-
margin-bottom: 10px;
79-
height: 40px;
112+
input::placeholder {
113+
color: #aaa;
80114
}
81115
select {
82116
display: block;
83117
}
84118
.btn {
85-
font-size: 16px;
119+
font-size: 18px;
86120
padding: 10px 0;
87121
width: 200px;
88122
text-align: center;
89-
border: 1px solid black;
123+
border: 1px solid #56a5eb;
90124
margin-bottom: 10px;
91125
text-decoration: none;
92-
color: black;
126+
color: #56a5eb;
127+
background-color: white;
93128
}
94129

95130
.btn:hover {
96131
cursor: pointer;
97-
box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.15);
98-
transform: translateY(-2px);
132+
box-shadow: 0 4px 14px 0 rgba(86, 185, 235, 0.5);
133+
transform: translateY(-1px);
99134
transition: -webkit-transform 150ms;
100135
transition: transform 150ms;
101136
transition: transform 150ms, -webkit-transform 150ms;
102137
}
103138

104-
.btn[disabled] {
105-
color: white;
106-
background: grey;
107-
border: none;
108-
}
109-
110139
.btn[disabled]:hover {
111140
cursor: not-allowed;
112141
box-shadow: none;

‎end.html‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,15 @@
1111
<body>
1212
<div class="container">
1313
<div id="end" class="flex-center flex-column">
14-
<h1 class="text-center">Great Job!</h1>
15-
<h2 id="finalScore">100</h2>
16-
<a class="btn" href="/">Go Home</a>
14+
<h1 class="text-xl" id="finalScore"></h1>
1715
<form>
18-
<label for="username">Username</label>
19-
<input type="text" name="username" id="username" />
16+
<!-- <label for="username">Username</label> -->
17+
<input
18+
type="text"
19+
name="username"
20+
id="username"
21+
placeholder="username"
22+
/>
2023
<button
2124
class="btn"
2225
type="submit"
@@ -27,6 +30,7 @@ <h2 id="finalScore">100</h2>
2730
Save
2831
</button>
2932
</form>
33+
<a class="btn" href="/">Go Home</a>
3034
</div>
3135
</div>
3236
<script src="end.js"></script>

‎end.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,15 @@ const highScores = JSON.parse(localStorage.getItem("highScores")) || [];
55
const mostRecentScore = localStorage.getItem("mostRecentScore");
66
//load mostRecentScore from localStorage
77
//TODO: navigate home if no previous score
8-
finalScore.innerText = localStorage.getItem("mostRecentScore");
8+
finalScore.innerHTML = `${localStorage.getItem(
9+
"mostRecentScore"
10+
)}<span>pts</span>`;
911

1012
saveHighScore = e => {
1113
console.log("save high score");
1214
e.preventDefault();
1315
//add the score, sort the array, and splice off starting at position 5
14-
highScores.push({ mostRecentScore, username: usernameInput.value });
16+
highScores.push({ score: mostRecentScore, username: usernameInput.value });
1517
highScores.sort((a, b) => b.score - a.score);
1618
highScores.splice(5);
1719
//Save to local storage for next time

‎game.css‎

Lines changed: 21 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,32 @@
22
.choice-container {
33
display: flex;
44
margin-bottom: 5px;
5-
width: 100% !important;
5+
width: 100%;
6+
font-size: 18px;
7+
border: 1px solid #56a5eb;
8+
margin-bottom: 10px;
9+
color: #56a5eb;
10+
background-color: white;
11+
}
12+
13+
.choice-container:hover {
14+
cursor: pointer;
15+
box-shadow: 0 4px 14px 0 rgba(86, 185, 235, 0.5);
16+
transform: translateY(-1px);
17+
transition: transform 150ms;
18+
transition: transform 150ms, -webkit-transform 150ms;
619
}
720

821
.choice-prefix {
9-
padding: 5px 0;
10-
width: 50px;
11-
text-align: center;
12-
border-right: 1px solid black;
22+
padding: 15px 25px;
23+
background-color: #56a5eb;
24+
color: white;
1325
}
1426

15-
.choice {
16-
padding: 5px 0;
27+
.choice-text {
28+
padding: 15px;
1729
flex-grow: 1;
30+
color: black;
1831
}
1932

2033
.correct {
@@ -28,6 +41,7 @@
2841
#hud {
2942
display: flex;
3043
justify-content: space-between;
44+
margin-bottom: 15px;
3145
}
3246

3347
@keyframes correct {

‎game.html‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -12,28 +12,28 @@
1212
<body>
1313
<div class="container">
1414
<div id="game" class="justify-center flex-column ">
15-
<a class="btn" href="/">Go Home</a>
15+
<!-- <a class="btn" href="/">Go Home</a> -->
1616

1717
<div id="hud">
18-
<h3 id="questionCounter">Question 1/5</h3>
18+
<h3 id="questionCounter">1/5</h3>
1919
<h3 id="score">Score: 0</h3>
2020
</div>
2121
<h2 id="question"></h2>
22-
<div class="choice-container btn">
22+
<div class="choice-container">
2323
<p class="choice-prefix">A</p>
24-
<p class="choice" data-number="1"></p>
24+
<p class="choice-text" data-number="1"></p>
2525
</div>
26-
<div class="choice-container btn">
26+
<div class="choice-container">
2727
<p class="choice-prefix">B</p>
28-
<p class="choice" data-number="2"></p>
28+
<p class="choice-text" data-number="2"></p>
2929
</div>
30-
<div class="choice-container btn">
30+
<div class="choice-container">
3131
<p class="choice-prefix">C</p>
32-
<p class="choice" data-number="3"></p>
32+
<p class="choice-text" data-number="3"></p>
3333
</div>
34-
<div class="choice-container btn">
34+
<div class="choice-container">
3535
<p class="choice-prefix">D</p>
36-
<p class="choice" data-number="4"></p>
36+
<p class="choice-text" data-number="4"></p>
3737
</div>
3838
</div>
3939
</div>

‎game.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
//GAME Elements
22
const question = document.getElementById("question");
3-
const choices = Array.from(document.getElementsByClassName("choice"));
3+
const choices = Array.from(document.getElementsByClassName("choice-text"));
44
const scoreText = document.getElementById("score");
55
const questionCounterText = document.getElementById("questionCounter");
66

@@ -62,6 +62,7 @@ getNewQuestion = () => {
6262

6363
choices.forEach(choice => {
6464
const number = choice.dataset["number"];
65+
console.log("setting choice");
6566
choice.innerHTML = currentQuestion["choice" + number];
6667
});
6768

‎highscores.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,14 @@
33
#highScoresList {
44
padding-left: 0;
55
list-style: none;
6+
margin-bottom: 40px;
7+
}
8+
9+
.high-score {
10+
font-size: 28px;
11+
margin-bottom: 5px;
12+
}
13+
14+
.high-score:hover {
15+
transform: scale(1.05);
616
}

‎highscores.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
const highScoresList = document.getElementById("highScoresList");
22
const highScores = JSON.parse(localStorage.getItem("highScores")) || [];
3-
console.log(highScores);
43
highScoresList.innerHTML = highScores
54
.map(
65
highScore =>

‎index.html‎

Lines changed: 0 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -18,30 +18,3 @@ <h1>Quick Quiz</h1>
1818
<script src="app.js"></script>
1919
</body>
2020
</html>
21-
22-
<!-- <button class="btn" onclick="navigateTo('submitQuestion')">Submit Question</button> -->
23-
24-
<!-- <div id="submitQuestion" class=" flex-center flex-column">
25-
<button class="btn" onClick="navigateTo('home')">Go Home</button>
26-
<h2 class="text-center">Submit a new question!</h2>
27-
<form>
28-
<label for="question">Question</label>
29-
<input type="text" name="question" id="questionInput" />
30-
<label for="choice1">Answer Choice 1</label>
31-
<input type="text" name="choice1" id="choice1" />
32-
<label for="choice2">Answer Choice 2</label>
33-
<input type="text" name="choice2" id="choice2" />
34-
<label for="choice3">Answer Choice 3</label>
35-
<input type="text" name="choice3" id="choice3" />
36-
<label for="choice4">Answer Choice 4</label>
37-
<input type="text" name="choice4" id="choice" />
38-
<label for="correctAnswer">Correct Answer</label>
39-
<select>
40-
<option value="1">1</option>
41-
<option value="1">2</option>
42-
<option value="1">3</option>
43-
<option value="1">4</option>
44-
</select>
45-
<button class="btn" type="submit" id="submitScoreBtn">Submit</button>
46-
</form>
47-
</div> -->

0 commit comments

Comments
 (0)