From 0e960c6f7a82d09364af454e2ad6e45f1afd6f0f Mon Sep 17 00:00:00 2001 From: PalakJain1504 Date: Fri, 18 Oct 2024 22:51:07 +0530 Subject: [PATCH] done --- package-lock.json | 61 +++++++++++++ package.json | 1 + src/App.css | 160 ++++++++++++++++++++++++++++++----- src/App.js | 51 ++++++----- src/components/BeerDetail.js | 35 ++++++++ src/components/Beers.js | 21 +++++ src/components/Header.js | 14 +++ src/components/Home.js | 21 +++++ src/components/NewBeer.js | 55 ++++++++++++ src/components/RandomBeer.js | 33 ++++++++ src/components/style.css | 121 ++++++++++++++++++++++++++ 11 files changed, 528 insertions(+), 45 deletions(-) create mode 100644 src/components/BeerDetail.js create mode 100644 src/components/Beers.js create mode 100644 src/components/Header.js create mode 100644 src/components/Home.js create mode 100644 src/components/NewBeer.js create mode 100644 src/components/RandomBeer.js create mode 100644 src/components/style.css diff --git a/package-lock.json b/package-lock.json index 3c65e57..96884b9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.27.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" } @@ -3085,6 +3086,14 @@ } } }, + "node_modules/@remix-run/router": { + "version": "1.20.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.20.0.tgz", + "integrity": "sha512-mUnk8rPJBI9loFDZ+YzPGdeniYK+FTmRD1TMCz7ev2SNIozyKKpnGgsxO34u6Z4z/t0ITuu7voi/AshfsGsgFg==", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -13971,6 +13980,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.27.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.27.0.tgz", + "integrity": "sha512-YA+HGZXz4jaAkVoYBE98VQl+nVzI+cVI2Oj/06F5ZM+0u3TgedN9Y9kmMRo2mnkSK2nCpNQn0DVob4HCsY/WLw==", + "dependencies": { + "@remix-run/router": "1.20.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.27.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.27.0.tgz", + "integrity": "sha512-+bvtFWMC0DgAFrfKXKG9Fc+BcXWRUO1aJIihbB79xaeq0v5UzfvnM5houGUm1Y461WVRcgAQ+Clh5rdb1eCx4g==", + "dependencies": { + "@remix-run/router": "1.20.0", + "react-router": "6.27.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", @@ -18835,6 +18874,11 @@ "source-map": "^0.7.3" } }, + "@remix-run/router": { + "version": "1.20.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.20.0.tgz", + "integrity": "sha512-mUnk8rPJBI9loFDZ+YzPGdeniYK+FTmRD1TMCz7ev2SNIozyKKpnGgsxO34u6Z4z/t0ITuu7voi/AshfsGsgFg==" + }, "@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -26585,6 +26629,23 @@ "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==" }, + "react-router": { + "version": "6.27.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.27.0.tgz", + "integrity": "sha512-YA+HGZXz4jaAkVoYBE98VQl+nVzI+cVI2Oj/06F5ZM+0u3TgedN9Y9kmMRo2mnkSK2nCpNQn0DVob4HCsY/WLw==", + "requires": { + "@remix-run/router": "1.20.0" + } + }, + "react-router-dom": { + "version": "6.27.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.27.0.tgz", + "integrity": "sha512-+bvtFWMC0DgAFrfKXKG9Fc+BcXWRUO1aJIihbB79xaeq0v5UzfvnM5houGUm1Y461WVRcgAQ+Clh5rdb1eCx4g==", + "requires": { + "@remix-run/router": "1.20.0", + "react-router": "6.27.0" + } + }, "react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", diff --git a/package.json b/package.json index 022d9bf..60d5689 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.27.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" }, diff --git a/src/App.css b/src/App.css index 74b5e05..d512e83 100644 --- a/src/App.css +++ b/src/App.css @@ -1,38 +1,152 @@ -.App { - text-align: center; +/* Reset some default browser styles */ +body, html, h1, h2, h3, p, ul, li { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: Arial, sans-serif; } -.App-logo { - height: 40vmin; - pointer-events: none; +/* Overall page styles */ +body { + background-color: #f4f4f4; + color: #333; + padding: 20px; } -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } +/* Style for the Header */ +.header { + background-color: #00aaff; + padding: 10px 20px; + text-align: center; } -.App-header { - background-color: #282c34; - min-height: 100vh; +.header a { + color: #fff; + text-decoration: none; + font-size: 24px; + font-weight: bold; +} + +/* Home Page Styles */ +.home { display: flex; flex-direction: column; align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); + gap: 20px; + margin-top: 30px; +} + +.home a { + text-align: center; + text-decoration: none; + color: #333; +} + +.home img { + width: 100%; + max-width: 300px; + border-radius: 10px; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); +} + +.home h2 { + font-size: 20px; + margin-top: 10px; +} + +/* Beers List Styles */ +.beers-list { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + gap: 20px; + margin-top: 20px; +} + +.beers-list div { + background-color: #fff; + padding: 10px; + border-radius: 10px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + text-align: center; +} + +.beers-list img { + height: 150px; + object-fit: contain; +} + +.beers-list h3 { + font-size: 18px; + margin-top: 10px; +} + +/* Beer Detail Page Styles */ +.beer-detail { + background-color: #fff; + padding: 20px; + margin: 20px auto; + max-width: 600px; + border-radius: 10px; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); + text-align: center; +} + +.beer-detail img { + height: 250px; + margin-bottom: 20px; +} + +.beer-detail h2 { + font-size: 28px; + margin-bottom: 10px; +} + +.beer-detail p { + font-size: 16px; + line-height: 1.5; + margin-bottom: 10px; +} + +/* New Beer Form Styles */ +form { + background-color: #fff; + padding: 20px; + margin: 20px auto; + max-width: 400px; + border-radius: 10px; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); +} + +form input, form textarea { + width: 100%; + padding: 10px; + margin: 10px 0; + border: 1px solid #ddd; + border-radius: 5px; + font-size: 16px; +} + +form button { + width: 100%; + padding: 10px; + background-color: #00aaff; color: white; + border: none; + border-radius: 5px; + font-size: 16px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +form button:hover { + background-color: #0077cc; } -.App-link { - color: #61dafb; +/* General Utility Classes */ +.text-center { + text-align: center; } -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } +.mt-20 { + margin-top: 20px; } diff --git a/src/App.js b/src/App.js index 3784575..27d9907 100644 --- a/src/App.js +++ b/src/App.js @@ -1,25 +1,32 @@ -import logo from './logo.svg'; -import './App.css'; +// src/App.js +import React, { useState } from 'react'; +import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'; +import Home from './components/Home'; +import Beers from './components/Beers'; +import BeerDetail from './components/BeerDetail'; +import NewBeer from './components/NewBeer'; +import RandomBeer from './components/RandomBeer'; +import 'D:/Palak Jain/lab-react-FullStackDrinks/src/components/style.css'; -function App() { - return ( -
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
-
- ); -} +const App = () => { + const [beers, setBeers] = useState([]); + + const addBeer = (newBeer) => { + setBeers([...beers, newBeer]); // Update beers list + }; + return ( + +
+ + } /> + } /> + } /> + } /> + } /> + +
+ + ); +}; export default App; diff --git a/src/components/BeerDetail.js b/src/components/BeerDetail.js new file mode 100644 index 0000000..b4168ca --- /dev/null +++ b/src/components/BeerDetail.js @@ -0,0 +1,35 @@ +// src/components/BeerDetail.js +import React, { useEffect, useState } from 'react'; +import { useParams } from 'react-router-dom'; +import './style.css'; + +const BeerDetail = () => { + const { id } = useParams(); + const [beer, setBeer] = useState(null); + + useEffect(() => { + const fetchBeerDetail = async () => { + const response = await fetch(`https://api.punkapi.com/v2/beers/${id}`); + const data = await response.json(); + setBeer(data[0]); + }; + fetchBeerDetail(); + }, [id]); + + return ( +
+ {beer ? ( + <> +

{beer.name}

+ {beer.name} +

{beer.description}

+

ABV: {beer.abv}%

+ + ) : ( +

Loading...

+ )} +
+ ); +}; + +export default BeerDetail; diff --git a/src/components/Beers.js b/src/components/Beers.js new file mode 100644 index 0000000..85c2ed7 --- /dev/null +++ b/src/components/Beers.js @@ -0,0 +1,21 @@ +// src/components/Beers.js +import React from 'react'; + +const Beers = ({ beers }) => { + return ( +
+

