======================Task 14: Fetching Data and Displaying a Countdown

Timer==============================
import React, { useState, useEffect } from 'react';

export const CountDownTimer = () => {

const [error, setError] = useState(null);
const [loading, setLoading] = useState(true);
const [count, setCount] = useState(0);
const [isPaused, setIsPaused] = useState(true);

useEffect(() => {
const TimerFetcher = async () => {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/posts');
if (!response.ok) {
throw new Error('Network response was not ok');
}
const jsonTimer = await response.json();
// Assuming we want to set count based on the number of posts
setCount(jsonTimer.length); // or use a specific value from jsonTimer
} catch (error) {
setError(error.message);
} finally {
setLoading(false);
}
};

TimerFetcher(); // Call the fetch function here

}, []); // Run only once on mount

useEffect(() => {
let interval;
if (!isPaused && count > 0) {
interval = setInterval(() => {
setCount(prevCount => prevCount - 1);
}, 1000);
}

// Cleanup function to clear the interval

return () => clearInterval(interval);
}, [isPaused, count]);

const handleStartClick = () => {

setIsPaused(false);
};

const handlePauseClick = () => {

setIsPaused(true);
};

const handleResetClick = () => {

setCount(0); // Resetting count to 0. Change if needed.
setIsPaused(true);
};
 return (
<div>
{loading ? (
<p>Loading...</p>
) : error ? (
<p>Error: {error}</p>
) : (
<>
<h1>{count}</h1>
<button onClick={handleStartClick}>Start</button>
<button onClick={handlePauseClick}>Pause</button>
<button onClick={handleResetClick}>Reset</button>
</>
)}
</div>
);
};

====================== Task 13: Implementing a Timer Using useState and

useEffect==============================
import React, {useState, useEffect} from 'react';

export const CountDownTimer = ({timer}) => {

const[count, setCount] = useState(timer);
const[isPaused, setIsPaused] = useState(true);

useEffect (() => {

let interval;
if (!isPaused)
{
if (count >= 0)
{
interval = setInterval(() => {
setCount(prevCount => prevCount - 1);
}, 1000);
}
}
}, [isPaused]);

const handleStartClick = () => {

setIsPaused(false);
};

const handlePauseClick = () => {

setIsPaused(true);
};

const handleResetClick = () => {

setCount(0);
setIsPaused(true); // Optionally pause the timer when reset
};

return (
<div>
<h1>{count}</h1>
<button onClick={handleStartClick}>Start</button>
<button onClick={handlePauseClick}>Pause</button>
<button onClick={handleResetClick}>Reset</button>
</div>
 );

};

====================== Task 13: Implementing a Timer Using useState and

useEffect==============================
import React, { useState, useEffect } from 'react';

export const Timer = () => {

const [count, setCount] = useState(0);
const [isPaused, setIsPaused] = useState(true);

useEffect(() => {
let interval;

if (!isPaused) {
interval = setInterval(() => {
setCount(prevCount => prevCount + 1);
}, 1000);
}

// Cleanup function to clear the interval

return () => clearInterval(interval);
}, [isPaused]);

const handleStartClick = () => {

setIsPaused(false);
};

const handlePauseClick = () => {

setIsPaused(true);
};

const handleResetClick = () => {

setCount(0);
setIsPaused(true); // Optionally pause the timer when reset
};

return (
<div>
<h1>{count}</h1>
<button onClick={handleStartClick}>Start</button>
<button onClick={handlePauseClick}>Pause</button>
<button onClick={handleResetClick}>Reset</button>
</div>
);
};

====================== Task 12: Updating Fetched Data==============================

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

export const DataFetcher = () => {

const[data, setData] = useState([]);
const[loading, setLoading] = useState(true);
const[error, setError] = useState(null);
const[isClicked, setIsClicked] = useState(false);
 useEffect(() => {
const fetchData = async () => {
try{
const response = await
fetch('https://jsonplaceholder.typicode.com/posts');
if (!response.ok){
throw new Error ('Network response was not ok');
}
const jsonData = await response.json();
setData(jsonData);
}catch (error) {
setError(error.message);
}finally{
setLoading(false);
}
};
fetchData();
if (isClicked){
fetchData();
setIsClicked(false);
}
}, [isClicked]);

function handleClick(){
setIsClicked(true);
}

return(
<>
<div>
{loading ? <p> Loading ... </p> : error ? <p>Error: {error}</p> : (
<ul>
{data.map(item => (
<li key={item.id}>{item.title}</li>
))}
</ul>
)}
</div>
<button onClick={handleClick}> Refresh </button>
</>
);
};

====================== Task 11: Implementing a Basic Fetch

Request==============================
import React, {useState, useEffect} from 'react';

