Skip to content

Instantly share code, notes, and snippets.

@tzvety

tzvety/index.html

Created March 1, 2017 21:15
Show Gist options
  • Save tzvety/45008619b9266a45e440d2cc480fd306 to your computer and use it in GitHub Desktop.
Save tzvety/45008619b9266a45e440d2cc480fd306 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/zihahi
Raw
index.html
<p>&lt;!DOCTYPE html&gt;</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>
Raw
jsbin.zihahi.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;
}
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 === '' || 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