To do list in progress

7/18/2015 - 8:01 PM

var itemTemplate = $('#templates .item')
var list         = $('#list')

var addItemToPage = function(itemData) {
  var item = itemTemplate.clone()
  item.attr('data-id',itemData.id)
  item.find('.description').text(itemData.description)
  if(itemData.completed) {
    item.addClass('completed')
  }
  list.append(item)
}

var loadRequest = $.ajax({
  type: 'GET',
  url: "https://listalous.herokuapp.com/lists/groceries/"
})

loadRequest.done(function(dataFromServer) {
  var itemsData = dataFromServer.items

  itemsData.forEach(function(itemData) {
    addItemToPage(itemData)
  })
})

$('#add-form').on('submit', function(event) {
  var itemDescription = event.target.itemDescription.value

  event.preventDefault()

  alert('trying to create a new item with a description ' + itemDescription)
})

var creationRequest = $.ajax({
  type: 'POST',
  url: "http://listalous.herokuapp.com/lists/groceries/items",
  data: { description: itemDescription, completed: false }
})

// creationRequest.done(function(itemDataFromServer) {
//   addItemToPage(itemDataFromServer)
// })

// $('#list').on('click', '.complete-button', function(event) {
//   var item = $(event.target).parent()
//   var isItemCompleted = item.hasClass('completed')
//   var itemId = item.attr('data-id')

//   var updateRequest = $.ajax({
//     type: 'PUT',
//     url: "https://listalous.herokuapp.com/lists/Ygroceries/items/" + itemId,
//     data: { completed: !isItemCompleted }
//   })

//   updateRequest.done(function(itemData) {
//     if (itemData.completed) {
//       item.addClass('completed')
//     } else {
//       item.removeClass('completed')
//     }
//   })
// })

index.html

<!DOCTYPE HTML>

<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
  <link href='https://fonts.googleapis.com/css?family=Titillium+Web:600' rel='stylesheet' type='text/css'>
  <script src="https://code.jquery.com/jquery-2.1.3.js"></script>
</head>

<body>
  <div id="container">
    <h1>Hopebucket list</h1>
    <div id="app">
      

<form id='add-form'>
  <input id="create" name="itemDescription" type="text" placeholder="Add something to the list!">
</form>
<ul id='list'>

  
</ul>


    </div>
  </div>

  <div id='templates'>
    <li class='item' data-id="some id">
      <span class='complete-button'>&#10004;</span>
      <div class="description">A stick of butter</div>
      <span class="delete-button">&#10008;</span>
    </li>
  </div>

  <script src="app.js"></script>
</body>

notes

console is like print

var = variable

JS without var makes it a global var

var myVariable =3;
undefined
myVariable + 2
5

var pluralize = function(word) {
  return word + "s"
}
pluralize("kiwi")

fruits.forEach(function(fruit) {
  console.log(fruit)
})

forEach is a built in function - takes function as a parameter
 forEach which iterates through the list running code on each item.

 forEach is a function itself and takes one argument, that arg is af function

 var fruits = ["kiwi", "strawberry", "plum"]

 fruits.forEach(function(fruit) {
  console.log(fruit)

  var fruits = ["kiwi", "strawberry", "plum"]

 fruits.forEach(function(fruit) {
  console.log(fruit)
})
VM830:5 kiwi
VM830:5 strawberry
VM830:5 plum

NOTE: fruits changed to "fruit" singular
})

JQUERY 

var itemTemplate = $('#templates .item')
var list         = $('#list')

*****

   <span class="delete-button">&#10008;</span>
    </li>
  </div>

  <script src="app.js"></script>  <!---keep js at bottom because HTML needs to load first bc js is going to need to access html also take up time to load-->
</body>

In js -
  item.attr('data-id',itemData.id)

In HTML - 
  <li class='item' data-id="1">

  data-id is an actual html attribute

  addItemtoPaeg???

  The jQuery Selector $() is an easy way to fetch an item from the page. All you need to do is specify the class, id, or tag of the element or elements you want.

.clone() creates a copy of a selected element. It's helpful for creating elements from a template.

.find() helps you find elements nested inside other elements.

.text() allows you to get and alter the text of an element.

.attr() allows you to get and alter attributes stored in your HTML. In this case, we used it store the id of an item in a data-id attribute, that is not used for styling, just for data storage.

.addClass() allows you to add a class to an element.

.append() takes an element, and attaches it to the end of another element! That way, your element will actually show up on the page.


$.ajax({
  type: 'POST',
  url: "https://listalous.herokuapp.com/lists",
  data: { name: 'groceries' }
})

loadRequest.done(function(dataFromServer) {
  var itemsData = dataFromServer.items

  itemsData.forEach(function(itemData) {
    addItemToPage(itemData)
  })
})

$.ajax({
 type: 'POST',
 url: "https://listalous.herokuapp.com/lists/groceries/items",
 data: { description: 'food', completed: false }
})

$.ajax({
  type: 'GET',
  url: "https://listalous.herokuapp.com/lists/groceries/"
})

style.css

body {
  background: url('debut_light.png')
}

#container {
  width: 600px;
  font-family: 'Titillium Web', 'Arial', sans-serif;
  font-size: 40px;
  text-align: center;
  margin: 40px auto;
}

h1 {
  margin: 20px;
  color:red;
}

#app {
  box-shadow: 0 0 5px #684F91;
  font-size: 35px;
  color: #080D3B;
  background-color: white;
}

form {
  margin: 0;
  padding: 0;
}



#create {
  width: 100%;
  font-family: inherit;
  font-size: inherit;
  padding: 10px 30px;
  border-left:    1px  solid #7d82b0;
  border-right:   1px  solid #7d82b0;
  border-bottom:  2px  solid #7d82b0;
  border-top:     15px solid #477187;
  text-align: center;
}


#create::-webkit-input-placeholder {
  color: #C3C3C4;
  text-align: center;
}

#create::-moz-placeholder {  /* Firefox 19+ */
   color: #C3C3C4;
   text-align: center;
}

#create:focus::-webkit-input-placeholder {
  color: transparent;
  text-align: center;
}

#create:focus::-moz-placeholder {  /* Firefox 19+ */
   color: transparent;
   text-align: center;
}

#list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.item {
  position: relative;
  box-sizing: border-box;
  padding: 10px;
  list-style-type: none;
  width: 100%;
  border-left:    1px  solid #7d82b0;
  border-right:   1px  solid #7d82b0;
  border-bottom:  2px  solid #7d82b0;
  border-top:     0px  solid #7d82b0;

}

.item .complete-button {
  position: absolute;
  left: 20px;
  top: 10px;
  cursor: pointer;
}

.item .value {
  margin: 0 50px;
  padding: 0 15px;
}

.item .delete-button {
  position: absolute;
  right: 20px;
  top: 10px;
  cursor: pointer;
}

.item.completed {
  color: #C3C3C4;
}

#templates {
  display: none
}

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

To do list in progress