Task Tracker

index.html

<div class="box-top">
  <div class="header">
    <h1>Task Tracker</h1>
    <h4>v2.0</h4>
  </div>
</div> <!-- end .box-top -->
  
<div class="box-bottom">
 <div class="create">
   <form>
      <h3>Create a Task</h3>
       <div>
         <label for="task">Task Name</label>
         <input type="text" id="task" name="task_name" />
       </div>
       <div>
         <label for="date">Date</label>
         <input type="text" id="date" name="date" />
       </div>
       <div>
         <label for="assigned">Assigned To</label>
         <input type="text" id="assigned" name="assigned_to" />
       </div>
       <button type="button">Submit</button>
     </form>
  </div> <!-- end .create -->
  
  <div class="existing">
    <h3>Existing Tasks</h3>
    <div class="existing_tasks">
      <ul class="tsk-lst">                  
      </ul>
    </div>
  </div> <!-- end .existing -->
  
</div> <!-- end .box-bottom -->
  

script.js

//Array of prepopulated tasks
var data = [
	{"name": "Test Task #1", "date": "12/01/2012", "assigned": "John Doe" },
	{"name": "Test Task #2", "date": "12/02/2012", "assigned": "John Doe" },
	{"name": "Test Task #3", "date": "12/03/2012", "assigned": "John Doe" },
	{"name": "Test Task #4", "date": "12/04/2012", "assigned": "John Doe" },
	{"name": "Test Task #5", "date": "12/05/2012", "assigned": "John Doe" },
	{"name": "Test Task #6", "date": "12/06/2012", "assigned": "John Doe" },
	{"name": "Test Task #7", "date": "12/07/2012", "assigned": "John Doe" }
];


//Function to change background of task if even number
function selectBackground() {
  $('.tsk-lst li:nth-child(even)').addClass('gray');
}

//Loop through task array and generate HTML list
for (var i = 0; i < data.length; i++) {
  var html = '';
  var dataName = data[i].name;
  var dataDate = data[i].date;
  var dataAssigned = data[i].assigned;
  
  html += '<li class="tsk-container clearfix"><p class="tsk-name clearfix"><strong>';
  html += dataName;
  html += '</strong></p><p class="tsk-date clearfix">';
  html += dataDate;
  html += '</p><p class="tsk-person"><strong>';
  html += dataAssigned;
  html += '</strong></p></li>';
  $(".tsk-lst").append(html); 
}

//When submit button is clicked
$("button").click(function() {
  //Assign input values to variables
  var taskVal = $("#task").val();
  var dateVal = $("#date").val();
  var assignedVal = $("#assigned").val();
  //Generate task list item html
  var createHTML = "";
  createHTML +='<li class="tsk-container clearfix"><p class="tsk-name clearfix"><strong>';
  createHTML += taskVal;
  createHTML += '</strong></p><p class="tsk-date clearfix">';
  createHTML += dateVal;
  createHTML += '</p><p class="tsk-person"><strong>';
  createHTML += assignedVal;
  createHTML += '</strong></p></li>';
  //Append html to existing tasks list
  $(".tsk-lst").append(createHTML); 
  //Change background of task item if even
  selectBackground();
});

//Change background of even-numbered task items
selectBackground();

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

style.css

/******************
General Styling
*******************/
html {
  border-box;
}

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }

body {
  background: #e6e6e6; 
}

/*************************
Header Styling
*************************/
.box-top {
  background: #d9d9d9;
  width: 80%;
  margin: 0 auto;
  margin-top: 50px;
  padding: 5px 5px 0 5px;
  border-top: 1px solid #FFF;
  border-right: 1px solid #FFF;
  border-left: 1px solid #FFF;
}

.header {
  margin: 0 auto;
  background: #e6e6e6;
  padding: 5px 10px;
}

.header h1 {
  margin-left: 15px;
}

.header h4 {
  margin-left: 20px;
  margin-top: -25px;
}

/**************************
Main Content Styling
**************************/
.box-bottom {
  background: #f2f2f2;
  width: 80%;
  margin: 0 auto;
  padding: 0 5px 5px 5px;
  border-bottom: 1px solid #FFF;
  border-right: 1px solid #FFF;
  border-left: 1px solid #FFF;
}

.create {
  padding-top: 20px;
  padding-left: 30px;
}

.create, .existing {
  flex: 1 50%;
  background: #FFF;
}

.existing {
  margin-bottom: 20px;
  padding-bottom: 20px;
}

.existing h3 {
  margin-left: 10px;
  padding-top: 20px;
}


/**********************
Form Styling
***********************/
form h3 {
  font-size: 20px;
  padding-bottom: 10px;
}

input[type=text] {
  background: #e6e6e6;
  width: 80%;
  padding: 10px 10px;
  border-radius: 5px;
}

#task, #date, #assigned {
  display: block;
  margin-bottom: 30px;
  margin-top: 5px; 
}

button {
  background: #404040;
  color: #FFF;
  border-radius: 5px;
  padding: 10px 15px;
  margin-bottom: 40px;
}

/*********************
Task List Styling
*********************/
.existing_tasks {
  background: #d9d9d9;
  padding: 5px;
  margin-right: 10px;
  margin-left: 10px;
  border-radius: 5px;
}

.tsk-lst {
  list-style: none;
  display: block;
  margin: 0 auto;
  background: #FFF;
  padding: 0;
}

.tsk-name, .tsk-date, .tsk-person {
  display: inline;
}

.tsk-name, .tsk-date {
  float: left;
}

.tsk-name {
  font-size: 14px;
  margin-left: 10px;
}

.tsk-date {
  font-size: 12px;
  margin-left: 5px;
  padding-top: 3px;
}

.tsk-person {
  float: right;
  font-size: 12px;
  margin-right: 10px;
  padding-top: 2px;
}

.gray {
  background: #f2f2f2;
  margin: 0 auto;
  border-left: 2px solid #FFF;
  border-right: 2px solid #FFF;
}

/***********************
Media Queries
***********************/
@media(min-width: 769px) {
 
   .box-top {
    width: 700px;
  }
  
  .box-bottom {
  width: 700px;
  margin-bottom: 50px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background: #f2f2f2;
}

  .create {
    margin-bottom: 20px;
    margin-right: 2px;
    padding-bottom: 20px;
    flex: 1 40%;
  }
  
  .existing {
    flex: 1 45%;
    margin-left: 2px;
  }
}

Task Tracker.markdown

Task Tracker

A Pen by Elaine on CodePen.

License.