Skip to content

Instantly share code, notes, and snippets.

@cferdinandi

cferdinandi/01 - querySelector and querySelectorAll.html Secret

Last active November 16, 2022 06:41
Show Gist options
  • Star 8 You must be signed in to star a gist
  • Fork 5 You must be signed in to fork a gist
  • Save cferdinandi/3408501c83a2d3c3f1e664817dd4b975 to your computer and use it in GitHub Desktop.
Save cferdinandi/3408501c83a2d3c3f1e664817dd4b975 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
01 - querySelector and querySelectorAll.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>querySelector() and querySelectorAll()</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body {
margin: 0 auto;
max-width: 40em;
width: 88%;
}
</style>
</head>
<body>
<h1>Magical Folk</h1>
<h2>People</h2>
<ul id="magic">
<li>Merlin</li>
<li>Ursula</li>
<li>Gandalf</li>
<li>Morgana</li>
<li>Radagast</li>
</ul>
<h2>Spells</h2>
<ul id="spells">
<li>You shall not pass</li>
<li>Dancing teacups</li>
<li>Talk to animals</li>
<li>Disappear</li>
<li>Fly</li>
</ul>
<script>
// Basics
let magic = document.querySelector('#magic');
let listItems = document.querySelectorAll('li');
// Advanced
let gandalf = document.querySelector('li:nth-child(3)');
let spellList = document.querySelector('#spells');
let spells = spellList.querySelectorAll('li');
// Looping
spells.forEach(function (spell, index) {
// console.log(spell, index);
});
for (let spell of spells) {
console.log(spell);
}
</script>
</body>
</html>
Raw
02 - array.filter and array.map.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Array.map() and Array.filter()</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script>
let data = [
{
name: 'Kyle',
occupation: 'Fashion Designer'
},
{
name: 'Liza',
occupation: 'Web Developer'
},
{
name: 'Emily',
occupation: 'Web Designer'
},
{
name: 'Melissa',
occupation: 'Fashion Designer'
},
{
name: 'Tom',
occupation: 'Web Developer'
}
];
// let names = [];
// data.forEach(function (name) {
// names.push(name);
// })
// Get just names
let names = data.map(function (item) {
return item.name;
});
// let webDevs = [];
// data.forEach(function (name) {
// if (name.occupation === 'Web Developer') {
// names.push(name);
// }
// })
// Get just web developers
let webDevs = data.filter(function (item) {
// return item.occupation === 'Web Developer';
if (item.occupation === 'Web Developer') {
return true;
}
return false;
});
// Get just the names of web developers
let webDevNames = data.filter(function (item) {
return item.occupation === 'Web Developer';
}).map(function (item) {
return item.name;
});
</script>
</body>
</html>
Raw
03 - array.map and array.join.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Array.map() and Array.join()</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body {
margin: 1em auto;
max-width: 40em;
width: 88%;
}
</style>
</head>
<body>
<h1>Wizards</h1>
<ul id="list"></ul>
<script>
let list = document.querySelector('#list');
let wizards = ['Merlin', 'Ursula', 'Gandalf', 'Morgana'];
list.innerHTML = wizards.map(function (wizard) {
return '<li>' + wizard + '</li>';
}).join('');
</script>
</body>
</html>
Raw
04 - domParser.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>domParser()</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body {
margin: 1em auto;
max-width: 40em;
width: 88%;
}
</style>
</head>
<body>
<h1>Wizards</h1>
<ul id="list">
<li>Radagast</li>
<li>Hermione</li>
</ul>
<script>
let list = document.querySelector('#list');
let wizards = ['Merlin', 'Ursula', 'Gandalf', 'Morgana'];
let htmlString = wizards.map(function (wizard) {
return '<li>' + wizard + '</li>';
}).join('');
let parser = new DOMParser();
let doc = parser.parseFromString(htmlString, 'text/html');
list.append(...doc.body.childNodes);
</script>
</body>
</html>
Raw
05 - ternary operators.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ternary Operators</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script>
// This:
// let someVar = [the condition] ? [the value if true] : [the value if false];
// Is the same as this:
/*
let someVar;
if ([the condition]) {
someVar = [the value if true];
} else {
someVar = [the value if false];
}
*/
let num = 0;
let answer = num > 10 ? num : 42;
// if (num > 10) {
// answer = num;
// } else {
// answer = 42;
// }
console.log(answer);
// That's the same as doing this...
// let num = 28;
// let answer;
// if (num > 10) {
// answer = num;
// } else {
// answer = 42;
// }
// console.log(answer);
</script>
</body>
</html>
Raw
06 - template literals.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Template Literals</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script>
/**
* Simple multi-line strings
*/
let str1 =
`<h1>Hello, world!</h1>
<p>How are you today?</p>`;
// console.log(str1);
/**
* Using variables in strings
*/
let greeting = 'Hi, very nice person!';
let message = 'How is the weather today?';
let str2 =
`<h1>${greeting}</h1>
<p>${message}</p>`;
// console.log(str2);
/**
* Using conditionals and methods
*/
let wizards = ['Hermione', 'Neville', 'Gandalf', 'Radagast', 'Merlin'];
let showHeading = true;
let str3 =
`${showHeading ? '<h1>Awesome Wizards</h1>' : ''}
${(function () {
if (wizards.length > 3) {
return '<p>There are at least three wizards.</p>';
}
return '<p>There are fewer than three wizards.</p>';
})()}
<ul>
${wizards.map(function (wizard) {
return `<li>${wizard}</li>`;
}).join('')}
</ul>`;
console.log(str3);
</script>
</body>
</html>
Raw
07 - classList.toggle.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>classList.toggle()</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body {
margin: 0 auto;
max-width: 40em;
width: 88%;
}
.mayo {
background-color: rebeccapurple;
color: white;
}
</style>
</head>
<body>
<p id="sandwich">Tuna</p>
<script>
let sandwich = document.querySelector('#sandwich');
// Toggle
if (sandwich.classList.contains('mayo')) {
sandwich.classList.remove('mayo');
} else {
sandwich.classList.add('mayo');
}
// This adds the .mayo class to the #sandwich element
// sandwich.classList.toggle('mayo');
// // This removes it
// sandwich.classList.toggle('mayo');
// Second argument
let hasCondiments = false;
sandwich.classList.toggle('mayo', hasCondiments);
</script>
</body>
</html>
Raw
08 - number value.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>valueAsNumber</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body {
margin: 1em auto;
max-width: 40em;
width: 88%;
}
</style>
</head>
<body>
<h1>HTMLInputElement.valueAsNumber</h1>
<label for="num">Pick a number</label>
<input type="number" id="num" value="0">
<script>
let num = document.querySelector('#num');
// Convert
// let val1 = parseFloat(num.value);
// let val2 = num.valueAsNumber;
</script>
</body>
</html>
Raw
09 - optional chaining operator.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Optional Chaining Operator</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body {
margin: 0 auto;
max-width: 40em;
width: 88%;
}
</style>
</head>
<body>
<h1>Magical Folk</h1>
<h2>People</h2>
<ul id="magic">
<li>Merlin</li>
<li>Ursula</li>
<li>Gandalf</li>
<li>Morgana</li>
<li>Radagast</li>
</ul>
<h2>Spells</h2>
<ul id="spells">
<li>You shall not pass</li>
<li>Dancing teacups</li>
<li>Talk to animals</li>
<li>Disappear</li>
<li>Fly</li>
</ul>
<script>
let spells = document.querySelector('#spells').querySelectorAll('li');
let spells2 = document.querySelector('#spells')?.querySelectorAll('li');
</script>
</body>
</html>
Raw
10 - window.getComputedStyle.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>window.getComputedStyle</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body {
margin: 0 auto;
max-width: 40em;
width: 88%;
}
#sandwich {
background-color: rebeccapurple;
color: white;
}
</style>
</head>
<body>
<p id="sandwich">Sandwich</p>
<script>
let sandwich = document.querySelector('#sandwich');
// Get the computed style
let bgColor = window.getComputedStyle(sandwich).backgroundColor;
let height = window.getComputedStyle(sandwich).height;
let style = window.getComputedStyle(sandwich);
// console.log(bgColor);
// console.log(height);
</script>
</body>
</html>
Raw
11 - event delegation.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Event Bubbling</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body {
margin: 0 auto;
max-width: 40em;
width: 88%;
}
</style>
</head>
<body>
<p>
<button class="click-me" id="click-me-1">Click Me</button>
<button class="click-me" id="click-me-2">Click Me, Too</button>
<button class="click-me" id="click-me-3">Don't You Forget About Me</button>
<button class="dont-click-me" id="dont-click-me">Clicking Me Does Nothing</button>
</p>
<script>
// Get all the buttons
let btns = document.querySelectorAll('.click-me');
/**
* This won't work
*/
// btns.addEventListener('click', function (event) {
// console.log(event); // The event details
// console.log(event.target); // The clicked element
// });
/**
* This works, but it's bad for performance
* DON'T DO IT!
*/
// for (let btn of btns) {
// btn.addEventListener('click', function (event) {
// console.log(event); // The event details
// console.log(event.target); // The clicked element
// });
// }
/**
* A better approach: Event Delegation
* Listen for clicks on the entire document
*/
document.addEventListener('click', function (event) {
// If the clicked element has the `.click-me` class, it's a match!
if (event.target.classList.contains('click-me')) {
console.log('A button as clicked.');
} else {
console.log('Not a match!');
}
if (!event.target.classList.contains('click-me')) return;
// Stuff I actually want to do...
});
</script>
</body>
</html>
Raw
12 - custom events.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Custom Events</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script>
document.addEventListener('my-custom-event', function (event) {
// event.preventDefault();
console.log(event.detail);
});
function emit () {
// Create the event
let event = new CustomEvent('my-custom-event', {
bubbles: true,
cancelable: true,
detail: {
name: 'Merlin',
occupation: 'wizard'
}
});
// Emit the event
let canceled = !document.dispatchEvent(event);
if (canceled) return;
console.log('It ran!');
}
emit();
</script>
</body>
</html>
Raw
13 - structuredClone.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>structuredClone()</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script>
// A multidimensional array
let wizards = [{
name: 'Radagast',
color: 'brown'
}, {
name: 'Gandalf',
color: 'gray'
}];
// A multidimensional object
let movies = {
studio: 'Pixar',
films: ['Soul', 'Onward', 'Up', 'WALL-E'],
directors: ['Brad Bird', 'Pete Docter', 'Andrew Stanton'],
details: {
founded: '1986',
founders: ['Edwin Catmull', 'Alvy Ray Smith']
}
};
// Create a copy of the wizards array
let wizardsCopy = Array.from(wizards);
// Update a nested property
wizards[0].druid = true;
// logs {name: "Radagast", color: "brown", druid: true}
console.log(wizardsCopy[0]);
// Create a copy of the wizards array
let wizardsCopy2 = structuredClone(wizards);
// Update a nested property
wizards[0].druid = true;
// The copy is not updated
console.log(wizardsCopy2[0]);
</script>
</body>
</html>
Raw
14 - destructuring arrays.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Array Destructuring</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script>
let lunch = ['turkey sandwich', 'soda', 'chips', 'cookie'];
// Traditional approach
// let entree = lunch[0];
// let drink = lunch[1];
// let side = lunch[2];
// let desert = lunch[3];
// Destructuring
let [entree, drink, side, desert] = lunch;
console.log(entree);
console.log(side);
</script>
</body>
</html>
Raw
15 - destructuring objects.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Object Destructuring</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script>
let movies = {
disney: 'Moana',
pixar: 'Up',
dreamworks: 'How to Train Your Dragon',
nickelodeon: 'Wonder Park'
};
// Traditional approach
// let disney = movies.disney;
// let pixar = movies.pixar;
// let dreamworks = movies.dreamworks;
// let nickelodeon = movies.nickelodeon;
// console.log(pixar);
// console.log(nickelodeon);
// console.log(dreamworks);
// Destructuring approach
let {disney, pixar, nickelodeon: nick} = movies;
console.log(pixar);
console.log(nick);
</script>
</body>
</html>
Raw
16 - formData.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>FormData()</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body {
margin: 1em auto;
max-width: 40em;
width: 88%;
}
</style>
</head>
<body>
<h1>FormData()</h1>
<form id="post">
<label for="title">Title</label>
<input type="text" name="title" id="title" value="Go to the beach">
<label for="body">Body</label>
<textarea id="body" name="body">Soak up the sun and swim in the ocean.</textarea>
<input type="hidden" name="userId" value="1">
<button>Submit</button>
</form>
<script>
// Get the form
let form = document.querySelector('#post');
// Get all field data from the form
// returns a FormData object
let data = new FormData(form);
// logs...
// ["title", "Go to the beach"]
// ["body", "Soak up the sun and swim in the ocean."]
// ["userId", "1"]
for (let entry of data) {
console.log(entry);
}
// logs "title", "Go to the beach", etc.
for (let [key, value] of data) {
console.log(key);
console.log(value);
}
// Get and set values
let postTitle = data.get('title');
data.set('userId', '42');
let userId = data.get('userId');
// Serialize
let serialized = Object.fromEntries(data);
// Append data
data.append('userId', '1');
let userIds = data.getAll('userId');
// Serialize again
serialized = Object.fromEntries(data);
/**
* Serialize form data into an object
* @param {FormData} data The FormData
* @return {Object} The serialized object
*/
function serialize (data) {
let obj = {};
for (let [key, value] of data) {
if (obj[key] !== undefined) {
if (!Array.isArray(obj[key])) {
obj[key] = [obj[key]];
}
obj[key].push(value);
} else {
obj[key] = value;
}
}
return obj;
}
// Serialize one more time
serialized = serialize(data);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment