Scribd
Upload
5 views6 pages

Exp8 CODES

The document contains code for a React application, including styles and components for the main app, footer, and routing. It features a shopping cart functionality with the ability to add and remove items, and includes pages for home, products, product details, cart, and contact. The CSS styles define the layout and appearance of the app, ensuring a responsive design.

Uploaded by

aryan.pundle
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views6 pages

Exp8 CODES

The document contains code for a React application, including styles and components for the main app, footer, and routing. It features a shopping cart functionality with the ability to add and remove items, and includes pages for home, products, product details, cart, and contact. The CSS styles define the layout and appearance of the app, ensuring a responsive design.

Uploaded by

aryan.pundle
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

CODES USED IN WPL EXPERIMENT 8

(A3_16014123058_Aryan Pundle)
App.css
.App {
text-align: center;
}

.App-logo {
height:
40vmin;
pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {


.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}

.App-header {
background-color:
#282c34; min-height:
100vh;
display: flex;
flex-direction:
column; align-items:
center; justify-content:
center;
font-size: calc(10px + 2vmin);
color: white;
}

.App-link {
color: #61dafb;
}
@keyframes App-logo-spin
{ from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

/* src/App.css */
.main-content
{ flex: 1;
padding-bottom: 60px; /* Add padding to avoid overlapping with the footer
*/ overflow-y: auto;
max-height: calc(100vh - 80px); /* Adjust height to account for header and footer */
}

App.js
// src/App.js
import React, { useState } from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Navbar from './components/Navbar';
import Footer from
'./components/Footer'; import Home from
'./pages/Home'; import Products from
'./pages/Products';
import ProductDetails from './pages/ProductDetails';
import Cart from './pages/Cart';
import Contact from './pages/Contact';
import './App.css';

function App() {
const [cartItems, setCartItems] = useState([]);

const addToCart = (product) =>


{ setCartItems([...cartItems, { ...product, quantity: 1
}]);
};
const removeFromCart = (id) =>
{ setCartItems(cartItems.filter(item => item.id !== id));
};

return (
<Router>
<Navbar />
<main className="main-content">
<Routes>
<Route path="/" element={<Home />} />
<Route path="/products" element={<Products onAddToCart={addToCart} />} />
<Route path="/product/:id" element={<ProductDetails />} />
<Route path="/cart" element={<Cart cartItems={cartItems} onRemove={removeFromCart} />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</main>
<Footer />
</Router>
);
}

export default App;

Footer.css
/* src/components/Footer.css */
.footer {
text-align: center;
padding: 4px;
background-color: #333333;
color: #fff;
position: fixed;
width: 100%;
bottom: 0;
}
index.css
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}

index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));


root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function


// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

You might also like