Skip to content

Instantly share code, notes, and snippets.

@daaimah123

daaimah123/DOM Manipulation & Event Fundamentals

Last active July 2, 2021 17:42
Show Gist options
  • Save daaimah123/9c2e1dbf6aee3753bdcf3656784a0f6a to your computer and use it in GitHub Desktop.
Save daaimah123/9c2e1dbf6aee3753bdcf3656784a0f6a to your computer and use it in GitHub Desktop.
Download ZIP
Notes for Jonas Schmedtmann's lecture building guessGame and modalPopUp apps where we learn about DOM and Event Listener Manipulation https://udemy.com/course/the-complete-javascript-course/learn/lecture/22648441#overview
Raw
DOM Manipulation & Event Fundamentals
===== Document Object Model (DOM) Manipulation & Event Fundamentals ====
Structured representation of the HTML document that allows JS to access and select elements and
styles to manipulate them (i.e. change text, HTML attributes and CSS styles). Automatically created
once browser loads HTML and stored in a tree structure with nodes. Not JS, but rather apart of web
api's and interact with JS.
Document object is the entry-point into DOM
.querySelector('.message')
==> pass in selector with same syntax you would use in css; will provide the entire element back
.querySelectorAll
==> similar to above, capture multiple nodes with similar classes
==> returns a node list in an array
NodeList(3) [element.class, element.class, element.class]
.getElementById
==> captures id in element
==> do NOT use css syntax in the parenthesis, write ID as a string
Instead of: document.querySelector('#score--0');
Use this: document.getElementById('score--0');
.textContent
==> will provide the text content of the html element selected
==> setting this equal to content, which change the text of the html element
(HTML)
<p class="message">Start guessing...</p>
(JS)
document.querySelector('.message') ==returns==> <p class="message">Start guessing...</p>
document.querySelector('.message').textContent ==returns==> Start guessing...
document.querySelector('.message').textContent = 'Correct Number' ==returns==> Correct Number
.value
==> grab value of html input field
==> setting this equal to content, which change the value of the html element
==> outputs a string
(HTML)
<input type="number" class="guess" />
(JS)
document.querySelector('.guess').value = 23 ==returns==> 23
.addEventListener()
==> expects 2 params: first = action (i.e. click, mouseover) and second = function of something to do
document.querySelector('.check').addEventListener('click', function() {
console.log('I am doing something');
}
.style
==> take property name to manipulate css set equal to a string
==> will set as inline styles directly in html, not changing css file
document.querySelector('body').style.backgroundColor = 'green';
document.querySelector('.number').style.width = '30rem';
.classList
==> accesses / manages the list of classes on specified elements
==> when nothing is appended to it, returns the class names on the element
==> .add(), .remove(), .toggle(), .item(), .contains()
==> the appended methods do NOT use css syntax in the parenthesis, write class as a string
document.querySelector('.modal').classList.remove('hidden');
document.querySelector('.overlay').classList.add('hidden');
Keyboard Events (global event)
==> keydown (when a key is pressed)
==> keypress (while the key is held down)
==> keyup (once key is released)
Event / e
==> can be used as a parameter passed into event listener function
==> can use 'event' or 'e'
document.addEventListener('keydown', function(event){
if(event.key === "Enter"){
console.log(event.key)
}
})
Raw
guessGame..html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<title>Guess My Number!</title>
</head>
<body>
<header>
<h1>Guess My Number!</h1>
<p class="between">(Between 1 and 20)</p>
<button class="btn again">Again!</button>
<div class="number">?</div>
</header>
<main>
<section class="left">
<input type="number" class="guess" />
<button class="btn check">Check!</button>
</section>
<section class="right">
<p class="message">Start guessing...</p>
<p class="label-score">💯 Score: <span class="score">20</span></p>
<p class="label-highscore">
🥇 Highscore: <span class="highscore">0</span>
</p>
</section>
</main>
<script src="script.js"></script>
</body>
</html>
Raw
guessGame.css
@import url('https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 62.5%;
box-sizing: border-box;
}
body {
font-family: 'Press Start 2P', sans-serif;
color: #eee;
background-color: #222;
/* background-color: #60b347; */
}
/* LAYOUT */
header {
position: relative;
height: 35vh;
border-bottom: 7px solid #eee;
}
main {
height: 65vh;
color: #eee;
display: flex;
align-items: center;
justify-content: space-around;
}
.left {
width: 52rem;
display: flex;
flex-direction: column;
align-items: center;
}
.right {
width: 52rem;
font-size: 2rem;
}
/* ELEMENTS STYLE */
h1 {
font-size: 4rem;
text-align: center;
position: absolute;
width: 100%;
top: 52%;
left: 50%;
transform: translate(-50%, -50%);
}
.number {
background: #eee;
color: #333;
font-size: 6rem;
width: 15rem;
padding: 3rem 0rem;
text-align: center;
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 50%);
}
.between {
font-size: 1.4rem;
position: absolute;
top: 2rem;
right: 2rem;
}
.again {
position: absolute;
top: 2rem;
left: 2rem;
}
.guess {
background: none;
border: 4px solid #eee;
font-family: inherit;
color: inherit;
font-size: 5rem;
padding: 2.5rem;
width: 25rem;
text-align: center;
display: block;
margin-bottom: 3rem;
}
.btn {
border: none;
background-color: #eee;
color: #222;
font-size: 2rem;
font-family: inherit;
padding: 2rem 3rem;
cursor: pointer;
}
.btn:hover {
background-color: #ccc;
}
.message {
margin-bottom: 8rem;
height: 3rem;
}
.label-score {
margin-bottom: 2rem;
}
Raw
guessGame.js
'use strict';
let secretNum = Math.trunc(Math.random()*20)+1;
secretNum !== 0;
let score = document.querySelector('.score').textContent;
let highscore = document.querySelector('.highscore').textContent;
const displayMessage = function(message){
document.querySelector('.message').textContent = message;
}
const displayNumber = function(number){
document.querySelector('.number').textContent = number;
}
const changeColor = function(color){
document.querySelector('body').style.backgroundColor = color;
}
const changeWidth = function(width){
document.querySelector('.number').style.width = width;
}
document.querySelector('.check').addEventListener('click', function() {
const guess = Number(document.querySelector('.guess').value);
//no input
if (!guess){
displayMessage = 'No number entered! 🧐';
//player wins
} else if(guess === secretNum){
displayMessage('Correct number!🎉');
displayNumber(secretNum);
changeColor('green');
changeWidth('30rem');
if (score > highscore){
highscore = score;
document.querySelector('.highscore').textContent = highscore;
}
//guess is wrong
} else if (guess !== secretNum){
if (score > 1){
displayMessage(guess > secretNum ? 'Too high!': 'Too low!');
score--
document.querySelector('.score').textContent = score;
} else {
displayMessage('You lose 😕');
document.querySelector('.score').textContent = 0;
}
}
});
document.querySelector('.again').addEventListener('click', function(){
secretNum = Math.trunc(Math.random()*20)+1;
document.querySelector('.score').textContent = 20;
changeColor('#222');
changeWidth('15rem');
displayMessage('Start guessing...');
displayNumber('?');
document.querySelector('.guess').value ='';
});
Raw
modal.css
* {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 62.5%;
box-sizing: border-box;
}
body {
font-family: sans-serif;
color: #333;
line-height: 1.5;
height: 100vh;
position: relative;
display: flex;
align-items: flex-start;
justify-content: center;
background: linear-gradient(to top left, #28b487, #7dd56f);
}
.show-modal {
font-size: 2rem;
font-weight: 600;
padding: 1.75rem 3.5rem;
margin: 5rem 2rem;
border: none;
background-color: #fff;
color: #444;
border-radius: 10rem;
cursor: pointer;
}
.close-modal {
position: absolute;
top: 1.2rem;
right: 2rem;
font-size: 5rem;
color: #333;
cursor: pointer;
border: none;
background: none;
}
h1 {
font-size: 2.5rem;
margin-bottom: 2rem;
}
p {
font-size: 1.8rem;
}
/* -------------------------- */
/* CLASSES TO MAKE MODAL WORK */
.hidden {
display: none;
}
.modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 70%;
background-color: white;
padding: 6rem;
border-radius: 5px;
box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.3);
z-index: 10;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(3px);
z-index: 5;
}
Raw
modal.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<title>Modal window</title>
</head>
<body>
<button class="show-modal">Show modal 1</button>
<button class="show-modal">Show modal 2</button>
<button class="show-modal">Show modal 3</button>
<div class="modal hidden">
<button class="close-modal">&times;</button>
<h1>I'm a modal window 😍</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
</div>
<div class="overlay hidden"></div>
<script src="script.js"></script>
</body>
</html>
Raw
modal.js
'use strict';
const modal = document.querySelector('.modal');
const overlay = document.querySelector('.overlay');
const btnCloseModal = document.querySelector('.close-modal');
const btnsOpenModal = document.querySelectorAll('.show-modal');
const openModal = function() {
modal.classList.remove('hidden');
overlay.classList.remove('hidden');
}
const closeModal = function() {
modal.classList.add('hidden');
overlay.classList.add('hidden');
}
for (let i = 0; i < btnsOpenModal.length; i++){
btnsOpenModal[i].addEventListener('click', openModal)
}
btnCloseModal.addEventListener('click', closeModal)
overlay.addEventListener('click', closeModal)
document.addEventListener('keydown', function(event){
if(event.key === "Enter" && !modal.classList.contains('hidden')){
closeModal()
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment