add check boxes

public/index.html

@@ -15,5 +15,16 @@
       You need to enable JavaScript to run this app.
     </noscript>
     <div id="root"></div>
+    <svg viewBox="0 0 0 0" style="position: absolute; z-index: -1; opacity: 0;">
+      <defs>
+        <linearGradient id="boxGradient" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="25" y2="25">
+          <stop offset="0%" stop-color="#27FDC7"></stop>
+          <stop offset="100%" stop-color="#0FC0F5"></stop>
+        </linearGradient>
+        <path id="todo__box" stroke="url(#boxGradient)" d="M21 12.7v5c0 1.3-1 2.3-2.3 2.3H8.3C7 20 6 19 6 17.7V7.3C6 6 7 5 8.3 5h10.4C20 5 21 6 21 7.3v5.4"></path>
+        <path id="todo__check" stroke="url(#boxGradient)" d="M10 13l2 2 5-5"></path>
+        <circle id="todo__circle" cx="13.5" cy="12.5" r="10"></circle>
+      </defs>
+    </svg>
   </body>
 </html>

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;
+}

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,12 +167,22 @@ class App extends Component {
       let deleteButton
       if (ref) {
         deleteButton = (
-          <button data-id={id} onClick={this.deleteTodo}>delete</button>
+          <button data-id={id} onClick={this.deleteTodo}>
+            delete
+          </button>
         )
       }
       return (
         <div key={i} className='todo-item'>
+          <label className="todo">
+            <input className="todo__state" type="checkbox" onChange={this.handleTodoToggle} />
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 25" className="todo__icon">
+              <use xlinkHref="#todo__box" className="todo__box"></use>
+              <use xlinkHref="#todo__check" className="todo__check"></use>
+              <use xlinkHref="#todo__circle" className="todo__circle"></use>
+            </svg>
             <div className='todo-list-title'>
+
                 <ContentEditable
                   tagName='span'
                   editKey={id}
@@ -178,7 +191,10 @@ class App extends Component {
                   html={data.title}
                 >
                 </ContentEditable>
+
             </div>
+          </label>
+
           {deleteButton}
         </div>
       )
@@ -186,15 +202,15 @@ class App extends Component {
   }
   render() {
     return (
-      <div className="app">
+      <div className='app'>
-        <header className="app-header">
+        <header className='app-header'>
-          <div className="app-title-wrapper">
+          <div className='app-title-wrapper'>
-            <div className="app-title-wrapper">
+            <div className='app-title-wrapper'>
               <div className='app-left-nav'>
-                <img src={logo} className="app-logo" alt="logo" />
+                <img src={logo} className='app-logo' alt='logo' />
                 <div className='app-title-text'>
-                  <h1 className="app-title">Netlify + Fauna DB</h1>
+                  <h1 className='app-title'>Netlify + Fauna DB</h1>
-                  <p className="app-intro">
+                  <p className='app-intro'>
                     Using FaunaDB & Netlify functions
                   </p>
                 </div>
@@ -203,14 +219,16 @@ class App extends Component {
             <div className='deploy-button-wrapper'>
               <a
                 target='_blank'
-                href="https://app.netlify.com/start/deploy?repository=https://github.com/netlify/netlify-faunadb-example">
+                rel='noopener noreferrer'
-                <img src={deployButton} className="deploy-button" alt="deploy to netlify" />
+                href='https://app.netlify.com/start/deploy?repository=https://github.com/netlify/netlify-faunadb-example'>
+                <img src={deployButton} className='deploy-button' alt='deploy to netlify' />
               </a>
               <div className='view-src'>
                 <a
                   target='_blank'
-                  href="https://github.com/netlify/netlify-faunadb-example">
+                  rel='noopener noreferrer'
-                  <img className='github-icon' src={github} /> View the source Luke
+                  href='https://github.com/netlify/netlify-faunadb-example'>
+                  <img className='github-icon' src={github} alt='view repo on github' /> View the source Luke
                 </a>
               </div>
             </div>