Good Karma: A React to-do App using Hooks

Basic React16.8.x todo app using hooks

No Media queries! (responsive–even in landscape modes)

No css file! (using createGlobalStyle from Styled-Components API)

Looks sharp on Chrome, Safari & Mozilla

Feature-set

Feature	Notes	Status
React	16.8.6	√
Styled-Components	uses	√
Parcel	1.12.3	√
CSS-Grid	(fully responsive w/o media queries )	√
CSS-Animations	cubic-bezier animation timing function	√

(prettier, eslint-recommended, jsx-a11y plugin)

Media queryless responsiveness

styles.css is removed entirely using styled-components

https://www.styled-components.com/docs/api#createglobalstyle

import styled, { createGlobalStyle } from "styled-components";

const GlobalStyles = createGlobalStyle`
  * {
    box-sizing: border-box;
    color: #333;
  }
  html {
    font-size: 62.5%;
  }
  body {
    margin: 0;
    font-size: 1.6rem;  
  }
`;

Attribution

Andy Bell was the inspiration behind the layout idea and I'm very grateful. https://twitter.com/andybelldesign

Andrew Faulkner's interesting codepen was the inspiration behind the hover buttons https://codepen.io/andrewfaulkner/pen/tcvJz

Traversy Media's basic intro to hooks inspired the structure of the code. https://www.youtube.com/watch?v=mxK8b99iJTg

Max Stoiber, co-creator of styled-components, is super-human & a nice person. https://mxstbr.com/

test