Hendrixer · August 14, 2020 18:55
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * {
      box-sizing: border-box;
    }
    body, html {
      margin: 0;
      padding: 0;
    }

    #app {
      padding: 100px;
    }

    .items {
      list-style: none;
    }

    .item {
      font-size: 20px;
      margin: 20px 0px;
      cursor: pointer;
    }

    .item.completed {
      text-decoration: line-through;
      color: rgba(0,0,0,0.3);
    }
    button {
      outline: none;
      border: none;
      padding: 10px 20px;
      text-align: center;
      border-radius: 4px;
      background-color: salmon;
      font-size: 18px;
      text-transform: uppercase;
      color: white; 
      cursor: pointer;
    }
  </style>
  <title>Document</title>
  <script>
    const LS_KEY = 'todo-app'
    let savedState = localStorage.getItem(LS_KEY)

    if (savedState) {
      savedState = JSON.parse(savedState)
    }

    const defaultState = savedState || {
      items: []
    }

    const events = []

    const updateState = (d = {}) => {
      const state = {...defaultState, ...d}
      
      console.log("STATE CHANGE => ")
      console.log("NEW => ", state)

      localStorage.setItem(LS_KEY, JSON.stringify(state))

      renderApp(state)
      return state
    }

    const createItem = (state, title) => {
      const id = state.items.length

      const item = {
        id,
        title: title || `Title ${id}`,
        completed: false
      }

      updateState({items: [...state.items, item]})
      return item
    }

    const createElement = (tag) => document.createElement(tag)

    const renderItem = (item, parent, items) => {
      const itemElement = createElement('li')
      itemElement.innerHTML = item.title
      itemElement.classList.add('item')

      if (item.completed) {
        itemElement.classList.add('completed')
      }

      itemElement.addEventListener('click', () => {
        updateState({
          items: items.map(_item => {
            if (_item.id === item.id) {
              return {
                ..._item,
                completed: true
              }
            } else {
              return _item
            }
          })
        })
      })

      parent.appendChild(itemElement)
    }

    const renderAllItems = (items) => {
      let itemsElement = document.querySelector('.items')

      if (itemsElement) {
        itemsElement.remove()
      }

      itemsElement = createElement('ul')
      itemsElement.classList.add('items')


      const app = document.getElementById('app')
      app.appendChild(itemsElement)
      
      const completed = items.filter(item => item.completed)
      const open = items.filter(item => !item.completed)

      open.forEach(item => renderItem(item, itemsElement, items))
      completed.forEach(item => renderItem(item, itemsElement, items))
    }

    const renderApp = (state) => {
      let app = document.getElementById('app')

      if (app) {
        app.remove()
        app = createElement('div')
        app.id = 'app'
        document.body.appendChild(app)
        // loop throught events and removeListener
      }

      const button = createElement('button')
      button.textContent = 'Add item'
  
      button.addEventListener('click', () => {
        const itemsElement = document.querySelector('.items')
        const item = createItem(state)

        renderItem(item, itemsElement, state.items)
      })

      
      app.appendChild(button)

      renderAllItems(state.items)
    }


    document.addEventListener("DOMContentLoaded", () => {
      renderApp(defaultState)
    })
  </script>
 </head>
 <body>
  <div id="app"></div>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
	* {
	box-sizing: border-box;
	}
	body, html {
	margin: 0;
	padding: 0;
	}

	#app {
	padding: 100px;
	}

	.items {
	list-style: none;
	}

	.item {
	font-size: 20px;
	margin: 20px 0px;
	cursor: pointer;
	}

	.item.completed {
	text-decoration: line-through;
	color: rgba(0,0,0,0.3);
	}
	button {
	outline: none;
	border: none;
	padding: 10px 20px;
	text-align: center;
	border-radius: 4px;
	background-color: salmon;
	font-size: 18px;
	text-transform: uppercase;
	color: white;
	cursor: pointer;
	}
	</style>
	<title>Document</title>
	<script>
	const LS_KEY = 'todo-app'
	let savedState = localStorage.getItem(LS_KEY)

	if (savedState) {
	savedState = JSON.parse(savedState)
	}

	const defaultState = savedState \|\| {
	items: []
	}

	const events = []

	const updateState = (d = {}) => {
	const state = {...defaultState, ...d}

	console.log("STATE CHANGE => ")
	console.log("NEW => ", state)

	localStorage.setItem(LS_KEY, JSON.stringify(state))

	renderApp(state)
	return state
	}

	const createItem = (state, title) => {
	const id = state.items.length

	const item = {
	id,
	title: title \|\| `Title ${id}`,
	completed: false
	}

	updateState({items: [...state.items, item]})
	return item
	}

	const createElement = (tag) => document.createElement(tag)

	const renderItem = (item, parent, items) => {
	const itemElement = createElement('li')
	itemElement.innerHTML = item.title
	itemElement.classList.add('item')

	if (item.completed) {
	itemElement.classList.add('completed')
	}

	itemElement.addEventListener('click', () => {
	updateState({
	items: items.map(_item => {
	if (_item.id === item.id) {
	return {
	..._item,
	completed: true
	}
	} else {
	return _item
	}
	})
	})
	})

	parent.appendChild(itemElement)
	}

	const renderAllItems = (items) => {
	let itemsElement = document.querySelector('.items')

	if (itemsElement) {
	itemsElement.remove()
	}

	itemsElement = createElement('ul')
	itemsElement.classList.add('items')


	const app = document.getElementById('app')
	app.appendChild(itemsElement)

	const completed = items.filter(item => item.completed)
	const open = items.filter(item => !item.completed)

	open.forEach(item => renderItem(item, itemsElement, items))
	completed.forEach(item => renderItem(item, itemsElement, items))
	}

	const renderApp = (state) => {
	let app = document.getElementById('app')

	if (app) {
	app.remove()
	app = createElement('div')
	app.id = 'app'
	document.body.appendChild(app)
	// loop throught events and removeListener
	}

	const button = createElement('button')
	button.textContent = 'Add item'

	button.addEventListener('click', () => {
	const itemsElement = document.querySelector('.items')
	const item = createItem(state)

	renderItem(item, itemsElement, state.items)
	})


	app.appendChild(button)

	renderAllItems(state.items)
	}


	document.addEventListener("DOMContentLoaded", () => {
	renderApp(defaultState)
	})
	</script>
	</head>
	<body>
	<div id="app"></div>
	</body>
	</html>