Program 1
import logo from './logo.svg';
import './App.css';
import React, { useState,useEffect } from 'react';
function App() {
const [inputValue, setInputValue] = useState('jsdakjsd');
const handleInputChange = (event) =>
console.log("event.target.value",event.target.value)
setInputValue(event.target.value);};
return (
<div className="App">
<h1>{inputValue}</h1>
<input
type="text"
value={inputValue}
onChange={handleInputChange}
placeholder="Typeabc..."
/>
</div>
);
export default App;
Program 2
App.js
import React, { useState } from 'react';
import Header from './Header'; // Import the Header component
import Footer from './Footer'; // Import the Footer component
function App() {
// Data to pass down as props
// const title = "My React Application";
// const tagline = "© 2025 All Rights Reserved";
// Step 1: Declare a state variable to store the input value
const [title, setTitle] = useState("");
const [tagline, setTagline] = useState("");
// © 2025 All Rights Reserved
// Step 2: Handle the input change event
const handleTitleChange = (event) => {
setTitle(event.target.value);
};
// Step 2: Handle the input change event
const handleTaglineChange = (event) => {
setTagline(event.target.value);
};
return (
<div className="App">
{/* Pass the data to child components using props */}
<Header
title={title}
onChange={handleTitleChange}
/>
{/* Step 4: Add an input field to capture user input */}
<input
type="text"
value={title}
onChange={handleTitleChange}
placeholder="Type Header..."
/>
{/* Step 4: Add an input field to capture user input */}
<input
type="text"
value={tagline}
onChange={handleTaglineChange}
placeholder="Type Footer..."
/>
<Footer
tagline={tagline}
onChange={handleTaglineChange}
/>
</div>
);
export default App;
Footer.js
import React from 'react';
// Footer component receives 'tagline' as a prop
function Footer(props) {
return (
<footer>
<p>{props.tagline}</p>
</footer>
);
export default Footer;
Header.js
import React from 'react';
// Header component receives 'title' as a prop
function Header(props) {
return (
<header>
<h1>{props.title}</h1>
</header>
);
export default Header;
PROGRAM 3
import React, { useState } from 'react';
function App() {
// Initialize the state for the counter, step, and minimum value
const [counter, setCounter] = useState(0); // Counter value
const [step, setStep] = useState(1); // Step value (custom
increment or decrement)
const minValue = 0; // Minimum allowed counter value
// Function to increase the counter
const increaseCounter = () => {
setCounter(prevCounter => prevCounter + step);
};
// Function to decrease the counter
const decreaseCounter = () => {
setCounter(prevCounter => Math.max(prevCounter - step, minValue));
// Prevent going below 0
};
// Function to reset the counter to the initial value (0)
const resetCounter = () => {
setCounter(0);
};
// Function to handle changes in the step value
const handleStepChange = (event) => {
const value = Number(event.target.value);
if (value > 0) { // Ensure the step is positive
setStep(value);
}
};
return (
<div className="App">
<h1>Counter Application</h1>
{/* Display the current counter value */}
<div>
<h2>{counter}</h2>
</div>
{/* Buttons for increasing and decreasing the counter */}
<div>
<button onClick={increaseCounter}>Increase</button>
<button onClick={decreaseCounter}>Decrease</button>
</div>
{/* Reset button to reset the counter */}
<div>
<button onClick={resetCounter}>Reset</button>
</div>
{/* Input to set the custom step value */}
<div>
<label>Set Step: </label>
<input
type="number"
value={step}
onChange={handleStepChange}
min="1" // Ensure that the step is always positive
/>
</div>
</div>
);
export default App;
PROGRAM 4
App.js
import React from 'react';
import ToDoFunction from './TodoFunction';
import './App4.css';
function App() {
return (
<div className="App">
<ToDoFunction />
</div>
);
export default App;
TodoFunction.js
import React, { useState } from 'react';
function TodoFunction() {
// State for tasks list and the input value
const [tasks, setTasks] = useState([]);
const [newTask, setNewTask] = useState('');
// Function to handle the input change
const handleInputChange = (e) => {
setNewTask(e.target.value);
};
// Function to handle adding a new task
const addTask = () => {
if (newTask.trim()) {
const newTaskObj = {
id: Date.now(), // Unique id based on timestamp
text: newTask,
completed: false,
};
setTasks([...tasks, newTaskObj]);
setNewTask(''); // Clear input after adding
};
// Function to toggle task completion status
const toggleTaskCompletion = (taskId) => {
setTasks(tasks.map((task) =>
task.id === taskId ? { ...task, completed: !task.completed } : task
));
};
// Function to delete a task
const deleteTask = (taskId) => {
setTasks(tasks.filter((task) => task.id !== taskId));
};
return (
<div>
<h1>To-Do List</h1>
{/* Input field for new task */}
<input
type="text"
value={newTask}
onChange={handleInputChange}
placeholder="Add a new task"
/>
<button onClick={addTask}>Add Task</button>
{/* List of tasks */}
<ul>
{tasks.map((task) => (
<li key={task.id} style={{ margin: '10px 0' }}>
{/* Task text */}
<span
onClick={() => toggleTaskCompletion(task.id)}
style={{
textDecoration: task.completed ? 'line-through' : 'none',
cursor: 'pointer',
}}
>
{task.text}
</span>
{/* Delete button */}
<button
onClick={() => deleteTask(task.id)}
style={{ marginLeft: '10px', color: 'red' }}
>
Delete
</button>
</li>
))}
</ul>
</div>
);
export default TodoFunction;
PROGRAM 5
App.js
import React, { useState } from 'react';
import FigureList from './FigureList';
import './App.css'; // Importing the CSS file
function App() {
const [imagelist, setImageList] = useState([
// { id: 1, imageUrl: 'https://images.pexels.com/photos/20787/pexels-
photo.jpg?auto=compress&cs=tinysrgb&h=350', caption: 'Image 1' }, //
From public/images folder
{ id: 1, imageUrl:
'https://pbs.twimg.com/media/FwHT1fhXwAwvMCs.jpg', caption: 'Image
1' }, // From public/images folder
{ id: 2, imageUrl: 'https://avatarfiles.alphacoders.com/368/368140.jpg',
caption: 'Image 2' }, // From public/images folder
// { id: 3, imageUrl: 'https://images.unsplash.com/photo-
1498050108023-c5249f4df085?
q=80&w=1172&auto=format&fit=crop&ixlib=rb-
4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D
%3D', caption: 'Image 3' },
]);
const addImage = () => {
const newFigure = {
id: Date.now(), // Unique ID based on timestamp
imageUrl: 'https://avatarfiles.alphacoders.com/110/110116.jpg', // New
placeholder image
caption: `New Image ${imagelist.length + 1}`, // Generate a new
caption
};
setImageList([...imagelist, newFigure]); // Add new figure to the state
console.log("addimagelist",imagelist)
};
// console.log("111111111111111111")
const removeImage = (id) => {
console.log("removeimagelist",id)
setImageList(imagelist.filter(image => image.id !== id)); // Remove
figure by ID
console.log("imagelist",imagelist)
};
// If the id of the current figure is not equal to the id passed to the
function, the figure will be included in the new array.
// If the id of the current figure matches the id passed in, the figure will not
be included in the new array.
return (
<div className="App">
<h1>Image Gallery</h1>
<FigureList imagelist={imagelist} removeImage={removeImage} />
<button className="add-button" onClick={addImage}>Add
Image</button>
</div>
);
export default App;
BasicFigure.js
import React from 'react';
function BasicFigure({ imageUrl, caption, onRemove }) {
return (
<div className="figure-container">
<img src={imageUrl} alt={caption} className="figure-image" />
<div className="figure-caption">
<p>{caption}</p>
<button onClick={onRemove} className="remove-
button">Remove</button>
</div>
</div>
);
export default BasicFigure;
FigureList.js
import React from 'react';
import BasicFigure from './BasicFigure';
function FigureList({ imagelist, removeImage }) {
return (
<div className="image-list">
{imagelist.map(image => (
<BasicFigure
key={image.id}
imageUrl={image.imageUrl}
caption={image.caption}
onRemove={() => removeImage(image.id)} // Passing remove
function
/>
))}
</div>
);
}
export default FigureList;
PROGRAM 8
import React, { useState } from 'react';
const App = () => {
const [tasks, setTasks] = useState([]);
const [filter, setFilter] = useState('all');
const [form, setForm] = useState({ name: '', date: '', desc: '' });
const addTask = (e) => {
e.preventDefault();
if (!form.name || !form.date) return;
setTasks([...tasks, { ...form, completed: false }]);
setForm({ name: '', date: '', desc: '' });
};
const toggle = (i) => {
const copy = [...tasks];
copy[i].completed = !copy[i].completed;
setTasks(copy);
};
const shown = tasks.filter(t =>
filter === 'all' ? true : filter === 'done' ? t.completed : !t.completed
);
return (
<div style={{ maxWidth: 500, margin: 'auto', padding: 20 }}>
<h2>Reminder App</h2>
<form onSubmit={addTask}>
<input
placeholder="Task"
value={form.name}
onChange={e => setForm({ ...form, name: e.target.value })}
required
/><br/>
<input
type="date"
value={form.date}
onChange={e => setForm({ ...form, date: e.target.value })}
required
/><br/>
<input
placeholder="Description"
value={form.desc}
onChange={e => setForm({ ...form, desc: e.target.value })}
/><br/>
<button type="submit">Add</button>
</form>
<div style={{ margin: '10px 0' }}>
<button onClick={() => setFilter('all')}>All</button>
<button onClick={() => setFilter('done')}>Completed</button>
<button onClick={() => setFilter('todo')}>Pending</button>
</div>
{shown.map((t, i) => (
<div key={i} style={{ border: '1px solid #aaa', margin: 5, padding:
5 }}>
<strong>{t.name}</strong> (Due: {t.date})<br/>
{t.desc && <em>{t.desc}</em>}<br/>
Status: <b>{t.completed ? 'Done' : 'Pending'}</b><br/>
<button onClick={() => toggle(i)}>
Mark {t.completed ? 'Pending' : 'Done'}
</button>
</div>
))}
</div>
);
};
export default App;
