React-JS-learning

This #100DaysOfCode in this I am learning react JS. In this readme file, I will all the exercises and projects that I did on various days.

Day 5

1. Exercise 1: Toggling the button using conditional rendering in reactjs
   • 🔗Link: https://github.com/Shra2703/React-JS-learning/blob/main/DAY_5/Exercise1.html
2. Exercise 2: Favourite Food Item In this exercise the user can choose any of the food items by clicking their card using conditional rendering.
   • 🔗Link: https://github.com/Shra2703/React-JS-learning/blob/main/DAY_5/favouriteFood.html
3. Exercise 3: ScoreKeeper App In this exercise when the user clicks on any of the buttons from 1-6 or wicket the score is added to the score field and the result will be shown in the form of a table.
   • 🔗Link: https://github.com/Shra2703/React-JS-learning/blob/main/DAY_5/scoreKeeper.html

Day 6

1. Exercise 1: Comment on the number In the exercise user can click the button from 1-4 add the comment on the form and then submit it. The result will be shown in the form of a table.
   • 🔗Link: https://github.com/Shra2703/React-JS-learning/blob/main/DAY_6/formExercise.html

Day 7

1. Exercise 1: Changing the div text simultaneously Used form element and onChange event handler to complete this exercise.
   • 🔗Link: https://github.com/Shra2703/React-JS-learning/blob/main/DAY_7/formExercise2.html
2. Exercise 2: Add Student data used form element to add the data dynamically on the table
   • 🔗Link: https://github.com/Shra2703/React-JS-learning/blob/main/DAY_7/formExercise3.html
3. Exercise 3: Vehicle Count in the parking Can increase and decrease the no of vehicles in the marking using the onClick event handler.
   • 🔗Link: https://github.com/Shra2703/React-JS-learning/blob/main/DAY_7/parkingLotExercise3.html
4. Exercise 4: Quotify App Can add the quotes and their writer name in the form of div dynamically
   • 🔗Link: https://github.com/Shra2703/React-JS-learning/blob/main/DAY_7/quotifyApp.html

Day 8

1. Exercise 1: Customer Management System This is the mini project of customer management system.In this, we can maintain customer history like (name, phone no, no. of guest, check in, check out and delete that history also.
   • 🔗Link: https://github.com/Shra2703/React-JS-learning/blob/main/DAY_8/customerTable.html

Day 11

1. Exercise 1: NFT website Used create-react-app to complete this exercise. Divided the whole page into the class components
   • 🔗Link: https://github.com/Shra2703/React-JS-learning/tree/main/DAY_11/nftwebsite

Day 13

1. Exercise 1: Mood Predictor App In this exercise I simply used on click event handler. When someone clicks on the predict the mood button the div text changes
   • 🔗Link: https://github.com/Shra2703/React-JS-learning/tree/main/DAY_13/moodpredictor

Day 14

1. Exercise 1: Learning Props In this exercise I simply used Props that I passed from one component to another component to showcase the div.
   • 🔗Link: https://github.com/Shra2703/React-JS-learning/tree/main/DAY_14/learningprops

Day 15

1. Exercise 1: AnimePedia Mini-Project This is the animepedia project in which you can find your favorite anime series with their characters' information and the series' information.
   • 🔗Link: https://github.com/Shra2703/React-JS-learning/tree/main/DAY_15/animepedia

Day 18-19

1. Exercise 1: CodeTube Mini-Project This CodeTude mini-project contains the list of courses and the instructor and we can follow and unfollow the instructor as well. The Add to Cart functionality is also added with the cart count on the cart icon. Styled components are used to style the component.
   • 🔗Link: https://github.com/Shra2703/React-JS-learning/tree/main/DAY_18/codetube

DAY 20-21

1. Exercise 1: Movie Mini-Project is a simple React application that allows you to browse and manage your favorite Marvel entertainment series. With this app, you can increase or decrease the rating of series, add them to your cart, mark them as favorites, and more. It's your one-stop destination for managing your Marvel series collection.
   • 🔗Link: https://github.com/Shra2703/React-JS-learning/tree/main/DAY_11/movieproject