Code Monkey home page Code Monkey logo

movies-library's Introduction

Movie library

An excellent resourse for anyone interested in movies. Team project, developed by Go-IT students while studying JavaScript

Task

Create single-page application with adaptive to different display sizes, using giving design and technical requires, also improving it by providing additional features. Render page markup dynamically after fetching needed movies data and handling it in user browser.

Tools used:

Basic

  • HTML5 / CSS3;
  • SASS;
  • Vanilla JavaScript;

Service

  • VS Code;
  • Figma;
  • Trello;
  • Git / github;
  • Parcel bundler;

Advanced

  • Fetch API;
  • Handlebars;
  • Basic LightBox;
  • Notiflix;
  • Tui pagination;
  • Splide;
  • Web Storage API;
  • Axios;
  • Lodash;

About our project

What is ideal option to spend dark and cold autumn evening? Of course by watching great movie! Using our web page you can easily find your favourite movie by entering it's name into search form. Also if you haven't decided yet what do you want to watch, you can check our Popular movies sections, which are two: sorted by current day and last week. Active page pagination will help you to monitor where exactly in your search you are right now and return to something interesting you saw on other page.

After you found something for you, you can read basic info about the movie by clicking on movie card and opening modal window. Also there is an option to watch trailer, so it is easier to decide if you like the movie or not. And if you do, you can save it for later to your library under the list Queue, and if you already have watched the film there is Watched list for it too. You can easily toggl those buttons and movie will stay in your library with the correct watched/queue state.

Lately every web site must have theme toggl, because after the whole day of screen time your eyes are exhausted and need rest. Of course you can switch page theme to dark or back to light if you want.

On smaller screen devises there is a helping button, which appears after you have scrolled down the library a bit, so you can quickly go to the page top. Also if you are using the site on retina display, you will get the best quality images, while other devices save traffic and get optimal resolution images.

If you are interested about developers team, you can find an info about them in cute slider modal by clicking on link in footer.

Developers team

movies-library's People

Contributors

vladibon avatar olena-horobets avatar valeriy-fedulov avatar eduard-konovka avatar konstantinzakrzhevskyi avatar anna-sergeevna avatar iryna-grabovska avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.