Created
March 1, 2017 21:15
-
-
Save tzvety/45008619b9266a45e440d2cc480fd306 to your computer and use it in GitHub Desktop.
JS Bin // source http://jsbin.com/zihahi
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
<p><!DOCTYPE html></p> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width"> | |
<title>JS Bin</title> | |
<style id="jsbin-css"> | |
body { | |
background: #dfdfdf; | |
padding: 20px; | |
font:12px Arial, sans-serif; | |
color: #898989 | |
} | |
.content { | |
background: #fff; | |
} | |
.border { | |
border: 1px solid #ccc; | |
} | |
.element { | |
display: block; | |
clear: both; | |
padding: 20px; | |
} | |
input, textarea { | |
float: right; | |
box-sizing: border-box; | |
box-shadow: 1px 1px 4px #ebebeb; | |
-moz-box-shadow: 1px 1px 4px #ebebeb; | |
-webkit-box-shadow: 1px 1px 4px #ebebeb; | |
padding: 7px; | |
outline: none; | |
} | |
textarea { | |
resize: none; | |
width: 80%; | |
} | |
input { | |
width: 80%; | |
} | |
section:first-child { | |
border-bottom: 1px solid #ccc; | |
padding: 30px | |
} | |
article { | |
margin: 50px; | |
border: 1px solid #ccc; | |
} | |
h3, p, span { | |
padding: 0 20px | |
font: 12px; | |
} | |
.del { | |
display: block; | |
text-transform: uppercase; | |
font-size: 11px; | |
color: #C41A16; | |
text-align: right; | |
margin-right:0; | |
padding: 10px; | |
border-top: 1px solid #ccc; | |
} | |
.del:hover { | |
cursor: pointer; | |
text-decoration: underline; | |
} | |
.btn{ | |
border: none; | |
padding: 8px 25px 8px 25px; | |
background: #2f81f1; | |
color: #fff; | |
box-shadow: 1px 1px 4px #dadada; | |
-moz-box-shadow: 1px 1px 4px #dadada; | |
-webkit-box-shadow: 1px 1px 4px #dadada; | |
border: 1px solid #137333; | |
float: right; | |
text-transform: uppercase; | |
font-size: 11px; | |
} | |
.btn:hover{ | |
background: #1373fe; | |
color: #fff; | |
cursor: pointer; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="content" class="content border"> | |
<section> | |
<div class="element"> | |
<label for="title">Title</label> | |
<input type="text" id="title" class="border"> | |
</div> | |
<div class="element"> | |
<label for="text">Content</label> | |
<textarea id="text" rows="6" class="border"></textarea> | |
</div> | |
<div class="element"> | |
<span onclick="newTask()" class="btn">Add Task</span> | |
</div> | |
</section> | |
<section id="tasks"> | |
<article> | |
<h3>Lorem ipsum dolor sit amet</h3> | |
<p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit | |
amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</p> | |
<span class="del">Delete</span> | |
</article> | |
</section> | |
</div> | |
<script id="jsbin-javascript"> | |
// Create a new task | |
function newTask() { | |
var title = document.getElementById("title").value; | |
var text = document.getElementById("text").value; | |
var article = document.createElement("article"); | |
var heading = document.createElement("h3"); | |
var paragraph = document.createElement("p"); | |
var ttl = document.createTextNode(title); | |
heading.appendChild(ttl); | |
var txt = document.createTextNode(text); | |
paragraph.appendChild(txt); | |
if (title === '' || text === '') { | |
alert("Please, add title and content"); | |
} else { | |
document.getElementById("tasks").appendChild(article).appendChild(heading); | |
article.appendChild(paragraph); | |
} | |
document.getElementById("title").value = ""; | |
document.getElementById("text").value = ""; | |
var span = document.createElement("span"); | |
var delText = document.createTextNode("Delete"); | |
span.className = "del"; | |
span.appendChild(delText); | |
article.appendChild(span); | |
} | |
</script> | |
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width"> | |
<title>JS Bin</title> | |
</head> | |
<body> | |
<div id="content" class="content border"> | |
<section> | |
<div class="element"> | |
<label for="title">Title</label> | |
<input type="text" id="title" class="border"> | |
</div> | |
<div class="element"> | |
<label for="text">Content</label> | |
<textarea id="text" rows="6" class="border"></textarea> | |
</div> | |
<div class="element"> | |
<span onclick="newTask()" class="btn">Add Task</span> | |
</div> | |
</section> | |
<section id="tasks"> | |
<article> | |
<h3>Lorem ipsum dolor sit amet</h3> | |
<p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit | |
amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</p> | |
<span class="del">Delete</span> | |
</article> | |
</section> | |
</div> | |
</body> | |
</html></script> | |
<script id="jsbin-source-css" type="text/css">body { | |
background: #dfdfdf; | |
padding: 20px; | |
font:12px Arial, sans-serif; | |
color: #898989 | |
} | |
.content { | |
background: #fff; | |
} | |
.border { | |
border: 1px solid #ccc; | |
} | |
.element { | |
display: block; | |
clear: both; | |
padding: 20px; | |
} | |
input, textarea { | |
float: right; | |
box-sizing: border-box; | |
box-shadow: 1px 1px 4px #ebebeb; | |
-moz-box-shadow: 1px 1px 4px #ebebeb; | |
-webkit-box-shadow: 1px 1px 4px #ebebeb; | |
padding: 7px; | |
outline: none; | |
} | |
textarea { | |
resize: none; | |
width: 80%; | |
} | |
input { | |
width: 80%; | |
} | |
section:first-child { | |
border-bottom: 1px solid #ccc; | |
padding: 30px | |
} | |
article { | |
margin: 50px; | |
border: 1px solid #ccc; | |
} | |
h3, p, span { | |
padding: 0 20px | |
font: 12px; | |
} | |
.del { | |
display: block; | |
text-transform: uppercase; | |
font-size: 11px; | |
color: #C41A16; | |
text-align: right; | |
margin-right:0; | |
padding: 10px; | |
border-top: 1px solid #ccc; | |
} | |
.del:hover { | |
cursor: pointer; | |
text-decoration: underline; | |
} | |
.btn{ | |
border: none; | |
padding: 8px 25px 8px 25px; | |
background: #2f81f1; | |
color: #fff; | |
box-shadow: 1px 1px 4px #dadada; | |
-moz-box-shadow: 1px 1px 4px #dadada; | |
-webkit-box-shadow: 1px 1px 4px #dadada; | |
border: 1px solid #137333; | |
float: right; | |
text-transform: uppercase; | |
font-size: 11px; | |
} | |
.btn:hover{ | |
background: #1373fe; | |
color: #fff; | |
cursor: pointer; | |
} | |
</script> | |
<script id="jsbin-source-javascript" type="text/javascript">// Create a new task | |
function newTask() { | |
var title = document.getElementById("title").value; | |
var text = document.getElementById("text").value; | |
var article = document.createElement("article"); | |
var heading = document.createElement("h3"); | |
var paragraph = document.createElement("p"); | |
var ttl = document.createTextNode(title); | |
heading.appendChild(ttl); | |
var txt = document.createTextNode(text); | |
paragraph.appendChild(txt); | |
if (title === '' || text === '') { | |
alert("Please, add title and content"); | |
} else { | |
document.getElementById("tasks").appendChild(article).appendChild(heading); | |
article.appendChild(paragraph); | |
} | |
document.getElementById("title").value = ""; | |
document.getElementById("text").value = ""; | |
var span = document.createElement("span"); | |
var delText = document.createTextNode("Delete"); | |
span.className = "del"; | |
span.appendChild(delText); | |
article.appendChild(span); | |
}</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 { | |
background: #dfdfdf; | |
padding: 20px; | |
font:12px Arial, sans-serif; | |
color: #898989 | |
} | |
.content { | |
background: #fff; | |
} | |
.border { | |
border: 1px solid #ccc; | |
} | |
.element { | |
display: block; | |
clear: both; | |
padding: 20px; | |
} | |
input, textarea { | |
float: right; | |
box-sizing: border-box; | |
box-shadow: 1px 1px 4px #ebebeb; | |
-moz-box-shadow: 1px 1px 4px #ebebeb; | |
-webkit-box-shadow: 1px 1px 4px #ebebeb; | |
padding: 7px; | |
outline: none; | |
} | |
textarea { | |
resize: none; | |
width: 80%; | |
} | |
input { | |
width: 80%; | |
} | |
section:first-child { | |
border-bottom: 1px solid #ccc; | |
padding: 30px | |
} | |
article { | |
margin: 50px; | |
border: 1px solid #ccc; | |
} | |
h3, p, span { | |
padding: 0 20px | |
font: 12px; | |
} | |
.del { | |
display: block; | |
text-transform: uppercase; | |
font-size: 11px; | |
color: #C41A16; | |
text-align: right; | |
margin-right:0; | |
padding: 10px; | |
border-top: 1px solid #ccc; | |
} | |
.del:hover { | |
cursor: pointer; | |
text-decoration: underline; | |
} | |
.btn{ | |
border: none; | |
padding: 8px 25px 8px 25px; | |
background: #2f81f1; | |
color: #fff; | |
box-shadow: 1px 1px 4px #dadada; | |
-moz-box-shadow: 1px 1px 4px #dadada; | |
-webkit-box-shadow: 1px 1px 4px #dadada; | |
border: 1px solid #137333; | |
float: right; | |
text-transform: uppercase; | |
font-size: 11px; | |
} | |
.btn:hover{ | |
background: #1373fe; | |
color: #fff; | |
cursor: pointer; | |
} |
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
// Create a new task | |
function newTask() { | |
var title = document.getElementById("title").value; | |
var text = document.getElementById("text").value; | |
var article = document.createElement("article"); | |
var heading = document.createElement("h3"); | |
var paragraph = document.createElement("p"); | |
var ttl = document.createTextNode(title); | |
heading.appendChild(ttl); | |
var txt = document.createTextNode(text); | |
paragraph.appendChild(txt); | |
if (title === '' || text === '') { | |
alert("Please, add title and content"); | |
} else { | |
document.getElementById("tasks").appendChild(article).appendChild(heading); | |
article.appendChild(paragraph); | |
} | |
document.getElementById("title").value = ""; | |
document.getElementById("text").value = ""; | |
var span = document.createElement("span"); | |
var delText = document.createTextNode("Delete"); | |
span.className = "del"; | |
span.appendChild(delText); | |
article.appendChild(span); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment