bootcamp code

slides.md

Slide 74

<h1>To Do List</h1>
   <ul>
      <li>Get out of bed</li>
      <li>Drink Coffee</li>
      <li>Get to Work</li>
      <li>Get to School</li>
   </ul>

Slide 76

#container {
  width: 300px;
  margin: 100px auto;
  border-width: 2px;
  border-style: solid;
  border-color: gray;
}

Slide 77

.completed {
  color: gray;
  text-decoration: line-through;
}

Slide 78

h1 { 
  background: #2980b9;
  color: white;
}

Slide 79

h1 { 
  background: #2980b9;
  color: white;
  Margin: 0;
}

Slide 80

h1 { 
  background: #2980b9;
  color: white;
  Margin: 0;
  padding-top: 10px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 10px;
}

Slide 81

h1 { 
    background: #2980b9;
    color: white;
    margin: 0;
    padding: 10px 20px 20px 10px;
  }

Slide 82

  h1 { 
    background: #2980b9;
    color: white;
    margin: 0;
    padding: 10px 20px 20px 10px;
    text-transform: uppercase;
    font-size: 24px;
    font-weight: normal;
  }

Slides 83

  ul {
    list-style: none;
    }

Slides 84

http://fonts.google.com

Slides 86

li {
    line-height: 40px;
    background: white;
  }

Slides 87

li:nth-child(2n) {
     background: #dddddd; 
  }

Slides 88

<input type="text">

Slides 89

 <input type="text" placeholder="Enter new to do">

Slides 90

  input {
    background-color: #f7f7f7;
    width: 100%;
    padding: 13px 13px 13px 20px;
    color: #2980b9;
    font-size: 18px;
  }

Slides 91

input {
    background-color: #f7f7f7;
    width: 100%;
    padding: 13px 13px 13px 20px;
    color: #2980b9;
    font-size: 18px;
    box-sizing: border-box;
  }

Slides 92

input:focus {
    background-color: white;
    border: 3px solid green;
    outline: none;
   }

Slides 94

<span>x</span>

Slides 95

  span {
    background: red;
    color: white;
    height: 40x;
    margin: 0 0 0 20px;
    padding: 3px 15px 3px 15px;
    float: right;
    box-sizing: border-box;
  }

Slides 96

  span {
    background: red;
    color: white;
    height: 40px;
    margin: 0 0 0 20px;
    padding: 3px 15px 3px 15px;
    float: right;
    box-sizing: border-box;
    opacity: 0;
  }

li:hover span { 
  opacity: 1;
}  

Slides 97

span {
    background: red;
    color: white;
    height: 40px;
    margin: 0 0 0 20px;
    padding: 3px 15px 3px 15px;
    float: right;
    box-sizing: border-box;
    opacity: 0;
    transition: 0.3s linear;
  }

Slides 98

li {
    line-height: 40px;
    background: white;
    padding-left: 10px;
  }

Slides 99

<span><i class="fa fa-times">x</i></span>

Slides 102

$('ul').on('click', 'li', function() {
  $(this).toggleClass('completed');
});

Slides 103

$('ul').on('click', function() {
  $(this).remove();
});

Slides 104

$('ul').on('click', 'span',function() {
  $(this).remove();
});

Slides 105

$('ul').on('click', 'span', function(event) {
  $(this).parent().remove();
});

Slides 106

$('input').keypress(function(event) {
    if (event.which === 13) {
      
      
    }
});

Slides 108

$('input').keypress(function(event) {
    if (event.which === 13) {
      var todoItem = $(this).val();
    }
});

Slides 109

$('input').keypress(function(event) {
    if (event.which === 13) {
      var todoItem = $(this).val();

      $('ul').append(
        "<li>" + 
          "<span>" +
            "<i class='fa fa-times'></i>" +
          "</span>" +
           todoItem + 
        "</li>"
      );
    }
});

Slides 110

$('input').keypress(function(event) {
    if (event.which === 13) {
      var todoItem = $(this).val();
      $('ul').append(
        "<li>" + 
          "<span>" +
            "<i class='fa fa-times'></i>" +
          "</span>" +
        "</li>"
      );
      $('input').val() = "";
    }
   });