Skip to content

Instantly share code, notes, and snippets.

@JoelCodes

JoelCodes/create.html

Created July 11, 2017 18:15
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save JoelCodes/05de78e33c4ce470b127e7c92088dfd4 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save JoelCodes/05de78e33c4ce470b127e7c92088dfd4 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
create.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 type="text/css">
</style>
</head>
<body>
<ul id='list'>
<li>Joel</li>
<li>Don</li>
<li>David</li>
</ul>
<script>
var list = document.querySelector('#list');
setTimeout(function(){
var newLi = document.createElement('li');
newLi.innerText = 'Karl';
list.appendChild(newLi);
setTimeout(function(){
list.firstElementChild.remove();
}, 3000);
}, 3000);
</script>
</body>
</html>
Raw
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>Document</title>
<style>
#button{
color: white;
background-color: tomato;
border:none;
border-radius: 5px;
box-shadow: 2px 2px #666;
}
</style>
</head>
<body>
<!--<div id='div'>
<button id='button'>I'm a button!</button>
</div>
<script>
var button = document.getElementById('button');
button.addEventListener('click', function(event){
console.log(event);
console.log(this);
});
</script>-->
<!--<input type="text" id="txt" value='Too Soon'/>
<script>
var text = document.getElementById('txt');
text.addEventListener("keydown", function(evt){
console.log(evt.keyCode);
});
</script>-->
<form>
<p><label for="email">Email</label><input type="email" name="email"/></p>
<p><input id='button' type="submit" value='Submit This Form'/></p>
</form>
<ul id='list'>
</ul>
<script>
var form = document.querySelector('form');
var email = form.elements.email;
var list = document.getElementById('list');
form.addEventListener('submit', function(evt){
evt.preventDefault();
var newLi =document.createElement('li');
newLi.innerText = email.value;
list.appendChild(newLi);
email.value = '';
});
</script>
</body>
</html>
Raw
query-mutate.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 type="text/css">
.tomato{
color: tomato;
background: peachpuff;
}
.title {
font-weight: bold;
font-size: 2em;
}
</style>
</head>
<body>
<!-- This is not a webpage #jokesforartnerds -->
<p class='title' id='my-title'>This is my title</p>
<div class="container">
<p class="title">'Wake up everyone'</p>
</div>
<script>
// console.log(window); // Global Object
// console.log(navigator); // Describes the Environment
// console.log(document); // Provides access to the DOM
// All the searches
// var titleByBodyTraversal = document.body.children[0];
// var titleByClass = document.getElementsByClassName('title')[0];
// var titleById = document.getElementById('my-title');
// var titleByElementName = document.getElementsByTagName('p')[0];
// var titleByQuerySelector = document.querySelector('#my-title');
// Searching within a DOM node
// var container = document.querySelector('.container');
// var title = container.querySelector('.title');
var title = document.querySelector('#my-title');
setTimeout(function(){
title.innerHTML = "This is an even <em>better</em> title";
// Idempotent add
title.classList.add('tomato');
setTimeout(function(){
// Idempotent remove
title.classList.remove('tomato');
// setInterval(function(){
// // Non-idempotent toggle
// title.classList.toggle('tomato')
// }, 100);
}, 2000);
}, 2000);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment