/HealthyCheck

The course Web App From Scratch is about learning to build web applications with vanilla HTML, CSS & JavaScript, without frameworks or unnecessary libraries. Web App From Scratch is part of the half year minor programme about Web Design and Development in Amsterdam. Bachelor Communication and Multimedia Design, Amsterdam University of Applied Science.

Primary LanguageCSSMIT LicenseMIT

Healthy Check

Healthy Check is an application that let users scan a barcode of any food/drink product. When the user scans the barcode, the barcode will be used to receive data from the Open Food Facts API. This will receive data such as nutriments in the product.

Click here for the live demo

💡 Concept

As foodie I want to be able to scan products while doing groceries, so I can read more information about the product and make a good choice that fits with my diet. Design and build a single page app based on a chosen user story.

Activity Diagram

activity_diagram_Tekengebied 1

⚙️ Installation

open your CLI (windows) or Terminal (Mac)

copy and paste this code

$ git clone https://github.com/jody29/HealthyCheck.git

open the folder

$ cd HealthyCheck

open the folder in VScode

$ code .

📥 API Documentation

For this project I used the Open Food Facts API. The documentation for this API can be found here: Documenation

✅ Assignment

Design and build a single page app based on a chosen user story.

Deficiency Criterion Improvement
User Interface - you design, build and test the user interface by applying interface design principles
Code structure - you write modular, consistent and efficient HTML, CSS and JavaScript code by applying structure and best practices. You manage state for the application and the UI
Data management - you understand how you can work with an external API using asynchronous code. You can retrieve data, manipulate and dynamically convert it to structured html
Project - your app is working and published on GitHub Pages. Your project is thoroughly documented in the README.md file in your repository.

📋 Todo list

To do Done?
Barcode scanner
API connection
get data from API
Ideal state
Loading state
Error state
Manually fill in barcode
Manually fill in product
Show suggestions when fill in

License

MIT