분류 javascript

To-do list

컨텐츠 정보

  • 조회 271 (작성일 )

본문

https://codepen.io/cassie-codes/pen/pYwXwb 


HTML : 


<section class="container">

  <div class="heading">

    <img class="heading__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/756881/laptop.svg">

    <h1 class="heading__title">To-Do List</h1>

  </div>

  <form class="form">

    <div>

      <label class="form__label" for="todo">~ Today I need to ~</label>

      <input class="form__input"

           type="text" 

           id="todo" 

           name="to-do"

           size="30"

           required>

      <button class="button"><span>Submit</span></button>

    </div>

  </form>

  <div>

    <ul class="toDoList">

    </ul>

  </div>

</section>


CSS : 


@import url("https://fonts.googleapis.com/css?family=Gochi+Hand");

body {

  background-color: #a39bd2;

  min-height: 70vh;

  padding: 1rem;

  box-sizing: border-box;

  display: flex;

  justify-content: center;

  align-items: center;

  color: #494a4b;

  font-family: 'Gochi Hand', cursive;

  text-align: center;

  font-size: 130%;

}


@media only screen and (min-width: 500px) {

  body {

    min-height: 100vh;

  }

}

.container {

  width: 100%;

  height: auto;

  min-height: 500px;

  max-width: 500px;

  min-width: 250px;

  background: #f1f5f8;

  background-image: radial-gradient(#bfc0c1 7.2%, transparent 0);

  background-size: 25px 25px;

  border-radius: 20px;

  box-shadow: 4px 3px 7px 2px #00000040;

  padding: 1rem;

  box-sizing: border-box;

}


.heading {

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 1rem;

}


.heading__title {

  transform: rotate(2deg);

  padding: 0.2rem 1.2rem;

  border-radius: 20% 5% 20% 5%/5% 20% 25% 20%;

  background-color: rgba(0, 255, 196, 0.7);

  font-size: 1.5rem;

}


@media only screen and (min-width: 500px) {

  .heading__title {

    font-size: 2rem;

  }

}

.heading__img {

  width: 24%;

}


.form__label {

  display: block;

  margin-bottom: 0.5rem;

}


.form__input {

  box-sizing: border-box;

  background-color: transparent;

  padding: 0.7rem;

  border-bottom-right-radius: 15px 3px;

  border-bottom-left-radius: 3px 15px;

  border: solid 3px transparent;

  border-bottom: dashed 3px #ea95e0;

  font-family: 'Gochi Hand', cursive;

  font-size: 1rem;

  color: rgba(63, 62, 65, 0.7);

  width: 70%;

  margin-bottom: 20px;

}

.form__input:focus {

  outline: none;

  border: solid 3px #ea95e0;

}


@media only screen and (min-width: 500px) {

  .form__input {

    width: 60%;

  }

}

.button {

  padding: 0;

  border: none;

  transform: rotate(4deg);

  transform-origin: center;

  font-family: 'Gochi Hand', cursive;

  text-decoration: none;

  padding-bottom: 3px;

  border-radius: 5px;

  box-shadow: 0 2px 0 #494a4b;

  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  background-image: url("data:image/gif;base64,R0lGODlhBAAEAIABAAAAAAAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjEgNjQuMTQwOTQ5LCAyMDEwLzEyLzA3LTEwOjU3OjAxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgV2luZG93cyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo5NUY1OENCRDdDMDYxMUUyOTEzMEE1MEM5QzM0NDVBMyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo5NUY1OENCRTdDMDYxMUUyOTEzMEE1MEM5QzM0NDVBMyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjk1RjU4Q0JCN0MwNjExRTI5MTMwQTUwQzlDMzQ0NUEzIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjk1RjU4Q0JDN0MwNjExRTI5MTMwQTUwQzlDMzQ0NUEzIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEAQAAAQAsAAAAAAQABAAAAgYEEpdoeQUAOw==");

  background-color: rgba(0, 255, 196, 0.7);

}


.button span {

  background: #f1f5f8;

  display: block;

  padding: 0.5rem 1rem;

  border-radius: 5px;

  border: 2px solid #494a4b;

}


.button:active, .button:focus {

  transform: translateY(4px);

  padding-bottom: 0px;

  outline: 0;

}


.toDoList {

  text-align: left;

}

.toDoList li {

  position: relative;

  padding: 0.5rem;

}

.toDoList li:hover {

  text-decoration: line-through wavy #24bffb;

}



Javascript : 


// IEFE

(() => { 

  // state variables

  let toDoListArray = [];

  // ui variables

  const form = document.querySelector(".form"); 

  const input = form.querySelector(".form__input");

  const ul = document.querySelector(".toDoList"); 


  // event listeners

  form.addEventListener('submit', e => {

    // prevent default behaviour - Page reload

    e.preventDefault();

    // give item a unique ID

    let itemId = String(Date.now());

    // get/assign input value

    let toDoItem = input.value;

    //pass ID and item into functions

    addItemToDOM(itemId , toDoItem);

    addItemToArray(itemId, toDoItem);

    // clear the input box. (this is default behaviour but we got rid of that)

    input.value = '';

  });

  

  ul.addEventListener('click', e => {

    let id = e.target.getAttribute('data-id')

    if (!id) return // user clicked in something else      

    //pass id through to functions

    removeItemFromDOM(id);

    removeItemFromArray(id);

  });

  

  // functions 

  function addItemToDOM(itemId, toDoItem) {    

    // create an li

    const li = document.createElement('li')

    li.setAttribute("data-id", itemId);

    // add toDoItem text to li

    li.innerText = toDoItem

    // add li to the DOM

    ul.appendChild(li);

  }

  

  function addItemToArray(itemId, toDoItem) {

    // add item to array as an object with an ID so we can find and delete it later

    toDoListArray.push({ itemId, toDoItem});

    console.log(toDoListArray)

  }

  

  function removeItemFromDOM(id) {

    // get the list item by data ID

    var li = document.querySelector('[data-id="' + id + '"]');

    // remove list item

    ul.removeChild(li);

  }

  

  function removeItemFromArray(id) {

    // create a new toDoListArray with all li's that don't match the ID

    toDoListArray = toDoListArray.filter(item => item.itemId !== id);

    console.log(toDoListArray);

  }

  

})();