douglascalhoun.github.io/byos.html at master · douglascalhoun/douglascalhoun.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<html>
<head>
<style>

* { margin: 0; padding: 0; }

body {
	background-color: #6D899F;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 960px;
  margin: 0 auto;
}

header, footer{
	background-color: #FFFFFF;
	padding: 1em;
}

main {
	display: flex;
	width: 100%;
}

nav {
	flex: 1;
  order: -1;
	background-color: #BCD39B;
  padding: 1em;
}

content {
	flex: 3;
	background-color: #CE9B64;
  padding: 1em;
}

aside {
	flex: 1;
	background-color: #62626D;
  padding: 1em;
}

@media (max-width: 600px){
	main{
    flex-direction: column;
	}
}

#new_item {
	width: 100%;
}

nav, aside {
	display: none;
}
</style>
</head>
<body>

  <header>
  </header>
  <main>
    <content>
      <h1>Curriculum</h1>
      <input id=new_item placeholder='new item' type="text">
      <div id=items>
	    </div>
  </content>
  <nav>
  </nav>
  <aside></aside>
</main>
<footer>
</footer>
<script src="js/utils.js"></script>
<script>

// Populate Items
var items = JSON.parse(localStorage.getItem('items')) || []
items.forEach(add_item)

// Events
$('body').on('click', '.delete_item', delete_item)
				 .on('blur keypress', '#new_item', new_item)
				 .on('change', '[name=completed]', console.log)

function new_item (e) {
  if (e.target.value != '' && (e.type == 'blur' || e.which == 13 || e.which == 0)) {
    var item = { title: e.target.value.trim(), id: items.length }
    items.push(item)
    add_item(item)
    localStorage.items = JSON.stringify(items)
    e.target.value = ''
  }
}

function add_item (item){
  $('#items').append("<div class=item id=" + item.id + "> <input type=checkbox name=completed /> <span class=title> "+ item.title + " </span> <span class='delete_item'> x </span> <span class='edit_item'> Aa </span> </div>")
}

function delete_item (e) {
  var item_id = $(e.target).closest('.item').remove().attr('id')
  items = items.filter(function (item) {
    return item.id != item_id
  })
  localStorage.setItem('items', JSON.stringify(items))
  console.log(items)
}

// function clear_items () {
//   localStorage.removeItem('items')
//   $('#items').empty()
// }

// function generate_default_items () {
//   var verbs = [ 'encourage', 'entice', 'castigate', 'fluster' ]
//   var nouns = [ 'a llama', 'a pod of dolphins', 'the king of spain', 'john wayne', 'kanye west']
//
//   return (3).times(function (i) {
//     return { title: verbs.shuffle().pop() + ' ' + nouns.shuffle().pop(), id: i }
//   })
// }

</script>
</body></html>