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

Overview

#GameLand

Description

GameLand is an online gaming web application that allows users to view different kind of games available and share their views on each game.Users can like and make reservations to play online. Built with HTML/CSS , JAVASCRIPT,API.

Built With

  • Languages: HTML5, CSS5, JavaScript, API
  • VCS: GitBash
  • Package Manager: Node, NPM
  • Webpack -Following github flows standards.

Setup

to use the project To do list please follow :

Open GitHub and go to my GitHub repository name: GameLand.to clone. Click “Code” and copy the given URL.

click code and copy the URL.

Open “Git Bash” and change the current working directory to the location where you want the cloned directory.

Type git clone in the terminal, paste the URL you copied earlier, and press “enter” to create your local clone.

Syntax:

$ git clone {repository URL}

Usage

open your directory GameLand/

use vs-code or any IDE to view line code .

use you preferd browser to run the file .html to get project website. to run in terminal / git :

$ npm start

Screenshots

gameland

gameland 2

Live demo

Ckick here

Consume API

click here

Authors

👤 Tarik Bouari

👤 Alena okolike

🤝 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!

Acknowledgments

  • Linters Article: Setup Linters
  • Icons resource: Iconify

📝 License

This project is MIT licensed..

Comments
  • Add comment test

    Add comment test

    Hello @tarikbouari 👋 ,

    Please can your review my work.

    I ensured I followed through with the below requirement:

    • Make sure that function for the comments counter is covered with unit tests using Jest.
    opened by summyalena 1
  • Render comments

    Render comments

    Hello @tarikbouari ,

    Please can you make a review on my updated work.

    • I was able to fix the the render for each comments.
    • I ensured there wasn't any linter error.
    • I ensured html, CSS, JAVASCRIPT practices were adapted
    opened by summyalena 1
  • Render comments

    Render comments

    Hello @tarikbouari ,

    Please kindly review my task.

    • I rendered the comments from the get API.
    • I ensured there were linters errors.
    • I ensured i followed html, CSS and JAVSCRIPT best practices
    opened by summyalena 1
  • Add new comment counter

    Add new comment counter

    Hello @tarikbouari ,

    please review my task.

    • I successfully added a counter for the comments in the application.
    • I ensured there were no linter errors.
    • I ensured I followed html, css and javascript best practices.
    opened by summyalena 1
  • Add header

    Add header

    In this milestone I :

    • Added a navigation bar both for the mobile and desktop versions.
    • Styled the nav-bar
    • Implemented the slide bar of the mobile version
    • Fixed linters Error
    opened by tarikbouari 1
  • JavaScript-Capstone-project

    JavaScript-Capstone-project

    In this project we :

    • Chose the topic for your website and the API.
    • Chose images, text, icons, and fonts.
    • Set up the repository and tools.
    • Created the basic shared code on the home page.
    • Gave code reviews to your teammates.
    • Worked on individual interfaces.
    • Completed the work on individual interfaces.
    • Created a good README and PR description.
    • Refactored code and fixed linters errors
    • Record a video for your project.

    Here is the link to the video

    opened by tarikbouari 0
  • Add likes interation

    Add likes interation

    In this milestone I ;

    • Added interaction on the like icon
    • post data to the involvement API
    • retrieve data from the involvement API
    • Refactored code and fixed bug
    opened by tarikbouari 0
  • Consume api

    Consume api

    In this milestone I :

    • loaded all the card items from the base API
    • Created javascript api.js and render.js file
    • Created a function to retrieve data from the base API
    • Created a function to render the data on the home page
    • Styled the UI of the home page;
    • Refactor code and fixed linter errors
    opened by tarikbouari 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 tarikbouari 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 tarikbouari 0
  • [4pt]  - Display number of likes for each item on the Homepage - Student A

    [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 tarikbouari 0
  • Peer to peer code review (02/09/2022)

    Peer to peer code review (02/09/2022)

    Kudos @summyalena and @tarikbouari for reaching this far in your project, you have done well implementing almost all features with a few things to patch up. 👍 You have a nice looking UI

    However, we were able to come up with a few issues that we believe will make your project even better, Please try to work on the following ,

    • Making your code more modular by trying to abstract the logic for implementing several functionalities, an example is putting the following snippet of code in a separate file https://github.com/tarikbouari/Kanban-Board/blob/439116d1c3c7aa1d21ec48f82f622f4ade4c0fc3/src/modules/render.js#L15-L41 Also https://github.com/tarikbouari/Kanban-Board/blob/439116d1c3c7aa1d21ec48f82f622f4ade4c0fc3/src/modules/render.js#L97-L115

    • completing the README.md file

    Other than that, happy coding

    opened by John-Kibirige 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 tarikbouari 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 tarikbouari 0
  • [3pt]  - Display reservations for a given item on the Reservations pop-up - Student C

    [3pt] - Display reservations for a given item on the Reservations pop-up - Student C

    When the popup loads, the webapp retrieves data from the Involvement API to show the item's reservations.

    Screenshot 2021-06-27 at 22 21 48

    This task does not include the counter of the reservations.

    opened by tarikbouari 0
  • [4pt]  - Create feature: add new reservation - Student C

    [4pt] - Create feature: add new reservation - Student C

    Implement the "add new reservation" form on the Reservations pop up according to the wireframe:

    Screenshot 2021-06-27 at 22 35 30

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

    opened by tarikbouari 0
Owner
tarike bouari
Full-Stack Developer, Part-time UI designer. Stack : JavaScript | React | Redux | Ruby | Rails. I love coding challenges. Open to new opportunities.
tarike bouari
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.

wherechat-backend About the project This is the backend of Wherechat, which is a chat application that allows users to find and meet each other throug

Isaac Ndala 5 Nov 23, 2022
See a banned user's profile, their friends, their favorite games, their followers etc.

Roblox-Banned-User-Viewer AKA BanView See a banned user's profile, their friends, their favorite games, their followers etc. Ever wondered how to view

SCR1PP3D 4 Nov 18, 2022
A simple To Do List application that allows users to save, edit, mark completed, and delete their to-dos, and save their list when application is closed. Build with JavaScript.

To Do List A simple To Do List online application that allows users to save, and manipulate their to-dos, and save their list when application is clos

Mahmoud Rizk 10 Dec 20, 2022
List of awesome people offering their time for free to have a "coffee chat" with others about different topics, mostly in a mentorship kind of way.

Coffee Chat List of awesome people offering their time for free to have a "coffee chat" with others about different topics, mostly in a mentorship kin

Frédéric Harper 91 Dec 12, 2022
Journeys is a django based community-focused website that allows users to bookmark URLs (through chrome extension) and share their journeys through timelines.

Journeys is a django based community-focused website that allows users to bookmark URLs (through chrome extension) and share their journeys through timelines. A timeline is a collection of links that share a common topic or a journey of building and learning something new. Users can create timelines, share them publicly, and explore resources.

Students' Web Committee 14 Jun 13, 2022
A single-page application that allows users to keep track of their books. Users can add the book details (book title and author) and also, and the books can also be removed. Built with JavaScript, HTML, and CSS

Project Name Awesome book with ES6 Description the project. This is a single page application that allows users to keep track of their books. Users ca

Micheal Oguntayo 4 Oct 13, 2022
A full-stack social media application where users can post and share their coding projects, adding friends, and joining the discussion in threaded comments on project posts.

CodeFlow Description CodeFlow is a social media application where users can post and share their coding projects with others. By logging in or signing

Chris Nohilly 4 Dec 8, 2022
This project is a To-do list app which users can store and edit their Todo Tasks. Users can also change the order of their todo

Project This project is about a todo app bundling using webpack Additional description about the project and its features. Built With HTML CSS Javascr

Richmond Adu-Kyere 2 Jun 17, 2022
NFTKastle is an NFT marketplace where users can mint their pictures as NFTs, list their NFTs for sale, and buy NFTs from other users.

NFTKastle NFTKastle is an NFT marketplace where users can mint their pictures as NFTs, list their NFTs for sale, and buy NFTs from other users. NFTKas

Paschal 2 Oct 31, 2022
this project is an online library application that enables users to keep track of books in their library by adding to and removing books from a list. Built with JavaScript ES6 syntax, HTML, and CSS

Awesome-Book1 The aim of this project is to restructure the Awesome books app code by using ES6 syntax and organising the workspace using modules. The

Afolabi Akorede 7 Jul 17, 2022
A social network where you can share posts, view your profile metrics and follow other users.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Rui Neto 16 Aug 21, 2022
This React-Based WebPage allows the client/user system to create their own blog, where users can publish their own opinions.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Gauri Bhand 4 Jul 28, 2022
API, web and mobile application for finding a partner to play online multiplayer games.

Duo Finder Duo Finder is a simple mobile and web application for gamers looking for partners to play a game with. It's basics was developed during the

José Guilherme Fernandes Moura 2 Sep 20, 2022
A simple yet feature-rich counter that allows you to count the views of your Github README files and profile page

View Counter Purpose This is a simple yet feature-rich counter that allows you to count the views of your github README files and profile page. Featur

Toby Hagan 4 Nov 10, 2022
Evolve is an online investment portfolio management system where users can keep track of all the assets that they have invested in and how well their assets are performing.

Evolve is an online investment portfolio management system where users can keep track of all the assets that they have invested in and how well their assets are performing.

Indrajit 6 Oct 16, 2022