{"id":1020,"date":"2024-02-28T15:17:43","date_gmt":"2024-02-28T21:17:43","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=1020"},"modified":"2024-02-28T17:37:43","modified_gmt":"2024-02-28T23:37:43","slug":"building-a-todo-app-from-scratch-step-4-styling-interactive-choices","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/building-a-todo-app-from-scratch-step-4-styling-interactive-choices\/","title":{"rendered":"Building a TODO App from Scratch \u2014 Step 4 \u2014 Styling & Interactive Choices"},"content":{"rendered":"\n

I’m already a little over all the green. What was I thinking<\/a>? I’m much more of a nice gray color palette kinda guy with some fun poppy colors. That’s what we need to get to here. When we left off, we just had wireframes going. It’s time to get some style on this thing!<\/p>\n\n\n

\n
\n

Article Series<\/h3>\n <\/header>\n
\n
    \n
  1. \n Building a TODO App from Scratch \u2014 Step 1 \u2014 Planning & Design<\/a>\n <\/li>\n
  2. \n Building a TODO App from Scratch \u2014 Step 2 \u2014 HTML<\/a>\n <\/li>\n
  3. \n Building a TODO App from Scratch \u2014 Step 3 \u2014 Basic JavaScript Functionality<\/a>\n <\/li>\n
  4. \n Building a TODO App from Scratch \u2014 Step 4 \u2014 Styling & Interactive Choices<\/a>\n <\/li>\n
  5. \n Building a TODO App from Scratch \u2014 Step 5 \u2014 Extra Functionality<\/a>\n <\/li>\n <\/ol>\n <\/div>\n<\/div>\n\n\n\n

    Custom Properties<\/h2>\n\n\n\n

    We can get rid of that wireframe look by removing all those 1px borders and applying some backgrounds. Let’s give ourselves some Custom Properties to work with, so we can apply colors in such a way they are easy to change later. <\/p>\n\n\n

    html<\/span> {\n  --gray800<\/span>: oklch<\/span>(10%<\/span> 0%<\/span> 0<\/span>);\n  --gray600<\/span>: oklch<\/span>(40%<\/span> 0%<\/span> 0<\/span>);\n  --gray100<\/span>: oklch<\/span>(92%<\/span> 0%<\/span> 0<\/span>);\n  --brand<\/span>: oklch<\/span>(85%<\/span> 0.3<\/span> 145<\/span>);\n\n  background<\/span>: var<\/span>(--gray100);\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
    You can see we’re using the lightest gray right away in colorizing the background. <\/p>\n\n\n\n
    Applying those colors to the relevant sections gets us a start:<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    Fonts<\/h2>\n\n\n\n
    We don’t need to go too far down the typography rabbit hole here, as all our design calls for is the header, one input, and a list of to-do items. Keeping it simple and fast (not loading fonts is… fast), is ideal, so:<\/p>\n\n\n
    html<\/span> {\n  font-family<\/span>: system-ui, sans-serif;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
    header<\/span> {\n  background<\/span>: var<\/span>(--gray800);\n  color<\/span>: white;\n  h1 {\n    font-variation-settings<\/span>: \"wght\"<\/span> 900<\/span>, \"wdth\"<\/span> 700<\/span>;\n  }\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
    I love this look, myself:<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    SVGs<\/h2>\n\n\n\n
    We need SVG’s for the “check” of the logo and that we’ll use when a user checks off a to-do. I’m kinda thinking we just re-use the same one for both as that just makes good sense. Plus we’ll make a “+” SVG too. It might be tempting to find unicode characters for these, but I’m telling you, just use SVG. The predictable bounding box of SVG will be your friend (no fighting against weird space).<\/p>\n\n\n\n
    There are loads of resources for finding SVGs to use. I’m usually a Noun Project<\/a> guy, but if we needed, say, 10 or more icons I’d probably try to find a more cohesive set somewhere. These are also so simple that could (should) draw them ourselves (even directly in code), but we’ll save that for another day. <\/p>\n\n\n\n
    Ultimately, we’ll just get our hands on a “check” icon and use it in the logo…<\/p>\n\n\n
    <header<\/span>><\/span>\n  <svg<\/span> ...<\/span> class<\/span>=\"svg-check site-logo\"<\/span>><\/span>\n    <polyline<\/span> ...<\/span> \/><\/span>\n  <\/svg<\/span>><\/span>\n  <h1<\/span>><\/span>TODOs<\/h1<\/span>><\/span>\n<\/header<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
    … in our template literal for each to-do …<\/p>\n\n\n
    HTML += `<li id=\"${todo.id}<\/span>\">\n  ${todo.title}<\/span>\n  <button aria-label=\"Complete\" class=\"button-complete\">\n    <svg ... class=\"svg-check\">\n      <polyline ... \/>\n    <\/svg>\n  <\/button>\n<\/li>`<\/span>;<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    … and then our “+” in the form:<\/p>\n\n\n
    <form id=\"todo-form\"<\/span> class<\/span><\/span>=\"todo-form\"<\/span>>\n  <label<\/span>><\/span>\n    <span<\/span> class<\/span>=\"screen-reader-text\"<\/span>><\/span>New TODO<\/span<\/span>><\/span>\n    <input<\/span> type<\/span>=\"text\"<\/span> name<\/span>=\"todo\"<\/span>><\/span>\n  <\/label<\/span>><\/span>\n  <button<\/span> id<\/span>=\"button-add-todo\"<\/span> class<\/span>=\"button-add-todo\"<\/span>><\/span>\n    <svg<\/span> ...<\/span> class<\/span>=\"svg-plus\"<\/span>><\/span>\n      <g<\/span>><\/span>\n        <line<\/span> ...<\/span> \/><\/span>\n        <line<\/span> ...<\/span> \/><\/span>\n      <\/g<\/span>><\/span>\n    <\/svg<\/span>><\/span>\n  <\/button<\/span>><\/span>\n<\/form<\/span>><\/span><\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    With the SVG’s I chose in there:<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    Adding To-Do Interactions<\/h2>\n\n\n\n
    When we add a new to-do, I want to give the adding button a temporary class so we can do something fun with it. So we’ll use a saved reference to that button and do that:<\/p>\n\n\n
    buttonAddTodo.classList.add(\"added\"<\/span>);<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    But this is an opportunity! We could add a different<\/em> class upon a failure. What failure? Not entering any text<\/em>, for one. We could make the call not to allow entering blank to-dos, which at this point I think is a decent idea. <\/p>\n\n\n\n
    So the form event handler then becomes like:<\/p>\n\n\n
    form.addEventListener(\"submit\"<\/span>, (event) => {\n  event.preventDefault();\n  \/\/ Don't allow empty todo<\/span>\n  if<\/span> (!form[0<\/span>].value) {\n    buttonAddTodo.classList.add(\"shake\"<\/span>);\n    return<\/span>;\n  }\n  addTodo(event);\n  form.reset();\n});<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    Now check out these little @keyframe animations I can do with those classes:<\/p>\n\n\n
    .button-add-todo<\/span> {\n  ...\n\n  &.shake {\n    rotate<\/span>: 0deg<\/span>;\n    transform-origin<\/span>: bottom right;\n    animation<\/span>: shake 0.4s<\/span> cubic-bezier<\/span>(0.36<\/span>, 0.07<\/span>, 0.19<\/span>, 0.97<\/span>) both;\n  }\n  &.added<\/span> {\n    transform-origin<\/span>: center center;\n    animation<\/span>: added 0.4s<\/span> cubic-bezier<\/span>(0.36<\/span>, 0.07<\/span>, 0.19<\/span>, 0.97<\/span>) both;\n  }\n}\n@keyframes<\/span> shake {\n  50% {\n    rotate<\/span>: -12deg<\/span>;\n  }\n}\n@keyframes<\/span> added {\n  50% {\n    rotate<\/span>: 1turn<\/span>;\n    translate<\/span>: 0<\/span> 50px<\/span>;\n  }\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
    \"\"<\/figure>\n\n\n\n
    A little fun, maybe?<\/p>\n\n\n\n
    Let’s be careful to remove<\/em> those classes after the animation happens, so that another animation can be triggered freshly when needed:<\/p>\n\n\n
    buttonAddTodo.addEventListener(\"animationend\"<\/span>, () => {\n  buttonAddTodo.classList.remove(\"shake\"<\/span>, \"added\"<\/span>);\n});<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    Completing To-Do Interactions<\/h2>\n\n\n\n
    We’ve got a big ol’ box sitting there waiting for to-do items to be checked. And now that we’re using SVG, my temptation is to do a little fun “line drawing” with that. That is, see the checkbox be “drawn” as we complete the to-do, before removing it. <\/p>\n\n\n\n
    Here’s the trick. <\/p>\n\n\n\n
    First we go find the SVG itself in our template literal, and add this special pathLength<\/code> attribute to the actual shape:<\/p>\n\n\n
    <svg<\/span> width<\/span>=\"20\"<\/span> height<\/span>=\"20\"<\/span> viewBox<\/span>=\"0 0 241.44 259.83\"<\/span> class<\/span>=\"svg-check\"<\/span>><\/span>\n<\/span><\/span>  <polyline<\/span> pathLength<\/span>=\"1\"<\/span> points<\/span>=\"16.17 148.63 72.17 225.63 225.17 11.63\"<\/span> \/><\/span>\n<\/span><\/mark><\/svg<\/span>><\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
    This just makes animating it much easier.<\/p>\n\n\n\n
    Then we set and animate some specific SVG properties to do the drawing<\/a>:<\/p>\n\n\n
    .todo-list<\/span> {\n  ...\n  li {\n    ...\n    .svg-check {\n      opacity<\/span>: 0<\/span>;\n    }\n    &.complete<\/span> {\n      .svg-check {\n        opacity<\/span>: 1<\/span>;\n        stroke-dasharray<\/span>: 1<\/span>;\n        stroke-dashoffset<\/span>: 1<\/span>;\n        animation<\/span>: do-check 1s<\/span> infinite alternate;\n      }\n    }\n  }\n}\n\n@keyframes<\/span> do-check {\n  from<\/span> {\n    stroke-dashoffset<\/span>: 1<\/span>;\n  }\n  to<\/span> {\n    stroke-dashoffset<\/span>: 0<\/span>;\n  }\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
    Check out the drawing effect at work:<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    The trick to getting the animation to run before being removed is just to … wait.<\/p>\n\n\n
    function<\/span> removeTodo<\/span>(event<\/span>) <\/span>{\n  const<\/span> listItem = event.target.parentElement;\n  listItem.classList.toggle(\"complete\"<\/span>);\n  setTimeout(()<\/span> =><\/span> {\n    TODOs = TODOs.filter((todo<\/span>) =><\/span> todo.id !== event.target.parentElement.id);\n    localStorage[\"data\"<\/span>] = JSON<\/span>.stringify(TODOs);\n    buildUI();\n  }, 1000<\/span>);\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    You can see I’m just waiting for a second there, which is about the same, a little longer, than the animation itself. We could tie it to the animationend<\/code> event here also, but for some reason it felt better to me to leave this bit of business logic in the code here rather than tying it to a CSS thing. <\/p>\n\n\n\n
    Really smoooooth completions<\/h3>\n\n\n\n
    What if we remove a to-do from the middle<\/em> of the list. It’ll be jerky<\/em> won’t it? It certainly could be. This is one of those classic situations in CSS where being able to “animate to\/from auto” would be nice. In this case, we want to animate from “however tall a list item is” to zero. That way the bottom items in the list would slide up, making a much more comfortable animation. But honestly, even animating the height here feels like slight of hand, what I actually want is just not to think very hard about it and for the list items to just slide up into place, if at all possible.<\/p>\n\n\n\n
    Turns out this is a lovely use-case for View Transitions<\/a>. Without getting very deep at all into it, essentially all we need to do is:<\/p>\n\n\n\n
      \n
    1. Give all our to-dos a unique view-transition-name<\/code><\/li>\n\n\n\n
    2. When we update the DOM, e.g. buildUI()<\/code>, wrap that in a startViewTransition()<\/code> function.<\/li>\n<\/ol>\n\n\n\n
      So our template literal is updated to be like…<\/p>\n\n\n
        TODOs.forEach((todo<\/span>) =><\/span> {\n    HTML += `<li id=\"${todo.id}<\/span>\" style=\"view-transition-name: list-item-${todo.id}<\/span>;\"><\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
      We already have a unique ID so we’ll steal that for the dual purpose here. <\/p>\n\n\n\n
      Then wrap our DOM updating function like:<\/p>\n\n\n
      if<\/span> (!document<\/span>.startViewTransition) {\n  buildUI();\n} else<\/span> {\n  document<\/span>.startViewTransition(()<\/span> =><\/span> {\n    buildUI();\n  });\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
      That’s the same and progressive-enhancement friendly way to do it. It’s kind of required here, as that startViewTransition<\/code> will throw in browsers that don’t support it and it could break our whole site.<\/p>\n\n\n\n
      Look at us know:<\/p>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      This is friggin’ cool if you ask me. <\/p>\n\n\n\n
      So far<\/h2>\n\n\n\n
    There is a lot to know about SVG so I’m really just dropping the basic usage in here. I’ve chosen to drop the SVG code right “inline” with the HTML because I generally think that’s best because it’s fast and offers the most styling control. If you wanna dig more into SVG, I did write a book about it<\/a> one time you could check out. <\/p>\n\n\n\n
    You’d think system-ui<\/code> would be boring, but as a little fun and progressive enhancement, we can use some font-variation-settings<\/code> on it in the case that the font that loads supports them. It’s not the only one, but Apple’s San Francisco font ships as a variable font<\/a>, so we can do fun things like stretch it out. <\/p>\n\n\n
    I’m using OKLCH color function here because I find it the generally-nicest<\/a> of all the color models. One very immediate thing it does for us here is that it unlocks P3 colors. That --brand<\/code> color you see there is actually a bit more bright and vibrant than is even possible in the sRGB color space (like a hex code or any of the more common color functions you may be familiar with, like rgb()<\/code>). <\/p>\n\n\n\n