Skip to content

commit changes #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Ashish240399 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

commit changes #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion netmeds-clone/src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,19 @@
import './App.css';
import ProductPage from './components/ProductPage/ProductPage';
import { Route, Routes } from 'react-router-dom';
import { Route, Routes, useParams } from 'react-router-dom';
import CovidRoutes from './components/ProductPage/covidRoutes';
import Diabeties from './components/ProductPage/diabetiesRoutes';
import ProductDetails from './components/ProductDetailsPage/ProductDetails';

function App() {

return (
<div className="App">
<ProductPage/>
<Routes>
<Route path="/covid" element={<CovidRoutes/>}></Route>
<Route path="/diabeties" element={<Diabeties/>}></Route>
<Route path="/products/:id" element={<ProductDetails/>}></Route>
</Routes>
</div>
);
Expand Down
90 changes: 90 additions & 0 deletions netmeds-clone/src/components/ProductDetailsPage/ProductDetails.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
.details-container{
display: flex;
width:95%;
margin: auto;
padding:30px 10px;
background-color: white;
border-radius: 10px;
}
hr{
border:1px solid rgb(240, 238, 238);
}
.image-part{
width:47%;
display: flex;
align-items: center;
justify-content: center;
}
.image-part>img{
width:80%;
}
.details-part{
width:53%;
}
.heading{
font-size: 22px;
font-weight: 400;
}
.tag{
background-color: rgb(245, 239, 239);
display: inline-block;
padding:2px 5px;
color:rgb(133, 130, 130);
font-size: 13px;
margin-bottom: 10px;
}
.price{
color:rgb(99, 98, 98);
font-size: 17px;
font-weight: 500;
}
.red-price{
font-size: 20px;
margin-left: 7px;
color:rgb(239, 66, 129);
}
.samll-text{
font-size: 11px;
color:gray;
line-height: 7px;
}
.italic{
font-style: italic;
}
.add-button{
background-color: rgb(50, 174, 177);
color:white;
padding: 10px 18px;
font-size: 14px;
font-weight: 700;
border:none;
border-radius: 5px;
margin-top: 3px;
margin-bottom: 10px;
}
.avail{
color:gray;
font-size: 14px;
font-weight: 500;
}
.pin{
color:rgb(50, 174, 177);
font-weight: 600;
font-size: 18px;
}
.pin>input{
border:none;
padding:10px;
width:100px;
font-size: 18px;
font-weight: 600;
}
.pin>input:focus{
outline: none;
}
.line{
width:200px;
background-color: rgb(50, 174, 177);
height:3px;
border-radius: 10px;
}
43 changes: 43 additions & 0 deletions netmeds-clone/src/components/ProductDetailsPage/ProductDetails.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import React, { useEffect, useState } from 'react'
import { useParams } from 'react-router-dom'
import "./ProductDetails.css"
function ProductDetails() {
const [product,setProduct]=useState({})
const {id}=useParams();
useEffect(()=>{
getData()
},[]);
const getData=async()=>{
const data=await fetch(`https://netmedback.herokuapp.com/products/${id}`);
const res=await data.json();
console.log(res.product)
setProduct(res.product)
}

return (
<div className='product-details'>
<div className='details-container'>
<div className='image-part'>
<img src={product.img}></img>
</div>
<div className='details-part'>
<p className='heading'>{product.name}</p>
<div className='tag'>{product.main}</div>
<hr></hr>
<div className='price'>Best Price*<span className='red-price'>₹ {product.price}</span></div>
<p className='samll-text'>(Inclusive of all taxes)</p>
<p className='samll-text italic'>* Mkt: <span>{product.mkt}</span></p>
<p className='samll-text italic'>* Country of Origin: India</p>
<p className='samll-text italic'>* Delivery charges if applicable will be applied at checkout</p>
<button className='add-button'>ADD TO CART</button>
<hr></hr>
<p className='avail'>Check Availability & Expiry</p>
<div className='pin'>PINCODE:<input></input></div>
<div className='line'></div>
</div>
</div>
</div>
)
}

export default ProductDetails
35 changes: 26 additions & 9 deletions netmeds-clone/src/components/ProductPage/ProductDiabeties.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import React, { useEffect, useState } from 'react'
import { Link } from 'react-router-dom';
import "./Products.css"
function ProductsDiabeties() {
const [products,setProducts]=useState([]);

const [order,setOrder]=useState("popularity");
useEffect(()=>{
getData()
Expand All @@ -10,12 +12,15 @@ function ProductsDiabeties() {
const data=await fetch("https://netmedback.herokuapp.com/products");
const res=await data.json();
console.log(res)
const filterdDataCovid=[]
const filterdDataDiabeties=[];
res.product.map((el)=>{

if(el.main==="Diabeties"){
filterdDataDiabeties.push(el)
}
})

setProducts(filterdDataDiabeties)
}
function sort(x){
Expand All @@ -39,7 +44,7 @@ function ProductsDiabeties() {
return (
<div className='product-right'>
<div className='banner'>
<img src={require("../../images/bannerDia.jpg")} alt=""> </img>
<img src={require("../../images/banner.jpg")} alt=""></img>
</div>
<div className='category'>
<div className='item-title'>
Expand All @@ -48,17 +53,17 @@ function ProductsDiabeties() {
<div>
<img src={require("../../images/diabeties/d-1.jpg")} alt=""/>
<div className='about'>Personal & Home...</div>
{/* <div className='discount'>UPTO 79%</div> */}
<div className='discount'>UPTO 79%</div>
</div>
<div>
<img src={require("../../images/diabeties/d-2.jpg")} alt=""/>
<div className='about'>Mask, Gloves & Pr...</div>
{/* <div className='discount'>UPTO 88%</div> */}
<div className='discount'>UPTO 88%</div>
</div>
<div>
<img src={require("../../images/diabeties/d-3.jpg")} alt=""/>
<div className='about'>Immunity Booster</div>
{/* <div className='discount'>UPTO 45%</div> */}
<div className='discount'>UPTO 45%</div>
</div>
<div>
<img src={require("../../images/diabeties/d-4.jpg")} alt=""/>
Expand All @@ -69,7 +74,7 @@ function ProductsDiabeties() {
<img src={require("../../images/diabeties/d-5.jpg")} alt=""/>
<div className='about'>Travel Essentials</div>
<div className='discount'>UPTO 45%</div>
</div>
</div>
</div>
</div>
</div>
Expand All @@ -91,21 +96,33 @@ function ProductsDiabeties() {
</div>
<div className='append-products'>
{products.map((product)=>(
<div className='product-card'>
<div className='product-cards' >
<Link className='link-details' to={`/products/${product._id}`}>
<div className='product-card'>
<img src={product.img} alt=""></img>
<div className='product-details'>
<div className='product-details' >
<div className='name'>{product.name}</div>
<div className='mkt'>Mkt: {product.mkt}</div>
<div className='price'>Best price* <span className='red'>Rs. {product.price}</span></div>
<div className='stprice'>MRP <span className='strike'>Rs. {product.stprice}</span></div>
<button>ADD TO CART</button>
</div>
</div>
</Link>
<button>ADD TO CART</button>
</div>
))}
</div>
</div>

</div>
)
}

export default ProductsDiabeties
export default ProductsDiabeties







17 changes: 14 additions & 3 deletions netmeds-clone/src/components/ProductPage/Products.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
}
.category-img{
display: flex;

}
.category-img>div{
width:100px;
Expand Down Expand Up @@ -78,7 +79,7 @@
grid-template-columns:repeat(4,1fr);
gap:14px;
}
.product-card{
.product-cards{
border:1px solid rgb(189, 188, 188);
height:330px;
padding:15px;
Expand All @@ -88,6 +89,12 @@
justify-content: center;
align-items: center;
}
.product-card{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.product-card>img{
width:67%;
}
Expand Down Expand Up @@ -129,7 +136,11 @@
text-decoration: line-through;
padding-left: 6px;
}
.product-details>button{
.link-details{
text-decoration: none;
}
.product-cards>button{
width:100%;
background-color: rgb(50, 174, 177);
color:white;
padding: 10px 0px;
Expand All @@ -139,6 +150,6 @@
border-radius: 5px;
margin-top: 3px;
}
.product-details>button:hover{
.product-cards>button:hover{
cursor: pointer;
}
12 changes: 9 additions & 3 deletions netmeds-clone/src/components/ProductPage/Products.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import React, { useEffect, useState } from 'react'
import { Link } from 'react-router-dom';
import ProductDetails from '../ProductDetailsPage/ProductDetails';
import "./Products.css"
function Products() {
const [products,setProducts]=useState([]);
Expand Down Expand Up @@ -102,15 +104,19 @@ function Products() {
</div>
<div className='append-products'>
{products.map((product)=>(
<div className='product-card'>
<div className='product-cards' >
<Link className='link-details' to={`/products/${product._id}`}>
<div className='product-card'>
<img src={product.img} alt=""></img>
<div className='product-details'>
<div className='product-details' >
<div className='name'>{product.name}</div>
<div className='mkt'>Mkt: {product.mkt}</div>
<div className='price'>Best price* <span className='red'>Rs. {product.price}</span></div>
<div className='stprice'>MRP <span className='strike'>Rs. {product.stprice}</span></div>
<button>ADD TO CART</button>
</div>
</div>
</Link>
<button>ADD TO CART</button>
</div>
))}
</div>
Expand Down
1 change: 0 additions & 1 deletion netmeds-clone/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ root.render(
<BrowserRouter>
<App />
</BrowserRouter>

</React.StrictMode>
);

Expand Down