This project is a group Project created using Poke Api, HTML, CSS and JavaScript

Overview

JavaScript-Capstone-Project

This project is a group Project created using Poke Api, HTML, CSS and JavaScript.

Home Page

localhost 8080-Pokemon(1)

About Page

localhost 8080-Pokemon(2)

Project Documentation

Link To Project Documentation video

Built with

  • HTML
  • CSS
  • JavaScript
  • Webpack
  • Jest

Prerequisites

  • VSCode
  • Git
  • Browser With Developer Tools

Project Setup

  1. Setup the project by creating a new directory.
  2. Set up the repository on GitHub and use Gitflow.
  3. Set up webpack.
  4. Set up a JavaScript testing library (Jest).
  5. Build the home, comments and about interfaces.
  6. Used the PokeApi to retrieve the pokemon infornation
  7. Used the Involvement api to retrieve the likes and comments data
  8. Implemented jest to the project

Run Tests

I tested the website by running the code to a live server and opened it with Mozilla Firefox. Tested the local server.

Authors 📑

📝 License

This project is MIT licensed.

Contributing 🤝

Contributions, issues, and feature request are welcome anytime.

Comments
  • JavaScript Capstone:

    JavaScript Capstone:

    The following requirements were added to the project:

    1. Setup the project by creating a new directory.
    2. Set up the repository on GitHub and use Gitflow.
    3. Set up webpack.
    4. Set up a JavaScript testing library (Jest).
    5. Build the home, comments and about interfaces.
    6. Used the PokeApi to retrieve the pokemon information
    7. Used the Involvement api to retrieve the likes and comments data
    8. Implemented jest to the project
    9. Link to the project documentation: https://drive.google.com/file/d/10I0pO2RM-4va_xkXsOHVjsCcxpBz7KAV/view?usp=sharing

    Please check if we have missed something.

    Thank you

    opened by HabibPayenda 0
  • Comments counter tests:

    Comments counter tests:

    The following requirements were added to the project:

    • Implement Jest Unit tests for comments counter function.

    Please check if I have missed something.

    Thanks

    opened by HabibPayenda 0
  • Adds function for counting comments:

    Adds function for counting comments:

    The following requirements were added to the project:

    • Add a function that counts the number of comments.
    • The correct number of comments should be shown on the UI.

    Please check if I have missed something.

    Thanks.

    opened by HabibPayenda 0
  • Adds new comment:

    Adds new comment:

    The following requirements were added to the project:

    • Add a new comment to an item.
    • Get all the comments for a specific item.

    Please check if I have missed something.

    Thanks!

    opened by HabibPayenda 0
  • Shows comments for a game:

    Shows comments for a game:

    The following requirements were added to the project:

    • Show comments for a single game.
    • Get comments from the Involvement API.

    Please check if I have missed something.

    Thanks.

    opened by HabibPayenda 0
  • Adds comments pop-up:

    Adds comments pop-up:

    The following requirements were implemented:

    • Add comments pop-up.
    • Get the data from the Api based on the clicked item.

    Please check if I have missed something.

    Thanks!

    opened by HabibPayenda 0
  • Add content to home page

    Add content to home page

    To Highlight

    • Created the main part of the homepage that keeps the layout from the wireframe
    • Used the pokeApi to implement this task
    • Fixed linters errors
    • Prepared the comments button
    opened by David-Kasilia 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 David-Kasilia 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.

    opened by David-Kasilia 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).

    opened by David-Kasilia 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 David-Kasilia 0
Owner
David Kasilia Mwanzia
Software Developer, Working on being a Full-Stack Developer. Associate Android Developer with love for Kotlin. I'm open to new remote job opportunities.
David Kasilia Mwanzia
Group together Tailwind CSS modifiers like focus, peer-checked, dark:hover and more with HTML attributes 👩‍🚀

Tailwind CSS Group Classes Group together Tailwind CSS modifiers like focus, peer-checked, dark:hover and more with HTML attributes ??‍?? Using with a

Mark Mead 5 Sep 15, 2022
A simple breakout game created using HTML, CSS and Javascript

BreakOut Game This game is created using HTML, CSS and Javascript Game Overview The game would consist of 3 lives in order to clear out all the blocks

Dhanush 7 Nov 27, 2022
This project is built with JavaScript, Webpack, HTML & CSS, Leaderboard api. When user clicks on Refresh button it hits the api and responds with the data, The user can also post data to the api

