Skip to content

Instantly share code, notes, and snippets.

@justyn-clark

justyn-clark/index.html

Created February 20, 2017 04:54
Show Gist options
  • Save justyn-clark/0ed352dfe0921bb48f09ba1f24594dad to your computer and use it in GitHub Desktop.
Save justyn-clark/0ed352dfe0921bb48f09ba1f24594dad to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin [add your bin description] // source http://jsbin.com/sicaku
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[add your bin description]">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
.items {
color: blue;
font-size: 2rem;
text-transform: uppercase;
font-weight: bold;
}
.image-container {
width: 100%;
max-width: 900px;
margin: auto;
}
.image-container .images {
backbground-color: orange;
padding: .3rem;
}
</style>
</head>
<body>
<p id='para'>hello</p>
<div class="image-container">
<img class="images" src="http://placehold.it/200x200">
<img class="images" src="http://placehold.it/200x200">
<img class="images" src="http://placehold.it/200x200">
<img class="images" src="http://placehold.it/200x200">
<img class="images" src="http://placehold.it/200x200">
<img class="images" src="http://placehold.it/200x200">
<img class="images" src="http://placehold.it/200x200">
<img class="images" src="http://placehold.it/200x200">
<img class="images" src="http://placehold.it/200x200">
<img class="images" src="http://placehold.it/200x200">
<img class="images" src="http://placehold.it/200x200">
<img class="images" src="http://placehold.it/200x200">
</div>
<script id="jsbin-javascript">
const arr = [1,2,3,4]
arr.reverse().push('name');
console.log(arr);
const divs = document.createElement('div');
divs.setAttribute('class','items');
const text = document.createTextNode('baby bubuh');
const para = document.getElementById('para');
divs.appendChild(text);
document.body.insertBefore(divs, para);
const images = document.querySelectorAll('.images');
var i;
for (var i = 0; i < images.length; i++) {
console.log(images[i].style.padding = ".5rem");
}
</script>
<script id="jsbin-source-css" type="text/css">.items {
color: blue;
font-size: 2rem;
text-transform: uppercase;
font-weight: bold;
}
.image-container {
width: 100%;
max-width: 900px;
margin: auto;
.images {
backbground-color: orange;
padding: .3rem;
}
}</script>
<script id="jsbin-source-javascript" type="text/javascript">const arr = [1,2,3,4]
arr.reverse().push('name');
console.log(arr);
const divs = document.createElement('div');
divs.setAttribute('class','items');
const text = document.createTextNode('baby bubuh');
const para = document.getElementById('para');
divs.appendChild(text);
document.body.insertBefore(divs, para);
const images = document.querySelectorAll('.images');
var i;
for (var i = 0; i < images.length; i++) {
console.log(images[i].style.padding = ".5rem");
}
</script></body>
</html>
Raw
jsbin.sicaku.css
.items {
color: blue;
font-size: 2rem;
text-transform: uppercase;
font-weight: bold;
}
.image-container {
width: 100%;
max-width: 900px;
margin: auto;
}
.image-container .images {
backbground-color: orange;
padding: .3rem;
}
Raw
jsbin.sicaku.js
const arr = [1,2,3,4]
arr.reverse().push('name');
console.log(arr);
const divs = document.createElement('div');
divs.setAttribute('class','items');
const text = document.createTextNode('baby bubuh');
const para = document.getElementById('para');
divs.appendChild(text);
document.body.insertBefore(divs, para);
const images = document.querySelectorAll('.images');
var i;
for (var i = 0; i < images.length; i++) {
console.log(images[i].style.padding = ".5rem");
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment