Scribd
Upload
6 views5 pages

React HandsOn Practise

Uploaded by

rajatsingh209
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
6 views5 pages

React HandsOn Practise

Uploaded by

rajatsingh209
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/ 5

1.

Show/Hide Text

import "./styles.css";
import { useState } from "react";

export default function App() {


const [show, setShow] = useState(false);

const clickhandler = () => {


setShow(!show);
};

return (
<div className="App">
<button onClick={clickhandler}>Show/Hide</button>
{show ? <p>Welcome to react</p> : null}
</div>
);
}

2. Timer

import "./styles.css";
import { useState } from "react";

export default function App() {


const [timer, setTimer] = useState(0);

const startTimer = () => {


// Complete this function
window.myTimer = setInterval(() => {
//myTimer is attached to the window object so that it can be accessed globally and used
with clearinterval
setTimer((timer) => timer + 1);
}, 1000);
};
const stopTimer = () => {
// Complete this function
clearInterval(window.myTimer);
};
const resetTimer = () => {
// Complete this function
clearInterval(window.myTimer);
setTimer(0);
};
return (
<div className="container">
<h1>Timer</h1>
<span> {Math.trunc(timer / 60)} mins </span>
<span> {timer % 60} secs</span>
<div>
<button onClick={startTimer}>Start</button>
<button onClick={stopTimer}>Stop</button>
<button onClick={resetTimer}>Reset</button>
</div>
</div>
);
}

3. To centre an using Transform:

Position: absolute;
Top:50%;
Left:50%;
Transform: Translate(0,-50%)

4. Psedo Classes:
5. button:nth-of-type(1) {
6. background: green;
7. }
8. button:nth-of-type(2) {
9. background: red;
10. }
11. button:nth-of-type(3) {
12. background: yellow;
13. }

5. ToDo List

import "./styles.css";

import { useState } from "react";

/*

INSTRUCTIONS:

Create a "todo"(add cities) app with the following criteria.


1. The user can add new cities

2. The user can remove existing cities items

*/

export default function App() {

const [input, setInput] = useState("");

const [cities, setCities] = useState([]);

const chnageHandler = (e) => {

setInput(e.target.value);

};

const addCities = () => {

setCities([...cities, input]);

setInput("");

};

const deleteHandler = (index) => {

const updatedCitites = cities.filter((_, i) => i !== index);

setCities(updatedCitites);

};

const handleKeyDown = (e) => {

if (e.key === "Enter") {

addCities();

};

return (

<div className="App">

<input
type="text"

name="data"

value={input}

placeholder="Enter Cities"

onChange={chnageHandler}

onKeyDown={handleKeyDown}

/>

<button onClick={addCities}>Add</button>

<ul style={{ textAlign: "center" }}>

{cities.map((item, index) => (

<div>

<li

style={{

margin: "5px",

display: "flex",

alignItems: "center",

justifyContent: "space-between",

}}

>

{item}

<button

onClick={() => deleteHandler(index)}

style={{ marginLeft: "10px" }}

>

Delete

</button>

</li>

</div>

))}

</ul>

</div>
);

You might also like