Scribd
Upload
12 views

Learn React

Uploaded by

sathishshakthi006
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
12 views

Learn React

Uploaded by

sathishshakthi006
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

*homepage.

jsx----------------------------------------------------------------------
-----------------------------------------------------------------------------------

import React from 'react'


import Workspace from './workspace'
function Homepage() {

let watchData={
title:"i watch,",
description:[" Get up to ₹10000.00 instant savings, ",
"when you use a HDFC Bank Credit Card,",
"Choose to pay using low monthlyinstalments with No
Cost EMI for 3 or 6 months from most leading banks."],
imgLink:"https://static1.industrybuying.com/products/it-
electronics/smart-watch/ITE.SMA.68673803_1681467903894.webp",
bg:"white"

let mobileData={
title:"i Phone 14pro,",
description:[" smash a diwali offer for buy a brand new i Phone
14pro with great payment offers,",
"Choose to pay using low monthlyinstalments with No
Cost EMI for 3 or 6 months from most leading banks."],
imgLink:"https://www.pngarts.com/files/18/iPhone-14-Pro-PNG-
Image.png",
bg:"yellow"
}
return (
// data={watchData}

<div style={{ textAlign: "center" }}><h1>Workspace</h1>


<Workspace data={watchData}/>
<Workspace data={mobileData}/>
</div>
)
}

export default Homepage

*index.js--------------------------------------------------------------------------
--------------------------------------------------------------------------------

<Homepage />

*workspace.jsx---------------------------------------------------------------------
--------------------------------------------------------------------------------

import React, { useState, useEffect } from "react";


import "./workspace.css";

//{ data }
function Workspace({ data }) {
let size = 0;

let { title, description, imgLink, bg } = data;


let [dynamicSize, setdynamicsize] = useState(size);

useEffect(() => {
console.log("Initially rendered with help of an empty Array in use Effect");
// alert("welcome to workspace");
}, []); //use Effect with Empty Array to performe initiall Rendering

useEffect(() => {
console.log("dynamic size is changed as ", dynamicSize);
// alert("size of img is changed are you okay?");
}, [dynamicSize]); //use Effect with Dependency Array to performe Re-rendering

let zoombtn = () => {


// size = size + 1;
setdynamicsize(dynamicSize + 1);
// console.log("zoom + button clicked");
//alert("size increased as 1 cm");
};

let zoomDecbtn = () => {


//size = size + 1;
setdynamicsize(dynamicSize - 1);
//console.log("zoom - button clicked");
// alert("size decreased as 1 cm");
};

//alert("welcome to workspace");

return (
<div style={{ textAlign: "center" }}>
{/* {alert("welcome to workspace")} */}
{/* <h1>workspace</h1> */}
<div className="container" style={{ backgroundColor: `${bg}` }}>
<div className="fi-one">
<p style={{ paddingLeft: "0%" }}>{title}</p>
{title === "i watch," ? (
<i>with HeartBeat Tracker</i>
) : (
<i>Undisputed Mobile In Mobile World</i>
)}
</div>
<div className="fi-two">
<h4>
{description.map((data, index) => (
<p key={index}>
{index + 1}.{data}
</p>
))}
</h4>
</div>
<div className="fi-three">
<img
src={imgLink}
alt="img loading"
style={{ height: `${dynamicSize}cm`, paddingTop: "20%" }}
/>
</div>
</div>
<div>
<button
style={{ backgroundColor: "skyblue", borderRadius: "5px" }}
className="zoombtn"
onClick={zoombtn}
>
zoom In {title}
</button>
</div>
<br></br>
<div>
<button
style={{ backgroundColor: "skyblue", borderRadius: "5px" }}
className="zoombtn"
onClick={zoomDecbtn}
>
zoom Out {title}
</button>
</div>
</div>
);
}

export default Workspace;

*workspace.css---------------------------------------------------------------------
-----------------------------------------------------------------------------------

.container
{
border: 2px solid black;
height: 12cm;
width: 10cm;
background-color: aqua;
border-radius: 8px;
margin-top: 75px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}

.fi-one{

height: 15%;

}
.fi-two{
height:25%;
}

You might also like