If you want to know more about your favorite TV show then you've come to the right place!

Overview

Ultimate Show Guide

We want to introduce you this web page that will help you to manage all your favourite TV series from place.

🖥️ Desktop version

Home Page

This page will show your favorite TV series

home-screenshot

Comments PopUp

This window will show you the comments and extended information about the selected TV serie

comments

Learning objectives

  • Use JavaScript to make websites dynamic and build basic single page apps.
  • Send and receive data from an API.
  • Use AAA pattern for unit tests.

🧩 Built With

  • HTML
  • TailwindCSS
  • Javascript
  • Linters
  • Jest
  • Webpack

📚 Getting Started

To get a local copy up and running follow these simple example steps.

Prerequisites

For this project you don't need any aditional tools to run it

Setup

Fork a copy to your repository and clone it locally

Install

Run npm install from your terminal window

Usage

You can work in your favorite Code Editor

💻 📱 Live Preview

If you want to see a live demo of this project, click here

Authors

👤 Anja

👤 William Morales

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

👏 Show your support

Give a ⭐️ if you like this project!

👍 Credits

API for fetching TV series information:

📝 License

License: MIT

Copyright (c) 2021 Anja Schmidt, William Morales

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Comments
  • Milestone #4: Add Comment Functionality

    Milestone #4: Add Comment Functionality

    In this milestone, I:

    • Implemented a function to post new comments to interaction API
    • Updated the comment container after each post to reflect the new comment
    opened by Anjacodes 1
  • Add fetch likes function

    Add fetch likes function

    In this PR I made the following changes:

    • Added fetch likes information function
    • Merge information into the same array
    • Render likes information
    • Close #12
    opened by williamrolando88 1
  • Peer-to-Peer code review

    Peer-to-Peer code review

    Congratulations William, your code is very nice and structured and looks beautiful. Some suggestions:

    • Reconsider if you need to map over the array as all this looping might be slowing down performance
    • Since the project is small and simple, there might be an easier solution
    • The page is loading quite slow so think about whether this can be optimized.
    opened by Anjacodes 1
  • Release/1.0.0

    Release/1.0.0

    Hi, in this PR we release the first version of Ultimate Show Guide which has the following functionalities:

    • Fetch data from an external API
    • Show the data on a home page
    • Let you click on the like button and keep track of that information
    • Let you open a comments window with extended information about the selected TV series
    • Add comments to the selected TV series
    • Keep track of the comments submitted

    Please find our project presentation video on vimeo

    opened by williamrolando88 0
  • Fix map nesting problem

    Fix map nesting problem

    Solved performance problem due to excessive use of map function.

    To solve this issue the previous functions nested in map functionwere called inside a unique forEach function

    opened by williamrolando88 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 williamrolando88 0
  • [4pt]  - Display list of items on the Homepage - William

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

    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.

    opened by williamrolando88 0
  • [4pt]  -Display Comments pop up with selected item's details - Anja

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

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

    opened by williamrolando88 0
  • [4pt]  - Display Reservations pop up with selected item's details - Student C

    [4pt] - Display Reservations pop up with selected item's details - Student C

    Create a reservations 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).

    opened by williamrolando88 0
  • [4pt]  - Display number of likes for each item on the Homepage - William

    [4pt] - Display number of likes for each item on the Homepage - William

    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 williamrolando88 0
  • [3pt]  - Display comments for a given item on the Comments pop-up - Anja

    [3pt] - Display comments for a given item on the Comments pop-up - Anja

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

    Screenshot 2021-06-27 at 22 21 00

    This task does not include the counter of the comments.

    opened by williamrolando88 0
Owner
William Morales
Full-Stack Developer | Remote-work experience | Front-End and Back-End knowledge | Open to collaborate
William Morales
A Single place to Discover, Collaborate, and Get your data right

A Single place to Discover, Collaborate, and Get your data right Darkseal Darkseal includes the following: Metadata schemas - Defines core abstraction

GuinsooLab 13 Dec 28, 2022
Grayce Muthui 8 Jun 16, 2022
A web app which help you to save you a list of your favorite books, they will be saved on your local storage to never loose them even if you close the page. Built wiht JavaScript

Awesome Books In this project I build a page to save a list of your favorites books, you can add new books, delete it and they will be saved in the lo

