piecioshka/warsawjs-workshop-26-my-photos

⛩️ WarsawJS Workshop #26 — JavaScript (Intermediate Level)

warsawjs-workshop-26-my-photos

⛩️ WarsawJS Workshop #26 — JavaScript (Intermediate Level)

Preview 🎉

???

Features

• ✅ Pobieranie zdjęć (Fetch API, async/await, ClassDeclaration, FunctionDeclaration)

  • Stworzyć funkcję fetchPhotos

• ✅ Prezentacja listy zdjęć (DOM, Array, Loops, ArrowFunction, Default Parameters)

  • Wykorzystać appendChild w procesie renderowania
  • Stworzyć funkcję renderGallery
  • Dodatkowo: Stworzyć paletę kolorów za pomocą CSS Variables
  • Dodatkowo: Osadzić fonty z https://fonts.google.com (nagłówki i tekst)
  • Dodatkowo: Ułożyć listy za pomocą CSS Flexbox
  • Dodatkowo: Dodać stopkę z encją ©
  • Dodatkowo: Dodać GitHub Ribbon: https://blog.github.com/2008-12-19-github-ribbons/

• ✅ Prezentacja wybranego zdjęcia w formie lightboxa

  Podobny projekt: https://github.com/piecioshka/warsawjs-workshop-1-gallery

  • Stworzyć funkcję zoomPhoto
  • Uwaga: Usuwać poprzednie powiększone zdjęcie przed pokazaniem kolejnego
  • Po uruchomieniu aplikacji powiększyć pierwsze zdjęcie z listy automatycznie
  • Dodatkowo: Podczas ładowania dużego obrazka pokazać loader, pobrać go ze strony https://loading.io/

• ✅ Dodatkowo: Wsparcie przeglądarek bez JavaScriptu

  • Zarejestrować się na https://prerender.io/
  • Wygenerować token na stronie https://prerender.io/
  • Zaktualizować wartość stałej PRERENDER_TOKEN w pliku server/start.js

• ✅ Prezentowanie danych nt. zdjęcia: autora, tagu, tytuł

  • Stworzyć funkcję displayPhotoDetails
  • Wykorzystać innerHTML w procesie renderowania
  • Tagi przechowywać w formie wyrazów (bez hashy)
  • Tagi wyświetlać poprzedzając każdego z nich hashem
  • Chować kontener z tagami, gdy ich nie ma

• ✅ Wyszukiwania zdjęć po dowolnej cesze

  • Stworzyć funkcję handleSearchForm
  • Obsługiwać kilka wpisanych fraz
  • W przypadku braku wyniku:
    • Usuwać wszystkie zdjęcia
    • Pokazać komunikat z informacją o braku wyników
  • W przypadku pustego zapytania:
    • Pokazywać wszystkie zdjęcia
  • Filtrowanie zdjęć według tagu
  • Filtrowanie zdjęć według autora
  • Filtrowanie zdjęć według tytułu

• ✅ Dodawanie zdjęć do ulubionych (Fetch API)

  • Stworzyć funkcję handleLike

  • ⛔️ UWAGA: w komunikacji z serwerem należy dodać nagłówek:

    headers: {
        "Content-Type": "application/json"
    }

  • Prezentowanie tylko ulubionych zdjęć

  • Stworzyć funkcję handleDisplayFavoritesPhotos

• ✅ Dodatkowo: Prezentacja zdjęć w formie before / after za pomocą slidera

  • Wykorzystać https://github.com/piecioshka/slider-before-after

• ✅ Deployment 🚀

Wykorzystywane narzędzia 🔨

• eslint
• json-server
• Dodatkowo: prerender-node

License

The MIT License @ 2018