From afb0e394c7f4c1af27a47571f8c951e1d4554441 Mon Sep 17 00:00:00 2001 From: jack-hendry Date: Mon, 8 Aug 2022 17:41:51 -0400 Subject: [PATCH 1/9] Implemented functionality of Pig Game --- 07-Pig-Game/starter/script.js | 87 +++++++++++++++++++++++++++++++++++ 1 file changed, 87 insertions(+) diff --git a/07-Pig-Game/starter/script.js b/07-Pig-Game/starter/script.js index ad9a93a7c1..ef8d4383fc 100644 --- a/07-Pig-Game/starter/script.js +++ b/07-Pig-Game/starter/script.js @@ -1 +1,88 @@ 'use strict'; + +// Constant for setup +const btnRoll = document.querySelector('.btn--roll'); +const btnHold = document.querySelector('.btn--hold'); +const btnNew = document.querySelector('.btn--new'); +const player0 = document.querySelector('.player--0'); +const player1 = document.querySelector('.player--1'); +const diceRoll = () => Math.trunc(Math.random() * 6) + 1; + +let totalScore; +let currentScore0El = document.getElementById('current--0'); +let currentScore1El = document.getElementById('current--1'); +const player0Score = document.getElementById('score--0'); +const player1Score = document.getElementById('score--1'); + +let diceEl = document.querySelector('.dice'); +let playersTurn; +let currentScore; +let playing; + +// occurs on save/refresh +const init = function () { + currentScore0El.textContent = 0; + currentScore1El.textContent = 0; + player0Score.textContent = 0; + player1Score.textContent = 0; + diceEl.classList.add('hidden'); + currentScore = 0; + totalScore = [0, 0]; + player0.classList.add('player--active'); + player1.classList.remove('player--active'); + playersTurn = 0; + playing = 1; +}; + +init(); + +// to switch from one player to another +function switchPlayer() { + playersTurn = !playersTurn ? 1 : 0; + currentScore = 0; + document.getElementById(`current--${!playersTurn ? 1 : 0}`).textContent = + currentScore; + player0.classList.toggle('player--active'); + player1.classList.toggle('player--active'); +} + +btnRoll.addEventListener('click', function () { + if (playing) { + diceEl.classList.remove('hidden'); + let currentRoll = diceRoll(); + diceEl.src = `dice-${currentRoll}.png`; + + if (currentRoll !== 1) { + currentScore += currentRoll; + document.getElementById(`current--${playersTurn ? 1 : 0}`).textContent = + currentScore; + } else { + switchPlayer(); + } + } +}); + +btnHold.addEventListener('click', function () { + if (playing) { + totalScore[playersTurn ? 1 : 0] += currentScore; + document.getElementById(`score--${playersTurn ? 1 : 0}`).textContent = + totalScore[playersTurn ? 1 : 0]; + + if (totalScore[playersTurn ? 1 : 0] >= 100) { + document + .querySelector(`.player--${playersTurn ? 1 : 0}`) + .classList.add('player--winner'); + playing = 0; + diceEl.classList.add('hidden'); + } else { + switchPlayer(); + } + } +}); + +btnNew.addEventListener('click', function () { + document + .querySelector(`.player--${playersTurn ? 1 : 0}`) + .classList.remove('player--winner'); + init(); +}); From 1b3da7c6b506749a6de869d63c6d766a0915254f Mon Sep 17 00:00:00 2001 From: jack hendry Date: Wed, 19 Oct 2022 17:00:32 -0400 Subject: [PATCH 2/9] Finshed lesson 186 --- 13-Advanced-DOM-Bankist/starter/script.js | 53 +++++++++++++++++++++-- 1 file changed, 50 insertions(+), 3 deletions(-) diff --git a/13-Advanced-DOM-Bankist/starter/script.js b/13-Advanced-DOM-Bankist/starter/script.js index c51ec0afbe..7a4d3575c9 100644 --- a/13-Advanced-DOM-Bankist/starter/script.js +++ b/13-Advanced-DOM-Bankist/starter/script.js @@ -8,7 +8,8 @@ const overlay = document.querySelector('.overlay'); const btnCloseModal = document.querySelector('.btn--close-modal'); const btnsOpenModal = document.querySelectorAll('.btn--show-modal'); -const openModal = function () { +const openModal = function (e) { + e.preventDefault(); modal.classList.remove('hidden'); overlay.classList.remove('hidden'); }; @@ -18,8 +19,8 @@ const closeModal = function () { overlay.classList.add('hidden'); }; -for (let i = 0; i < btnsOpenModal.length; i++) - btnsOpenModal[i].addEventListener('click', openModal); +btnsOpenModal.forEach( (val) => val.addEventListener('click', openModal)) + btnCloseModal.addEventListener('click', closeModal); overlay.addEventListener('click', closeModal); @@ -29,3 +30,49 @@ document.addEventListener('keydown', function (e) { closeModal(); } }); + + + +///////////////////////////////////////////////////////// + +console.log(document.documentElement); +console.log(document.head); +console.log(document.body); + +const header = document.querySelector('.header'); + +const allSelections = document.querySelectorAll('.section'); +console.log(allSelections); + +document.getElementById('section--1'); + +const allButtons = document.getElementsByTagName('button'); + +console.log(allButtons); + + +document.getElementsByClassName('btn'); + +console.log(document.getElementsByClassName('btn')); + +//creating and Inserting elements +// insertAdjacentHTML + +const message = document.createElement('div'); + +message.classList.add('cookie-message'); +message.textContent = "We use cookied for imporved functionality and analytics."; + +message.innerHTML = +'We use cookied for imporved functionality and analytics. ' ; + +// header.prepend(message); +header.append(message); +// header.append(message.cloneNode(true)); + + + +// Delete elements +document.querySelector('.btn--close-cookies').addEventListener('click', function() { + message.remove(); +}) \ No newline at end of file From 4244fdb25539d02a0d9b06b00384127649e2e76e Mon Sep 17 00:00:00 2001 From: Jack Hendry Date: Mon, 24 Oct 2022 10:45:37 -0400 Subject: [PATCH 3/9] 187-190 --- 13-Advanced-DOM-Bankist/starter/index.html | 2 + 13-Advanced-DOM-Bankist/starter/script.js | 103 ++++++++++++++++++++- 2 files changed, 101 insertions(+), 4 deletions(-) diff --git a/13-Advanced-DOM-Bankist/starter/index.html b/13-Advanced-DOM-Bankist/starter/index.html index 6999b1ccef..a2121ee27b 100644 --- a/13-Advanced-DOM-Bankist/starter/index.html +++ b/13-Advanced-DOM-Bankist/starter/index.html @@ -21,6 +21,8 @@ alt="Bankist logo" class="nav__logo" id="logo" + + data-version-number = "3.0" />
  • diff --git a/13-Advanced-DOM-Bankist/starter/script.js b/13-Advanced-DOM-Bankist/starter/script.js index 7a4d3575c9..edd8e65e2f 100644 --- a/13-Advanced-DOM-Bankist/starter/script.js +++ b/13-Advanced-DOM-Bankist/starter/script.js @@ -64,7 +64,7 @@ message.classList.add('cookie-message'); message.textContent = "We use cookied for imporved functionality and analytics."; message.innerHTML = -'We use cookied for imporved functionality and analytics. ' ; +'We use cookied for imporved functionality and analytics. ' ; // header.prepend(message); header.append(message); @@ -73,6 +73,101 @@ header.append(message); // Delete elements -document.querySelector('.btn--close-cookies').addEventListener('click', function() { - message.remove(); -}) \ No newline at end of file +document.querySelector('.btn--close-cookie').addEventListener('click', function() { + // message.remove(); + message.parentElement.removeChild(message); +}); + + + +// Styles +message.style.backgroundColor = "#37383d"; +message.style.width = "120%"; + +// how to get styles + +console.log(getComputedStyle(message).height); + +message.style.height = Number.parseFloat(getComputedStyle(message).height,10) + 30 + 'px'; + +//working with custom Css variables +document.documentElement.style.setProperty('--color-primary', 'orangered'); + +//Atributes + +const logo = document.querySelector('.nav__logo'); + +// only works if attributes are standard, can not be custom +console.log(logo.alt); +console.log(logo.className); + + + +// setting atributies + +logo.alt = 'Beautiful Minimalist logo' +console.log(logo.alt); + +console.log(logo.src); // prints absolute path +console.log(logo.getAttribute('src')); // gets realtive path + +//Data Attributes + +console.log(logo.dataset.versionNumber); + + +//Classes +// logo.classList.add(); +// logo.classList.remove(); +// logo.classList.toggle(); +// logo.classList.contains(); + + +//Implementing Smooth Scroll + +const btnScrollTo = document.querySelector('.btn--scroll-to'); +const section1 = document.querySelector('#section--1'); + +console.log(btnScrollTo); +console.log(section1); + +btnScrollTo.addEventListener('click', function(e) { + const s1coords = section1.getBoundingClientRect(); + console.log(s1coords); + + console.log(e.target.getBoundingClientRect()); + + console.log('Current Scroll (x/y) ', window.pageXOffset, window.pageYOffset); + + console.log('height/width viewport', document.documentElement.clientHeight, + document.documentElement.clientWidth); + + + // old way + // window.scrollTo({ + // left: s1coords.left + window.pageYOffset, + // top: s1coords.top + window.pageYOffset, + // behavior: 'smooth', + // }); + + // new way for smooth scroll + section1.scrollIntoView({behavior: 'smooth'}); +}); + +const h1 = document.querySelector('h1'); + +const alertH1 = function(e) { + alert('addEventListener: Great! '); + // Method 1 of remove event listener + // h1.removeEventListener('mouseenter',alertH1); +} +h1.addEventListener('mouseenter', alertH1); + +setTimeout( () => HTMLQuoteElement.removeEventListener( + 'mouseenter', alertH1), 3000); + +// h1.onmouseenter = function(e) { +// alert('addEventListener: Great! ') +// }; + +// Event Propagation: Bubbling and Capturing \ No newline at end of file From 9b0d0d89bae7a2a3da2cb06982da4ede6d2a22fa Mon Sep 17 00:00:00 2001 From: Jack Hendry Date: Tue, 25 Oct 2022 11:23:26 -0400 Subject: [PATCH 4/9] 191-193; Event Propagation & Delegation & DOM traversing --- 13-Advanced-DOM-Bankist/starter/script.js | 178 ++++++++++++++++++---- 1 file changed, 145 insertions(+), 33 deletions(-) diff --git a/13-Advanced-DOM-Bankist/starter/script.js b/13-Advanced-DOM-Bankist/starter/script.js index edd8e65e2f..2d5594b0ea 100644 --- a/13-Advanced-DOM-Bankist/starter/script.js +++ b/13-Advanced-DOM-Bankist/starter/script.js @@ -7,6 +7,10 @@ const modal = document.querySelector('.modal'); const overlay = document.querySelector('.overlay'); const btnCloseModal = document.querySelector('.btn--close-modal'); const btnsOpenModal = document.querySelectorAll('.btn--show-modal'); +const btnScrollTo = document.querySelector('.btn--scroll-to'); +const section1 = document.querySelector('#section--1'); +///////////////////////////////////////////////////////// + const openModal = function (e) { e.preventDefault(); @@ -30,6 +34,69 @@ document.addEventListener('keydown', function (e) { closeModal(); } }); +btnScrollTo.addEventListener('click', function(e) { + const s1coords = section1.getBoundingClientRect(); + console.log(s1coords); + + console.log(e.target.getBoundingClientRect()); + + console.log('Current Scroll (x/y) ', window.pageXOffset, window.pageYOffset); + + console.log('height/width viewport', document.documentElement.clientHeight, + document.documentElement.clientWidth); + + + // old way + // window.scrollTo({ + // left: s1coords.left + window.pageYOffset, + // top: s1coords.top + window.pageYOffset, + // behavior: 'smooth', + // }); + + // new way for smooth scroll + section1.scrollIntoView({behavior: 'smooth'}); +}); + +///////////////////////////////////////////////////////// +///////////////////////////////////////////////////////// +//page Navigation + +// not optimal adding event listener for all elements with .nav__link class +// document.querySelectorAll('.nav__link').forEach( function(el) { +// el.addEventListener('click', function(e) { +// e.preventDefault(); + +// const id = this.getAttribute('href'); +// console.log(id); + +// document.querySelector(id).scrollIntoView({behavior: 'smooth'}); +// }) +// }); + + + +/* +1. Add event listner to common parent elemnt +2. Determine wht element originated the event + +*/ +document.querySelector('.nav__links').addEventListener('click', function(e) { + e.preventDefault(); + console.log(e.target); + + // matching strategy + if(e.target.classList.contains('nav__link')) { + const id = e.target.getAttribute('href'); + console.log(id); + + document.querySelector(id).scrollIntoView({behavior: 'smooth'}); + + } +}) +///////////////////////////////////////////////////////// +///////////////////////////////////////////////////////// + + @@ -81,7 +148,7 @@ document.querySelector('.btn--close-cookie').addEventListener('click', function( // Styles -message.style.backgroundColor = "#37383d"; +// message.style.backgroundColor = "#37383d"; message.style.width = "120%"; // how to get styles @@ -91,7 +158,7 @@ console.log(getComputedStyle(message).height); message.style.height = Number.parseFloat(getComputedStyle(message).height,10) + 30 + 'px'; //working with custom Css variables -document.documentElement.style.setProperty('--color-primary', 'orangered'); +// document.documentElement.style.setProperty('--color-primary', 'orangered'); //Atributes @@ -125,49 +192,94 @@ console.log(logo.dataset.versionNumber); //Implementing Smooth Scroll -const btnScrollTo = document.querySelector('.btn--scroll-to'); -const section1 = document.querySelector('#section--1'); + console.log(btnScrollTo); console.log(section1); -btnScrollTo.addEventListener('click', function(e) { - const s1coords = section1.getBoundingClientRect(); - console.log(s1coords); - console.log(e.target.getBoundingClientRect()); - console.log('Current Scroll (x/y) ', window.pageXOffset, window.pageYOffset); +// const h1 = document.querySelector('h1'); - console.log('height/width viewport', document.documentElement.clientHeight, - document.documentElement.clientWidth); +// const alertH1 = function(e) { +// alert('addEventListener: Great! '); +// // Method 1 of remove event listener +// // h1.removeEventListener('mouseenter',alertH1); +// } +// h1.addEventListener('mouseenter', alertH1); +// setTimeout( () => HTMLQuoteElement.removeEventListener( +// 'mouseenter', alertH1), 3000); - // old way - // window.scrollTo({ - // left: s1coords.left + window.pageYOffset, - // top: s1coords.top + window.pageYOffset, - // behavior: 'smooth', - // }); +// h1.onmouseenter = function(e) { +// alert('addEventListener: Great! ') +// }; - // new way for smooth scroll - section1.scrollIntoView({behavior: 'smooth'}); -}); +// Event Propagation: Bubbling and Capturing -const h1 = document.querySelector('h1'); +// Event Progpagation Practice -const alertH1 = function(e) { - alert('addEventListener: Great! '); - // Method 1 of remove event listener - // h1.removeEventListener('mouseenter',alertH1); -} -h1.addEventListener('mouseenter', alertH1); +const randomInt = (min,max) => Math.floor(Math.random() * (max-min+1) + min); -setTimeout( () => HTMLQuoteElement.removeEventListener( - 'mouseenter', alertH1), 3000); +const randomColor = () => `rgb(${randomInt(0,255)}, ${randomInt(0,255)}, ${randomInt(0,255)} )`; -// h1.onmouseenter = function(e) { -// alert('addEventListener: Great! ') -// }; -// Event Propagation: Bubbling and Capturing \ No newline at end of file +// document.querySelector('.nav__link').addEventListener('click', function(e) { +// this.style.backgroundColor = randomColor(); +// console.log('LINK', e.target,e.currentTarget); +// console.log(e.currentTarget === this); + +// // stop propagation +// // e.stopPropagation(); +// }) +// document.querySelector('.nav__links').addEventListener('click', function(e) { +// this.style.backgroundColor = randomColor(); +// console.log('Container', e.target,e.currentTarget); + +// }) +// document.querySelector('.nav').addEventListener('click', function(e) { +// this.style.backgroundColor = randomColor(); +// console.log('nav', e.target,e.currentTarget); +// },); + + +// DOM traversing + +const h1 = document.querySelector('h1'); + +// going downwards: child + +console.log(h1.querySelectorAll('.highlight')); + +console.log(h1.childNodes); +console.log(h1.children); + +h1.firstElementChild.style.color = 'white'; +h1.lastElementChild.style.color = 'blue'; + +//going upwards: parents + +console.log(h1.parentNode); +console.log(h1.parentElement); + +// selects closes parent based on class name +h1.closest('.header').style.background = 'var(--gradient-secondary)' + +// .closest is like the oppoiste of querySelector +h1.closest('h1').style.background = 'var(--gradient-primary)' + +// Going sideways: Siblings + +console.log(h1.previousElementSibling); +console.log(h1.nextElementSibling); + +console.log(h1.previousSibling); +console.log(h1.nextSibling); + +//get all siblings +console.log(h1.parentElement.children); +[...h1.parentElement.children].forEach(function(el) { + if(el !== h1) { + el.style.transform = 'scale(0.5)'; + } +}); \ No newline at end of file From a545cfc90837c4ca61fed84b9a7926e687b778f5 Mon Sep 17 00:00:00 2001 From: jack-hendry Date: Fri, 5 Apr 2024 08:09:12 -0400 Subject: [PATCH 5/9] 273: Exporting and Importing in ES6 Modules --- .../starter/index.html | 2 +- .../starter/script.js | 24 +++++++++++++++++ .../starter/shoppingCart.js | 26 +++++++++++++++++++ 3 files changed, 51 insertions(+), 1 deletion(-) create mode 100644 17-Modern-JS-Modules-Tooling/starter/shoppingCart.js diff --git a/17-Modern-JS-Modules-Tooling/starter/index.html b/17-Modern-JS-Modules-Tooling/starter/index.html index d2853cb5ee..e29578c248 100644 --- a/17-Modern-JS-Modules-Tooling/starter/index.html +++ b/17-Modern-JS-Modules-Tooling/starter/index.html @@ -4,7 +4,7 @@ - + Modern JavaScript Development: Modules and Tooling