Skip to content

Instantly share code, notes, and snippets.

@timcarl

timcarl/index.html

Created March 26, 2018 02:45
Show Gist options
  • Save timcarl/873c36bfdd5618f95ce5bec60933c94b to your computer and use it in GitHub Desktop.
Save timcarl/873c36bfdd5618f95ce5bec60933c94b 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;
}
#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>
Raw
jsbin.modowoy.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;
}
Raw
jsbin.modowoy.js
function foo() {
var x = document.querySelector("h1");
x.style.backgroundColor = "red";
}
function bar() {
let y = document.querySelector('body');
y.style.backgroundColor = 'gray';
}
@timcarl
Copy link
Author

timcarl commented Mar 26, 2018

Just writing code for fun.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment