Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

              
                <html>
  <head>
    <title>To Do App</title>
    <link href='https://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>
    <header>
    <div class="container">
        <div class="text-center">
            <div class="heading">
                <h4>To Do App</h4>
            </div>
        </div>
</header>
    <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="incompleted-tasks">
        <li>
          <input type="checkbox">
          <label>Doctor's Appointment</label>
          <input type="text">
          <button class="edit">Edit</button>
          <button class="delete">Delete</button>
        </li>
        <li class="editMode">
          <input type="checkbox">
          <label>Reading a book</label>
          <input type="text" value="Read a book">
          <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>Online Course</label>
          <input type="text">
          <button class="edit">Edit</button>
          <button class="delete">Delete</button>
        </li>
      </ul>
    </div>

      <!-- Footer -->
<div id="footer" class="container-fluid text-center">
    <div class="footer text-center">
        <a href="https://www.facebook.com/lindakovacsart" target="_blank"><span class="fa fa-facebook-f"></span> Facebook | </a>
        <a href="https://twitter.com/lindakovacsart" target="_blank"><span class="fa fa-twitter"></span> Twitter | </a>
        <a href="https://plus.google.com/u/1/112468176480762133222" target="_blank"><span class="fa fa-google-plus"></span> Google+ | </a>
        <a href="https://www.linkedin.com/in/lindakovacsart" target="_blank"><span class="fa fa-linkedin"></span> LinkedIn | </a>
        <a href="https://github.com/lindakovacs" target="_blank"><span class="fa fa-github"></span> GitHub | </a>
        <a href="https://www.freecodecamp.org/lindakovacs" target="_blank"><i class="fa fa-fire"></i>
            FreeCodeCamp | </a> <!-- class="fa fa-free-code-camp" -->
        <a href="https://codepen.io/lindakovacs" target="_blank"><i class="fa fa-codepen"></i>Codepen</a>
    </div>
    <div class="footer text-center">&copy 2018 Made with &#10084; by Linda Kovacs</div>
</div>
  </body>
</html>
              
            
!

CSS

              
                body {
  background: #3861F3;
  color: #fff;
  font-family: Lato, sans-serif;
}

header {
	padding: 3px 0;
	text-align: center;
	color: #fff;
  background-color: #000000;
  font-size: 25px;
}

.container {
  display: block;
  width: 450px;
  margin: 50px auto;
}
ul {
  margin: 0;
  padding: 0;
}
li * {
  float: left;
}
li, h3 {
  clear:both;
  list-style:none;
}
input, button {
  outline: none;
}
button {
  background: #000;
  padding: 10px;
  border: 0px;
  color: #fff;
  font-size: 15px;
  width: 60px;
  margin: 0 10px;
  font-family: Lato, sans-serif;
  border-radius: 10%;
  cursor: pointer;
}
button:hover {
  color: #888;
}
h3,
label[for='new-task'] {
  color: #fff;
  font-weight: 700;
  font-size: 20px;
  border-bottom: 2px solid #333;
  padding: 30px 0 10px;
  margin: 0;
  text-transform: uppercase;
}
input[type="text"] {
  margin: 0;
  font-size: 18px;
  line-height: 18px;
  height: 18px;
  padding: 10px;
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 6px;
  font-family: Lato, sans-serif;
  color: #888;
}
input[type="text"]:focus {
  color: #333;
}

/* New Task */
label[for='new-task'] {
  display: block;
  margin: 0 0 20px;
}
input#new-task {
  float: left;
  width: 318px;
}
p > button:hover {
  color: #0FC57C;
}

/* Task list */
li {
  overflow: hidden;
  padding: 20px 0;
  border-bottom: 1px solid #eee;
}
li > input[type="checkbox"] {
  margin: 0 10px;
  position: relative;
  top: 15px;
}
li > label {
  font-size: 18px;
  line-height: 40px;
  width: 237px;
  padding: 0 0 0 11px;
}
li >  input[type="text"] {
  width: 226px;
}
li > .delete:hover {
  color: #CF2323;
}

/* Completed */
#completed-tasks label {
  text-decoration: line-through;
  color: #888;
}

/* Edit Task */
ul li input[type=text] {
  display:none;
}

ul li.editMode input[type=text] {
  display:block;
}

ul li.editMode label {
  display:none;
}

#footer {
	width: 100%;
	color: #fff;
	padding: 20px;
	text-align: center;
	background-color: #000;
	font-size: 15px;
}

.footer a {
	color: #fff;
	position: relative;
	text-decoration: none;
	font-weight: bold;
}
.footer a:hover {
	color: #000;
	background-color: #fff;
}
.footer p {
	font-size: 17px;
}
              
            
!

JS

              
                let taskInput = document.getElementById("new-task"); // new-task
let addButton = document.getElementsByTagName("button")[0];//first button
let incompletedTasksHolder = document.getElementById("incompleted-tasks"); //incompleted-tasks
let completedTasksHolder = document.getElementById("completed-tasks"); //completed-tasks

//New Task List item

let createNewTaskElement = function(taskString) {
	// create List Item
  let listItem = document.createElement("li");
  // input checkbox
  let checkBox = document.createElement("input");
  // label
  let label = document.createElement("label");
  // input (text)
  let editInput = document.createElement("input");
  // button.edit
  let editButton = document.createElement("button");
  // button.delete
  let deleteButton = document.createElement("button");
  
  //Each element needs modified 
  
  checkBox.type = "checkBox";
  editInput.type = "text";
  
  editButton.innerText = "Edit";
  editButton.className = "edit";
  deleteButton.innerText = "Delete";
  deleteButton.className = "delete";
  
  label.innerText = taskString;
  
  // Each element needs appending
  listItem.appendChild(checkBox);
  listItem.appendChild(label);
  listItem.appendChild(editInput);
  listItem.appendChild(editButton);
  listItem.appendChild(deleteButton);

	return listItem;
}


//Add a new task
let addTask = function() {
  console.log("Add Task...");
  //Create a new list item with the text from the #new-task:
  let listItem = createNewTaskElement(taskInput.value);
  //Append listItem to incompleteTaskHolder
  incompletedTasksHolder.appendChild(listItem);
  bindTaskEvents(listItem, taskCompleted);
  taskInput.value = "";
}

//Edit an existing task
let editTask = function() {
    console.log("Edit Task...");
  
let listItem = this.parentNode;
  
let editInput = listItem.querySelector("input[type=text]");
let label = listItem.querySelector("label");
  
let containsClass = listItem.classList.contains("editMode");
  
  
  // if class of the parent is .editMode
  if (containsClass) {
      //Switch from .editMode
      //label text become the input's value
      label.innerText = editInput.value;
  } else {
      //Switch to .editMode
      //input value becomes the labels text
     	editInput.value = label.innerText;
  }
  //Toggle .editMode on the parent 
  listItem.classList.toggle("editMode");
}

//Delete an existing task
let deleteTask = function () {
    console.log("Delete Task...");
		//Remove the parent list item from the ul
  	let listItem = this.parentNode;
  	let ul = listItem.parentNode;
  
  	ul.removeChild(listItem);
}

//Mark a task as complete
let taskCompleted = function() {
   console.log("Task Complete...");
  //When the Checkbox is checked 
  //Append the task list item to the #completed-tasks ul
   let listItem = this.parentNode;
   completedTasksHolder.appendChild(listItem);
   bindTaskEvents(listItem, taskIncomplete);
}


//Mark a task as incomplete
let taskIncomplete = function() {
  console.log("Task Incomplete...");
 	//When the checkbox is unchecked appendTo #incompleted-tasks
  let listItem = this.parentNode;
  incompletedTasksHolder.appendChild(listItem);
  bindTaskEvents(listItem, taskCompleted);
}

//Set the click handler to the addTask function
addButton.addEventListener("click", addTask); 

let bindTaskEvents = function(taskListItem, checkBoxEventHandler) {
  	console.log("Bind List item events");
  	// select listitems chidlren
  	let checkBox = taskListItem.querySelector('input[type="checkbox"]');
    let editButton = taskListItem.querySelector("button.edit");
    let deleteButton = taskListItem.querySelector("button.delete");
		//bind editTask to edit button
  	editButton.onclick = editTask;
		//bind deleteTask to delete button
 		deleteButton.onclick = deleteTask;
		//bind checkBoxEventHandler to checkbox
  	checkBox.onchange = checkBoxEventHandler;  
}

//cycle over incompleteTaskHolder ul list items
for (let i = 0; i < incompletedTasksHolder.children.length; i ++) {
  //bind events to list item's children (taskCompleted)	
  bindTaskEvents(incompletedTasksHolder.children[i], taskCompleted);
}

//cycle over completedTaskHolder ul list items
for (let i = 0; i < completedTasksHolder.children.length; i ++) {
  //bind events to list item's children (taskCompleted)	
  bindTaskEvents(completedTasksHolder.children[i], taskIncomplete);
}

              
            
!
999px

Console