diff --git a/public/index.html b/public/index.html index ad04a96..7e8ddd0 100644 --- a/public/index.html +++ b/public/index.html @@ -15,5 +15,16 @@ You need to enable JavaScript to run this app.
+ + + + + + + + + + + diff --git a/src/App.css b/src/App.css index 0ecb0bd..dff294c 100644 --- a/src/App.css +++ b/src/App.css @@ -93,6 +93,9 @@ color: #5a5a5a; flex-grow: 1; position: relative; + z-index: 2; + margin-left: 40px; + width: 470px; } .todo-list-title:hover span[contenteditable="false"]:before { content: 'click to edit'; @@ -123,7 +126,7 @@ font-size: 14px; } .todo-list { - padding: 20px; + padding: 15px; padding-top: 10px; width: auto; } @@ -154,7 +157,109 @@ /* Disable Auto Zoom in Input “Text” tag - Safari on iPhone */ font-size: 16px; } + .todo-item button { + padding: 4px 12px; + font-size: 14px; + } .view-src { display: none; } } + +/** todo css via https://codepen.io/shshaw/pen/WXMdwE 😻 */ +.todo { + display: inline-block; + position: relative; + padding: 0; + margin: 0; + min-height: 40px; + min-width: 40px; + cursor: pointer; + padding-right: 5px; +} +.todo__state { + position: absolute; + top: 0; + left: 0; + opacity: 0; +} +.todo__text { + color: #135156; + transition: all 0.4s linear 0.4s; +} +.todo__icon { + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 280px; + height: 100%; + margin: auto; + fill: none; + stroke: #27FDC7; + stroke-width: 2; + stroke-linejoin: round; + stroke-linecap: round; +} + +.todo__box, +.todo__check { + transition: stroke-dashoffset 0.5s cubic-bezier(0.9, 0, 0.5, 1); +} +.todo__state:checked ~ .todo-list-title { + text-decoration: line-through; +} +.todo__circle { + stroke: #27FDC7; + stroke-dasharray: 1 6; + stroke-width: 0; + transform-origin: 13.5px 12.5px; + transform: scale(0.4) rotate(0deg); + animation: none 0.5s linear; +} + +@keyframes explode { + 30% { + stroke-width: 3; + stroke-opacity: 1; + transform: scale(0.8) rotate(40deg); + } + 100% { + stroke-width: 0; + stroke-opacity: 0; + transform: scale(1.1) rotate(60deg); + } +} +.todo__box { + stroke-dasharray: 56.1053, 56.1053; + stroke-dashoffset: 0; + transition-delay: 0.16s; +} +.todo__check { + stroke: #27FDC7; + stroke-dasharray: 9.8995, 9.8995; + stroke-dashoffset: 9.8995; + transition-duration: 0.32s; +} + +.todo__circle { + animation-delay: 0.56s; + animation-duration: 0.56s; +} +.todo__state:checked + .todo__text { + transition-delay: 0s; + color: #5EBEC1; + opacity: 0.6; +} +.todo__state:checked ~ .todo__icon .todo__box { + stroke-dashoffset: 56.1053; + transition-delay: 0s; +} + +.todo__state:checked ~ .todo__icon .todo__check { + stroke-dashoffset: 0; + transition-delay: 0.48s; +} +.todo__state:checked ~ .todo__icon .todo__circle { + animation-name: explode; +} diff --git a/src/App.js b/src/App.js index 2a9ad6e..a6ec4f9 100644 --- a/src/App.js +++ b/src/App.js @@ -129,6 +129,10 @@ class App extends Component { console.log('An API error occurred', e) }) } + handleTodoToggle = (e) => { + console.log('checkbox changed') + console.log(e.target.checked); + } handleDataChange = (event, currentValue) => { // save on change debounced? } @@ -137,7 +141,6 @@ class App extends Component { const key = event.target.dataset.key const updatedTodos = this.state.todos.map((todo, i) => { - const { data, ref } = todo const id = getTodoId(todo) if (id === key && todo.data.title !== currentValue) { todo.data.title = currentValue @@ -164,21 +167,34 @@ class App extends Component { let deleteButton if (ref) { deleteButton = ( - + ) } return (
-
- - -
+ + {deleteButton}
) @@ -186,15 +202,15 @@ class App extends Component { } render() { return ( -
-
-
-
+
+
+