A Pen by A2

This awesome code was written by a_tinker, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright a_tinker ©


  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>A Pen by  A2</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">



  <h1>To do <i id = 'plus' class = 'fa fa-plus plus'></i><i class = 'fa fa-minus plus minus'></i></h1>

<div class = 'td_item'><input class = 'chk' type = 'checkbox'/><input class = 'task_td' type = 'text'></input></div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>


    <script  src="js/index.js"></script>



/*Downloaded from https://www.codeseek.co/a_tinker/a-pen-by-a2-vNxPzK */
  margin-left: 10%;
  font-family: Arial;
  margin-left: 12%;
  border-bottom: 2px solid rgba(180, 180, 180, 0.7);
  width: 30%;
  font-size: 1em;
  font-family: Arial;
  clear: both;
  padding: 10px;
  margin-left: 2%;
  width: 90%;
  border: none;
  display: inline-block;
  font-size: 16px;
  margin-left: 1%;
  text-shadow: 1px 1px 1px rgba(180, 180, 180, 0.7, 1px 2px 1px rgba(180, 180, 180, 0.3));
  color: coral;
  z-index: 2;

/*Downloaded from https://www.codeseek.co/a_tinker/a-pen-by-a2-vNxPzK */
  //makes a new todo. i want to do this without append (it seems sloppy to me, or like there is a more efficient way to do this) but i'm too lazy rn. eventually...
    $('body').append("<div class = 'td_item' ><input class = 'chk' type = 'checkbox'/><input class = 'task_td' type = 'text'></input></div>");
    //deletes EVERYTHING. :D
    var k = alert("Are you sure you want to clear your todo list?");
    //^checks to make sure you are okay, though idk if u really have a choice.
        //makes sure you've at least done something before they all go bye-bye. without being saved. :D
      } else{
        //lets you know that you've been slacking. how polite
        var niceTry = alert("You don't seem to have done anything on your list.");
//don't mind this i was just playing around