Skip to content

Instantly share code, notes, and snippets.

@dnlsyfq

dnlsyfq/index.html

Created August 7, 2021 10:02
Show Gist options
  • Save dnlsyfq/2f466612f59e13e3c528c1362fa56975 to your computer and use it in GitHub Desktop.
Save dnlsyfq/2f466612f59e13e3c528c1362fa56975 to your computer and use it in GitHub Desktop.
Download ZIP
JavaScript and the DOM // source https://jsbin.com/jasamuz
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript and the DOM</title>
<link rel="stylesheet" href="css/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>
<p title="label">Things that are purple:</p>
<ul>
<li>grapes</li>
<li class="error-not-purple">oranges</li>
<li>amethyst</li>
<li>lavender</li>
<li class="error-not-purple">fire trucks</li>
<li class="error-not-purple">snow</li>
<li>plums</li>
</ul>
<script id="jsbin-javascript">
// const myHeading = document.getElementsByTagName('h1')[0];
// const myButton = document.getElementById('myButton');
// const myText = document.getElementById('myText');
// myButton.addEventListener('click',() => {
// myHeading.style.color = myText.value;
// });
// const myList = document.getElementsByTagName('li')
// myList[2].style.color = 'purple';
const myList = document.getElementsByTagName('li')
for(let i = 0; i < myList.length; i ++){
myList[i].style.color = 'purple';
}
const errorNotPurple = document.querySelectorAll("error-not-purple");
for(let i = 0; i < errorNotPurple.length; i++){
errorNotPurple[i].style.color = 'red';
}
const evens = document.querySelectorAll('li:nth-child(even)');
for(let i = 0; i < evens.length; i ++){
evens[i].style.color = 'red';
}
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<title>JavaScript and the DOM</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1 id="myHeading">JavaScript and the DOM</h1>
<p>Making a web page interactive</p>
<p title="label">Things that are purple:</p>
<ul>
<li>grapes</li>
<li class="error-not-purple">oranges</li>
<li>amethyst</li>
<li>lavender</li>
<li class="error-not-purple">fire trucks</li>
<li class="error-not-purple">snow</li>
<li>plums</li>
</ul>
</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 myHeading = document.getElementsByTagName('h1')[0];
// const myButton = document.getElementById('myButton');
// const myText = document.getElementById('myText');
// myButton.addEventListener('click',() => {
// myHeading.style.color = myText.value;
// });
// const myList = document.getElementsByTagName('li')
// myList[2].style.color = 'purple';
const myList = document.getElementsByTagName('li')
for(let i = 0; i < myList.length; i ++){
myList[i].style.color = 'purple';
}
const errorNotPurple = document.querySelectorAll("error-not-purple");
for(let i = 0; i < errorNotPurple.length; i++){
errorNotPurple[i].style.color = 'red';
}
const evens = document.querySelectorAll('li:nth-child(even)');
for(let i = 0; i < evens.length; i ++){
evens[i].style.color = 'red';
}</script></body>
</html>
Raw
jsbin.jasamuz.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.jasamuz.js
// const myHeading = document.getElementsByTagName('h1')[0];
// const myButton = document.getElementById('myButton');
// const myText = document.getElementById('myText');
// myButton.addEventListener('click',() => {
// myHeading.style.color = myText.value;
// });
// const myList = document.getElementsByTagName('li')
// myList[2].style.color = 'purple';
const myList = document.getElementsByTagName('li')
for(let i = 0; i < myList.length; i ++){
myList[i].style.color = 'purple';
}
const errorNotPurple = document.querySelectorAll("error-not-purple");
for(let i = 0; i < errorNotPurple.length; i++){
errorNotPurple[i].style.color = 'red';
}
const evens = document.querySelectorAll('li:nth-child(even)');
for(let i = 0; i < evens.length; i ++){
evens[i].style.color = 'red';
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment