daaimah123/DOM Manipulation & Event Fundamentals

## 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)
  }
})

## 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>

## 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;
}

## 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 ='';
});

## 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;
}

## 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>

## 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()
  }
})
	===== 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)
	}
	})
	<!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>
	@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;
	}
	'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 ='';
	});
	'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()
	}
	})