A website which displays a list of movies and allows the user to leave a comment and like.

Related tags

Learning resource javascript html api webpack css3 tvmaze-api
Overview

Movie-website

Description

Mobile Version Desktop Version
Screenshot from 2022-05-24 13-02-49 laptop

"Movie-website" is a website which display movies from TVmaze api allowing users to like and comment. It keeps record of the users actions by counting likes and comments, saving them to an external server. We are building this website with Javascript (ES6) and Webpack, using promises and async awaits and multiple apis.

Built With

  • Javascript
  • HTML and CSS
  • WEBPACK
  • NPM
  • VS CODE

Getting Started

You can have a copy of this repo run on your local machine by just directly cloning it.

Live Demo

Click here!

Prerequisites

  • Node.js
  • npm
  • vscode(or else)

To get the output of our project make sure you have google Chrome, Mozila or any other browser installed.

Install

In order to install this project please go through the following steps:

    • Open the Terminal
    • Navigate to the directory where you want to add this repository
    • Run git clone https://github.com/GedeonTS/Leaderboard.git
    • Run npm install to install the necessary modules
    • Run npm start

Run the following commands to run linter tests

WebHint

$ npx hint .

StyleLint

$ npx stylelint "**/*.{css,scss}"

ESLint

$ npx eslint .

Usage

Open the index.html file with your code editor of your choice and/or a browser of your choice.

Open the project using a live saver extension that can be found into your code editor.

Authors

👤 Ushindi Gedeon

👤 Lembani Sakala

Show your support

Give a ⭐️ if you like this project!

Acknowledgments

  • Hat tip to anyone who helped us.

📝 License

This project is MIT licensed.

Comments
  • creation of search and make the website responsive

    creation of search and make the website responsive

    movie-website: the creation of search bar and footer update

    In this pull request, I created a search bar and added responsiveness to the website, added a hamburger button for the mobile version, and updated the footer with copyrights and license details.

    your review is welcome

    opened by GedeonTS 1
  • creation of search bar

    creation of search bar

    movie-website:creation of search bar

    I created a search bar in this pull request and updated the footer element by adding the copyrights and license details.

    highlights

    • create a search bar
    • add hamburger button
    • update footer with license and copyrights
    • update navbar
    • update overall style

    Your review is welcome! :smile:

    opened by GedeonTS 1
  • Capstone2: Movie-website

    Capstone2: Movie-website

    Movie-website

    In this project with my partner @Lembani, we implemented a movie app using TVmaze API and capstone API for recording the users' actions. You can comment and like any movie you see through this app.

    For the demo, Please Click Here!

    your review is welcome :smile:

    opened by GedeonTS 1
  • Add comment counter

    Add comment counter

    This PR contains the implementation of a comment counter.

    Highlights:

    • Add a comment counter to count and show the number of comments on each movie.

    Your review is welcome. 😄

    opened by Lembani 1
  • Create display comments popup

    Create display comments popup

    This PR contains the implementation of the Comment popup modal.

    When the popup loads, the web app retrieves data from the selected API and shows details about the selected item.

    Highlights:

    • Add popup modal markup and functionality
    • Add modal styles
    • etc

    Your review will highly be appreciated. 🙏🏾

    opened by Lembani 1
  • Creation of the main part of the homepage

    Creation of the main part of the homepage

    movie-website: Creation of the main part of the homepage

    highlights

    In this part, I created the main part of the homepage that keeps the layout from the wireframe. When the page loads, the web app retrieves data from the selected API and shows the list of items on the screen with the basic data. Your review is welcome :smiley:

    opened by GedeonTS 1
  • Create header

    Create header

    This PR contains the implementation of the header for the movie website project.

    Highlights:

    • Add HTML markup for header
    • Add CSS styles for header
    • Build output in dist folder
    • etc
    opened by Lembani 1
  • responsiveness

    responsiveness

    movie-website: make our website responsive

    In this pull, we managed to make our website responsive by setting the size intervalls for all screens lesser than 500px, lesser than 1000px and greater than 1000.

    your review is welcome! :smile:

    opened by GedeonTS 0
  • Add test to count comments on a movie

    Add test to count comments on a movie

    This PR contains Tests for a comment counter.

    Highlights:

    • Add a mock for comments
    • Test to count the number of comments on each movie.

    Your review is welcome. 😃

    opened by Lembani 0
  • This pull request contains the readme update

    This pull request contains the readme update

    README update

    In this part, I managed to update the readme file with contents related to the project adding:

    • project description
    • introduction
    • getting started section
    • install section
    • linters check section
    • authors section
    • contributors sction
    • acknowledgments

    your review is welcome! :smile:

    opened by GedeonTS 0
  • Likes

    Likes

    In this pull request we:

    • we create a function that adds a likes to displayed items once the user click on the icon
    • we created configured test feature for movie items counter your review is welcome!
    opened by GedeonTS 0
  • [0.5pt] Find external API - group task

    [0.5pt] Find external API - group task

    Find an API to base the development of the webapp around it. The API should allow you to

    • Get a list of items with a unique item id (or generate the unique id).
    • For a given item, get detailed information about it. choose an APIs that doesn't need authentication. if you select an API that requires authentication, you should implement it on your own. Also, if you select an API that provides image resources your webapp will be more visual.
    opened by Lembani 0
  • [4pt] - Display list of items on the Homepage - Student A

    [4pt] - Display list of items on the Homepage - Student A

    Create the main part of the homepage that keeps the layout from the wireframe:

    Screenshot 2021-06-27 at 21 50 23

    When the page loads, the webapp retrieves data from the selected API and shows the list of items on screen with the basic data (e.g. title + image).

    Prepare also "Comments" and "Reservations" buttons. They should be doing nothing - just being displayed.

    This task does not include displaying the number of likes for each item.

    This task does not include the counter of the items.

    Lembani: Reviewing the PR.

    opened by Lembani 0
  • [4pt] -Display Comments pop up with selected item's details - Student B

    [4pt] -Display Comments pop up with selected item's details - Student B

    Create a comments popup only with the top section (displaying details of the selected item)

    Screenshot 2021-06-27 at 22 10 45

    When the popup loads, the webapp retrieves data from the selected API and shows details about the selected item.

    Add event to button prepared by your teammate that will open your popup. You need to communicate with your team member to make sure that you do not block each other (most likely the easiest solution is to merge the list of items feature to the dev branch before you try to add that event).

    Link to PR: https://github.com/GedeonTS/movie-website/pull/24

    opened by Lembani 0