All Beers

+ +
+ ); +}; + +export default Beers; diff --git a/src/components/Header.js b/src/components/Header.js new file mode 100644 index 0000000..d92ca66 --- /dev/null +++ b/src/components/Header.js @@ -0,0 +1,14 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; + +const Header = () => { + return ( +
+ +

Home

+ +
+ ); +}; + +export default Header; diff --git a/src/components/Home.js b/src/components/Home.js new file mode 100644 index 0000000..7cd2a89 --- /dev/null +++ b/src/components/Home.js @@ -0,0 +1,21 @@ +// src/components/Home.js +import React from 'react'; +import { Link } from 'react-router-dom'; +import './style.css'; +import beersImg from '../assets/beers.png'; + +const Home = () => { + return ( +
+

Welcome to FullStackDrinks

+ Beers +
+ All Beers + Random Beer + New Beer +
+
+ ); +}; + +export default Home; diff --git a/src/components/NewBeer.js b/src/components/NewBeer.js new file mode 100644 index 0000000..8ed3378 --- /dev/null +++ b/src/components/NewBeer.js @@ -0,0 +1,55 @@ +// src/components/NewBeer.js +import React, { useState } from 'react'; +import './style.css'; +import newBeerImg from '../assets/new-beer.png'; // Import your image + +const NewBeer = ({ addBeer }) => { + const [name, setName] = useState(''); + const [description, setDescription] = useState(''); + const [image, setImage] = useState(''); + + const handleSubmit = (e) => { + e.preventDefault(); + const newBeer = { + name, + description, + image, + }; + addBeer(newBeer); // Call the function passed from App.js + setName(''); + setDescription(''); + setImage(''); + }; + return ( +
+

