cenikk / web-app-from-scratch-1920 Goto Github PK

This project forked from cmda-minor-web/web-app-from-scratch-1920

0.0 0.0 0.0 525 KB

Web App From Scratch @cmda-minor-web 1920

Home Page: https://cenikk.github.io/web-app-from-scratch-1920/docs/

web-app-from-scratch-1920's Introduction

Webapp from scratch

Description

In this course I will learn to build a web application without frameworks or unnecessary libraries, but with vanilla HTML, CSS & JavaScript. The end result is a modular, single page web app (SPA). Data will be retrieved from an external API of my choice (imdb.com), manipulated and finally shown in the UI of the App. With the gained knowledge I will be able to build interactive prototypes, based on real data. Besides that, I will gain a better understanding of how API's, frameworks and libraries work.

API

The API I will be using is from The Movie Database (TMDb). TMDb is an online database with films, television series and everything related to it. Link to API

Installation

1. Clone this repository

Type git clone https://github.com/cenikk/web-app-from-scratch-1920.git in your terminal.

Learning goals

I can add structure to your code by applying patterns. You can defend the choice for the chosen patterns
I can retrieve data, manipulate it and dynamically convert it to html elements using templating
I understand how you can work with an external API using asynchronous code
I understand how you can manage state in your application and you inform the user of state where necessary

Week 1

Week 2

Week 3

Resources

web-app-from-scratch-1920's People

Contributors

web-app-from-scratch-1920's Issues

Nette readme, prettig leesbaar

Goed bezig met je readme! Demo staat live, dat is erg fijn.

Er missen nog een aantal dingen, maar die issues heeft Roy al ingeschoten. Het is in elk geval een goed begin.

Alle code leeft in de global scope

https://github.com/cmda-minor-web/best-practices/blob/master/javascript.md#javascript-best-practices

innerHTML to textContent

Je kan je innerHTML veranderen naar textContent. Dit is wat netter en laat de bad practice innterHTML weg uit je code ( Laurens haat dit :P )

https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent

Foto van product in README.md

Natuurlijk is dit een beetje vroeg, maar vergeet geen foto toe te voegen als je straks klaar bent voor een goede "First impression".

ES6 consistency

Ik weet niet of je consistent wilt zijn met je code, maar er worden bijvoorbeeld arrow functies en lets/const gebruikt maar ook een oude for loop ( Deze kan je overigens veranderen naar een forEach volgens mij )
Lijkt mij slim om door te zetten naar ES6 en hier de consistentie in te vinden. http://es6-features.org/#Constants

Installation in README.md

leg ook uit hoe ze de html kunnen zien in de browser ik gebruik bijvoorbeeld dit:

Run code

Run the index.html into your browser

Als je extra packages gaat gebruiken kan je deze hier ook aangeven.

Concept in README.md

Schrijf een klein concept van je idee. Dit kan wellicht 2 a 3 zinnen zijn, zodat als je de readme leest direct een indruk hebt van wat je gaat bekijken.

Misschien de course map verwijderen?

Ik kreeg de tip om de course folder uit je repo te halen.

Maar dat moet je zelf weten. Verder ziet het er goed uit.

API in README.md

Misschien kan je laten zien wat voor output je krijgt uit de API dit kan je zetten tussen

in .md, zodat je niet meteen je hele pagina vult.
Een iets langere uitleg over de database en misschien wat dieper in gaan op wat ze precies doen en hoe je de data kan verkrijgen.

HTML in javascript

Je laat aardig veel in via javascript maar probeer zo min mogelijk HTML te hebben en dit dus via javascript in te laden. dit gaat niet om etc.

Map structure

Zelf deel ik mijn mappen in weken in. Dit geeft een goed overzicht voor waar ik mee bezig ben deze week. Je hebt in je readme "week1", "week2", "week3". dus misschien kan je dan mooi aanvullen als je het op deze manier bijhoud.
Weet ook nu niet direct waar je code staat

Comments zijn goed. Zou deze functie een eigen definitie geven ipv anoniem.

Ik zou deze functie misschien los trekken uit de eventListener en er een functie definitie van maken. Dan kun je deze ook makkelijk opnieuw inzetten.

Ook maak je goed gebruik van comments, maar verwacht ik bij zoiets vets als de onderstaande regels dan ook een kleine comment van wat daar precies gebeurt.

web-app-from-scratch-1920/docs/js/app.js

Lines 13 to 40 in d380130

    
           document.addEventListener('DOMContentLoaded', function(){ 
        
             let nowPlayingURL = "".concat(baseURL, 'movie/now_playing?api_key=', apiKey) 
        
             let main = document.querySelector('main'); 
        
             fetch(nowPlayingURL) 
        
             .then(result=>result.json()) 
        
             .then((data)=>{ 
        
               console.log(data.results); 
        
               for (let i = 0; i < data.results.length; i++) { 
        
                 let div = document.createElement('div'); 
        
                 let h2 = document.createElement('h2'); 
        
                 let img = document.createElement('img'); 
        
                 let ribbon = document.createElement('span'); 
        
                 movieList.appendChild(div); 
        
                 div.appendChild(h2); 
        
                 div.appendChild(img); 
        
                 div.appendChild(ribbon); 
        
                 h2.innerHTML = data.results[i].title; 
        
                 img.src = 'https://image.tmdb.org/t/p/w185/' + data.results[i].poster_path; 
        
                 img.alt = data.results[i].title; 
        
               } 
        
               // main.style.backgroundImage = "url('https://image.tmdb.org/t/p/w185/" + data.results[0].poster_path + "')"; 
        
             }) 
        
           })

Let or const?

https://github.com/cmda-minor-web/best-practices/blob/master/javascript.md#var-let-or-const

ES6 Modules

het is mogelijk om ES6 modules te gebruiken, zodat je voor elk component een andere file hebt. maakt het ook overzichtelijker voor jezelf.

Joost zijn Fetcher?

Joost heeft het over een Fetcher gehad dat is de hele fetch functie die je elke keer runt in een andere file stoppen, zodat hij herbruikbaar is en dit maakt je code ook cleaner/korter

https://codeburst.io/fetch-api-was-bringing-darkness-to-my-codebase-so-i-did-something-to-illuminate-it-7f2d8826e939

	document.addEventListener('DOMContentLoaded', function(){
	let nowPlayingURL = "".concat(baseURL, 'movie/now_playing?api_key=', apiKey)
	let main = document.querySelector('main');


	fetch(nowPlayingURL)
	.then(result=>result.json())
	.then((data)=>{
	console.log(data.results);
	for (let i = 0; i < data.results.length; i++) {

	let div = document.createElement('div');
	let h2 = document.createElement('h2');
	let img = document.createElement('img');
	let ribbon = document.createElement('span');

	movieList.appendChild(div);
	div.appendChild(h2);
	div.appendChild(img);
	div.appendChild(ribbon);

	h2.innerHTML = data.results[i].title;
	img.src = 'https://image.tmdb.org/t/p/w185/' + data.results[i].poster_path;
	img.alt = data.results[i].title;
	}
	// main.style.backgroundImage = "url('https://image.tmdb.org/t/p/w185/" + data.results[0].poster_path + "')";
	})
	})