Owner
Ushindi Gedeon
👨‍💻 Full-Stack Web Developer, Football lover. JavaScript | Ruby | Rails | React | Redux | Python | C. Open to new opportunities
Ushindi Gedeon
GitHub https://gedeonts.github.io/movie-website/
The to-do list project is an app that allows users to successfully organize their day by inputting prioritized tasks. The project also allows users to carry out the CRUD operations for (add, edit and delete). Two special features of the app are that it saves tasks in the local storage of the user's browser, so when the user reloads or revisits the app, the user can view a list of tasks formerly inputted, and it allows users to prioritize their tasks by dragging up and down the list section.

TO-DO-LIST This is a To Do List Project that dynamically displays tasks to be done with interactions for removing and adding task when completed or no

Francis Ugorji 9 Nov 1, 2021
A list of movies are shown and you can add a comment on them or like them.

Dynasty Entertainment. A list of movies are shown and you can add a comment on them or like them. Built With HTML, CSS & JavaScript. webpack, bootstra

Hassan Momanyi 8 Nov 25, 2022
Tasty is a website that displays a number of recipes and allows users to leave likes and comments on their favourite meals.

Tasty Tasty is a website that displays a number of recipes and allows users to leave likes and comments on their favourite meals. Requirements Build a

Manel Hammouche 5 Aug 3, 2022
TODO List is a simple website that displays a list of todo and allows you to add and remove todo from that list.

Todo TODO List is a simple website that displays a list of todo and allows you to add and remove todo from that list. App Screenshot Live Demo Todo Ap

Ishmael Kargbo 3 May 12, 2022
The Space Traveler's Hub is an application where users can check out availble space rockets and book them or cancel the previously made booking. Also users can find a list of current missions along with their brief description and can join the selected mission or leave the mission the user joined earlier.

Space-Travelers-Hub The Space Traveler's Hub is an application where users can check out available space rockets and book them or cancel the previousl

