diff --git a/2020/YishanMao/MaoYishanTodoList/css/back02.jpg b/2020/YishanMao/MaoYishanTodoList/css/back02.jpg new file mode 100644 index 0000000..3006256 Binary files /dev/null and b/2020/YishanMao/MaoYishanTodoList/css/back02.jpg differ diff --git a/2020/YishanMao/MaoYishanTodoList/css/style.css b/2020/YishanMao/MaoYishanTodoList/css/style.css new file mode 100644 index 0000000..a135028 --- /dev/null +++ b/2020/YishanMao/MaoYishanTodoList/css/style.css @@ -0,0 +1,192 @@ +@import url("https://fonts.googleapis.com/css?family=Nunito:600,700&display=swap"); +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; +} + +body { + min-height: 450px; + height: 100vh; + margin: 0; + background: radial-gradient(ellipse farthest-corner at center top, #f39264 0%, #f2606f 100%); + color: #fff; + font-family: 'Nunito', sans-serif; +} + +button, +input, +select, +textarea { + font-family: inherit; + font-size: inherit; + line-height: inherit; +} + +/*-------------------- ToDo List -------------------*/ +.todoList { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 320px; + height: 500px; + background: #fff; + border-radius: 10px; + box-shadow: 0 7px 30px rgba(62, 9, 11, 0.3); +} + +/** Header Image **/ +.cover-img .cover-inner { + background: url("back02.jpg"); + height: 190px; + background-size: cover; + background-position: 10% 20%; + border-top-left-radius: 10px; + border-top-right-radius: 10px; + position: relative; +} +.cover-img .cover-inner::after { + background: rgba(0, 0, 0, 0.3); + content: ""; + top: 0; + left: 0; + position: absolute; + width: 100%; + height: 100%; + border-top-left-radius: 10px; + border-top-right-radius: 10px; +} +.cover-img .cover-inner h3 { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-family: 'Nunito', sans-serif; + text-transform: uppercase; + font-size: 2.8rem; + z-index: 10; + font-weight: 700; +} + +/* Main Content */ +.content { + padding: 10px 20px; +} +.content form { + display: flex; + justify-content: space-between; + margin-bottom: 15px; + padding: 0 10px 0 5px; + border-bottom: 1px solid #8e979c; +} +.content form > * { + background: transparent; + border: none; + height: 35px; +} +.content input[type=text] { + font-weight: 700; + font-size: 1.2rem; + color: #6C717B; +} +.content .input-buttons a { + text-decoration: none; +} +.content .input-buttons i { + margin-top: 5px; + font-size: 20px; + color: #8e979c; +} +.content ul.todos { + margin-left: 0; + padding: 0; + list-style: none; + height: 220px; + overflow: auto; +} +.content li { + user-select: none; + margin-bottom: 10px; + display: flex; + justify-content: space-between; +} +.content li i { + color: #6C717B; + font-size: 15px; + cursor: pointer; + padding: 5px 10px; +} +.content input[type=checkbox] { + display: none; +} +.content input[type=checkbox] + label { + color: #6C717B; + font-size: 15px; + cursor: pointer; + position: relative; + border-radius: 3px; + display: inline-block; + padding: 5px 5px 5px 30px; +} +.content input[type=checkbox] + label:hover { + color: #353A42; + background-color: #F4F7FA; +} +.content input[type=checkbox] + label span.check { + left: 4px; + top: 50%; + position: absolute; + transform: translateY(-50%); + width: 18px; + height: 18px; + display: block; + background: white; + border-radius: 3px; + border: 1px solid #b8bfcc; + box-shadow: 0 2px 3px #F0F4F8; +} +.content input[type=checkbox]:checked + label { + color: #AEB7C6; + text-decoration: line-through; +} +.content input[type=checkbox]:checked + label span.check { + background-color: transparent; + border-color: transparent; + box-shadow: none; +} +.content input[type=checkbox] + label span.check::after { + width: 100%; + height: 100%; + content: ''; + display: block; + position: absolute; + background-image: url("tick.svg"); + background-repeat: no-repeat; + background-position: center; + background-size: 16px 16px; + transform: scale(0); + transition: transform 300ms cubic-bezier(0.3, 0, 0, 1.5); +} +.content input[type=checkbox]:checked + label span.check::after { + transform: scale(1); +} +.content input[type=checkbox] + label span.check::before { + top: 0; + left: 0; + width: 100%; + height: 100%; + display: block; + content: ''; + position: absolute; + border-radius: 50%; + background: #8798AA; + opacity: .8; + transform: scale(0); +} +.content input[type=checkbox]:checked + label span.check::before { + opacity: 0; + transform: scale(1.3); + transition: opacity 300ms cubic-bezier(0.2, 0, 0, 1), transform 400ms cubic-bezier(0.3, 0, 0, 1.4); +} \ No newline at end of file diff --git a/2020/YishanMao/MaoYishanTodoList/css/tick.svg b/2020/YishanMao/MaoYishanTodoList/css/tick.svg new file mode 100644 index 0000000..f27f078 --- /dev/null +++ b/2020/YishanMao/MaoYishanTodoList/css/tick.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/2020/YishanMao/MaoYishanTodoList/js/script.js b/2020/YishanMao/MaoYishanTodoList/js/script.js new file mode 100644 index 0000000..6eebe94 --- /dev/null +++ b/2020/YishanMao/MaoYishanTodoList/js/script.js @@ -0,0 +1,39 @@ +const submitForm = document.querySelector('.add'); +const addButton = document.querySelector('.add-todo'); +const todoList = document.querySelector('.todos'); +const list = document.querySelectorAll('.todos li'); //gives a NodeList of all li's +let listLength = list.length; + +const generateTemplate = (todo) => { + + const html = `
  • + + + +
    • ` + todoList.innerHTML += html; +}; + +function addTodos(e) { + e.preventDefault(); + const todo = submitForm.add.value.trim(); //trim extra space in input + if (todo.length) { // to check whether the input is empty + listLength = listLength + 1; // to update the checkbox id when we add a new list item + generateTemplate(todo); + submitForm.reset(); + } + +} +//add todos +submitForm.addEventListener('submit', addTodos); +addButton.addEventListener('click', addTodos); + +function deleteTodos(e) { + if (e.target.classList.contains('delete')) { + e.target.parentElement.remove(); + } +} +//delete todos +todoList.addEventListener('click', deleteTodos); \ No newline at end of file diff --git a/2020/YishanMao/MaoYishanTodoList/todolist.html b/2020/YishanMao/MaoYishanTodoList/todolist.html new file mode 100644 index 0000000..bb9fc72 --- /dev/null +++ b/2020/YishanMao/MaoYishanTodoList/todolist.html @@ -0,0 +1,65 @@ + + + + + MYS·Todo List + + + + + + + +
    +
    +
    +

    TodoList

    +
    +
    +
    +
    + +
    + + + +
    +
    + +
    + +
    + + + + +