Skip to content

Commit 0caf605

Browse files
author
PB Sweep
committed
Update DOM_fundamentals.md
1 parent 5764575 commit 0caf605

12 files changed

+214
-0
lines changed

‎07-Pig-Game/working/.prettierrc

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"singleQuote": true,
3+
"arrowParens": "avoid"
4+
}

‎07-Pig-Game/working/dice-1.png

3.46 KB
Loading

‎07-Pig-Game/working/dice-2.png

4.22 KB
Loading

‎07-Pig-Game/working/dice-3.png

4.89 KB
Loading

‎07-Pig-Game/working/dice-4.png

4.47 KB
Loading

‎07-Pig-Game/working/dice-5.png

5.14 KB
Loading

‎07-Pig-Game/working/dice-6.png

5.23 KB
Loading

‎07-Pig-Game/working/index.html

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
<link rel="stylesheet" href="style.css" />
8+
<title>Pig Game</title>
9+
</head>
10+
<body>
11+
<main>
12+
<section class="player player--0 player--active">
13+
<h2 class="name" id="name--0">Player 1</h2>
14+
<p class="score" id="score--0">43</p>
15+
<div class="current">
16+
<p class="current-label">Current</p>
17+
<p class="current-score" id="current--0">0</p>
18+
</div>
19+
</section>
20+
<section class="player player--1">
21+
<h2 class="name" id="name--1">Player 2</h2>
22+
<p class="score" id="score--1">24</p>
23+
<div class="current">
24+
<p class="current-label">Current</p>
25+
<p class="current-score" id="current--1">0</p>
26+
</div>
27+
</section>
28+
29+
<img src="dice-5.png" alt="Playing dice" class="dice" />
30+
<button class="btn btn--new">🔄 New game</button>
31+
<button class="btn btn--roll">🎲 Roll dice</button>
32+
<button class="btn btn--hold">📥 Hold</button>
33+
</main>
34+
<script src="script.js"></script>
35+
</body>
36+
</html>

‎07-Pig-Game/working/pig-game-flowchart.png

411 KB
Loading

‎07-Pig-Game/working/script.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
'use strict';

‎07-Pig-Game/working/style.css

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
2+
3+
* {
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: inherit;
7+
}
8+
9+
html {
10+
font-size: 62.5%;
11+
box-sizing: border-box;
12+
}
13+
14+
body {
15+
font-family: 'Nunito', sans-serif;
16+
font-weight: 400;
17+
height: 100vh;
18+
color: #333;
19+
background-image: linear-gradient(to top left, #753682 0%, #bf2e34 100%);
20+
display: flex;
21+
align-items: center;
22+
justify-content: center;
23+
}
24+
25+
/* LAYOUT */
26+
main {
27+
position: relative;
28+
width: 100rem;
29+
height: 60rem;
30+
background-color: rgba(255, 255, 255, 0.35);
31+
backdrop-filter: blur(200px);
32+
filter: blur();
33+
box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.25);
34+
border-radius: 9px;
35+
overflow: hidden;
36+
display: flex;
37+
}
38+
39+
.player {
40+
flex: 50%;
41+
padding: 9rem;
42+
display: flex;
43+
flex-direction: column;
44+
align-items: center;
45+
transition: all 0.75s;
46+
}
47+
48+
/* ELEMENTS */
49+
.name {
50+
position: relative;
51+
font-size: 4rem;
52+
text-transform: uppercase;
53+
letter-spacing: 1px;
54+
word-spacing: 2px;
55+
font-weight: 300;
56+
margin-bottom: 1rem;
57+
}
58+
59+
.score {
60+
font-size: 8rem;
61+
font-weight: 300;
62+
color: #c7365f;
63+
margin-bottom: auto;
64+
}
65+
66+
.player--active {
67+
background-color: rgba(255, 255, 255, 0.4);
68+
}
69+
.player--active .name {
70+
font-weight: 700;
71+
}
72+
.player--active .score {
73+
font-weight: 400;
74+
}
75+
76+
.player--active .current {
77+
opacity: 1;
78+
}
79+
80+
.current {
81+
background-color: #c7365f;
82+
opacity: 0.8;
83+
border-radius: 9px;
84+
color: #fff;
85+
width: 65%;
86+
padding: 2rem;
87+
text-align: center;
88+
transition: all 0.75s;
89+
}
90+
91+
.current-label {
92+
text-transform: uppercase;
93+
margin-bottom: 1rem;
94+
font-size: 1.7rem;
95+
color: #ddd;
96+
}
97+
98+
.current-score {
99+
font-size: 3.5rem;
100+
}
101+
102+
/* ABSOLUTE POSITIONED ELEMENTS */
103+
.btn {
104+
position: absolute;
105+
left: 50%;
106+
transform: translateX(-50%);
107+
color: #444;
108+
background: none;
109+
border: none;
110+
font-family: inherit;
111+
font-size: 1.8rem;
112+
text-transform: uppercase;
113+
cursor: pointer;
114+
font-weight: 400;
115+
transition: all 0.2s;
116+
117+
background-color: white;
118+
background-color: rgba(255, 255, 255, 0.6);
119+
backdrop-filter: blur(10px);
120+
121+
padding: 0.7rem 2.5rem;
122+
border-radius: 50rem;
123+
box-shadow: 0 1.75rem 3.5rem rgba(0, 0, 0, 0.1);
124+
}
125+
126+
.btn::first-letter {
127+
font-size: 2.4rem;
128+
display: inline-block;
129+
margin-right: 0.7rem;
130+
}
131+
132+
.btn--new {
133+
top: 4rem;
134+
}
135+
.btn--roll {
136+
top: 39.3rem;
137+
}
138+
.btn--hold {
139+
top: 46.1rem;
140+
}
141+
142+
.btn:active {
143+
transform: translate(-50%, 3px);
144+
box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15);
145+
}
146+
147+
.btn:focus {
148+
outline: none;
149+
}
150+
151+
.dice {
152+
position: absolute;
153+
left: 50%;
154+
top: 16.5rem;
155+
transform: translateX(-50%);
156+
height: 10rem;
157+
box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.2);
158+
}
159+
160+
.player--winner {
161+
background-color: #2f2f2f;
162+
}
163+
164+
.player--winner .name {
165+
font-weight: 700;
166+
color: #c7365f;
167+
}

‎notes/DOM_fundamentals.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,12 @@ console.log(document.querySelector('.message').textContent);
3030
console.log(document.querySelector('.guess').value);
3131
```
3232

33+
### Getting elements by id
34+
35+
```js
36+
console.log(document.getElementById('id1'));
37+
```
38+
3339
### Setting text values
3440

3541
```js

0 commit comments

Comments
 (0)