Add a New Beer

+ New Beer +
+ setName(e.target.value)} + required + /> + setDescription(e.target.value)} + required + /> + setImage(e.target.value)} + required + /> + +
+
+ ); +}; + +export default NewBeer; diff --git a/src/components/RandomBeer.js b/src/components/RandomBeer.js new file mode 100644 index 0000000..e512979 --- /dev/null +++ b/src/components/RandomBeer.js @@ -0,0 +1,33 @@ +// src/components/RandomBeer.js +import React, { useEffect, useState } from 'react'; +import './style.css'; + +const RandomBeer = () => { + const [beer, setBeer] = useState(null); + + useEffect(() => { + const fetchRandomBeer = async () => { + const response = await fetch('https://api.punkapi.com/v2/beers/random'); + const data = await response.json(); + setBeer(data[0]); + }; + fetchRandomBeer(); + }, []); + + return ( +
+ {beer ? ( + <> +

{beer.name}

+ {beer.name} +

{beer.description}

+

ABV: {beer.abv}%

+ + ) : ( +

Loading...

+ )} +
+ ); +}; + +export default RandomBeer; diff --git a/src/components/style.css b/src/components/style.css new file mode 100644 index 0000000..10967b3 --- /dev/null +++ b/src/components/style.css @@ -0,0 +1,121 @@ +/* src/style.css */ + +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + background-color: #f8f9fa; +} + +h1, h2, h3 { + color: #343a40; +} + +.container { + max-width: 1200px; + margin: auto; + padding: 20px; +} + +.home { + text-align: center; + margin: 20px; +} + +.home-image { + width: 100%; + height: auto; + max-width: 600px; + border-radius: 10px; +} + +.home-links { + display: flex; + justify-content: center; + gap: 20px; +} + +.home-link { + text-decoration: none; + color: white; + background-color: #007bff; + padding: 10px 20px; + border-radius: 5px; + transition: background-color 0.3s; +} + +.home-link:hover { + background-color: #0056b3; +} + +.beers { + padding: 20px; +} + +.beers ul { + list-style-type: none; + padding: 0; +} + +.beers li { + margin: 20px 0; + text-align: center; +} + +.beers img { + width: 100px; + height: auto; + border-radius: 10px; +} + +.beer-detail { + padding: 20px; + text-align: center; +} + +.beer-detail img { + width: 200px; + height: auto; + border-radius: 10px; +} + +.new-beer, .random-beer { + padding: 20px; + text-align: center; +} + +.new-beer-image { + width: 300px; + height: auto; + border-radius: 10px; +} + +form { + display: flex; + flex-direction: column; + align-items: center; + margin-top: 20px; +} + +form input { + margin: 10px 0; + padding: 10px; + width: 80%; + max-width: 400px; + border: 1px solid #ced4da; + border-radius: 5px; +} + +form button { + padding: 10px 20px; + background-color: #28a745; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s; +} + +form button:hover { + background-color: #218838; +}