Skip to content

Commit 5764575

Browse files
author
PB Sweep
committed
Update DOM_fundamentals.md
1 parent 4629b26 commit 5764575

File tree

5 files changed

+167
-0
lines changed

5 files changed

+167
-0
lines changed

‎06-Modal/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+
}

‎06-Modal/working/index.html

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
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>Modal window</title>
9+
</head>
10+
<body>
11+
<button class="show-modal">Show modal 1</button>
12+
<button class="show-modal">Show modal 2</button>
13+
<button class="show-modal">Show modal 3</button>
14+
15+
<div class="modal hidden">
16+
<button class="close-modal">&times;</button>
17+
<h1>I'm a modal window 😍</h1>
18+
<p>
19+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
20+
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
21+
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
22+
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
23+
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
24+
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
25+
mollit anim id est laborum.
26+
</p>
27+
</div>
28+
<div class="overlay hidden"></div>
29+
30+
<script src="script.js"></script>
31+
</body>
32+
</html>

‎06-Modal/working/script.js

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

‎06-Modal/working/style.css

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: inherit;
5+
}
6+
7+
html {
8+
font-size: 62.5%;
9+
box-sizing: border-box;
10+
}
11+
12+
body {
13+
font-family: sans-serif;
14+
color: #333;
15+
line-height: 1.5;
16+
height: 100vh;
17+
position: relative;
18+
display: flex;
19+
align-items: flex-start;
20+
justify-content: center;
21+
background: linear-gradient(to top left, #28b487, #7dd56f);
22+
}
23+
24+
.show-modal {
25+
font-size: 2rem;
26+
font-weight: 600;
27+
padding: 1.75rem 3.5rem;
28+
margin: 5rem 2rem;
29+
border: none;
30+
background-color: #fff;
31+
color: #444;
32+
border-radius: 10rem;
33+
cursor: pointer;
34+
}
35+
36+
.close-modal {
37+
position: absolute;
38+
top: 1.2rem;
39+
right: 2rem;
40+
font-size: 5rem;
41+
color: #333;
42+
cursor: pointer;
43+
border: none;
44+
background: none;
45+
}
46+
47+
h1 {
48+
font-size: 2.5rem;
49+
margin-bottom: 2rem;
50+
}
51+
52+
p {
53+
font-size: 1.8rem;
54+
}
55+
56+
/* -------------------------- */
57+
/* CLASSES TO MAKE MODAL WORK */
58+
.hidden {
59+
display: none;
60+
}
61+
62+
.modal {
63+
position: absolute;
64+
top: 50%;
65+
left: 50%;
66+
transform: translate(-50%, -50%);
67+
width: 70%;
68+
69+
background-color: white;
70+
padding: 6rem;
71+
border-radius: 5px;
72+
box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.3);
73+
z-index: 10;
74+
}
75+
76+
.overlay {
77+
position: absolute;
78+
top: 0;
79+
left: 0;
80+
width: 100%;
81+
height: 100%;
82+
background-color: rgba(0, 0, 0, 0.6);
83+
backdrop-filter: blur(3px);
84+
z-index: 5;
85+
}

‎notes/DOM_fundamentals.md

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,3 +67,48 @@ document.querySelector('.check').addEventListener(
6767
```
6868

6969
The first argument of `addEventListener` method is `click`. Second argument is an anonymous function that does something.
70+
71+
## Manipulate class list
72+
73+
```html
74+
<div class="modal hidden">
75+
<p></p>
76+
</div>
77+
```
78+
79+
```js
80+
const modal = document.querySelector('.modal');
81+
modal.classList.remove('hidden') // this will remove hidden class
82+
// Note: we are not using .hidden, that notation is only for selectors.
83+
84+
modal.classList.add('hidden') // this will add hidden class again
85+
```
86+
87+
Check if class is present
88+
89+
```js
90+
modal.classList.contains('hidden') // returns a boolean whether hidden is a class or not.
91+
```
92+
93+
## Listen for keyboard events
94+
95+
keydown: when a key is pressed
96+
keypress: when a key is depressed
97+
keyup: when a key is released
98+
99+
```js
100+
// the message is logged any time a key is pressed
101+
document.addEventListener('keydown', function () {
102+
console.log('A key was pressed')
103+
});
104+
```
105+
106+
To look for a specific key, add an event parameter to the function
107+
108+
```js
109+
document.addEventListener('keydown', function (e) {
110+
console.log(e); // this will log info about the key pressed
111+
console.log(e.key); // this will give the actual key pressed
112+
113+
});
114+
```

0 commit comments

Comments
 (0)