Created
August 8, 2021 12:51
-
-
Save dnlsyfq/9e7c2e30b5b09359591a18fa9b4d1c9e 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<button>Remove</button></li> | |
| <li>amethyst<button>Remove</button></li> | |
| <li>lavender<button>Remove</button></li> | |
| <li>plums<button>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"> | |
| 'use strict'; | |
| var toggleList = document.getElementById('toggleList'); | |
| var listDiv = document.querySelector('.list'); | |
| var descriptionInput = document.querySelector('input.description'); | |
| var descriptionP = document.querySelector('p.description'); | |
| var descriptionButton = document.querySelector('button.description'); | |
| var addItemInput = document.querySelector('input.addItemInput'); | |
| var addItemButton = document.querySelector('.addItemButton'); | |
| var 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(); | |
| // }) | |
| // } | |
| var listUl = listDiv.querySelector('ul'); | |
| listUl.addEventListener('click', function (event) { | |
| if (event.target.tagName == 'BUTTON') { | |
| var li = event.target.parentNode; | |
| var ul = li.parentNode; | |
| ul.removeChild(li); | |
| } | |
| }); | |
| // listDiv.addEventListener('mouseout',(event) => { | |
| // if(event.target.tagName == 'LI'){ | |
| // event.target.textContent = event.target.textContent.toLowerCase(); | |
| // } | |
| // }); | |
| toggleList.addEventListener('click', function () { | |
| 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', function () { | |
| descriptionP.textContent = descriptionInput.value + ':'; | |
| descriptionInput.value = ''; | |
| }); | |
| addItemButton.addEventListener('click', function () { | |
| var ul = document.getElementsByTagName('ul')[0]; | |
| var li = document.createElement('li'); | |
| li.textContent = addItemInput.value; | |
| ul.appendChild(li); | |
| addItemInput.value = ''; | |
| }); | |
| removeItemButton.addEventListener('click', function () { | |
| var ul = document.getElementsByTagName('ul')[0]; | |
| var 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(function (something) { | |
| console.log(something); | |
| }, 3000, 'Hi there'); | |
| </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<button>Remove</button></li> | |
| <li>amethyst<button>Remove</button></li> | |
| <li>lavender<button>Remove</button></li> | |
| <li>plums<button>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> | |
| </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 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'){ | |
| let li = event.target.parentNode; | |
| let ul = li.parentNode; | |
| ul.removeChild(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
| 'use strict'; | |
| var toggleList = document.getElementById('toggleList'); | |
| var listDiv = document.querySelector('.list'); | |
| var descriptionInput = document.querySelector('input.description'); | |
| var descriptionP = document.querySelector('p.description'); | |
| var descriptionButton = document.querySelector('button.description'); | |
| var addItemInput = document.querySelector('input.addItemInput'); | |
| var addItemButton = document.querySelector('.addItemButton'); | |
| var 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(); | |
| // }) | |
| // } | |
| var listUl = listDiv.querySelector('ul'); | |
| listUl.addEventListener('click', function (event) { | |
| if (event.target.tagName == 'BUTTON') { | |
| var li = event.target.parentNode; | |
| var ul = li.parentNode; | |
| ul.removeChild(li); | |
| } | |
| }); | |
| // listDiv.addEventListener('mouseout',(event) => { | |
| // if(event.target.tagName == 'LI'){ | |
| // event.target.textContent = event.target.textContent.toLowerCase(); | |
| // } | |
| // }); | |
| toggleList.addEventListener('click', function () { | |
| 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', function () { | |
| descriptionP.textContent = descriptionInput.value + ':'; | |
| descriptionInput.value = ''; | |
| }); | |
| addItemButton.addEventListener('click', function () { | |
| var ul = document.getElementsByTagName('ul')[0]; | |
| var li = document.createElement('li'); | |
| li.textContent = addItemInput.value; | |
| ul.appendChild(li); | |
| addItemInput.value = ''; | |
| }); | |
| removeItemButton.addEventListener('click', function () { | |
| var ul = document.getElementsByTagName('ul')[0]; | |
| var 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(function (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