Skip to content

mathans1695/React-Js-Projects

Repository files navigation

React Js-Projects

Repo for React Js Projects

I did this projects to understand React Js concepts better

More projects yet to come

Yahtzee Game

Navigate to Yahtzee folder to explore project files

  • Project Summary - Roll the dice -> select one or more dice -> select score card appropriately for points. Repeat the process until your chances run out. Player with highest score is the winner. For more information, search 'yahtzee game rules'.
  • Project Snapshot - Screenshot of yahtzee homepage

Yahtzee Game Snapshot

DadJokes App

Navigate to DadJokes folder to explore project files. Used XMLHttpRequest to make request to API.

  • Project Summary - DadJokes uses DadJokes API, call to this API will return JSON object, provided 'Header Accept = application/json'. The JSON object will have jokes in it, extract and display the jokes. Initially, 10 unique jokes will be generated by making 10 or more requests, the reason for making more than 10 requests is to get 10 unique jokes. The 10 jokes will be stored locally, to clear the jokes from local storage, click the 'Clear Jokes' button. For more jokes, you can use 'New Jokes' button. You can also 'upvote' or 'downvote' a joke using 'up-arrow' or 'down-arrow' respectively.
  • Project Snapshot - Screenshot of DadJokes Project

DadJokes App Snapshot

Random Card Generator

Navigate to CardPicker folder to explore project files. Fetch API was used to make request to API.

  • Project Summary - Random Card Generator will pick a random card from deck of cards. I used Deckofcards API to achieve this. Call to this 'https://deckofcardsapi.com/api/deck/new/shuffle/' API returns a JSON object which has 'deck_id' property. Use that 'deck_id' to make another request to this url'https://deckofcardsapi.com/api/deck/${deck_id}/draw/', which will draw a random card from the deck. The special feature about using this API is that it draws card from the same deck, once the deck is over - you can't able to draw cards from the deck.
  • Project Snapshot - Screenshot of Random Card Generator

Random Card Generator Snapshot

Todo List

Navigate to smallTodoList folder to expolre project files.

  • Project Summary - Simple Todo list created using React Js. You can add, edit, remove and update the status of the task.
  • Project Snapshot - Screenshot of TodoList

TodoList Snapshot

Lights Out Game

Navigate to lightsOut folder to explore project files.

  • Project Summary - Make the tile to fill with one color. Clicking the tile will make adjacent top, left, right, bottom tiles to change color and the clicked tile will also change its color, repect this same process until every tile filled with one color.
  • Project Snapshot - Screenshot of Lights Out game

Lights Out Game Snapshot

Hangman Game

Navigate to hangman folder to explore project files

  • Project Summary - Find the word or die
  • Project Snapshot - Screenshot of hangman game

Hangman Game

DogApp

Navigate to dogApp folder to explore project files

  • Project Summary - This project was created to understand 'Client Side Rendering'
  • Project Snapshot - Screenshot of DogApp

DogApp Snapshot

Other Projects

  • Coin Fipper - Will filp the coin randomly on click of a button
  • Project Snapshot - Screenshot of Coin Flipper

Coin Flipper Snapshot

  • Pokedex - Displaying Pokeman card
  • Project Snapshot - Screenshot of Pokedex

Pokedex Snapshot

About

Projects did during my learning process

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published