Emanuel Mares

Tech - Fotografie - Timp liber

Parcursul FEND Udacity – saptamana 2

In saptamana doua am fost un pic absent din curs. M-a atras un proiect legat de sesiunile de AMA facute pe canalul de Slack. Se dorea sa ii fie mai usor utilizatorului de a parcurge si a revedea intrebarile puse catre mentori. Cum nimeni nu prea discuta si multi doreau sa implice si back-end, ceea ce dureaza si va dura mai mult implementarea, mi-am zis ca as face ceva ce nu necesita back-end si sa folosesc Javascript si JSON pentru a retine informatiile pe server.

Cum am procedat?

Deci am inceput cu un design minimalist, ceea ce imi doream de la inceput, in culori inchise. Am folosi totusi un pic de Ajax sa comunic cu serverul si sa aduc fisierul json ca si array. Am folosit functia .fetch() pentru a incarca fisierul de pe server.

Restul a urmat cu afisarea arrayului sub forma unor iteme cu o intrebare si un raspuns. Am adaugat niste filtre, ca sa gasim bucati mai mici de date. Doua drop-menus pentru timpul sesiunii si tipul sesiuni si checkboxes pentru a alege tipul intrebarii, legat de vreun track, daca este prezent.

Am adaugat pe urma functionalitatea pentru formularul de cautare. Mi-am zis ca cea mai buna metoda de cautare sa fie initial dupa tot termenul introdus, tot sirul de cuvinte, daca nu se gaseste nimic, acel sir se sparge in bucati de cuvinte separate si se cauta dupa acele cuvinte, astfel incat sa fie prezente toate cuvintele intr-un singur item(fie in intrebare sau raspuns). De altfel am zis ca e mai bine sa se caute dupa cuvantul intreg(cautand „goog” nu va rezulta google de exemplu), pentru a nu arata sute de rezultate.

Pe urma am dorit sa limitez un pic datele afisate, in bucati de 5 iteme. Primele 5 sunt afisate implicit, apoi se pot incarca inca 5 prin butonul „Show more”. Le-am dat „display:none” tuturor rezultatelor in afara primelor 5, exceptand cu o regula de css: „.item:not([name=first-five]){ display:none }”.

La final am adaugat o a doua tema, la cererea celor de pe slack ce nu le-au placut text alb pe fundal negru( momentan e text #eee pe fundal #222 in varianta inchisa la culoare). Am implementat cu javascript un schimbator de culoare care si retine local tema aleasa. Proiectul se gaseste la pagina http://192.168.10.10/projects/ama/, dar este prezent si pe github.

Acesta e parcursul meu de saptamana aceasta. De maine voi reveni la curs, continuand responsive design.

Share