Created
March 26, 2018 02:45
-
-
Save timcarl/873c36bfdd5618f95ce5bec60933c94b to your computer and use it in GitHub Desktop.
JS Bin // source https://jsbin.com/modowoy
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> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| #para02 { | |
| position:relative; | |
| background-color: ; | |
| width: 300px; | |
| height: 150px; | |
| } | |
| #h1_tag { | |
| display: block; | |
| border: 2px solid #000; | |
| padding: 10px; | |
| margin: auto; | |
| width: 30%; | |
| text-align: center; | |
| background-color: skyblue; | |
| } | |
| div b { | |
| color: red; | |
| } | |
| div em { | |
| color: blue; | |
| } | |
| div p { | |
| position: relative; | |
| letter-spacing: 0.1em | |
| overflow: auto; | |
| background: #f9ffe6; | |
| text-decoration: none; | |
| padding: 10px; | |
| } | |
| button { | |
| display: block; | |
| margin: auto; | |
| } | |
| button:hover { | |
| color: orange; | |
| background-color: #000; | |
| } | |
| p { | |
| display: block; | |
| width: 50%; | |
| margin: auto; | |
| padding: 15px; | |
| min-width: 365px; | |
| } | |
| .container { | |
| background-color: #eee; | |
| display: block; | |
| width: 50%; | |
| margin: auto; | |
| padding: 15px; | |
| min-width: 365px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1 id="h1_tag">The id attribute</h1> | |
| <p id="demo"></p> | |
| <div class="container"> | |
| <p id="para01">The <a href="https://www.w3schools.com/tags/tag_a.asp"><b>id</b></a> attribute specifies a <em>unique</em> | |
| id for the HTML element { p } inside this body. It must be unique. No two can be alike.</p> | |
| </div> | |
| <div> | |
| <button id="btn2" onclick="bar()">Press me too!</button> | |
| </div> | |
| <div class="container"> | |
| <p id="para02"> | |
| Inside the body is a { p } element with an id attibute with a | |
| value of "demo". The string literal "demo" could be anything you wish to name | |
| it. The id attributes value can be used by both Javascript and CSS to perform tasks. | |
| </p> | |
| </div> | |
| <button onclick="foo()">Try me</button> | |
| <script> | |
| </script> | |
| <script id="jsbin-javascript"> | |
| function foo() { | |
| var x = document.querySelector("h1"); | |
| x.style.backgroundColor = "red"; | |
| } | |
| function bar() { | |
| let y = document.querySelector('body'); | |
| y.style.backgroundColor = 'gray'; | |
| } | |
| </script> | |
| <script id="jsbin-source-css" type="text/css">body { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| #para02 { | |
| position:relative; | |
| background-color: ; | |
| width: 300px; | |
| height: 150px; | |
| } | |
| #h1_tag { | |
| display: block; | |
| border: 2px solid #000; | |
| padding: 10px; | |
| margin: auto; | |
| width: 30%; | |
| text-align: center; | |
| background-color: skyblue; | |
| } | |
| div b { | |
| color: red; | |
| } | |
| div em { | |
| color: blue; | |
| } | |
| div p { | |
| position: relative; | |
| letter-spacing: 0.1em | |
| overflow: auto; | |
| background: #f9ffe6; | |
| text-decoration: none; | |
| padding: 10px; | |
| } | |
| button { | |
| display: block; | |
| margin: auto; | |
| } | |
| button:hover { | |
| color: orange; | |
| background-color: #000; | |
| } | |
| p { | |
| display: block; | |
| width: 50%; | |
| margin: auto; | |
| padding: 15px; | |
| min-width: 365px; | |
| } | |
| .container { | |
| background-color: #eee; | |
| display: block; | |
| width: 50%; | |
| margin: auto; | |
| padding: 15px; | |
| min-width: 365px; | |
| }</script> | |
| <script id="jsbin-source-javascript" type="text/javascript">function foo() { | |
| var x = document.querySelector("h1"); | |
| x.style.backgroundColor = "red"; | |
| } | |
| function bar() { | |
| let y = document.querySelector('body'); | |
| y.style.backgroundColor = 'gray'; | |
| } | |
| </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
| body { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| #para02 { | |
| position:relative; | |
| background-color: ; | |
| width: 300px; | |
| height: 150px; | |
| } | |
| #h1_tag { | |
| display: block; | |
| border: 2px solid #000; | |
| padding: 10px; | |
| margin: auto; | |
| width: 30%; | |
| text-align: center; | |
| background-color: skyblue; | |
| } | |
| div b { | |
| color: red; | |
| } | |
| div em { | |
| color: blue; | |
| } | |
| div p { | |
| position: relative; | |
| letter-spacing: 0.1em | |
| overflow: auto; | |
| background: #f9ffe6; | |
| text-decoration: none; | |
| padding: 10px; | |
| } | |
| button { | |
| display: block; | |
| margin: auto; | |
| } | |
| button:hover { | |
| color: orange; | |
| background-color: #000; | |
| } | |
| p { | |
| display: block; | |
| width: 50%; | |
| margin: auto; | |
| padding: 15px; | |
| min-width: 365px; | |
| } | |
| .container { | |
| background-color: #eee; | |
| display: block; | |
| width: 50%; | |
| margin: auto; | |
| padding: 15px; | |
| min-width: 365px; | |
| } |
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
| function foo() { | |
| var x = document.querySelector("h1"); | |
| x.style.backgroundColor = "red"; | |
| } | |
| function bar() { | |
| let y = document.querySelector('body'); | |
| y.style.backgroundColor = 'gray'; | |
| } | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Just writing code for fun.