Skip to content

Instantly share code, notes, and snippets.

@JoelCodes

JoelCodes/browser_environment.html

Created June 11, 2019 22:52
Show Gist options
  • Save JoelCodes/26da2d8317d566c97b1be7e6c2c7a76c to your computer and use it in GitHub Desktop.
Save JoelCodes/26da2d8317d566c97b1be7e6c2c7a76c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
browser_environment.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">
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<title>Document</title>
</head>
<body>
<script>
var x = 3;
function sayHowdy(){
alert('Howdy!');
}
console.log('Window', window);
// Immediately Invoked Function Expression
// IIFE
(function(){
var y = 4;
})();
console.log('Document', document);
console.log('Navigator', navigator);
var a = {};
var b = {a: a};
a.b = b;
console.log('A', a);
(function(){
var y = 4;
var z = 5;
// debugger;
})();
</script>
</body>
</html>
Raw
dom-events.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">
<title>DOM Events</title>
<style>
body, * {
font-size: 40px;
}
</style>
</head>
<body>
<p>
<button>The Hardest Button To Button</button>
</p>
<p>
<form>
<input type='text' name='thoughts'/><br/>
<input type='submit' value="Whatcha thinkin' 'bout?"/>
</form>
</p>
<script>
var theButton = document.getElementsByTagName('button')[0];
function clickListener(event){
console.log('Clicked');
theButton.removeEventListener('click', clickListener);
}
theButton.addEventListener('click', clickListener);
console.log(theButton);
var theTextInput = document.querySelector('input[type=text]');
theTextInput.addEventListener('keyup', function(e){
console.log(e);
console.log(this.value);
});
var theForm = document.querySelector('form');
function onSubmit(event){
event.preventDefault();
var currentThoughts = event.target.elements.thoughts.value;
alert('You are thinking: ' + currentThoughts);
event.target.elements.thoughts.value = "";
}
theForm.addEventListener('submit', onSubmit);
</script>
</body>
</html>
Raw
dom-manipulation.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">
<title>DOM Manipulation</title>
<style>
body {
font-size: 40px;
}
.yelling {
font-weight: bold;
text-transform: uppercase;
}
</style>
</head>
<body>
<h2>DOM Manipulation</h2>
<ul id='dom-manipulation-aspect-list' class="red-list">
<li>Easy</li>
<li>Fun</li>
<li>Profitable</li>
</ul>
Some Text
<script>
var ulByQuerySelector = document.querySelector('ul.red-list#dom-manipulation-aspect-list');
// CLASS MANIPULATION
console.log(ulByQuerySelector.classList);
// setTimeout(function(){
// ulByQuerySelector.classList.add('yelling');
// ulByQuerySelector.classList.add('yelling');
// }, 5000);
// setTimeout(function(){
// ulByQuerySelector.classList.remove('yelling');
// ulByQuerySelector.classList.remove('yelling');
// }, 10000);
// setInterval(function(){
// ulByQuerySelector.classList.toggle('yelling');
// }, 1000);
// INLINE STYLE MANIPULATION
console.log(ulByQuerySelector.style);
// setTimeout(function(){
// ulByQuerySelector.style.display = 'none';
// }, 2000);
// REMOVE DOM NODES
console.log(ulByQuerySelector.children);
var intervalID = setInterval(function(){
ulByQuerySelector.children[0].remove();
if(ulByQuerySelector.childElementCount === 0){
clearInterval(intervalID);
console.log("All Done");
}
}, 5000);
// ADD DOM NODE
setInterval(function(){
var newLi = document.createElement('li');
newLi.innerText = "Fresh!"
ulByQuerySelector.appendChild(newLi);
}, 3000);
</script>
</body>
</html>
Raw
dom-querying.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">
<title>Document</title>
<style>
/* ul {
color: tomato;
} */
/* .red-list {
color: tomato;
} */
#dom-manipulation-aspect-list {
color: deepskyblue;
}
</style>
</head>
<body>
<h2>DOM Manipulation</h2>
<ul id='dom-manipulation-aspect-list' class="red-list">
<li>Easy</li>
<li>Fun</li>
<li>Profitable</li>
</ul>
Some Text
<script>
console.log(document.body);
for(const child of document.body.children){
console.log(child);
}
var ul = document.body.children[1];
var ulByElementName = document.getElementsByTagName('ul')[0];
var ulByClassName = document.getElementsByClassName('red-list')[0];
var ulById = document.getElementById('dom-manipulation-aspect-list');
var ulByQuerySelector = document.querySelector('ul.red-list#dom-manipulation-aspect-list');
console.log('UL', ul);
console.log('UL By Element Name', ulByElementName);
console.log('UL By Class Name', ulByClassName);
console.log('UL By Id', ulById);
console.log('UL By Query Selector', ulByQuerySelector);
</script>
</body>
</html>
Raw
puppies.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">
<title>Puppies!</title>
</head>
<body>
<form id='puppy-form'>
<input type='text' name='name'/>
<input type='submit' value='Make Puppy'/>
</form>
<ul id='puppy-list'>
</ul>
<script>
(function(){
var puppyCounter = 1;
var thePuppyList = document.getElementById('puppy-list');
var thePuppyForm = document.getElementById('puppy-form');
thePuppyList.addEventListener('click', function(e){
console.log('Clicked', event.target, this);
if(event.target.attributes['data-send-to-farm']){
event.target.parentElement.remove();
}
});
thePuppyForm.addEventListener('submit', function(e){
e.preventDefault();
var puppyNameInput = e.target.elements.name;
var puppyName = puppyNameInput.value;
puppyNameInput.value = "";
var newPuppyLi = document.createElement('li');
var newPuppyImg = document.createElement('img');
newPuppyImg.src = 'http://www.placepuppy.net/' + puppyCounter + 'p/400/250';
var newPuppyName = document.createTextNode(puppyName);
var sendPuppyToANiceFarmButton = document.createElement('button');
sendPuppyToANiceFarmButton.innerText = "He's going to a better place";
sendPuppyToANiceFarmButton.setAttribute('data-send-to-farm', true);
newPuppyLi.append(newPuppyImg);
newPuppyLi.append(document.createElement('br'));
newPuppyLi.append(newPuppyName);
newPuppyLi.append(sendPuppyToANiceFarmButton);
puppyCounter += 1;
thePuppyList.append(newPuppyLi);
});
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment