diff --git a/exercises/16 - Debugging/debugging.html b/exercises/16 - Debugging/debugging.html
index 57f9812a5..f7dcff894 100644
--- a/exercises/16 - Debugging/debugging.html
+++ b/exercises/16 - Debugging/debugging.html
@@ -1,16 +1,14 @@
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
diff --git a/exercises/16 - Debugging/debugging.js b/exercises/16 - Debugging/debugging.js
new file mode 100644
index 000000000..f36269610
--- /dev/null
+++ b/exercises/16 - Debugging/debugging.js
@@ -0,0 +1,101 @@
+const people = [
+ { name: 'Wes', cool: true, country: 'Canada' },
+ { name: 'Scott', cool: true, country: 'Merica' },
+ { name: 'Snickers', cool: false, country: 'Dog Country' },
+];
+
+/*
+ * Breakpoints
+ *
+ * Pauses devtools, lets you step through and look at different pieces of data
+ */
+people.forEach((person, index) => {
+ // debugger;
+ console.log(person.name);
+});
+
+/*
+ * Console Methods
+ */
+
+// Group console logs in a collapsed accordion
+// people.forEach((person, index) => {
+// console.groupCollapsed(`${person.name}`);
+// console.log(`country is ${person.country}`);
+// console.log(`cool is ${person.cool}`);
+// console.log('DONE!');
+// console.groupEnd(`${person.name}`);
+// });
+
+/*
+ * Grabbing Elements
+ *
+ * In devtools > select an element > console tab
+ * $0 - get all of the markup for that element
+ * $0.value - return the value of an input you are inspecting
+ *
+ * $0 = the last thing that was clicked
+ * $1 = the 2nd last thing clicked...
+ * $('p') = find the first paragraph in the code
+ * $$('p') = find all paragraphs in the code
+ */
+
+// Scope
+
+/*
+ * Network Requests
+ *
+ * Tells you what files are used css, html, js
+ * Tells you how long requests take (Network > Timing)
+ */
+
+/*
+ * Break On Attribute
+ *
+ * Throw in breakpoints where you want to step through the code and slow it down
+ * Figure out what happens when - on click, on XHR or fetch for API calls
+ */
+
+function doctorize(name) {
+ // console.count(`running Doctorize for ${name}`);
+ return `Dr. ${name}`;
+}
+
+// Callstack, Stack Trace
+function greet(name) {
+ doesntExist(); // this will error, it doesn't exist
+ return `Hello ${name}`;
+}
+
+// Calls the function doctorize and greet
+function go() {
+ const name = doctorize(greet('Wes'));
+ console.log(name);
+}
+
+// Calls the function go
+function shoelace() {
+ console.log('Starting the app!');
+ go();
+}
+
+// shoelace();
+
+const button = document.querySelector('.bigger');
+button.addEventListener('click', function(e) {
+ const newFontSize =
+ parseFloat(getComputedStyle(e.currentTarget).fontSize) + 1;
+ e.currentTarget.style.fontSize = `${newFontSize}px`;
+});
+
+// A Dad joke fetch
+async function fetchDadJoke() {
+ const res = await fetch('https://icanhazdadjoke.com/', {
+ headers: {
+ Accept: 'text/plain',
+ },
+ });
+ const joke = await res.text();
+ console.log(joke);
+ return joke;
+}
diff --git a/exercises/20 - The DOM/DOM-Cardio.html b/exercises/20 - The DOM/DOM-Cardio.html
index 9849fb5b1..d7f08f9ad 100644
--- a/exercises/20 - The DOM/DOM-Cardio.html
+++ b/exercises/20 - The DOM/DOM-Cardio.html
@@ -1,33 +1,44 @@
+
+
+
+ Dom Cardio
+
+
-
-
-
- Dom Cardio
-
-
+
+
-
-
+
-
+ .warning {
+ color: tomato;
+ }
+ button {
+ transition: all 0.25s;
+ }
+
+ button:hover {
+ cursor: pointer;
+ opacity: 0.5;
+ }
+
+
diff --git a/exercises/20 - The DOM/DOM-Cardio.js b/exercises/20 - The DOM/DOM-Cardio.js
index 3ca90e523..1b279e0da 100644
--- a/exercises/20 - The DOM/DOM-Cardio.js
+++ b/exercises/20 - The DOM/DOM-Cardio.js
@@ -1,27 +1,71 @@
// Make a div
+const div = document.createElement('div');
// add a class of wrapper to it
+div.classList.add('wrapper');
// put it into the body
+document.body.appendChild(div);
// make an unordered list
+const list = document.createElement('ul');
+list.classList.add('list');
// add three list items with the words "one, two three" in them
+const item1 = document.createElement('li');
+list.insertAdjacentElement('beforeEnd', item1);
+item1.textContent = 'one';
+
+const item2 = document.createElement('li');
+list.insertAdjacentElement('beforeEnd', item2);
+item2.textContent = 'two';
+
+const item3 = document.createElement('li');
+list.insertAdjacentElement('beforeEnd', item3);
+item3.textContent = 'three';
+
// put that list into the above wrapper
+div.insertAdjacentElement('beforeEnd', list);
// create an image
+const image = document.createElement('img');
// set the source to an image
+image.src = 'http://picsum.photos/500';
+
// set the width to 250
+image.width = 250;
+
// add a class of cute
+image.classList.add('cute');
+
// add an alt of Cute Puppy
+image.alt = 'Stunning photo';
+
// Append that image to the wrapper
+div.insertAdjacentElement('beforeEnd', image);
// with HTML string, make a div, with two paragraphs inside of it
+const textWrapper = document.createElement('div');
+
+const p1 = document.createElement('p');
+textWrapper.insertAdjacentElement('beforeEnd', p1);
+p1.textContent =
+ 'Spring 1936. In the thick jungle of the South American continent, a renowned archeologist and expert on the occult is studying fragments of a map, when one of his exploration party pulls a gun. The archeologist pulls out a bullwhip and with such disarms the turncoat, sending him running - thus does Dr. Henry "Indiana" Jones stay alive.';
+
+const p2 = document.createElement('p');
+textWrapper.insertAdjacentElement('beforeEnd', p2);
+p2.textContent =
+ "He and a guide enter a dank and oppressively vast cave that contains several traps created by the ancient race which hid inside a famous handheld statue; Indy barely escapes such traps but is cornered by native tribesmen served by Belloq, an old enemy who arrogantly makes off with the statue, while Indy must flee for his life and escape on a friend's seaplane. Back in the US two agents from US Army intelligence tell him of Nazi German activities in archeology, including a gigantic excavation site in Egypt - a site that an intercepted cable indicates to Indy is the location of the Ark of the Covenant, the powerful chest bearing the Ten Commandments, that the Nazis can use to obliterate any enemy. Indy must recruit a former girlfriend (the daughter of his old professor) and an old chum in Cairo to infiltrate the Nazi site and make off with the Ark, but along the way Indy gets involved in a series of fights, chases, and traps, before the Nazis learn the full power of the Ark.";
+
// put this div before the unordered list from above
+list.insertAdjacentElement('beforeBegin', textWrapper);
// add a class to the second paragraph called warning
+textWrapper.lastElementChild.classList.add('warning');
+
// remove the first paragraph
+textWrapper.firstElementChild.remove();
// create a function called generatePlayerCard that takes in three arguments: name, age, and height
@@ -30,15 +74,45 @@
//
NAME — AGE
//
They are HEIGHT and AGE years old. In Dog years this person would be AGEINDOGYEARS. That would be a tall dog!
Their height is ${height} and ${age} years old. In Dog years this person would be ${age *
+ 7}. That would be a tall dog!
+
+
+ `;
+ return cardsHTML;
+}
+
+// TODO convert cm to in new function
// make a new div with a class of cards
+const cards = document.createElement('div');
+cards.classList.add('cards');
-// Have that function make 4 cards
+let cardsHTML = generatePlayerCard('Josie', 6, 36);
+cardsHTML += generatePlayerCard('Eddie', 10, 48);
+cardsHTML += generatePlayerCard('Gracie', 9, 52);
+cardsHTML += generatePlayerCard('Betti', 8, 75);
// append those cards to the div
+cards.innerHTML = cardsHTML;
+
// put the div into the DOM just before the wrapper element
+div.insertAdjacentElement('beforebegin', cards);
+
// Bonus, put a delete Button on each card so when you click it, the whole card is removed
// select all the buttons!
+const buttons = document.querySelectorAll('.delete');
+
// make out delete function
+function deleteCard() {
+ const selectedButton = event.currentTarget;
+ selectedButton.closest('.playerCard').remove();
+ console.log(event.currentTarget);
+}
// loop over them and attach a listener
+buttons.forEach(button => button.addEventListener('click', deleteCard));
diff --git a/exercises/20 - The DOM/creating-FINISHED.js b/exercises/20 - The DOM/creating-FINISHED.js
index 50a072da8..1d97481e5 100644
--- a/exercises/20 - The DOM/creating-FINISHED.js
+++ b/exercises/20 - The DOM/creating-FINISHED.js
@@ -1,56 +1,60 @@
-console.log('it works!');
-
const myParagraph = document.createElement('p');
-myParagraph.textContent = 'I am a P';
-myParagraph.classList.add('special');
-console.log(myParagraph);
+myParagraph.textContent = 'I am a descriptive paragraph';
+myParagraph.classList.add('fancy');
+// console.log(myParagraph);
const myImage = document.createElement('img');
-myImage.src = 'https://picsum.photos/500';
-myImage.alt = 'Nice photo';
+myImage.src = 'http://picsum.photos/500';
+myImage.alt = 'Stunning photo';
const myDiv = document.createElement('div');
myDiv.classList.add('wrapper');
-console.log(myDiv);
+// console.log(myDiv);
+// appendChild first
myDiv.appendChild(myParagraph);
myDiv.appendChild(myImage);
+// Add to the page
document.body.appendChild(myDiv);
-// oh shoot! we need to add somethint to the top. like a heading!
+// Note: Use appendChild over append due to poor support
+
+// Add a heading above myDiv with insertAdjacentElement
const heading = document.createElement('h2');
-heading.textContent = 'Cool Things';
+heading.textContent = 'Award Winning Photographs';
-myDiv.insertAdjacentElement('beforebegin', heading);
+myDiv.insertAdjacentElement('afterbegin', heading);
-//
-//
One
-//
two
-//
three
-//
four
-//
five
-//
+// Create a list with 5 items
+const myList = document.createElement('ul');
+myList.classList.add('grocery-list');
-const list = document.createElement('ul');
-const li = document.createElement('li');
-li.textContent = 'three';
-list.appendChild(li);
+// Add the third item to the ul
+const list3 = document.createElement('li');
+list3.textContent = 'Three';
+myList.appendChild(list3);
-document.body.insertAdjacentElement('afterbegin', list);
+// Add the ul to the page
+document.body.insertAdjacentElement('afterbegin', myList);
+// Add the rest of the list items 1, 2, 4, 5
const li5 = document.createElement('li');
li5.textContent = 'Five';
-list.append(li5);
+myList.append(li5);
const li1 = li5.cloneNode(true);
-li1.textContent = 'one';
-list.insertAdjacentElement('afterbegin', li1);
+li1.textContent = 'One';
+myList.insertAdjacentElement('afterbegin', li1);
const li4 = document.createElement('li');
-li4.textContent = 'four';
+li4.textContent = 'Four';
li5.insertAdjacentElement('beforebegin', li4);
const li2 = document.createElement('li');
-li2.textContent = 'two';
+li2.textContent = 'Two';
li1.insertAdjacentElement('afterend', li2);
+
+myList.insertAdjacentElement('afterbegin', li1);
+li2.insertAdjacentElement('afterbegin', li1);
+console.log(myList.outerHTML);
diff --git a/exercises/20 - The DOM/creating-with-strings.js b/exercises/20 - The DOM/creating-with-strings.js
new file mode 100644
index 000000000..83b6cddb7
--- /dev/null
+++ b/exercises/20 - The DOM/creating-with-strings.js
@@ -0,0 +1,35 @@
+// console.log("It's Alive!");
+
+// Add basic HTML to the page
+item.innerHTML = `
+
+`;
+
+// turn a string into a DOM element we can access easily
+const myFragment = document.createRange().createContextualFragment(myHTML);
+
+console.log(myFragment.querySelector('img'));
+
+document.body.appendChild(myFragment);
+
+/*
+ * XSS - cross site scripting
+ * There are security issues when you collect data
+ * Scrub HTML for security vulnerabilities - later module
+ */
diff --git a/exercises/20 - The DOM/index.html b/exercises/20 - The DOM/index.html
index 897ceb790..5b028c4e3 100644
--- a/exercises/20 - The DOM/index.html
+++ b/exercises/20 - The DOM/index.html
@@ -1,57 +1,71 @@
+
+
+
+ The DOM
+
+
-
-
-
- The DOM
-
-
-
-
-
-
I am Wes, I love to bbq and Make websites!
-
-
-
-
-
-
-
-
-
Hi I'm a item
-
-
-
-
- I am a heading
- I am hidden!
-
-
Hi I'm a item
-
-
-
Im an article
-
This is how many pizzas I ate! 🍕
-
-
-
-
-
-
-
+
+
I am Erik, I love to read and Make websites!
+
+
First item
+
The sequel
+
3
+
IV
+
Fifth and last item
+
+
+
+
+
+
+
+
+
Hi I'm a item
+
+
+
+
+ I am a heading
+ I am hidden!
+
+
Hi I'm a item
+
+
+
Im an article
+
This is how many pizzas I ate! 🍕
+
+
+
+
+
+
+
+
diff --git a/exercises/20 - The DOM/the-dom.js b/exercises/20 - The DOM/the-dom.js
index e69de29bb..7d284fd57 100644
--- a/exercises/20 - The DOM/the-dom.js
+++ b/exercises/20 - The DOM/the-dom.js
@@ -0,0 +1,76 @@
+/*
+ * The DOM
+ *
+ * window - has browser information like viewport width
+ *
+ * document - has info about everything between html tags
+ *
+ * navigator - has info about the device: battery level, gps coordinates
+ *
+ * Use querySelector for classes and elements - it replaces getElementsByClassName...
+ * Use getElementById for #
+ */
+
+const p = document.querySelector('p');
+const imgs = document.querySelectorAll('.item img');
+const item2 = document.querySelector('.item2');
+const item2Image = item2.querySelector('img'); // look inside of .item2
+const heading = document.querySelector('h2');
+
+console.log(heading.textContent);
+console.log(heading.innerText);
+
+// set the textContent property of heading
+// heading.textContent = 'Josie is adorable';
+// console.log(heading.textContent);
+console.log(heading.innerHTML);
+console.log(heading.outerHTML);
+
+// Append pizza emoji
+const pizzaList = document.querySelector('.pizza');
+// pizzaList.textContent = `${pizzaList.textContent} 🍕`;
+
+// This is faster than textContent
+pizzaList.insertAdjacentText('beforeend', '🍕');
+
+const pic = document.querySelector('.nice');
+pic.classList.add('open');
+pic.classList.remove('cool');
+pic.classList.add('round');
+console.log(pic.classList);
+
+// Add the class .round on click
+// classList gives you some nice utilities over addClass
+function toggleRound() {
+ pic.classList.toggle('round');
+}
+
+// Listen for a click then fire the function
+pic.addEventListener('click', toggleRound);
+
+/*
+ * GET and SET attributes (don't do this)
+ */
+// SET image attributes
+// Add alt text to an image
+pic.setAttribute('alt', 'Adorable puppy');
+pic.setAttribute('width', 500);
+
+// GET pic attribute values
+console.log(pic.getAttribute('alt'));
+
+// Get the width of the image after it loads
+// get works with naturalWidth, you can't set it though
+pic.addEventListener('load', function() {
+ console.log(pic.naturalWidth); // width of actual pixels - run after image downloads
+});
+
+/*
+ * GET and SET data-attributes (reccomended)
+ */
+const custom = document.querySelector('.custom');
+console.log(custom.dataset);
+
+custom.addEventListener('click', function() {
+ alert(`Welcome ${custom.dataset.name} ${custom.dataset.last}`);
+});
diff --git a/exercises/20 - The DOM/traversing.js b/exercises/20 - The DOM/traversing.js
index e69de29bb..be4033d5d 100644
--- a/exercises/20 - The DOM/traversing.js
+++ b/exercises/20 - The DOM/traversing.js
@@ -0,0 +1,36 @@
+// console.log('it works');
+const list = document.querySelector('.li3');
+console.log(list);
+
+/*
+ * Nodes vs. Elements
+ *
+ * Node - any object in the DOM: document, document.body, ,
,
tags...
+ *
+ * Element - a specific type of node that can have a class or id
+ */
+
+// Get all of the child elements
+console.log(`children are ${list.children}`);
+
+// Looks at the fitst and last children
+console.log(`firstElementChild is ${list.firstElementChild}`);
+console.log(`lastElementChild is ${list.lastElementChild}`);
+
+// Looks at the element before (previous) and after (next) in the markup
+console.log(`previousElementSibling is ${list.previousElementSibling}`);
+console.log(`nextElementSibling is ${list.nextElementSibling}`);
+
+// Looks at the parent
+// parentElement can be chained to keep going up the DOM
+// ex. - variable.parentElement.parentElement.parentElement
+console.log(`parentElement is ${list.parentElement}`);
+
+/*
+ * REMOVING
+ * Removed elements can still be added again after removal, and can show up in console.log
+ */
+const welcomeMessage = document.createElement('p');
+welcomeMessage.textContent = 'Welcome and hello.';
+document.body.appendChild(welcomeMessage);
+welcomeMessage.remove();
diff --git a/exercises/29 - Events/events.html b/exercises/29 - Events/events.html
index a7b3ee2b1..f68377918 100644
--- a/exercises/29 - Events/events.html
+++ b/exercises/29 - Events/events.html
@@ -1,32 +1,30 @@
+
+
+
+ JavaScript Events
+
+
-
-
-
- JavaScript Events
-
-
+
+
+
-
-
-
+
Buy Buttons!
+
+
+
+
+
+
+
+
+
+
-
Buy Buttons!
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
diff --git a/exercises/29 - Events/events.js b/exercises/29 - Events/events.js
index 768e5e7ce..bf725122a 100644
--- a/exercises/29 - Events/events.js
+++ b/exercises/29 - Events/events.js
@@ -5,49 +5,50 @@ function handleClick() {
console.log('🐛 IT GOT CLICKED!!!');
}
-const hooray = () => console.log('HOORAY!');
-
-butts.addEventListener('click', function() {
- console.log('Im an anon!');
-});
-coolButton.addEventListener('click', hooray);
-
+// Click events
+butts.addEventListener('click', handleClick);
+coolButton.addEventListener('click', handleClick);
+
+/*
+ * Anonymous functions cannot be removed
+ * The function must have a name to reference
+ * The code below unbinds an event from a function
+ */
butts.removeEventListener('click', handleClick);
-// Listen on multiple items
+// Listen to events on multiple items
const buyButtons = document.querySelectorAll('button.buy');
+// function buyItem() {
+// console.log('Buying item');
+// }
+
+// Use forEach to loop over all buyButton instances
+// The parameter "buyButton" can be anything, it's a placeholder
+// function handleBuyButtonClick(buyButton) {
+// console.log('Binding the buy button');
+// buyButton.addEventListener('click', buyItem);
+// }
+
+/*
+ * target - what was clicked
+ * dataset - data attribute
+ * event.target - the thing that actually was clicked, could be HTML tag inside of a button like span or strong
+ * event.currentTarget - the thing that fires the event listener
+ */
function handleBuyButtonClick(event) {
- console.log('You clicked a button!');
- const button = event.target;
- // console.log(button.textContent);
+ // console.log('You are buying it!');
// console.log(parseFloat(event.target.dataset.price));
- console.log(event.target);
console.log(event.currentTarget);
- console.log(event.target === event.currentTarget);
- // Stop this event from bubbling up
- // event.stopPropagation();
+ // stop this event from bubbling up
+ event.stopPropogation();
}
+// Use forEach to loop over all buyButton instances
buyButtons.forEach(function(buyButton) {
buyButton.addEventListener('click', handleBuyButtonClick);
});
-window.addEventListener(
- 'click',
- function(event) {
- console.log('YOU CLICKED THE WINDOW');
- console.log(event.target);
- console.log(event.type);
- // event.stopPropagation();
- console.log(event.bubbles);
- },
- { capture: true }
-);
-
-const photoEl = document.querySelector('.photo');
-
-photoEl.addEventListener('mouseenter', e => {
- console.log(e.currentTarget);
- console.log(this);
+window.addEventListener('click', function() {
+ console.log('You clicked somewhere in the window');
});
diff --git a/exercises/29 - Events/forms.html b/exercises/29 - Events/forms.html
index 95ca5ede3..19ce87ed9 100644
--- a/exercises/29 - Events/forms.html
+++ b/exercises/29 - Events/forms.html
@@ -1,30 +1,44 @@
+
+
+
+ HTML Forms
+
+
-
-
-
- HTML Forms
-
-
+
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus, in? Labore ipsa earum aliquid esse amet! Quasi
- necessitatibus soluta optio modi consectetur velit magni dolorem at blanditiis aut, et iste eum minima quo quis enim
- tempore quod, alias sapiente magnam totam? Dolorum vitae reiciendis, quisquam repudiandae voluptatibus sapiente illo
- molestiae doloremque magnam, repellendus beatae veritatis, sequi laborum! Perspiciatis numquam quisquam officia
- ratione harum totam magnam velit unde architecto, consectetur necessitatibus amet voluptatem placeat? Commodi
- aperiam, magnam architecto quidem blanditiis dolorem consequatur autem numquam repellat, omnis, aspernatur unde
- minus officiis doloribus rerum dicta ex. Enim repudiandae, labore non et, aperiam totam veritatis nostrum a quos
- incidunt animi voluptatum! Provident eaque natus eligendi nihil asperiores unde aliquid dignissimos tenetur maxime
- quisquam veniam officiis, ducimus cumque impedit voluptas. Velit iste ratione corrupti blanditiis eos vitae soluta
- perspiciatis iusto eaque explicabo amet id impedit atque numquam reprehenderit veritatis totam dolor dolores maiores
- libero, nemo magni, et esse excepturi. Cupiditate nisi quae amet voluptas, esse sequi corporis! Numquam, nemo quae
- accusamus unde enim laborum aspernatur at magni quo ad recusandae placeat nostrum tenetur eos, dolor dolorem
- consequatur sequi quasi facere possimus autem nam repudiandae porro totam. Deleniti perferendis officiis vel
- inventore ad laborum, repellat et nostrum laboriosam consequuntur ab recusandae magni iure hic, quo quia corporis id
- laudantium, veniam blanditiis tempora minima? Laboriosam voluptas rerum, tempore officia ab modi natus vero enim
- quae culpa, doloremque nostrum consequuntur quod pariatur, beatae facilis eaque cupiditate perspiciatis aut laborum
- accusantium voluptate omnis? Mollitia et illum odit, earum voluptatibus quisquam totam nisi enim beatae cupiditate
- quia harum dolores esse sapiente? Facere eligendi omnis magni voluptate quae, doloribus accusantium dolorem?
- Officiis perferendis, necessitatibus voluptatum illum aut pariatur eum nobis ea consequuntur repudiandae nam vitae
- numquam? Mollitia nulla suscipit totam asperiores labore eius impedit in amet tenetur accusamus accusantium,
- obcaecati assumenda quibusdam temporibus odit molestias voluptatum veritatis. Nobis similique fugit error illum
- dolorem laudantium, dolores sint ad ab nostrum, hic doloribus in tempore quaerat dolore! Perspiciatis suscipit, nisi
- doloribus incidunt obcaecati, a veritatis assumenda ipsum tempore temporibus maiores quas fugiat distinctio corrupti
- quasi accusamus. In nesciunt, repellat magnam illo quos, quo dicta dolorem consequuntur perspiciatis maiores dolorum
- porro nobis excepturi temporibus. Vitae, minus placeat ex molestias consectetur eligendi atque. Veritatis doloribus
- delectus, corporis, necessitatibus ab nulla repellendus illo dolor nemo incidunt dolorum aut rerum vero quis totam
- odit, libero nesciunt reprehenderit hic. Recusandae animi unde blanditiis commodi est voluptates pariatur, debitis
- quisquam aspernatur inventore vitae dolorum ad asperiores odio molestiae, tempora esse facilis, veniam architecto
- exercitationem! Quas, suscipit optio asperiores, aliquam ut in unde porro atque est, perferendis labore? Hic
- nesciunt, recusandae nemo fugiat sit, voluptas explicabo necessitatibus animi aut tempora fuga distinctio adipisci
- laudantium? Quia exercitationem iure laborum rerum numquam voluptates quam, aliquam vitae? Saepe, adipisci iste!
- Illo natus, nihil nisi architecto saepe reprehenderit quo repudiandae quos odit quis! Quidem nesciunt incidunt nihil
- totam! Impedit fuga eum quasi vel totam dolorem praesentium iure eveniet neque aliquam veritatis voluptas corporis
- cupiditate quam pariatur ea labore repellendus, ipsam in facere eligendi nihil!
-
-
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Impedit porro maxime culpa nostrum reiciendis quasi rem
- sint ipsa rerum officiis sequi repellat voluptate iure, voluptatem corporis laborum fuga ratione voluptatum corrupti
- ut! Quibusdam laboriosam soluta quaerat totam dolor numquam iste sunt, necessitatibus rerum animi sit maiores
- consequuntur deleniti quas officia recusandae repellendus voluptas nesciunt in amet facilis molestias tempore!
- Deserunt, ipsum facere quis minima quidem voluptate doloremque excepturi labore quam laboriosam blanditiis rem
- itaque! Quod sint dolores rem ea, voluptatibus nulla sequi omnis cumque est voluptatem aut maxime aliquam, ratione
- at corrupti libero ipsum? Deleniti tempora sapiente maxime? Ex excepturi repudiandae libero animi illo corrupti,
- tenetur beatae enim tempore repellat delectus cumque necessitatibus eaque. Exercitationem, doloribus id non modi
- saepe illo! Enim dicta in eligendi! Veritatis, ex exercitationem saepe hic recusandae placeat eum odit numquam,
- eaque ab totam unde ipsa sequi! Velit libero autem dolore quaerat ut nam exercitationem pariatur iusto voluptatem
- magni voluptas architecto, cumque quisquam deserunt quidem accusamus assumenda dolores neque aspernatur nostrum!
- Minus corrupti hic asperiores! At fuga, eveniet animi labore praesentium beatae eum libero possimus velit aspernatur
- voluptatem dolore expedita corporis ratione inventore! Possimus quisquam amet fugit, vero delectus modi libero illum
- odio illo deleniti iste?
-
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis similique fuga odio, obcaecati ex esse
- perferendis voluptatum doloribus dolorem facilis numquam incidunt illum quasi nemo, inventore ut voluptate eligendi
- saepe! Id omnis ea ducimus exercitationem qui blanditiis optio tenetur in soluta molestias ullam sed beatae
- aspernatur nobis libero atque, dolore nihil nesciunt, fugiat reprehenderit repellendus odit aperiam corrupti rem!
- Aliquam nisi labore maiores et unde. Quasi expedita molestiae ex quod culpa. Voluptates omnis minus adipisci
- voluptatibus odit nobis earum harum architecto maiores veniam, libero rem et quos dolores illum hic. Nobis
- blanditiis odio dolores reprehenderit ipsum. Deleniti aliquam maxime culpa?
-
-
+
+
Hey Sailor!
+
+ Spring 1936. In the thick jungle of the South American continent, a renowned
+ archeologist and expert on the occult is studying fragments of a map, when one of his
+ exploration party pulls a gun. The archeologist pulls out a bullwhip and with such
+ disarms the turncoat, sending him running - thus does Dr. Henry "Indiana" Jones stay
+ alive. He and a guide enter a dank and oppressively vast cave that contains several
+ traps created by the ancient race which hid inside a famous handheld statue; Indy barely
+ escapes such traps but is cornered by native tribesmen served by Belloq, an old enemy
+ who arrogantly makes off with the statue, while Indy must flee for his life and escape
+ on a friend's seaplane. Back in the US two agents from US Army intelligence tell him of
+ Nazi German activities in archeology, including a gigantic excavation site in Egypt - a
+ site that an intercepted cable indicates to Indy is the location of the Ark of the
+ Covenant, the powerful chest bearing the Ten Commandments, that the Nazis can use to
+ obliterate any enemy. Indy must recruit a former girlfriend (the daughter of his old
+ professor) and an old chum in Cairo to infiltrate the Nazi site and make off with the
+ Ark, but along the way Indy gets involved in a series of fights, chases, and traps,
+ before the Nazis learn the full power of the Ark.
+
+
+ Indy must recruit a former girlfriend (the daughter of his old professor) and an old
+ chum in Cairo to infiltrate the Nazi site and make off with the Ark, but along the way
+ Indy gets involved in a series of fights, chases, and traps, before the Nazis learn the
+ full power of the Ark.
+
+
+ Spring 1936. In the thick jungle of the South American continent, a renowned
+ archeologist and expert on the occult is studying fragments of a map, when one of his
+ exploration party pulls a gun. The archeologist pulls out a bullwhip and with such
+ disarms the turncoat, sending him running - thus does Dr. Henry "Indiana" Jones stay
+ alive. He and a guide enter a dank and oppressively vast cave that contains several
+ traps created by the ancient race which hid inside a famous handheld statue; Indy barely
+ escapes such traps but is cornered by native tribesmen served by Belloq, an old enemy
+ who arrogantly makes off with the statue, while Indy must flee for his life and escape
+ on a friend's seaplane. Back in the US two agents from US Army intelligence tell him of
+ Nazi German activities in archeology, including a gigantic excavation site in Egypt - a
+ site that an intercepted cable indicates to Indy is the location of the Ark of the
+ Covenant, the powerful chest bearing the Ten Commandments, that the Nazis can use to
+ obliterate any enemy. Indy must recruit a former girlfriend (the daughter of his old
+ professor) and an old chum in Cairo to infiltrate the Nazi site and make off with the
+ Ark, but along the way Indy gets involved in a series of fights, chases, and traps,
+ before the Nazis learn the full power of the Ark. Back in the US two agents from US Army
+ intelligence tell him of Nazi German activities in archeology, including a gigantic
+ excavation site in Egypt - a site that an intercepted cable indicates to Indy is the
+ location of the Ark of the Covenant, the powerful chest bearing the Ten Commandments,
+ that the Nazis can use to obliterate any enemy. Indy must recruit a former girlfriend
+ (the daughter of his old professor) and an old chum in Cairo to infiltrate the Nazi site
+ and make off with the Ark, but along the way Indy gets involved in a series of fights,
+ chases, and traps, before the Nazis learn the full power of the Ark.
+
+
+ Spring 1936. In the thick jungle of the South American continent, a renowned
+ archeologist and expert on the occult is studying fragments of a map, when one of his
+ exploration party pulls a gun. The archeologist pulls out a bullwhip and with such
+ disarms the turncoat, sending him running - thus does Dr. Henry "Indiana" Jones stay
+ alive. He and a guide enter a dank and oppressively vast cave that contains several
+ traps created by the ancient race which hid inside a famous handheld statue; Indy barely
+ escapes such traps but is cornered by native tribesmen served by Belloq, an old enemy
+ who arrogantly makes off with the statue, while Indy must flee for his life and escape
+ on a friend's seaplane. Back in the US two agents from US Army intelligence tell him of
+ Nazi German activities in archeology, including a gigantic excavation site in Egypt - a
+ site that an intercepted cable indicates to Indy is the location of the Ark of the
+ Covenant, the powerful chest bearing the Ten Commandments, that the Nazis can use to
+ obliterate any enemy. Indy must recruit a former girlfriend (the daughter of his old
+ professor) and an old chum in Cairo to infiltrate the Nazi site and make off with the
+ Ark, but along the way Indy gets involved in a series of fights, chases, and traps,
+ before the Nazis learn the full power of the Ark.
+
+
+ Indy must recruit a former girlfriend (the daughter of his old professor) and an old
+ chum in Cairo to infiltrate the Nazi site and make off with the Ark, but along the way
+ Indy gets involved in a series of fights, chases, and traps, before the Nazis learn the
+ full power of the Ark.
+
+
+ Spring 1936. In the thick jungle of the South American continent, a renowned
+ archeologist and expert on the occult is studying fragments of a map, when one of his
+ exploration party pulls a gun. The archeologist pulls out a bullwhip and with such
+ disarms the turncoat, sending him running - thus does Dr. Henry "Indiana" Jones stay
+ alive. He and a guide enter a dank and oppressively vast cave that contains several
+ traps created by the ancient race which hid inside a famous handheld statue; Indy barely
+ escapes such traps but is cornered by native tribesmen served by Belloq, an old enemy
+ who arrogantly makes off with the statue, while Indy must flee for his life and escape
+ on a friend's seaplane. Back in the US two agents from US Army intelligence tell him of
+ Nazi German activities in archeology, including a gigantic excavation site in Egypt - a
+ site that an intercepted cable indicates to Indy is the location of the Ark of the
+ Covenant, the powerful chest bearing the Ten Commandments, that the Nazis can use to
+ obliterate any enemy. Indy must recruit a former girlfriend (the daughter of his old
+ professor) and an old chum in Cairo to infiltrate the Nazi site and make off with the
+ Ark, but along the way Indy gets involved in a series of fights, chases, and traps,
+ before the Nazis learn the full power of the Ark. Back in the US two agents from US Army
+ intelligence tell him of Nazi German activities in archeology, including a gigantic
+ excavation site in Egypt - a site that an intercepted cable indicates to Indy is the
+ location of the Ark of the Covenant, the powerful chest bearing the Ten Commandments,
+ that the Nazis can use to obliterate any enemy. Indy must recruit a former girlfriend
+ (the daughter of his old professor) and an old chum in Cairo to infiltrate the Nazi site
+ and make off with the Ark, but along the way Indy gets involved in a series of fights,
+ chases, and traps, before the Nazis learn the full power of the Ark.
+
+
+
diff --git a/playground/hoisting.js b/playground/hoisting.js
index 2f058bf23..541d11adc 100644
--- a/playground/hoisting.js
+++ b/playground/hoisting.js
@@ -1,15 +1,53 @@
-/* esline-disable */
+/*
+ * HOISTING
+ *
+ * Allows you to access functions and variables before they have been created
+ * The example below works because of hoisting
+ * When JavaScript compiles functions and variables are hoisted to the top of the script
+ *
+ * Variable declarations are hoisted to the top, but not the values - this is confusing
+ */
+
+/* eslint-disable */
+
+// Hoisting Functions
+sayHello();
+
+function sayHello() {
+ console.log('Ahoy');
+ console.log(add(10, 42));
+}
+
+function add(a, b) {
+ return a + b;
+}
+
+/*
+ * Hoisting Variables
+ *
+ * The example below will be undefined, the variable age will be hoisted to the top - NOT the value
+ */
let age;
-console.log(age);
-age = 10;
+console.log(`Person age is ${age}`);
+
+/*
+ * Organization! A good use for hoisting
+ *
+ */
-/* What does this file do? */
-sayHi();
+ // At the top of the file list the functions that are used
+ checkLogin();
+ checkPermissions();
+ checkModules();
+
+ function checkLogin() {
+ console.log('Checking log in');
+}
-/* How does this file do it? */
-function sayHi() {
- console.log('hey!');
- console.log(add(10, 2));
+function checkPermissions() {
+ console.log('Checking permissions');
}
-const add = (a, b) => a + b;
+function checkModules() {
+ console.log('Check what modiles are used');
+}
\ No newline at end of file
diff --git a/playground/node-example.js b/playground/node-example.js
index 525307168..ac6c416be 100644
--- a/playground/node-example.js
+++ b/playground/node-example.js
@@ -1 +1 @@
-console.log('IM from node');
+console.log('I am a console log from Node');
\ No newline at end of file
diff --git a/playground/running-js.html b/playground/running-js.html
index 99ffb7d72..fddcb2943 100644
--- a/playground/running-js.html
+++ b/playground/running-js.html
@@ -1,15 +1,19 @@
-
-
-
- Document
+
+
+ Running JS
+
-
-
Hey
+
Spring 1936. In the thick jungle of the South American continent, a renowned archeologist and expert on the occult is studying fragments of a map, when one of his exploration party pulls a gun. The archeologist pulls out a bullwhip and with such disarms the turncoat, sending him running - thus does Dr. Henry "Indiana" Jones stay alive. He and a guide enter a dank and oppressively vast cave that contains several traps created by the ancient race which hid inside a famous handheld statue; Indy barely escapes such traps but is cornered by native tribesmen served by Belloq, an old enemy who arrogantly makes off with the statue, while Indy must flee for his life and escape on a friend's seaplane.
+
Back in the US two agents from US Army intelligence tell him of Nazi German activities in archeology, including a gigantic excavation site in Egypt - a site that an intercepted cable indicates to Indy is the location of the Ark of the Covenant, the powerful chest bearing the Ten Commandments, that the Nazis can use to obliterate any enemy.
+
+
-
-
+
\ No newline at end of file
diff --git a/playground/scope.js b/playground/scope.js
index c59d64532..a2bfb2ede 100644
--- a/playground/scope.js
+++ b/playground/scope.js
@@ -1,50 +1,97 @@
-// const age = 100;
+/*
+ * BEST PRACTICES
+ *
+ * Limit use of global variables
+ * Use unique, descriptive names
+ */
-// function go() {
-// const myAge = 200;
-// const hair = 'blonde';
-// console.log(age);
-// console.log(myAge);
-// console.log(hair);
-// }
+/* eslint-disable */
+
+/*
+ * Global Variables
+ *
+ * Can be accessed everywhere
+ * Use sparingly, they can cause issues with variables with the same name
+ */
+
+// not attached to window
+const firstName = 'Josie';
+
+// not attached to window
+let lastName = 'Wallace';
+
+// IS attached to window - ex. window.age
+// Be careful with var, they are NOT block scoped
+var age = 6;
+
+/*
+ * Variables in functions are NOT available outside the function
+ * Variables can only be accessed in a function if they are returned
+ */
+function go() {
+ const hairColor = 'brown';
+ const eyeColor = 'blue';
+}
// go();
-/* eslint-disable*/
-// function isCool(name) {
-// if (name === 'wes') {
-// var cool = true;
-// }
-// console.log(cool);
-// return cool;
-// }
+/*
+ * Block scoped variables
+ *
+ * How do you access a variable inside { block }?
+ * Declare it outside, then set it inside the block
+ * Nice because these keep variables from leaking into other code
+ */
+let cool;
+if (1 === 1) {
+ cool = true;
+}
-// for(let i = 0; i < 10; i++) {
-// console.log(i);
-// }
+console.log(cool);
+/*
+ * Function scoped variable
+ * This is a solid example - this will be the pattern used most often
+ * Best practice - access allow declare it before and return it
+ */
+function allowAccess(name) {
+ let allow;
+ if (name === 'admin') {
+ allow = true;
+ }
+ console.log(allow);
+ return allow;
+}
-const dog = 'snickers';
+/*
+ * Scope Lookup
+ * JavaScript - Lexical or static scope
+ * JS looks at where functions are defined, not run
+ */
+const dog = 'Josie';
function logDog(dog) {
console.log(dog);
}
-function go() {
- const dog = 'sunny';
- logDog('sunny');
+function getDogName() {
+ const dog = 'Eddie';
+ logDog('Jackson Colt');
}
-go();
+getDogName();
-function yell() {
- console.log(name.toUpperCase())
-}
-function sayHi(name) {
+/*
+ * Function Scoping - functions inside of a parent will only be accessible to the parent
+ * That is an example of a closure
+ */
+function sayHello(name) {
+ function yell() {
+ console.log(name.toUpperCase())
+ }
yell();
}
-
-yell();
+yell();
\ No newline at end of file
diff --git a/playground/some.js b/playground/some.js
index 873d3fc81..015b447eb 100644
--- a/playground/some.js
+++ b/playground/some.js
@@ -1,5 +1,3 @@
-const p = document.querySelector('p');
-console.log('im in another file');
-
-const age = 100;
-console.log(p, age);
+const pExternal = document.querySelector('p');
+console.log(pExternal);
+console.log('I am a console log in another file.');
diff --git a/playground/types.js b/playground/types.js
index 0551889bf..19e2e8c3b 100644
--- a/playground/types.js
+++ b/playground/types.js
@@ -1,26 +1,50 @@
/* eslint-disable */
+
+
+
/*
-const name = 'wes';
-const middle = "topher";
-const last = `bos`;
+ * STRINGS
+ *
+ */
+
+console.log('I am a string, and can be surrounded by single quotes, double quotes and backticks');
+
+// Strings can be surrounded with single quotes, double quotes and backticks
+const firstName = 'Josie';
+const middleName = "The Brownie";
+const lastName = `Wallace`;
+const fullName = `${firstName} ${middleName} ${lastName}`;
+const greeting = `hello my name is ${fullName}`;
+
+// Concatenate strings together
+console.log(firstName + ' ' + middleName + ' ' + lastName);
+
+// Using backticks is easier for concatenating
+console.log(`${greeting}`)
-const sentence = "shes's so \"cool\"";
-const sentence2 = `shes's so "cool"`;
+// This is why single quotes can be a pain in the ass, you have to escape apostrophes
+const sentence1 = 'she\'s so cool';
-const song = `Ohhh
+// This is easier and works
+const sentence2 = "she's so cool";
-ya
+// Using backticks is the easiest way to do this - backticks are rare and can be escaped
+const sentence3 = `she's so cool`;
+
+// Use backticks for multistring lines - without backticks you have to use forward slashes for new lines
+const song = `Ohh
+
+yeah
I like
-pizza`;
-const hello = 'hello my name is ' + name + ". Nice to meet you";
+pizza`;
-let hello2 = 'hello my name is ';
-hello2 = hello2 + name;
-hello2 = hello2 + ' Nice to meet you';
+// Practical Example
+const name = `Rutheford`;
-const hello = `hello my name is ${name}. Nice to meet you. I am ${1 + 100} years old`;
+// Interpolate - if you use backticks you can easily add a variable or statement with ${variableName}
+const hello = `Hello my name is ${name}. Nice to meet you. I am ${1 + 39} years old`;
const html = `
@@ -31,44 +55,75 @@ const html = `
document.body.innerHTML = html;
-*/
-// const age = 100.5;
-// const name = 'wes';
-// const a = 10;
-// const b = 20;
/*
+ * NUMBERS
+ *
+ */
+
+const personAge = 100.5;
+const personName = 'wes';
+
+const a = 10;
+const b = 20;
+
+// Helper methods
+const round1 = Math.round(20.65);
+const round2 = Math.round(1.17);
+const floor1 = Math.floor(personAge);
+const floor2 = Math.floor(20.99999999999999);
+const ceil1 = Math.floor(20.99999999999999);
+const random = Math.random(); // get a random number between 0 and 1
+
+// Modulo operator % - gives you a remainder
const smarties = 20;
const kids = 3;
const eachKidGets = Math.floor(smarties / kids);
const dadGets = smarties % kids;
console.log(`Each kids gets ${eachKidGets}`);
+console.log(`Dad gets ${dadGets}`);
+
+// Floating point math - computers navtively use integers
+const price = 1034 // use cents to store prices so you can work in whole numbers
+
+// Powers
+const age1 = (10 ** 4);
+const age2 = (1000 ** 200) // Large numbers that can't be calculated will return as Infinity
+
+console.log(age2);
-const price = 1034;
-*/
/*
+ * OBJECTS
+ *
+ */
const person = {
- first: 'wes',
- last: 'bos',
- age: 100
+ first: 'Josie',
+ last: 'Wallace',
+ age: 6
};
-let dog;
-console.log(dog);
-dog = 'snickers';
+/*
+ * UNDEFINED AND NULL
+ *
+ */
+let dog;
+console.log(dog); // variable has been created but is has no value so it is undefined
+dog = 'Josie';
let somethingUndefined;
const somethingNull = null;
+// Cher has no last name, which is undefined
const cher = {
first: 'cher'
};
+// Teller changed his first name to his last name, it did have a value and then was changed to nothing (null)
const teller = {
first: 'Raymond',
last: 'Teller'
@@ -77,12 +132,23 @@ const teller = {
teller.first = 'Teller';
teller.last = null;
-*/
-let isDrawing = false;
-let age = 18;
-const ofAge = age > 19;
-console.log(ofAge);
-age = 100;
-let age2 = 100;
+/*
+ * BOOLEANS
+ *
+ */
+const userAge1 = 18;
+const ageVerification = userAge1 > 21;
+console.log(`Age verfication pass ${ageVerification}`);
+
+let userAge2 = 18;
+
+// TRIPLE EQUALS - checks for VALUE and TYPE
+/*
+10 === 10 (true)
+"10" === 10 (false)
+
+// DOUBLE EQUALS - checks just VALUE
+"10" == 10 (true)
+*/
\ No newline at end of file
diff --git a/playground/variables.html b/playground/variables.html
index 3426fbb6b..afc1b78ce 100644
--- a/playground/variables.html
+++ b/playground/variables.html
@@ -4,29 +4,42 @@
- Variables!
+ Fun with Variables!
diff --git a/readme.md b/readme.md
index 0cb9e57af..62e51f8d8 100644
--- a/readme.md
+++ b/readme.md
@@ -6,3 +6,34 @@ These are the starter files and solutions to the [Beginner JavaScript](https://B
More to come...
+
+## Notes
+
+### VS Code
+
+1. Open the command palette with `⌘` or `Ctrl` + `P`
+2. Type `>configure user snippets` and run the found command
+3. Select `html.json` from the list
+4. Paste the contents of `htmlbase.json` into the `{ }` of the file
+
+***
+
+### Firefox
+
+- Open devtools - command + shift + c
+- Open console - command + shift + j
+
+***
+
+### Terminal
+
+- ls -l (list all directories)
+- pwd (tells us where we are)
+- cd .. (go up a level)
+
+***
+
+### Node
+
+- control c (go back to command line)
+- command k (clear out console)
\ No newline at end of file
diff --git a/snippets/README.md b/snippets/README.md
index bc6b13114..40c789706 100644
--- a/snippets/README.md
+++ b/snippets/README.md
@@ -4,11 +4,4 @@ This is the base HTML I use for many of the playground and exercises.
I've included it as straight html for you to copy+paste, or as a VS Code snippet as well.
-Please PR this repo adding in other editor snippets as well.
-
-## VS Code
-
-1. Open the command palette with `⌘` or `Ctrl` + `P`
-2. Type `>configure user snippets` and run the found command
-3. Select `html.json` from the list
-4. Paste the contents of `htmlbase.json` into the `{ }` of the file
+Please PR this repo adding in other editor snippets as well.
\ No newline at end of file
diff --git a/snippets/htmlbase.html b/snippets/htmlbase.html
index f2d08c0e6..e7afd4139 100644
--- a/snippets/htmlbase.html
+++ b/snippets/htmlbase.html
@@ -1,15 +1,12 @@
-
-
-
- HTML Base
-
+
+
+
+
-
-
-
+