samclarkb / food-app

This is a Github repository about a barcode scanner app (Javascript). Check the READ.me for information about the project.

📱 Barcode scanner app

Table of Contents

• Assesment
• Concept
• Process
• Activity diagram
• Wishlist
• Installation
• Recources
• License

📚 Assesment

The assignment is as follows: 'Design and build a Single Page Web App based on a User Story.' the user story that I've chosen is as follows: 'As a foodie, I want to be able to scan a product while shopping so that I can read more information about the product and make a good choice whether it fits my diet.'

Rubric:

💡 Concept

This application allows users to scan barcodes of products from the grocery store. The applictaion is based on the following user story: 'As a foodie, I want to be able to scan a product while shopping so that I can read more information about the product and make a good choice whether it fits my diet.'

When the scan button is pressed by the user, the camera will be enabled. Now when the user brings the barcode in front of the camera, the appplication will show the product details of the specific product. In the example below you see how the application works and what the application looks like.

📈 Process

Interested in my process of making the application? Click here!

➡️ Activity diagram

📝 Wishlist

There are a few things I didn't get done due to lack of time:

• insert barcode option
• close scanner option
• Available for Iphone
• Resolve the remaining issues

🔧 Installation

Clone this repository with the following command:

git clone https://github.com/samclarkb/Food-app.git

🔎 Recources

• W3schools. (2022). How TO - CSS Loader. How TO - CSS Loader. https://www.w3schools.com/howto/howto_css_loader.asp
• Webmentions. (2021). Detecting barcodes from the webcam. Detecting barcodes from the webcam. https://daily-dev-tips.com/posts/detecting-barcodes-from-the-webcam/

🔖 License

Copyright (c) 2021 Sam Clark Boot, MIT

food-app's Issues

verwijder onnodige .ds_store files

liever value returnen en via router getdata uitvoeren ipv spaghetti-code

Food-app/static/scripts/errorState.js

Lines 1 to 4 in db59e61

	const h2 = document.querySelector('main>div:last-of-type h2')
	const img = document.querySelector('main>div:last-of-type img')
	const h3een = document.querySelector('main>div:last-of-type h3')
	const h3twee = document.querySelector('main>div:last-of-type h3:nth-of-type(2)')

global variables

Food-app/static/scripts/errorState.js

Lines 1 to 4 in db59e61

	const h2 = document.querySelector('main>div:last-of-type h2')
	const img = document.querySelector('main>div:last-of-type img')
	const h3een = document.querySelector('main>div:last-of-type h3')
	const h3twee = document.querySelector('main>div:last-of-type h3:nth-of-type(2)')

variabelen kunnen ook in functie gedeclareerd worden

Zet .DS_Store in je .gitignore file

.DS_Store is een file die alleen op Mac OS bestaat maar hij is niet nodig om in je repo te hebben. Zet hem in je .gitignore

innerHTML liever niet gebruiken => appendchild

Food-app/static/scripts/errorState.js

Lines 1 to 4 in db59e61

	const h2 = document.querySelector('main>div:last-of-type h2')
	const img = document.querySelector('main>div:last-of-type img')
	const h3een = document.querySelector('main>div:last-of-type h3')
	const h3twee = document.querySelector('main>div:last-of-type h3:nth-of-type(2)')

kan in 1 regel import gezet worden

Food-app/static/scripts/errorState.js

Lines 1 to 4 in db59e61

	const h2 = document.querySelector('main>div:last-of-type h2')
	const img = document.querySelector('main>div:last-of-type img')
	const h3een = document.querySelector('main>div:last-of-type h3')
	const h3twee = document.querySelector('main>div:last-of-type h3:nth-of-type(2)')

Error state

Nog iets toevoegen voor als een barcode wordt gescand die niet gelezen kan worden/in de API staat

Veel div nog

Probeer wat divjes te verwijderen. Gebruik beter een header, section, article, etc.

code van internet, ff bron bij zetten

Food-app/static/scripts/barcode.js

Line 48 in db59e61

const renderLoop = () => {

functie wordt niet aangeroepen met haakjes

Food-app/static/scripts/errorState.js

Lines 1 to 4 in db59e61

	const h2 = document.querySelector('main>div:last-of-type h2')
	const img = document.querySelector('main>div:last-of-type img')
	const h3een = document.querySelector('main>div:last-of-type h3')
	const h3twee = document.querySelector('main>div:last-of-type h3:nth-of-type(2)')

zou je hier niet een aparte module "render" voor gebruiken?

Food-app/static/scripts/barcode.js

Line 37 in db59e61

document.querySelector('main>div:last-of-type').classList.add('laatZien')

soms gebruik je engelse en soms nederlandse benamingen, wees hier consistent in

consistente benamingen

Food-app/static/scripts/barcode.js

Line 37 in db59e61

document.querySelector('main>div:last-of-type').classList.add('laatZien')

soms gebruik je engelse en soms nederlandse benamingen, wees hier consistent in

fetch link in aparte url variable zetten

Food-app/static/scripts/errorState.js

Lines 1 to 4 in db59e61

	const h2 = document.querySelector('main>div:last-of-type h2')
	const img = document.querySelector('main>div:last-of-type img')
	const h3een = document.querySelector('main>div:last-of-type h3')
	const h3twee = document.querySelector('main>div:last-of-type h3:nth-of-type(2)')

Engels & Nederlands

Nog wat Engelse en Nederlandse benamingen door elkaar: 'enableButton & dataOphalen'

Diviritus, try to use more meaningful elements

Food-app/index.html

Lines 11 to 32 in f8012d8

	<main>
	<div>
	<h1>Weet <br> wat je eet</h1>
	<div> <p>Druk hier</p></div>
	<div>
	<a href="#barcode-list " >&#x5e</a>
	</div>
	</div>
	<div >
	<div>
	<div id="barcode-list"></div>
	</div>
	<div>
	<button> <img src="https://img.icons8.com/ios/50/ffffff/barcode.png"/> <p>Scan</p> </button>
	</div>
	<div>
	<img id="hallo"></img>
	<h2></h2>
	<ul><li></li></ul>
	</div>
	</div>
	</main>

Opnieuw scannen

Als een product is gescand, verdwijnt de button, dus kan je niet meer opnieuw scannen. Misschien ook nog wat extra styling voor de product info