Skip to content

Instantly share code, notes, and snippets.

@timcarl

timcarl/index.html

Created March 26, 2018 02:06
Show Gist options
  • Save timcarl/20c2df78f203eacac8d9d6711c679425 to your computer and use it in GitHub Desktop.
Save timcarl/20c2df78f203eacac8d9d6711c679425 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/modowoy
Raw
index.html
<!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;
}
#h1_tag {
display: block;
border: 2px solid #000;
padding: 10px;
margin: auto;
width: 30%;
text-align: center;
background-color: skyblue;
}
div {
margin: 15px;
}
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;
}
.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 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";
}
</script>
<script id="jsbin-source-css" type="text/css">body {
margin: 0;
padding: 0;
}
#h1_tag {
display: block;
border: 2px solid #000;
padding: 10px;
margin: auto;
width: 30%;
text-align: center;
background-color: skyblue;
}
div {
margin: 15px;
}
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;
}
.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";
}
</script></body>
</html>
Raw
jsbin.modowoy.css
body {
margin: 0;
padding: 0;
}
#h1_tag {
display: block;
border: 2px solid #000;
padding: 10px;
margin: auto;
width: 30%;
text-align: center;
background-color: skyblue;
}
div {
margin: 15px;
}
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;
}
.container {
background-color: #eee;
display: block;
width: 50%;
margin: auto;
padding: 15px;
min-width: 365px;
}
Raw
jsbin.modowoy.js
function foo() {
var x = document.querySelector("h1");
x.style.backgroundColor = "red";
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment