Created
August 7, 2021 23:18
-
-
Save dnlsyfq/f5e38df9bf8e4abe7c02c1c1ec482f56 to your computer and use it in GitHub Desktop.
JavaScript and the DOM // source https://jsbin.com/lutarod
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> | |
</div> | |
<script src="app.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 addItem = document.querySelector('input.addItemInput'); | |
const addItemButton = document.querySelector('button.addItemButton'); | |
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 + ':'; | |
}) | |
p.title = 'List of description'; | |
addItemButton.addEventListener('click',() => { | |
let li = document.createElement('li'); | |
li.textContent = addItemInput.value; | |
}); | |
</script> | |
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html> | |
<html> | |
<head> | |
<title>JavaScript and the DOM</title> | |
<link rel="stylesheet" href="style.css"> | |
</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> | |
</div> | |
<script src="app.js"><\/script> | |
</body> | |
</html> | |
</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 addItem = document.querySelector('input.addItemInput'); | |
const addItemButton = document.querySelector('button.addItemButton'); | |
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 + ':'; | |
}) | |
p.title = 'List of description'; | |
addItemButton.addEventListener('click',() => { | |
let li = document.createElement('li'); | |
li.textContent = addItemInput.value; | |
});</script></body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 addItem = document.querySelector('input.addItemInput'); | |
const addItemButton = document.querySelector('button.addItemButton'); | |
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 + ':'; | |
}) | |
p.title = 'List of description'; | |
addItemButton.addEventListener('click',() => { | |
let li = document.createElement('li'); | |
li.textContent = addItemInput.value; | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment