Skip to content

Instantly share code, notes, and snippets.

@dnlsyfq

dnlsyfq/index.html

Created August 8, 2021 14:23
Show Gist options
  • Save dnlsyfq/f70a582efd735c018c51e926fb4790c3 to your computer and use it in GitHub Desktop.
Save dnlsyfq/f70a582efd735c018c51e926fb4790c3 to your computer and use it in GitHub Desktop.
Download ZIP
JavaScript and the DOM // source https://jsbin.com/povagop
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript and the DOM</title>
<link rel="stylesheet" href="style.css">
<style id="jsbin-css">
@import 'https://fonts.googleapis.com/css?family=Lato:400,700';
body {
color: #484848;
font-family: 'Lato', sans-serif;
padding: .45em 2.65em 3em;
line-height: 1.5;
}
h1 {
margin-bottom: 0;
}
h1 + p {
font-size: 1.08em;
color: #637a91;
margin-top: .5em;
margin-bottom: 2.65em;
padding-bottom: 1.325em;
border-bottom: 1px dotted;
}
ul {
padding-left: 0;
list-style: none;
}
li {
padding: .45em .5em;
margin-bottom: .35em;
display: flex;
align-items: center;
}
input,
button {
font-size: .85em;
padding: .65em 1em;
border-radius: .3em;
outline: 0;
}
input {
border: 1px solid #dcdcdc;
margin-right: 1em;
}
div {
margin-top: 2.8em;
padding: 1.5em 0 .5em;
border-top: 1px dotted #637a91;
}
p.description,
p:nth-of-type(2) {
font-weight: bold;
}
/* Buttons */
button {
color: white;
background: #508abc;
border: solid 1px;
border-color: rgba(0, 0, 0, .1);
cursor: pointer;
}
button + button {
margin-left: .5em;
}
p + button {
background: #52bab3;
}
.list button + button {
background: #768da3;
}
.list li button + button {
background: #508abc;
}
li button:first-child {
margin-left: auto;
background: #52bab3;
}
.list li button:last-child {
background: #768da3;
}
li button {
font-size: .75em;
padding: .5em .65em;
}
</style>
</head>
<body>
<h1 id="myHeading">JavaScript and the DOM</h1>
<p>Making a web page interactive</p>
<button id="toggleList">Hide list</button>
<div class="list">
<p class="description">Things that are purple:</p>
<input type="text" class="description">
<button class="description">Change list description</button>
<ul>
<li>grapes
</li>
<li>amethyst
</li>
<li>lavender
</li>
<li>plums
</li>
</ul>
<input type="text" class="addItemInput">
<button class="addItemButton">Add item</button>
<button class="removeItemButton">Remove item </button>
</div>
<script src="script.js"></script>
<script id="jsbin-javascript">
const toggleList = document.getElementById('toggleList');
const listDiv = document.querySelector('.list');
const descriptionInput = document.querySelector('input.description');
const descriptionP = document.querySelector('p.description');
const descriptionButton = document.querySelector('button.description');
const addItemInput = document.querySelector('input.addItemInput');
const addItemButton = document.querySelector('.addItemButton');
const removeItemButton = document.querySelector('.removeItemButton');
// const listItems = document.getElementsByTagName('li');
// for(let i=0; i < listItems.length ; i++ ){
// listItems[i].addEventListener('mouseover',() => {
// listItems.textContent = listItems.textContent.toUpperCase();
// })
// listItems[i].addEventListener('mouseout',() => {
// listItems.textContent = listItems.textContent.toLowerCase();
// })
// }
const listUl = listDiv.querySelector('ul');
const lis = listUl.children;
const firstListItem = listUl.firstElementChild;
const lastListItem = listUl.lastElementChild;
firstListItem.style.backgroundColor = 'lightskyblue';
lastListItem.style.backgroundColor = 'lightsteelblue';
function attachListItemButtons(li){
let up = document.createElement('button');
up.className = 'up';
up.textContent = 'up';
li.appendChild(up);
let down = document.createElement('button');
down.className = 'down';
down.textContent = 'down';
li.appendChild(down);
let remove = document.createElement('button');
remove.className = 'remove';
remove.textContent = 'remove';
li.appendChild(remove);
}
for(let i = 0; i < lis.length; i+= 1){
attachListItemButtons(lis[i]);
}
listUl.addEventListener('click', (event) => {
if(event.target.tagName == 'BUTTON'){
if(event.target.className == 'remove'){
let li = event.target.parentNode;
let ul = li.parentNode;
ul.removeChild(li);
}
if(event.target.className == 'up'){
let li = event.target.parentNode;
let prevLi = li.previousElementSibling;
let ul = li.parentNode;
if(prevLi){
ul.insertBefore(li,prevLi);
}
}
if(event.target.className == 'down'){
let li = event.target.parentNode;
let nextLi = li.nextElementSibling;
let ul = li.parentNode;
if(nextLi){
ul.insertBefore(nextLi,li);
}
}
}
});
// listDiv.addEventListener('mouseout',(event) => {
// if(event.target.tagName == 'LI'){
// event.target.textContent = event.target.textContent.toLowerCase();
// }
// });
toggleList.addEventListener('click', () => {
if(listDiv.style.display == 'none'){
toggleList.textContent = 'Hide list'
listDiv.style.display = 'block';
} else {
toggleList.textContent = 'Show list'
listDiv.style.display = 'none';
}
})
descriptionButton.addEventListener('click',() => {
descriptionP.textContent = descriptionInput.value + ':';
descriptionInput.value = '';
})
addItemButton.addEventListener('click', () => {
let ul = document.getElementsByTagName('ul')[0];
let li = document.createElement('li');
li.textContent = addItemInput.value;
attachListItemButtons(li);
ul.appendChild(li);
addItemInput.value = '';
})
/*
removeItemButton.addEventListener('click', () => {
let ul = document.getElementsByTagName('ul')[0];
let li = document.querySelector('li:last-child');
ul.removeChild(li);
})
*/
// function say(something){
// console.log(something);
// }
// function exec(func,arg){
// func(arg);
// }
// exec(say,'Hi there');
window.setTimeout((something) => {
console.log(something);
},3000,'Hi there');
</script>
<script id="jsbin-source-css" type="text/css">
@import 'https://fonts.googleapis.com/css?family=Lato:400,700';
body {
color: #484848;
font-family: 'Lato', sans-serif;
padding: .45em 2.65em 3em;
line-height: 1.5;
}
h1 {
margin-bottom: 0;
}
h1 + p {
font-size: 1.08em;
color: #637a91;
margin-top: .5em;
margin-bottom: 2.65em;
padding-bottom: 1.325em;
border-bottom: 1px dotted;
}
ul {
padding-left: 0;
list-style: none;
}
li {
padding: .45em .5em;
margin-bottom: .35em;
display: flex;
align-items: center;
}
input,
button {
font-size: .85em;
padding: .65em 1em;
border-radius: .3em;
outline: 0;
}
input {
border: 1px solid #dcdcdc;
margin-right: 1em;
}
div {
margin-top: 2.8em;
padding: 1.5em 0 .5em;
border-top: 1px dotted #637a91;
}
p.description,
p:nth-of-type(2) {
font-weight: bold;
}
/* Buttons */
button {
color: white;
background: #508abc;
border: solid 1px;
border-color: rgba(0, 0, 0, .1);
cursor: pointer;
}
button + button {
margin-left: .5em;
}
p + button {
background: #52bab3;
}
.list button + button {
background: #768da3;
}
.list li button + button {
background: #508abc;
}
li button:first-child {
margin-left: auto;
background: #52bab3;
}
.list li button:last-child {
background: #768da3;
}
li button {
font-size: .75em;
padding: .5em .65em;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">const toggleList = document.getElementById('toggleList');
const listDiv = document.querySelector('.list');
const descriptionInput = document.querySelector('input.description');
const descriptionP = document.querySelector('p.description');
const descriptionButton = document.querySelector('button.description');
const addItemInput = document.querySelector('input.addItemInput');
const addItemButton = document.querySelector('.addItemButton');
const removeItemButton = document.querySelector('.removeItemButton');
// const listItems = document.getElementsByTagName('li');
// for(let i=0; i < listItems.length ; i++ ){
// listItems[i].addEventListener('mouseover',() => {
// listItems.textContent = listItems.textContent.toUpperCase();
// })
// listItems[i].addEventListener('mouseout',() => {
// listItems.textContent = listItems.textContent.toLowerCase();
// })
// }
const listUl = listDiv.querySelector('ul');
const lis = listUl.children;
const firstListItem = listUl.firstElementChild;
const lastListItem = listUl.lastElementChild;
firstListItem.style.backgroundColor = 'lightskyblue';
lastListItem.style.backgroundColor = 'lightsteelblue';
function attachListItemButtons(li){
let up = document.createElement('button');
up.className = 'up';
up.textContent = 'up';
li.appendChild(up);
let down = document.createElement('button');
down.className = 'down';
down.textContent = 'down';
li.appendChild(down);
let remove = document.createElement('button');
remove.className = 'remove';
remove.textContent = 'remove';
li.appendChild(remove);
}
for(let i = 0; i < lis.length; i+= 1){
attachListItemButtons(lis[i]);
}
listUl.addEventListener('click', (event) => {
if(event.target.tagName == 'BUTTON'){
if(event.target.className == 'remove'){
let li = event.target.parentNode;
let ul = li.parentNode;
ul.removeChild(li);
}
if(event.target.className == 'up'){
let li = event.target.parentNode;
let prevLi = li.previousElementSibling;
let ul = li.parentNode;
if(prevLi){
ul.insertBefore(li,prevLi);
}
}
if(event.target.className == 'down'){
let li = event.target.parentNode;
let nextLi = li.nextElementSibling;
let ul = li.parentNode;
if(nextLi){
ul.insertBefore(nextLi,li);
}
}
}
});
// listDiv.addEventListener('mouseout',(event) => {
// if(event.target.tagName == 'LI'){
// event.target.textContent = event.target.textContent.toLowerCase();
// }
// });
toggleList.addEventListener('click', () => {
if(listDiv.style.display == 'none'){
toggleList.textContent = 'Hide list'
listDiv.style.display = 'block';
} else {
toggleList.textContent = 'Show list'
listDiv.style.display = 'none';
}
})
descriptionButton.addEventListener('click',() => {
descriptionP.textContent = descriptionInput.value + ':';
descriptionInput.value = '';
})
addItemButton.addEventListener('click', () => {
let ul = document.getElementsByTagName('ul')[0];
let li = document.createElement('li');
li.textContent = addItemInput.value;
attachListItemButtons(li);
ul.appendChild(li);
addItemInput.value = '';
})
/*
removeItemButton.addEventListener('click', () => {
let ul = document.getElementsByTagName('ul')[0];
let li = document.querySelector('li:last-child');
ul.removeChild(li);
})
*/
// function say(something){
// console.log(something);
// }
// function exec(func,arg){
// func(arg);
// }
// exec(say,'Hi there');
window.setTimeout((something) => {
console.log(something);
},3000,'Hi there');
</script></body>
</html>
Raw
jsbin.povagop.css
@import 'https://fonts.googleapis.com/css?family=Lato:400,700';
body {
color: #484848;
font-family: 'Lato', sans-serif;
padding: .45em 2.65em 3em;
line-height: 1.5;
}
h1 {
margin-bottom: 0;
}
h1 + p {
font-size: 1.08em;
color: #637a91;
margin-top: .5em;
margin-bottom: 2.65em;
padding-bottom: 1.325em;
border-bottom: 1px dotted;
}
ul {
padding-left: 0;
list-style: none;
}
li {
padding: .45em .5em;
margin-bottom: .35em;
display: flex;
align-items: center;
}
input,
button {
font-size: .85em;
padding: .65em 1em;
border-radius: .3em;
outline: 0;
}
input {
border: 1px solid #dcdcdc;
margin-right: 1em;
}
div {
margin-top: 2.8em;
padding: 1.5em 0 .5em;
border-top: 1px dotted #637a91;
}
p.description,
p:nth-of-type(2) {
font-weight: bold;
}
/* Buttons */
button {
color: white;
background: #508abc;
border: solid 1px;
border-color: rgba(0, 0, 0, .1);
cursor: pointer;
}
button + button {
margin-left: .5em;
}
p + button {
background: #52bab3;
}
.list button + button {
background: #768da3;
}
.list li button + button {
background: #508abc;
}
li button:first-child {
margin-left: auto;
background: #52bab3;
}
.list li button:last-child {
background: #768da3;
}
li button {
font-size: .75em;
padding: .5em .65em;
}
Raw
jsbin.povagop.js
const toggleList = document.getElementById('toggleList');
const listDiv = document.querySelector('.list');
const descriptionInput = document.querySelector('input.description');
const descriptionP = document.querySelector('p.description');
const descriptionButton = document.querySelector('button.description');
const addItemInput = document.querySelector('input.addItemInput');
const addItemButton = document.querySelector('.addItemButton');
const removeItemButton = document.querySelector('.removeItemButton');
// const listItems = document.getElementsByTagName('li');
// for(let i=0; i < listItems.length ; i++ ){
// listItems[i].addEventListener('mouseover',() => {
// listItems.textContent = listItems.textContent.toUpperCase();
// })
// listItems[i].addEventListener('mouseout',() => {
// listItems.textContent = listItems.textContent.toLowerCase();
// })
// }
const listUl = listDiv.querySelector('ul');
const lis = listUl.children;
const firstListItem = listUl.firstElementChild;
const lastListItem = listUl.lastElementChild;
firstListItem.style.backgroundColor = 'lightskyblue';
lastListItem.style.backgroundColor = 'lightsteelblue';
function attachListItemButtons(li){
let up = document.createElement('button');
up.className = 'up';
up.textContent = 'up';
li.appendChild(up);
let down = document.createElement('button');
down.className = 'down';
down.textContent = 'down';
li.appendChild(down);
let remove = document.createElement('button');
remove.className = 'remove';
remove.textContent = 'remove';
li.appendChild(remove);
}
for(let i = 0; i < lis.length; i+= 1){
attachListItemButtons(lis[i]);
}
listUl.addEventListener('click', (event) => {
if(event.target.tagName == 'BUTTON'){
if(event.target.className == 'remove'){
let li = event.target.parentNode;
let ul = li.parentNode;
ul.removeChild(li);
}
if(event.target.className == 'up'){
let li = event.target.parentNode;
let prevLi = li.previousElementSibling;
let ul = li.parentNode;
if(prevLi){
ul.insertBefore(li,prevLi);
}
}
if(event.target.className == 'down'){
let li = event.target.parentNode;
let nextLi = li.nextElementSibling;
let ul = li.parentNode;
if(nextLi){
ul.insertBefore(nextLi,li);
}
}
}
});
// listDiv.addEventListener('mouseout',(event) => {
// if(event.target.tagName == 'LI'){
// event.target.textContent = event.target.textContent.toLowerCase();
// }
// });
toggleList.addEventListener('click', () => {
if(listDiv.style.display == 'none'){
toggleList.textContent = 'Hide list'
listDiv.style.display = 'block';
} else {
toggleList.textContent = 'Show list'
listDiv.style.display = 'none';
}
})
descriptionButton.addEventListener('click',() => {
descriptionP.textContent = descriptionInput.value + ':';
descriptionInput.value = '';
})
addItemButton.addEventListener('click', () => {
let ul = document.getElementsByTagName('ul')[0];
let li = document.createElement('li');
li.textContent = addItemInput.value;
attachListItemButtons(li);
ul.appendChild(li);
addItemInput.value = '';
})
/*
removeItemButton.addEventListener('click', () => {
let ul = document.getElementsByTagName('ul')[0];
let li = document.querySelector('li:last-child');
ul.removeChild(li);
})
*/
// function say(something){
// console.log(something);
// }
// function exec(func,arg){
// func(arg);
// }
// exec(say,'Hi there');
window.setTimeout((something) => {
console.log(something);
},3000,'Hi there');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment