TeamTreehouse course - Interactive Webpage with JavaScript

Creating interactive using JavaScript from the provided HTML and CSS

<!DOCTYPE html>
<html>
  <head>
    <title>Todo App</title>
    <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" charset="utf-8">    
  </head>
  <body>
    <div class="container">
      <p>
        <label for="new-task">Add Item</label>
        <input id="new-task" type="text">
        <button>Add</button>
      </p>
      
      <h3>Todo</h3>
      <ul id="incomplete-tasks">
        <li>
          <input type="checkbox">
          <label>Pay Bills</label>
          <input type="text">
          <button class="edit">Edit</button>
          <button class="delete">Delete</button>
        </li>
        <li class="editMode">
          <input type="checkbox">
          <label>Go Shopping</label>
          <input type="text" value="Go Shopping">
          <button class="edit">Edit</button>
          <button class="delete">Delete</button>
        </li>
        
      </ul>
      
      <h3>Completed</h3>
      <ul id="completed-tasks">
        <li>
          <input type="checkbox" checked>
          <label>See the Doctor</label>
          <input type="text">
          <button class="edit">Edit</button>
          <button class="delete">Delete</button>
        </li>
      </ul>
    </div>

    <script type="text/javascript" src="js/app.js"></script>

  </body>
</html>

First plan how your JavaScript will work with the HTML

// Problem: User interaction does not provide result
// Solution: Add interactivity so the user can manage daily task

// Planning
// Add a new task
  // When the button is pressed we want to create a task
  // Create a new list item with the text from #new-task:
    // Input checkbox [checkbox]
    // Label
    // input [text]
    // button with class edit
    // button with class delete
    // Each of this elements, needs to be modified and appended

// Edit an existing task
  // When the edit button is pressed
  // If the class of the parent is editMode
  // Switch from the class editMode
  // Label text become the input's value
  // else
  // Switch to editMode
  // Input value becomes the label's text
  // this means toggle editMode on the parent

// Delete an existing task
  // When the delete button is pressed
  // Remove the parent list item from the ul

// Mark a task as complete
  // When the checkbox is checked
  // We want to append the task list item to the #completed-task
// Mark a task as incomplete
  // When the checkbox is unchecked
  // Append the task list to the #incomplete-tasks

37celsius/TeamTreehoue_InteractivePage_withJS.md

Creating interactive using JavaScript from the provided HTML and CSS

First plan how your JavaScript will work with the HTML