Mead Nutrient Calculator

My first React App

By Michelle Torres / @nmicht

Let me tell you an story

I love Mead so I started to brew at home.

Make all the math for nutrient and yeast is complicated.

There was an amazing calculator, but now is only for premium members.

I will build my own.

Do it on React, because is "simple"

  • What the f... with states and props?
  • Should I build or not this as a component?
  • Loosing the scope for this

No dependencies!
My own form generator, no css framework.

  1. Form generator
  2. Input range with a beautiful style
  3. Responsive

Let's do a demo!

What I learned

Use background gradient for the input styling. 
background: repeating-linear-gradient(
    90deg,
    #ccc 0,
    #ccc 2px,
    transparent 0,
    transparent calc(100%/10 - 1.5px)
  ) 0.5em 2em no-repeat;
Use the state only for things that change a "state" on your app, nothing else.
Define a value for your controlled components. If you send undefined will not work.
Use arrow functions if you are going to pass your method to child components. 
handleChange = (event) => {
	this.setState({
	  ...this.state,
	  [event.target.name]: event.target.value,
	});
}
The pseudo selectors like 
::-webkit-slider-runnable-track
can't be grouped, you have to write the same rules for each one.
Use color palette generators like Paletton.com

Send your feedback! Open issues! Show your love!

By Michelle Torres / @nmicht