Notepad

by Pranab Dey

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button class="create btn btn-primary">Create NotePad</button>
  <div id="space"></div>

CSS

body{
	padding: 10px;
}
#space{
  width: 100%;
  height: 100%;
  margin-top: 20px;
}
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
.demo{
  background: lightskyblue;
  color: black;
  outline: none;
  border: 0px;
  box-shadow: 2px 2px 10px #555;
  margin: 0px;
  padding-top: 30px !important;
  padding: 6px;
  font-family: Helvetica;
}
.div{
  display: inline-flex;
  margin: 6px 8px 6px 8px;
  position: relative;
}
.heading{
  position: absolute;
  background: #6fb6e2;
  font-weight: 600;
  padding: 2px;
	left:0;right: 0;
	border-bottom: 1px solid #333;
}
.close{
    border-radius: 50px;
    background: #39464e !important;
    color: #e6e9eb !important;
    border: 2px solid #39464e !important;
    cursor: pointer !important;
    outline: 0px;
    padding: 1px 4px !important;
    opacity: 1 !important;
    font-size: 16px !important;
}
.close:hover{
	background: #dc4141 !important;
	border: 2px solid #dc4141 !important;
}

JavaScript

var create = document.getElementsByTagName("button")[0],
    space = document.getElementById("space"),
    //span = document.getElementsByTagName("span")[0],
    count = 0;
create.addEventListener("click",function(){
count++;

var div = document.createElement("div");
div.setAttribute("class","div");

var span = document.createElement("span");
span.setAttribute("class","heading");
var text = document.createTextNode("► Notepad " + count +" ");
span.appendChild(text);

var button = document.createElement("button");
button.addEventListener("mousedown",function(){
//div.style.display = "none";
if(window.confirm("Are you sure you want to delete this Note?")){
	div.style.display = "none";
}
else{
	return false;
}
})
var close = document.createTextNode("x");
button.setAttribute("class","close");
button.appendChild(close);
span.appendChild(button);

  var c = document.createElement("textarea");
  c.setAttribute("autofoucs","autofoucs");
  c.setAttribute("class", "demo");
  c.setAttribute("cols", "20");
  c.setAttribute("rows", "10");
  
  div.appendChild(c);div.appendChild(span);
  space.appendChild(div);
});