Created
March 2, 2017 05:01
-
-
Save tzvety/703e994cfb1047426ca7873ceb385680 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
<!DOCTYPE html> | |
<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; | |
width: 560px; | |
position:relative; | |
margin: 0 auto; | |
} | |
.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; | |
width: 80%; | |
} | |
textarea {resize: none;} | |
section:first-child {border-bottom: 1px solid #ccc; padding: 30px} | |
article { margin: 50px; border: 1px solid #ccc;} | |
h3,p {margin:20px} | |
.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 === '') { | |
alert("Please, add title!"); | |
} else if (text === '') { | |
alert("Please, add content!"); | |
} else { | |
document.getElementById("title").value = ""; | |
document.getElementById("text").value = ""; | |
document.getElementById("tasks").appendChild(article).appendChild(heading); | |
article.appendChild(paragraph); | |
} | |
var span = document.createElement("span"); | |
var delText = document.createTextNode("Delete"); | |
span.className = "del"; | |
span.appendChild(delText); | |
article.appendChild(span); | |
for (i = 0; i < delTask.length; i++) { | |
delTask[i].onclick = function() { | |
var art = this.parentElement; | |
art.style.display = "none"; | |
} | |
} | |
} | |
// Hide task on click Delete | |
var delTask = document.getElementsByClassName("del"); | |
var i; | |
for (i = 0; i < delTask.length; i++) { | |
delTask[i].onclick = function() { | |
var art = this.parentElement; | |
art.style.display = "none"; | |
} | |
} | |
</script> | |
<script id="jsbin-source-css" type="text/css">body { | |
background: #dfdfdf; | |
padding: 20px; | |
font:12px Arial, sans-serif; | |
color: #898989 | |
} | |
.content { | |
background: #fff; | |
width: 560px; | |
position:relative; | |
margin: 0 auto; | |
} | |
.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; | |
width: 80%; | |
} | |
textarea {resize: none;} | |
section:first-child {border-bottom: 1px solid #ccc; padding: 30px} | |
article { margin: 50px; border: 1px solid #ccc;} | |
h3,p {margin:20px} | |
.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 === '') { | |
alert("Please, add title!"); | |
} else if (text === '') { | |
alert("Please, add content!"); | |
} else { | |
document.getElementById("title").value = ""; | |
document.getElementById("text").value = ""; | |
document.getElementById("tasks").appendChild(article).appendChild(heading); | |
article.appendChild(paragraph); | |
} | |
var span = document.createElement("span"); | |
var delText = document.createTextNode("Delete"); | |
span.className = "del"; | |
span.appendChild(delText); | |
article.appendChild(span); | |
for (i = 0; i < delTask.length; i++) { | |
delTask[i].onclick = function() { | |
var art = this.parentElement; | |
art.style.display = "none"; | |
} | |
} | |
} | |
// Hide task on click Delete | |
var delTask = document.getElementsByClassName("del"); | |
var i; | |
for (i = 0; i < delTask.length; i++) { | |
delTask[i].onclick = function() { | |
var art = this.parentElement; | |
art.style.display = "none"; | |
} | |
} | |
</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; | |
width: 560px; | |
position:relative; | |
margin: 0 auto; | |
} | |
.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; | |
width: 80%; | |
} | |
textarea {resize: none;} | |
section:first-child {border-bottom: 1px solid #ccc; padding: 30px} | |
article { margin: 50px; border: 1px solid #ccc;} | |
h3,p {margin:20px} | |
.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 === '') { | |
alert("Please, add title!"); | |
} else if (text === '') { | |
alert("Please, add content!"); | |
} else { | |
document.getElementById("title").value = ""; | |
document.getElementById("text").value = ""; | |
document.getElementById("tasks").appendChild(article).appendChild(heading); | |
article.appendChild(paragraph); | |
} | |
var span = document.createElement("span"); | |
var delText = document.createTextNode("Delete"); | |
span.className = "del"; | |
span.appendChild(delText); | |
article.appendChild(span); | |
for (i = 0; i < delTask.length; i++) { | |
delTask[i].onclick = function() { | |
var art = this.parentElement; | |
art.style.display = "none"; | |
} | |
} | |
} | |
// Hide task on click Delete | |
var delTask = document.getElementsByClassName("del"); | |
var i; | |
for (i = 0; i < delTask.length; i++) { | |
delTask[i].onclick = function() { | |
var art = this.parentElement; | |
art.style.display = "none"; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment