Skip to content

Instantly share code, notes, and snippets.

@tzvety

tzvety/index.html

Created March 2, 2017 05:01
Show Gist options
  • Save tzvety/703e994cfb1047426ca7873ceb385680 to your computer and use it in GitHub Desktop.
Save tzvety/703e994cfb1047426ca7873ceb385680 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/zihahi
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 {
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>
Raw
jsbin.zihahi.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;}
Raw
jsbin.zihahi.js
// 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