export const DataFetcher = () => {

const[data, setData] = useState([]);
const[loading, setLoading] = useState(true);
const[error, setError] = useState(null);

useEffect(() => {
const fetchData = async () => {
try{
const response = await fetch( JSONPlaceholder Posts);
if (!response.ok){
throw new Error ('Network response was not ok');
}
 const jsonData = await response.json();
setData(jsonData);
}catch (error) {
setError(error.message);
}finally{
setLoading(false);
}
};
fetchData();
}, []);
return(
<div>
{loading ? <p> Loading ... </p> : error ? <p>Error: {error}</p> : (
<ul>
{data.map(item => (
<li key={item.id}>{item.title}</li>
))}
</ul>
)}
</div>
);
};

====================== Task 10: Creating a Todo List

Application==============================
import React, { useState } from 'react';
import { styles } from './GreetingForm.module.css';

export const TodoList = () => {

const [items, setItems] = useState([]);
const [inputValue, setInputValue] = useState('');

const handleInputChange = (event) => {

setInputValue(event.target.value);
};

const handleSubmit = (event) => {

event.preventDefault();
if (inputValue.trim()) {
setItems((prevItems) => [...prevItems, inputValue]);
setInputValue(''); // Clear input field after submission
}
};

const handleRemoveItem = (index) => {

setItems((prevItems) => prevItems.filter((_, i) => i !== index));
};

return (
<>
<form onSubmit={handleSubmit}>
<input
className={styles.input}
type="text"
value={inputValue}
onChange={handleInputChange}
placeholder="Enter your item"
/>
<button className={styles.button} type="submit">Submit!</button>
 </form>
<ul>
{items.map((item, index) => (
<li key={index}>
{item}
<button onClick={() =>
handleRemoveItem(index)}>Remove</button>
</li>
))}
</ul>
</>
);
};

====================== Task 9: Styling Components with CSS

Modules==============================
//GreetingForm.module.css
.input {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
margin-right: 10px;
}

.button {
padding: 10px 15px;
background-color: blue;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}

.greeting {
margin-top: 20px;
font-size: 18px;
font-weight: bold;
}

// GreetingForm.js
import React, { useState } from 'react';
import {styles} from './GreetingForm.module.css';

export const GreetingForm = () => {

const [name, setName] = useState('');
const [greeting, setGreeting] = useState('');

const handleSubmit = (event) => {

event.preventDefault(); // Prevent the default form submission
if (name.trim()) {
setGreeting(`Hello, ${name}!`);
} else {
setGreeting('Please enter your name.');
}
};

const handleInputChange = (event) => {

setName(event.target.value);
 };

return (
<>
<form onSubmit={handleSubmit}>
<input className={styles.input} type="text"
onChange={handleInputChange} placeholder="Enter your name" />
<button className={styles.button} type="submit">Submit!</button>
<p className={styles.greeting}>{greeting}</p>
</>
);
};

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { GreetingForm } from './GreetingForm';

function App() {
return (
<GreetingForm />
);
}

ReactDOM.render(<App />, document.getElementById("root"));

====================== Task 8: Handling User Input with

Forms==============================
import React, { useState } from 'react';

export const GreetingForm = () => {

const [name, setName] = useState('');
const [greeting, setGreeting] = useState('');

const handleSubmit = (event) => {

event.preventDefault(); // Prevent the default form submission
if (name.trim()) {
setGreeting(`Hello, ${name}!`);
} else {
setGreeting('Please enter your name.');
}
};

const handleInputChange = (event) => {

setName(event.target.value);
};

return (
<>
<form onSubmit={handleSubmit}>
<input type="text" onChange={handleInputChange} placeholder="Enter
your name" />
<button type="submit">Submit!</button>
</form>
<p>{greeting}</p>
</>
);
};
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { GreetingForm } from './GreetingForm';

function App() {
return (
<GreetingForm />
);
}

ReactDOM.render(<App />, document.getElementById("root"));

====================== Task 7: Conditional Rendering with State

==============================
import React from 'react';

export const ButtonComponent = ({ labelText1, labelText2, setLabelText1,

setLabelText2, label1, label2 }) => {

function handleClick1() {
setLabelText1((prevText) => prevText === label1 ? "Clicked!" : label1);
}

function handleClick2() {
setLabelText2((prevText) => prevText === label2 ? "Clicked!" : label2);
}

return (
<>
<h1>Hello, React World!</h1>
<button style={{ padding: '10px', color: 'white', backgroundColor:
'red' }} onClick={handleClick1}>
{labelText1}
</button>
<button style={{ padding: '10px', color: 'white', backgroundColor:
'blue' }} onClick={handleClick2}>
{labelText2}
</button>

{/* Conditional rendering for message */}

{labelText1 === "Clicked!" && <p>Red button clicked!</p>}
{labelText2 === "Clicked!" && <p>Blue button clicked!</p>}
</>
);
};

import React, { useState } from 'react';

import ReactDOM from 'react-dom';
import { ButtonComponent } from './ButtonComponent';