Tiago Lelinski Marin 7 Sep 22, 2022
"Awesome books" is a simple website that displays a list of books and allows you to add and remove books from that list. By building this application with JavaScript, the website is more interactive!

Awesome-books Description "Awesome books" is a simple website that displays a list of books and allows you to add and remove books from that list. By

Cindy Dorantes 11 Oct 18, 2022
A website that allows users to find, like, and comment on different TV shows.

TV Shows Network A website that allows users to find, like, and comment on different TV shows. Built With: HTML SCSS JavaScript Webpack TVMaze API & I

Gabriel Fonseca 11 Dec 21, 2022
Keep track of the movies you've watched and create your own movies lists!

Cinematek Keep track of the movies you've watched and create your own movies lists! All the movies informations are provided by The Movie Database Dep

Caroline Oliveira 8 May 23, 2022
This Webapp The Cinema of Movies displays a list of shows

This Webapp The Cinema of Movies displays a list of shows. The user is able to like any of the movies, and also read more information about each movie once he clicks on the comments button. Also, the user is able to leave a comment about any of the movies.

Tobin 7 Mar 16, 2022
This "To-do-list" app is a simple web application that displays a list of task and allows you to add and remove task from that list. it is built with the latest technology namely; JavaScript with webpack Configuration.

To-do-list "To-do-list" is a simple web application that displays a list of task and allows you to add and remove task from that list. Built With HTML

Aniekan udo 10 Nov 21, 2022
This "To-do-list" app is a simple web application that displays a list of task and allows you to add and remove task from that list

This "To-do-list" app is a simple web application that displays a list of task and allows you to add and remove task from that list. it is built with the latest technology including but not limited to HTML, CSS, JavaScript and webpack to manipulate DOM.

Jerry Owusu 2 Feb 19, 2022
"To Do List" is a minimalist project that displays a list of task and allows you to add and remove task from that list. Built with JavaScript

To Do List Structure Solo programming project for module 2 week 2 of the Microverse Program. Live Demo Live Demo Link "To Do List" is a minimalist pro

Yersel Hurtado 7 Mar 5, 2022
A webpage where the user can search for different TV shows, comment them and like them.

TV Shows In this project we built a webpage where the user can search for different TV shows, comment them and like them. Video Built With Major langu

Giuseppe Tomasini 6 Jul 9, 2022
This is an educational and simple website that displays a list of books and allows you to add and remove books from that list built with HTML, CSS, JavaScript. The goal is to make it more organized by using modules and practice the ES6 syntax in the first Module

Awesome books ES6 This is a website that allows users to add and remove books from a list. This project is build using JavaScript objects Built With H

Mustafa Fahimy 7 Jul 21, 2022
Awesome books is a simple website that displays a list of books and allows you to add and remove books from that list

Awesome books is a simple website that displays a list of books and allows you to add and remove books from that list. By building this application, you will learn how to manage data using JavaScript. Thanks to that your website will be more interactive. built with modern JavaScript and uses SPA technology.

Aniekan udo 9 Mar 29, 2022
"Awesome books" is a simple website that displays a list of books and allows you to add ang remove books from that list. Also you can store your data in your local storage. Build with JavaScript, HTML and CSS.

Awesome Books Creating an app that adds and delete books from a list. Built With HTML CSS JavaScript Application Page url https://TimmyChan99.github.i

Fatima Ezzahra elmenoun 5 Jan 28, 2022
"Awesome books" is a simple website that displays a list of books and allows you to add and remove books from that list.

Hello! I am a software developer! I can help you build a product, feature or website. Take a look of my works. If you like what you see and have a pro

Roberto A. Baños Alvarez 8 May 9, 2022
This App is about British Food where you find a list of meals that you can like and comment.

British Classic Meals The British Classic Meals is a seclection of the most favorite and famous british recipes. Things you can do in this website: ch

Tiago Lelinski Marin 5 Aug 20, 2022
🦉The jQuery plugin "Stick to me" allows you to create exit-popups on your web page, so you can capture visitors just as they are about to leave.

?? The jQuery plugin "Stick to me" allows you to create exit-popups on your web page, so you can capture visitors just as they are about to leave. How

Guilherme Assemany 18 Feb 10, 2022