ToDo list example

by jezzipin

HTML

<div class="container">
      <div class="formContainer">
          <div>
          <form name="listInputForm">
              <fieldset>
                  <label for="title">Title</label>
                  <input type="text" name="title" id="issueTitle" maxlength="100" size="50" tabindex="1">
              </fieldset>
              <fieldset>
                  <label for="content">Content</label>
                  <textarea name="content" id="issueContent" rows="4" cols="40" tabindex="2"></textarea>
              </fieldset>
              <input type="button" id="addRecord" class="button" value="ADD TASK">
          </form>
          </div>
      </div>
      <div id="contentArea" class="content"></div>
  </div>

CSS

body{
  color: #A0A0A0;
  background-color:#eeeeee;
  font-family: arial, helvetica, sans-serif;
  font-size: 14px;
}

.container{
  width: 940px;
  margin: 2% auto;
  background-color:#eeeeee;
  padding: 15px;
}

fieldset{
  border:0;
}

textarea{
  resize: none;
}

.formContainer,
.content{
  display:block;
  width: 80%;
  position: relative;
  overflow: auto;
  margin: 0 auto;
  background-color:#FFF;
  padding: 20px 10px 20px 10px;
  border: 1px solid #A0A0A0;
}

.content{
  border-top: 0;
  padding-top: 10px;
}

.formContainer label{
    display:block;
    width:10%;
    float:left;
    line-height: 40px;
    margin-left: 5%;
}

.formContainer input[type="button"]{
  float:right;
  margin-right: 6.5%;
}

.formContainer input[type="text"]{
  line-height: 30px;
}

.formContainer input[type="text"],
.formContainer textarea{
  border: 1px solid #A0A0A0;
  width: 80%;
  float: left;
  padding: 0;
  font-size: 14px;
}

.formContainer div,
.content .task{
  margin: 0 0 0 3%;
  width: 95%;
  overflow: auto;
}

.content .task .taskbody{
  margin: 6% 6% 0 6%;
  border: 1px solid #A0A0A0;
  padding: 2% 5%;
}

.deleteContainer{
  margin: 0 6%;
  padding: 2% 5%;
  text-align: right;
  border: 1px solid #A0A0A0;
  border-top: none;
}

.delete{
  color: #FF0000;
}

.delete:hover{
  text-decoration: underline;
  cursor: pointer;
}

.task h1{
  color: #555555;
  font-weight: normal;
}

.button{
 border:1px solid #25729a;
 font-size:14px;
 font-family:arial, helvetica, sans-serif;
 padding: 10px 10px 10px 10px;
 text-decoration:none;
 display:inline-block;
 text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
 color: #FFFFFF;
 background-color: #3093c7;
 background-image: linear-gradient(to bottom, #3093c7, #1c5a85);
 filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#3093c7, endColorstr=#1c5a85);
 margin-top: 15px;
 width: 150px;
}

.button:hover{
 border:1px solid #1c5675;
 background-color: #26759e;
 background-image: linear-gradient(to bottom, #26759e,...

JavaScript

var count = 1;

initialiseTodo();

function addRecord(){
  var title = document.getElementById('issueTitle');
  var issueContent = document.getElementById('issueContent');
  var contentArea = document.getElementById('contentArea');

  if(title.value.length > 0 && issueContent.value.length > 0){
    var newItem = document.createElement('div');
    newItem.id = 'task' + count++;
    newItem.className = 'task';
    newItem.innerHTML = '<div class="taskbody"><h1>' + title.value + '</h1>'+ issueContent.value + '</div><div class="deleteContainer">'
                        + '<a href="#" class="delete">DELETE</a></div>';
    contentArea.appendChild(newItem);
    assignDeleteOnclick();
    contentPanelDisplay()
  }else{
    alert('No Title or Content has been provided.');
  }

}

function deleteRecord(elem){
  elem.parentNode.parentNode.remove();
  contentPanelDisplay()
}

function assignDeleteOnclick(){
  var deleteArray = document.getElementsByClassName('delete');
    for(var i=0;i<deleteArray.length;i++){
      deleteArray[i].onclick=function() { deleteRecord(this); }
    }
}

function initialiseTodo(){
   var btn_addRecord = document.getElementById('addRecord');
   btn_addRecord.onclick = addRecord;

}