readyplayer2/food-traffic-light-calculator

A tool to find out the traffic light labelling for food products in the UK.

food-traffic-light-calculator's Issues

Allow photo upload for input and use OCR APIs to parse data

Use an Optical Character Recognition (OCR) API to parse the text in a photo as use for input.

Include string diff comparisions for partial matches of words like saturates and sugars.

Add screenshot of running app to README

Good to show preview of what app looks like.

support for portions

see /portion option

Backend API for design

routes for calculating each of the parts and returning green, orange, red (maybe with data) and encompossing routes for all in one.

Add error handling / UI prompts for invalid input

Values should be numeric positive values e.g:
1
1.2
12.21344

The UI should clearly show what is wrong.

calculate percentages of daily allowances

See reference in readme

Get data ranges from sources to feed calculations

https://www.nutrition.org.uk/healthyliving/helpingyoueatwell/324-labels.html?start=3

Create UI for traffic light display based on values found in #1

Disable auto-complete on fields as it blocks up seeing other values

support for liquids

Use of ml not grams.

Labels and text fields UI should be neater

It would be better if both labels (like Total Fat) and the corresponding text fields were aligned centrally or in some other configuaration.

The current layout looks quite messy.

UI shell with text fields for input

Fields to include:

• weight
• data from #1

percentages should be displayed beneath the raw values in traffic-light UI

Currently it is a single li element that is rendered and so it is all on one line. It would look better (more like examples) if the percentage was a different element that is displayed beneath. This may require some sort of wrapper containers to hold the two values (raw + percentage).

MIME type text/html error

Cross-Origin Read Blocking (CORB) blocked cross-origin response https://apod.nasa.gov/apod/image/1803/AstroSoM/hudf.html with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.

Simplify logic into generic function for crunching data

  crunchSugars() {
    if (this.state.lastResult.normalsugars <= 5.0) {
      return <li className='green'>{this.state.lastResult.normalsugars}</li>
    } else if (this.state.lastResult.normalsugars <= 22.5) {
      return <li className='orange'>{this.state.lastResult.normalsugars}</li>
    } else {
      return <li className='red'>{this.state.lastResult.normalsugars}</li>
    }
  }

This type of code is duplicated and very common, it should be a generic function and pass in value to tests, range 1, range 2.

render() has too much duplicated code

• write function to return each label element.

Unit tests for input / output

Add simple unit tests for sample values and expected output values + percentages.

Decide on unit testing framework.