function App() {
const [labelText1, setLabelText1] = useState("Click Red Button");
const [labelText2, setLabelText2] = useState("Click Blue Button");

return (
<ButtonComponent
 labelText1={labelText1}
labelText2={labelText2}
setLabelText1={setLabelText1}
setLabelText2={setLabelText2}
label1="Click Red Button"
label2="Click Blue Button"
/>
);
}

ReactDOM.render(<App />, document.getElementById("root"));

====================== Task 6: Lifting State Up ==============================

// ButtonComponent.js
import React from 'react';

export const ButtonComponent = ({ labelText1, labelText2, setLabelText1,

setLabelText2, label1, label2 }) => {

function handleClick1() {
setLabelText1((prevText) => prevText === label1 ? "Clicked!" : label1);
}

function handleClick2() {
setLabelText2((prevText) => prevText === label2 ? "Clicked!" : label2);
}

return (
<>
<h1> Hello, React World! </h1>
<button style={{ padding: '10px', color: 'white', backgroundColor:
'red' }} onClick={handleClick1}>
{labelText1}
</button>
<button style={{ padding: '10px', color: 'white', backgroundColor:
'blue' }} onClick={handleClick2}>
{labelText2}
</button>
</>
);
};

// index.js
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { ButtonComponent } from './ButtonComponent';

function App() {
const [labelText1, setLabelText1] = useState("Click Red Button");
const [labelText2, setLabelText2] = useState("Click Blue Button");

return (
<ButtonComponent
labelText1={labelText1}
labelText2={labelText2}
setLabelText1={setLabelText1}
setLabelText2={setLabelText2}
 label1="Click Red Button"
label2="Click Blue Button"
/>
);
}

ReactDOM.render(<App />, document.getElementById("root"));

====================== Task 5: Handling Multiple Button States

==============================

import React, {useState} from 'react';

export const ButtonComponent = ({label1, label2}) => {

const[labelText1, setLabelText1] = useState(label1);
const[labelText2, setLabelText2] = useState(label2);

function handleClick() {
setLabelText1((prevText) => prevText === label1 ? "Clicked!" : label1);
}
function handleClick2() {
setLabelText2((prevText) => prevText === label2 ? "Clicked!" : label2);
}

return (
<>
<h1> Hello, React World! </h1>
<button style={{padding: '10px', color: 'white' , backgroundColor:
'red'}} onClick={handleClick}> {labelText1} </button>
<button style={{padding: '10px', color: 'white' , backgroundColor:
'blue'}} onClick={handleClick2}> {labelText2} </button>
</>
);
};

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {ButtonComponent} from './ButtonComponent';

function App() {
return (
<ButtonComponent label1 = "Click Red Button", label2 = "Click Blue Button"/>
);
}
ReactDOM.render(<App />, document.getElementById("root"));

====================== Task 4: State Management with useState

==============================

import React, {useState} from 'react';

export const ButtonComponent = ({label}) => {

const[labelText, setLabelText] = useState(label);

function handleClick() {
setLabelText((prevText) => prevText === label ? "Clicked!" : label);
}
 return (
<>
<h1> Hello, React World! </h1>
<button style={{padding: '10px', color: 'white' , backgroundColor:
'red'}} onClick={handleClick}> {labelText} </button>
</>
);
};

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {ButtonComponent} from './ButtonComponent';

function App() {
return (
<ButtonComponent label = "Press here"/>
);
}
ReactDOM.render(<App />, document.getElementById("root"));

====================== Task 3: Passing Props to Components

==============================

import React from 'react';

export const ButtonComponent = ({label}) => {

function handleClick (){
console.leg("Button was clicked!");
}
return (
<>
<h1> Hello, React World! </h1>
<button style={{padding: '10px', color: 'white' , backgroundColor:
'red'}} onClick={handleClick}> {label} </button>
</>
);
};

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {ButtonComponent} from './ButtonComponent';

function App() {
return (
<ButtonComponent label = "Press here"/>
);
}
ReactDOM.render(<App />, document.getElementById("root"));

====================== Task 2: Adding and Styling a Button Component

=================================

import React from 'react';

export const ButtonComponent = () => {

function handleClick (){
console.leg("Button was clicked!");
 }
return (
<>
<h1> Hello, React World! </h1>
<button style={{padding: '10', color: 'white' , backgroundColor: 'red'}}
onClick={handleClick}> Click Me! </button>
</>
);
};

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {ButtonComponent} from './ButtonComponent';

function App() {
return (
<ButtonComponent />
);
}

ReactDOM.render(<App />, document.getElementById("root"));

====================== Task 1: Setting Up a Basic React Project

=================================

import React from 'react';

export const Greeting = () => {

return (
<>
<h1> Hello, React World! </h1>
</>
);
};

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {Greeting} from './Greeting';

function App() {
return (
<Greeting />
);
}

ReactDOM.render(<App />, document.getElementById("root"));