Frontend developer: zadania rekrutacyjne

Proszę wykonać zadania i przesłać link do repozytorium z zadaniem (preferowany Github) na adres joinpandas@pandagroup.co.

01.
Zadanie 1.

Korzystając z gulp-a oraz innych technologii, utwórz stronę internetową stylując ją wedle dołączonych grafik

  1. Staramy się automatyzować pracę dlatego też prosimy o przygotowanie prostego gulp-a, który pozwoli Ci wykorzystać moc Sass-a (może być ES5 lub ES6).
  2. Proszę ostylować podane grafiki znajdujące się w folderze layout.
    • Pamiętaj o responsywności
    • Dbaj o semantykę kodu
    • Plus za BEM-a
    • Unikaj floatów, flex jest dużo praktyczniejszy!

Proponowana struktura plików

  • /1
    • index.html
    • — /src
      • — /scss
        • — main.scss
    • — /layout – tutaj umieść layout’y
    • — /disc
      • — /css – w to miejsce Gulp ma wyrzucać pliki .css
    • — Pliki od Gulp’a

Uwagi do zadania:

Technologie jakie należy wykorzystać: CSS, HTML, JavaScript, Gulp

02.
Zadanie 2.

W pliku test.html naszym celem jest, aby po kliknięciu na element li zaktualizowała się wartość selecta.

  1. Kod został już napisany, ale pomimo wielu godzin poszukiwań drobnego buga coś nie działa. A czy Ty znajdziesz błąd?

Pobierz plik test.html i umieść go w folderze o nazwie “2”

Uwagi do zadania:

Technologie jakie należy wykorzystać: JavaScript

03.
Zadanie 3.

Pobieranie API Giphy

  1. W przygotowanym pliku index.html po kliknięciu na button pobierz z API Giphy i wyświetl jedno zdjęcie randomowego kota.
    • Do pliku jest już dołączone jQuery, ale nic nie stoi na przeszkodzie, aby korzystać z czegoś nowszego (np. Axios, natywny fetch).

Pobierz plik index.html i umieść go w folderze o nazwie “3”

Uwagi do zadania:

Jeżeli zdecydujesz się na to drugie rozwiązanie najwygodniej Ci będzie zapisać to na https://jsfiddle.net/ (chyba że masz jakiś ulubiony boilerplate 😉 )

Dokumentacja API: https://github.com/Giphy/GiphyAPI

Proszę wykonać zadania i przesłać link do repozytorium z zadaniem (preferowany Github) na adres joinpandas@pandagroup.co.