A website that allows users to find, like, and comment on different TV shows.

Gabriel Fonseca

Last update: Dec 21, 2022

Overview

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 & Involvement API

Live demo:

Live demo

Getting Started:

To access and change the code on your computer (using GIT):

Note: if you don't use git, you can download the ZIP of this repository by clicking on the "Code" button above the files list.

Setup

Open the repository link.
Click on the "Code" button, above the files list.
Select one of the three options to copy the URL: HTTPS, SSH key and GitHub CLI.
Open the Terminal in the directory you want to copy the project.
Type git clone, paste the URL you copied, and press enter.

Usage

To edit this project:

Open the repository you cloned with a code editor that you like.
Edit the code as you want.

Authors:

👤 Gabriel Fonseca

Github: @Gopxfs
Linkedin: Gabriel Fonseca

👤 Jésus Vázquez

Github: @jevazquezb
Linkedin: Jézus Vázquez

🌟 Show your support

Give a ⭐ if you like our project!

📝 License

This project is MIT licensed.

Comments

Peer to Peer Code Review

Hi guys, your code looks super great so far! Excellent work. The only thing that I would do differently is to insert an HTML boiler template instead of creating and assigning the elements and their attributes with JS, besides that everything is excellent.

opened by ulisesedu7 1
[4pt] - Display list of items on the Homepage - Student A

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

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.

opened by Gopxfs 1
[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)

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).

opened by Gopxfs 1
[4pt] - Display number of likes for each item on the Homepage - Student A
When the page loads, the webapp the Involvement API to show the item likes and combines them with the data from the base API.

Remember that your page should make only 2 requests:

one to the base API

and one to the Involvement API.

This task does not include displaying the likes button (heart icon on the wireframe) for each item.
opened by Gopxfs 1
[3pt] - Display comments for a given item on the Comments pop-up - Student B

When the popup loads, the webapp retrieves data from the Involvement API to show the item comments.

This task does not include the counter of the comments.

opened by Gopxfs 1
[4pt] - Create feature: add new comment - Student B

Implement the "add new comment" form on the Comments pop up according to the wireframe:

When the user clicks on the "Comment" button, the data is recorded in the Involvement API and the screen is updated.

opened by Gopxfs 1
[3pt] - Add all items counter on the Homepage - Student A

Even if the API gives you the number of items, you will create a specific function to calculate it.

Make sure that the correct number is displayed on the Homepgae.

opened by Gopxfs 1
[3pt] - Add comments counter - Student B

Even if the API gives you the number of comments you will create a specific function to calculate it.

Make sure that the correct number is displayed on the Comments pop up.

opened by Gopxfs 1
Peer to Peer Feedback

Everything looks super great, good job overall!

The only recommendation is in the show details pop-up window, the items are not perfectly aligned, which would make the pop-up look way better if they were. Besides that everything is super good.

opened by ulisesedu7 0
TV shows network

In this project we created a website that connects the TVMaze API with Microverse's Involvement API, displaying a list of tv shows and allowing the user to interact with them by giving likes and comments. Also, it is possible to check other users' comments & information about the shows.

opened by Gopxfs 0
Show counter & app optimization
HTML

Added a class to the show li in the navbar (used to display correctly the show quantity).

JavaScript

Created a counter that updates every time a show is added successfully.

Update the function that creates shows, avoiding creating shows that don't exist in the API.

Update the function that gets likes from the Involvement API, calling it only once instead of one per item.

Optimized the function that updates the like quantity for each show, now awaiting all the promises at once, instead of making a queue.

Changed show quantity from 6 to 97 (now the app can scale to any quantity of shows).
opened by Gopxfs 0

A website that allows users to find, like, and comment on different TV shows.

Related tags

Overview

TV Shows Network

Built With:

Live demo:

Getting Started:

Setup

Usage

Authors:

🌟 Show your support

📝 License

Comments

HTML

JavaScript

Owner

Gabriel Fonseca

A webpage where the user can search for different TV shows, comment them and like them.

This App is about British Food where you find a list of meals that you can like and comment.

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

Awesome Books is a basic website that allows users to add/remove books from a list (including the title and author). It has threee different sections: 1. books list, 2. add new book, 3. contact.

Awesome books app is a basic website that allows users to add/remove books from a list. It is a single page app (SPA) which allow switching to different pages of the app without page load. Built with JavaScript.

This project is the capstone for module two of Microverse Bootcamp and has been done as a team and covered the following topics: - Connections to external APIs - Testing program functionalities using Jest - Displaying some products in to the UI - Added like and Comment features to the App

A list of movies are shown and you can add a comment on them or like them.

TV Shows Web App - A web application based on an external API which contains information about TV shows

TV Shows Web App - A web application based on an external API which contains information about TV shows

This is the backend of Wherechat, which is a chat application that allows users to find and meet each other through their location on the map.

A website where all the members can participate and ask questions. anybody can comment and give the answer.

CryptoList allows users to find out the latest information about top cryptocurrencies

⚡ A blazing fast, lightweight, and open source comment system for your static website, blogs powered by Supabase

Using Webpack and external API, this website saves and shows players' scores and allows the submission of new scores.

GameLand is an online gaming web application that allows users to view different kind of games available and share their views on each game.

The repository shows the compiler (simulator) of the Little Man Computer, which also contains some programs in the LMC programming language for implementing different functions.