https://github.com/harshsinghmumbai/dynamic_card_data_in_react

In this repo , i have created dynamic card data which change on onclick when someone click on button .
https://github.com/harshsinghmumbai/dynamic_card_data_in_react

filtering mapping onclick-events responsive-design

Last synced: about 2 months ago
JSON representation

In this repo , i have created dynamic card data which change on onclick when someone click on button .

• Host: GitHub
• URL: https://github.com/harshsinghmumbai/dynamic_card_data_in_react
• Owner: harshsinghmumbai
• Created: 2024-03-20T08:50:41.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-03-23T07:08:18.000Z (about 1 year ago)
• Last Synced: 2025-01-30T05:43:30.376Z (4 months ago)
• Topics: filtering, mapping, onclick-events, responsive-design
• Language: JavaScript
• Homepage: https://dynamic-carditems-in-react.netlify.app/
• Size: 740 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# LinkedIn Profile link is below:-

https://www.linkedin.com/in/harshsinghmumbai

# Featue of Dynamic Card data in React 

1. Fully Responsiveness

2. Filter card_items data onclick of the button

3. Production-based React Webapp.

# Mobile Responsive Design

![Screenshot (308)](https://github.com/harshsinghmumbai/Dynamic_Card_data_in_React/assets/145204222/b0c2932d-87bb-4d43-92e3-eba28625791a)

 
Data change on when clicked on Breakfast button  

 

![Screenshot (309)](https://github.com/harshsinghmumbai/Dynamic_Card_data_in_React/assets/145204222/3e7ab045-6c73-4c09-8bec-e32a43de1631)

![Screenshot (310)](https://github.com/harshsinghmumbai/Dynamic_Card_data_in_React/assets/145204222/ec11c1d5-52fd-4ef5-a9d7-1a87dbd51b75)


# Tablet Responsive Design

![Screenshot (311)](https://github.com/harshsinghmumbai/Dynamic_Card_data_in_React/assets/145204222/4809ddc8-cad8-4ad8-922b-965832a6bf63)

 
Data change on when clicked on Breakfast button  

 

 ![Screenshot (312)](https://github.com/harshsinghmumbai/Dynamic_Card_data_in_React/assets/145204222/c85e13d4-ca8e-4d55-9a1c-7beb27b90c56)

 
Data change on when clicked on Dinner button  

 

 ![Screenshot (313)](https://github.com/harshsinghmumbai/Dynamic_Card_data_in_React/assets/145204222/52787e69-478d-47a8-9e54-4a4b2f18db7e)


# Desktop Responsive Design

![Screenshot (314)](https://github.com/harshsinghmumbai/Dynamic_Card_data_in_React/assets/145204222/96be12d4-6885-417a-8219-1bc0258bcaf4)

 
Data change on when clicked on launch button  


![Screenshot (315)](https://github.com/harshsinghmumbai/Dynamic_Card_data_in_React/assets/145204222/63b284f8-2526-492f-89ef-335b712bf054)