ACTIVITY : AMAZON CARDS

 A GROUP OF ITEMS IS DISPLAYED, WHICH INCLUDES TITLE,DESCRIPTION AND PRICE(OLD AND NEW)

HERE FOR DISPLAYING THE PRICE AND DESCRIPTION WE USE ARRAYS.

SO THAT FOR EACH PARTICULAR ITEM THEIR CORRESPONDING PRICE AND DESCRIPTION CAN BE DISPLAYED USING THEIR INDEX.

TO  DISPLAY DESCRIPTION , WE USE 2D ARRAYS. AS IT INCLUDES MULTIPLE CONTENTS.

PRICE IS TAKEN AS A SEPERATE COMPONENT AS IT CONTAINS TWO FIELDS.(OLD AND NEW)



PRICE.JSX

export default function Price({oldPrice,newPrice}){
    let oldStyles ={textDecorationLine:"line-through"}
    let newStyles={ fontWeight :"bold"}
    let styles={
        backgroundColor:"#e0c367",
        height:"30px",
        borderBottomLeftRadius:"15px",
        borderBottomRightRadius:"15px",
        color:"black"

    }
    return (
        <div style={styles}>
       <span style={oldStyles}>{oldPrice}</span>
       &nbsp; &nbsp; &nbsp;
       <span style={newStyles}>{newPrice}</span>
</div>
    )
}

PRODUCT.JSX

import "./Product.css";
import Price from "./price";
function Product({ title, idx }) {
  let oldPrices = ["12,495", "11,900", "1,599", "599"];
  let newPrices = ["8,999", "9,199", "899", "278"];
  let description = [
    ["8,000 DPI", "5 programmable buttons"],
    ["intuitive surface", "designed for iPad Pro"],
    ["designed for iPad Pro", "inituitive surface"],
    ["wireless", "optical orientation"],
  ];

  return (
    <div className="Product">
      <h5>{title}</h5>
      <p>{description[idx][0]}</p>
      <p>{description[idx][1]}</p>

      <Price oldPrice={oldPrices[idx]} newPrice={newPrices[idx]} />
    </div>
  );
}
export default Product;



PRODUCTTAB.JSX

import Product from "./Product";

function ProductTab() {
  let styles = {
    display: "flex",
    flexWrap: "wrap",
    justifyContent: "center",
    alignItems: "center",
  };
  return (
    <div style={styles}>
      <Product title="Logictech Mx Master" idx={0} />
      <Product title="Apple Pencil (2nd Gen)" idx={1} />
      <Product title="Zebronics Zeb-transformer" idx={2} />
      <Product title="Petronics Toad 23" idx={3} />
    </div>
  );
}
export default ProductTab;

APP.JSX

import ProductTab from "./ProductTab.jsx";
function App() {
  return (
    <>
      <ProductTab />
     
    </>
  );
}

export default App;

PRODUCT.CSS

.Product{
    border: 2px solid white !important;
    border-radius: 15px;
    margin-top: 15px;
    /* padding: 0 10px 0 10px; */
    margin-left: 35px;
    width: 200px;
    height: 174px;
}

Comments

Post a Comment

Popular posts from this blog

DEPENDENCIES IN useEffect()

Image
 DEPENDENCIES REFER TO STATE VARIABLES. WHATEVER VARIABLE DECLARED AS A DEPENDENCY WILL ONLY BE PERFORMED AS A SIDE EFFECT. WE DECLARE THEM AS ARRAYS IN TWO  WAYS,  [COUNTX] - MEANS THAT ONLY COUNTX WILL BE USED AS A SIDE EFFECT. [] - EMPTY , MEANS THAT SIDE EFFECT IS PERFORMED ONLY WHEN THE PAGE IS RENDERED ( NOT RE-RENDERED). ( IN THE BEGINNIG)  EX- WE CREATE TWO STATE VARIABLES, COUNTX AND COUNT Y , HERE WE ONLY ADD SIDE EFFECTS TO COUNT X. import { useEffect , useState } from "react" ; export default function Counter () {   let [ countx , setCountx ] = useState ( 0 );   let [ county , setCounty ] = useState ( 0 );   let incx = () => {     setCountx (( currCount ) => currCount + 1 );   };   let incy = () => {     setCounty (( currCount ) => currCount + 1 );   };   useEffect ( function PrintSomething () {     console . log ( "this is a side effect" );   },[ co...
Read more

ACTIVITY1

Image
 SHOW A HELLO MESSAGE  ALONG WITH THE USERNAME WITH THE GIVEN TEXT COLOR. TWO PROPS ARE GIVEN, USERNAME AND TEXTCOLOR. ACTIVITY1.JSX function Activity1 ({ userName , textColor }) {   let styles = { color : textColor };   return < h3 style = { styles } > Hello! { userName } </ h3 > ; } export default Activity1 ; APP.JSX import Activity1 from "./Activity1.jsx" ; function App () {   // let name = "abhi";   // return <ProductTab />;   return (     <>     < Activity1 userName = "abhii" textColor = "yellow" />     < Activity1 userName = "ashwith" textColor = "orange" />     < Activity1 userName = "bharath" textColor = "red" />     < Activity1 userName = "vinay" textColor = "red" />     </>   ) }
Read more

CONDITIONALS

Image
 CONDITIONAL STATEMENTS (IF) CAN BE PASSED AS TERNARY OPERATORS OR EVEN BY USING(  &&) LOGICAL AND OPERATOR. import "./Product.css" ; function Product ({ title , price , features }) {   return (     < div className = "Product" >       < h4 > { title } </ h4 >       < h5 > price: { price } </ h5 >       { price > 15000 ? < p > Discount of 5% </ p > : null }       { /* <p>{features.map((feature) => <li>{feature}</li>)}</p> */ }     </ div >   ); } export default Product ; LOGICAL AND OPERATOR.       { price > 15000 && < p > Discount of 5% </ p > }
Read more