Williams Colmenares 9 Dec 17, 2022
Less clicking, more creating. Navigate to your favorite actions on the websites you love with just one click.

Navigate to your favorite actions on the websites you love with just one click Web https://irtaza9.github.io/awesome-shortcuts/ Available Shortcuts Go

Irtaza Hussain 9 Aug 25, 2022
Know more about who starred your repository 🕵️

⭐️ Know Your Stargazers ⭐️ Know more about who starred your repository ??️ Why know-your-stargazers When developing an open source project, sometimes

Hung Viet Nguyen 13 Sep 15, 2022
Slime jumper game is a simple game that requires you to escape from the enemies that come your way.

Slime Jumper What is this game? The slime jumper game is a game with a simple logic (but it was not so easy to do) where you have to escape from the e

Fatih 2 Mar 1, 2022
Hacktoberfest is all about meeting up all brains. In this repository we are planning to come with many ideas and works. You all can share your ides/works here.

Hacktoberfest Submit your Work Hacktoberfest is all about meeting up all brains. In this repository we are planning to come with many ideas and works.

Chinmay Patil 3 Oct 5, 2022
Reddit Place Tracer is a browser based userscript for the 2022 Reddit /r/Place project

Reddit Place Tracer is a browser based userscript for the 2022 Reddit /r/Place project which adds a transparent image on top of the canvas to aid communities with drawing the same image. It shows how the canvas should look, where each pixel goes, and what color. The user must manually click on these spots. It is not an automated bot and does not break any rules.

null 3 Apr 3, 2022
OnePiece /r/place repo to store the template and script for outlining the place to put titles

onepiece-place OnePiece /r/place repo to store the template and script for outlining the place to put titles This script & repo are cloned from Antice

Lopeh 11 Apr 9, 2022
The /r/place Atlas is a project aiming to catalog all the artworks created during Reddit's 2022 /r/place event.

The 2022 Place Atlas The /r/place Atlas is a project aiming to catalog all the artworks created during Reddit's 2022 /r/place event. This project was

Place Atlas 397 Dec 28, 2022
A web applicaton called 'MOVTIME' where you can come to stream movies by consuming the TMDB movie API

End result Click here : https://movtime-movie-app.netlify.app/ Figma design File Click here: https://www.figma.com/file/4IbpmTU6jtpRKdpbFmt4i8/Web-Des

Eniola Odunmbaku 12 Nov 11, 2022
🌐 How well do you know your top-level domains (TLDs)?

TLD-quiz How well do you know your top-level domains (TLDs)? Sure, you know .com and .net. It's not your first time on the Web. You might even know .i

Andrew Healey 4 Apr 27, 2022
TVMAZE API-based webapp, receives TV show episodes with all data about that TV show.

TVMAZE API-based webapp, receives TV show episodes with all data about that TV show. The Webapp has two interfaces: A home page, showing a list of Tv show episodes you can like. And a popup window with more data about the TV show that you can comment on.

Yasin Warsame 4 Aug 9, 2022
This Application provides basic authentication features like you can register and create account and then login and access your profile.

Authentication API This Application provides basic authentication features like you can register and create account and then login and access your pro

Rohan Kulkarni 1 Jan 17, 2022
How often do you get asked about the gadgets or software that you use? If the answer is quite often, you should be trying show off out. Curate the list of gadgets and software and share it with your fans and followers.

Show Off - Showcase your setup! How often do you get asked about the gadgets or software that you use? If the answer is quite often, you should be try

Adithya Sreyaj 15 Nov 24, 2022
I made countdown birthday and fireworks animation using HTML Canvas, CSS, JS. The fireworks animation gonna come out once the countdown is finished or in other words, "Birthday Time".

Countdown-Birthday-Fireworks-Animation I made countdown birthday and fireworks animation using HTML Canvas, CSS, JS. The fireworks animation gonna com

Mahardika Bayu S.B 19 Dec 31, 2022
ICT (Ideas Come Together) - SPA Team Project

ICT (Ideas Come Together) - SPA Team Project This is a team project for our ReactJS module in our webdev program.

Ashley 3 Jul 3, 2022
Clubhouse is a new type of social network based on voice—where people around the world come together to talk, listen and learn from each other in real-time.

Awesome Clubhouse The clubhouse is a new type of social network based on voice—where people around the world come together to talk, listen and learn f

Ehsan Ghaffar 27 Nov 9, 2022