Created
August 8, 2021 13:45
-
-
Save dnlsyfq/c7c02887715768d9f92ab1b92038a9c3 to your computer and use it in GitHub Desktop.
JavaScript and the DOM // source https://jsbin.com/vokupoz
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 | |
| <button class="up">Up</button> | |
| <button class="down">Down</button> | |
| <button class="remove">Remove</button> | |
| </li> | |
| <li>amethyst | |
| <button class="up">Up</button> | |
| <button class="down">Down</button> | |
| <button class="remove">Remove</button> | |
| </li> | |
| <li>lavender | |
| <button class="up">Up</button> | |
| <button class="down">Down</button> | |
| <button class="remove">Remove</button> | |
| </li> | |
| <li>plums | |
| <button class="up">Up</button> | |
| <button class="down">Down</button> | |
| <button class="remove">Remove</button> | |
| </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'); | |
| 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; | |
| 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'); | |
| 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; | |
| 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> | |
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 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'); | |
| 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; | |
| 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