leaderboad Description the project. this project is about the leaderboad i did during Microverse to build a website for adding Data to the API and fet

Emmanuel Moombe 4 May 30, 2022
Code Playground is a online application for testing and showcasing user-created and collaborational HTML, CSS and JavaScript code snippets

Code Playground About Code Playground is a online application for testing and showcasing user-created and collaborational HTML, CSS and JavaScript cod

Arshansh Agarwal 5 Dec 17, 2022
This project displays the art collection using the Metropolitan Museum of Art API. For this project we used HTML, CSS, Javascript, Webpack and Jest.

Metropolitan Museum of Art This project displays the art collection using the Metropolitan Museum of Art API. For this project we used HTML, CSS, Java

David Vera Castillo 11 Dec 24, 2022
Keep track of your bookshelf with this dynamic list, created with HTML, CSS and populated by JavaScript.

Awesome Books In this project, is ment to build a basic website that allows users to add/remove books from a list. Built With HTML JavaScript CSS Auth

Federico Luna 8 Sep 2, 2022
We are students of group named "Special-Team" of GоIT academy. We graduated JavaScript course and for consolidate in practice 📌 knowledges received on this course, we together 🤝 developed graduation project

Проект сайту "Filmoteka" Привіт! ?? Ми студенти групи під назвою "Special-Team" академії GоIT ?? ?? Ми закінчили курс JavaScript і для того, щоб закрі

Oksana Banshchykova 12 Jan 3, 2023
Emem Ekpo 7 Sep 9, 2022
This project is a Web application based on an external API. The API provides data about music (including artists, albums, etc) that users can access on-demand. This project was built with ES6, HTML and CSS and it is a SPA.

Capstone M2: Music App This project is a Web application based on the music API Napster built with ES6, HTML and CSS and it is a SPA. This API provide

Karla Delgado 12 Aug 29, 2022
"To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as complete. It is created with HTML , CSS , JS and webpack and NPM.

My Todo List "To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as com

Dyary Raoof Bayz Agha 5 Mar 29, 2022
Keep a track of all the tasks you need to do and Check off ones you have completed - Created using HTML, SCSS, JavaScript and Webpack.

To Do List Keep a track of tasks you need to do. An Application where you can keep a track of the tasks you need to do and checkout the ones that have

Awais Amjed 19 Jul 28, 2022
In this project we build a TVSeries website using Javascript, HTML, CSS and the TVMAze API. Each movie list on the page has a like and comments feature

MicroFLIX This project is a development about TV series, we fetched all data from TVmaze API, Users can like movies and also give a comment. All data

Bright Kweku Ahiadeke 7 Jul 25, 2022
In this project, we built a simple HTML list of To Do tasks. This simple web page was created using webpack and served by a webpack dev server.

To do list In this project, we built a simple HTML list of To Do tasks. This simple web page was created using webpack and served by a webpack dev ser

Jesús Vázquez 8 Dec 21, 2022
An Awesome Toggle Menu created with HTML,CSS,JQuery,font-awesome and line by line comment.

Demo : https://blackx-732.github.io/AwesomeMenu/ Under open source license No ©copyright issues Anyone can be modify this code as well Specifically we

BlackX-Lolipop 2 Feb 9, 2021
An HTML, CSS and JavaScript project related to a leaderboard, where you can submit a specific score data using an API request

LeaderBoard-Project In this project we use Webpack dependecy and a external API for displaying the leaderboard data inside the dom. Built with HTML-CS

Nicolas Gonzalez 4 Mar 3, 2022
A simple leaderboard project made while a student in Microverse using API to get scores for a game, JavaScript, HTML and basic CSS

A simple leaderboard project made while a student in Microverse using API to get scores for a game, JavaScript, HTML and basic CSS

Thiago Ponce 6 Nov 28, 2022
All five assignments and the final group project is done in class CSCI5410 (Serverless Data Processing) Fall 2021 of MACS at Dalhousie University.

Dalhousie University | Fall 2021 | CSCI5410 | SDP (Serverless Data Processing) All five assignments and the final group project is done in class CSCI5

Dhrumil Shah 1 Dec 26, 2021
created mac OS desktop with HTML, CSS, JS 😀

Hello World ?? I am planing to make a mac OS simulator using HTML, CSS, and JavaScript ?? Mac Os Monterey Try it now! : https://mhmdmhd6.github.io/Mac

mhmd 294 Dec 21, 2022