SPF calculator

by jonahe

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>

CSS

h1,b {
  user-select: none;
}
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
  min-height: 300px;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
  border: 2px solid black;
}

input {
  width: 80%;
  margin-right: 5px;
  padding: 30px 0;
  transform: scale(1.25) translateX(10%);
}

Babel + JSX

class SPF extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    	factor: 15
    }
  }
  
  render() {
  	const {factor} = this.state;
    const getProtectionPercentage = factor => {
    	const result = (1 - (1 / factor)) * 100;
    	return result.toPrecision(4);
    };
    return (
      <div>
        <label htmlFor="factor"><b>Sun factor {factor}</b></label><br/>
        <input 
          name="factor" 
          type="range" 
          min="1" 
          max="100" 
          value={factor} 
          onChange={(e) => this.setState({factor: e.target.value})}
          list="tickmarks"
         />
         <datalist id="tickmarks">
           { Array(10).fill("").map((_, i) => 
            	<option  value={(i + 1) * 10} /> )
           }
         </datalist>
        
        <h1><b>Blocks { getProtectionPercentage(factor) } % of sunlight.</b></h1>
      </div>
    )
  }
}

ReactDOM.render(<SPF />, document.querySelector("#app"))