ASSIGNMENT TRISHANTH V RA2212704010014
1.
import React, { useState } from "react";
const TodoApp = () => {
const [tasks, setTasks] = useState([]);
const [task, setTask] = useState("");
const [filter, setFilter] = useState("all");
const addTask = () => {
if (task.trim()) {
setTasks([...tasks, { id: Date.now(), text: task, completed:
false }]);
setTask("");
}
};
const deleteTask = (id) => {
setTasks(tasks.filter((t) => t.id !== id));
};
const toggleCompletion = (id) => {
setTasks(
tasks.map((t) => (t.id === id ? { ...t, completed: !t.completed }
: t))
);
};
const filteredTasks = tasks.filter((t) => {
if (filter === "completed") return t.completed;
if (filter === "active") return !t.completed;
return true;
});
return (
<div style={{ textAlign: "center", padding: "20px",
backgroundColor: "#f4f4f4", minHeight: "100vh" }}>
<h2 style={{ color: "#333" }}>TO DO LIST</h2>
<input
type="text"
value={task}
onChange={(e) => setTask(e.target.value)}
placeholder="Add a new task"
style={{ padding: "10px", borderRadius: "5px", border: "1px
solid #ccc" }}
/>
<button onClick={addTask} style={{ marginLeft: "10px", padding:
"10px", backgroundColor: "#28a745", color: "white", border: "none",
borderRadius: "5px" }}>Add</button>
<div style={{ marginTop: "10px" }}>
<button onClick={() => setFilter("all")} style={{ margin:
"5px", padding: "8px", backgroundColor: "#007bff", color: "white",
border: "none", borderRadius: "5px" }}>All</button>
<button onClick={() => setFilter("active")} style={{ margin:
"5px", padding: "8px", backgroundColor: "#ffc107", color: "black",
border: "none", borderRadius: "5px" }}>Active</button>
<button onClick={() => setFilter("completed")} style={{ margin:
"5px", padding: "8px", backgroundColor: "#dc3545", color: "white",
border: "none", borderRadius: "5px" }}>Completed</button>
</div>
<ul style={{ listStyle: "none", padding: "0" }}>
{filteredTasks.map((t) => (
<li key={t.id} style={{
textDecoration: t.completed ? "line-through" : "none",
backgroundColor: "white",
padding: "10px",
margin: "10px auto",
borderRadius: "5px",
boxShadow: "0 0 5px rgba(0, 0, 0, 0.1)",
display: "flex",
alignItems: "center",
justifyContent: "space-between",
maxWidth: "300px"
}}>
{t.text}
<div>
<button onClick={() => toggleCompletion(t.id)} style={{
marginRight: "5px", padding: "5px", backgroundColor: t.completed ?
"#ffc107" : "#28a745", color: "white", border: "none", borderRadius:
"3px" }}>{t.completed ? "Undo" : "Complete"}</button>
<button onClick={() => deleteTask(t.id)} style={{
padding: "5px", backgroundColor: "#dc3545", color: "white", border:
"none", borderRadius: "3px" }}>Delete</button>
</div>
</li>
))}
</ul>
</div>
);
};
export default TodoApp;
2.
import React, { useState } from "react";
const products = [
{ id: 1, name: "Laptop", price: 1000 },
{ id: 2, name: "Smartphone", price: 500 },
{ id: 3, name: "Headphones", price: 200 }
];
const Product = ({ product, addToCart }) => {
return (
<div style={{
border: "1px solid #ddd",
padding: "15px",
margin: "15px",
borderRadius: "10px",
textAlign: "center",
backgroundColor: "#f8f9fa",
boxShadow: "0 4px 8px rgba(0,0,0,0.1)"
}}>
<h3 style={{ color: "#333" }}>{product.name}</h3>
<p style={{ fontSize: "18px", fontWeight: "bold" }}>Price: $
{product.price}</p>
<button
onClick={() => addToCart(product)}
style={{
backgroundColor: "#007bff",
color: "white",
padding: "10px 15px",
border: "none",
borderRadius: "5px",
cursor: "pointer",
transition: "background 0.3s"
}}
onMouseOver={(e) => e.target.style.backgroundColor = "#0056b3"}
onMouseOut={(e) => e.target.style.backgroundColor = "#007bff"}
>
Buy Now
</button>
</div>
);
};
const ProductList = ({ addToCart }) => {
return (
<div style={{ display: "flex", justifyContent: "center", flexWrap:
"wrap" }}>
{products.map((product) => (
<Product key={product.id} product={product}
addToCart={addToCart} />
))}
</div>
);
};
const Cart = ({ cart }) => {
return (
<div style={{
marginTop: "20px",
padding: "20px",
border: "1px solid #ccc",
borderRadius: "10px",
backgroundColor: "#f1f1f1",
boxShadow: "0 4px 8px rgba(0,0,0,0.1)",
maxWidth: "400px",
margin: "auto"
}}>
<h2>Shopping Cart</h2>
{cart.length === 0 ? (
<p style={{ color: "#777" }}>No items in cart</p>
) : (
<ul style={{ listStyle: "none", padding: "0" }}>
{cart.map((item, index) => (
<li key={index} style={{ padding: "5px 0", borderBottom:
"1px solid #ddd" }}>
{item.name} - <strong>${item.price}</strong>
</li>
))}
</ul>
)}
</div>
);
};
const ECommerceApp = () => {
const [cart, setCart] = useState([]);
const addToCart = (product) => {
setCart([...cart, product]);
};
return (
<div style={{
textAlign: "center",
padding: "30px",
fontFamily: "Arial, sans-serif",
backgroundColor: "#e9ecef",
minHeight: "100vh"
}}>
<h1 style={{ color: "#343a40" }}>Product List</h1>
<ProductList addToCart={addToCart} />
<Cart cart={cart} />
</div>
);
};
export default ECommerceApp;
3.
import React, { useState } from "react";
const TemperatureConverter = () => {
const [celsius, setCelsius] = useState("");
const convertToFahrenheit = (celsius) => {
return celsius === "" ? "" : (celsius * 9) / 5 + 32;
};
return (
<div style={{ textAlign: "center", padding: "20px", fontFamily:
"Arial, sans-serif" }}>
<h2>Temperature Converter</h2>
<input
type="number"
value={celsius}
onChange={(e) => setCelsius(e.target.value)}
placeholder="Enter Celsius"
style={{
padding: "10px",
fontSize: "16px",
borderRadius: "5px",
border: "1px solid #ddd",
width: "200px",
textAlign: "center",
}}
/>
<p style={{ marginTop: "10px", fontSize: "18px" }}>
Fahrenheit: <strong>{convertToFahrenheit(celsius)}</strong>
</p>
</div>
);
};
export default TemperatureConverter;
Experiment 4
Code:
import React, { useState } from "react";
const UserProfileForm = () => {
const [formData, setFormData] = useState({ name: "", email: "", age:
"" });
const [errors, setErrors] = useState({});
const validate = () => {
let newErrors = {};
if (!formData.name.trim()) newErrors.name = "Name is required";
if (!formData.email.includes("@")) newErrors.email = "Valid email
is required";
if (!formData.age || isNaN(formData.age) || formData.age <= 0)
newErrors.age = "Valid age is required";
return newErrors;
};
const handleChange = (e) => {
setFormData({ ...formData, [e.target.name]: e.target.value });
};
const handleSubmit = (e) => {
e.preventDefault();
const validationErrors = validate();
if (Object.keys(validationErrors).length === 0) {
alert("Profile Submitted Successfully!");
setFormData({ name: "", email: "", age: "" });
}
setErrors(validationErrors);
};
return (
<div style={{ textAlign: "center", padding: "20px", fontFamily:
"Arial, sans-serif", backgroundColor: "#f4f4f9", color: "#333" }}>
<h2 style={{ color: "#2c3e50" }}>User Profile Form</h2>
<form onSubmit={handleSubmit} style={{ maxWidth: "350px", margin:
"auto", textAlign: "left", backgroundColor: "#ffffff", padding: "20px",
borderRadius: "10px", boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)" }}>
<label style={{ fontWeight: "bold", color:
"#34495e" }}>Name:</label>
<input
type="text"
name="name"
value={formData.name}
onChange={handleChange}
style={{ width: "100%", padding: "10px", marginBottom:
"10px", borderRadius: "5px", border: "1px solid #ccc" }}
/>
{errors.name && <p style={{ color: "red", fontSize:
"12px" }}>{errors.name}</p>}
<label style={{ fontWeight: "bold", color:
"#34495e" }}>Email:</label>
<input
type="email"
name="email"
value={formData.email}
onChange={handleChange}
style={{ width: "100%", padding: "10px", marginBottom:
"10px", borderRadius: "5px", border: "1px solid #ccc" }}
/>
{errors.email && <p style={{ color: "red", fontSize:
"12px" }}>{errors.email}</p>}
<label style={{ fontWeight: "bold", color:
"#34495e" }}>Age:</label>
<input
type="number"
name="age"
value={formData.age}
onChange={handleChange}
style={{ width: "100%", padding: "10px", marginBottom:
"10px", borderRadius: "5px", border: "1px solid #ccc" }}
/>
{errors.age && <p style={{ color: "red", fontSize:
"12px" }}>{errors.age}</p>}
<button type="submit" style={{ width: "100%", padding: "12px",
backgroundColor: "#3498db", color: "white", border: "none",
borderRadius: "5px", cursor: "pointer", fontSize: "16px", fontWeight:
"bold" }}>Submit</button>
</form>
</div>
);
};
export default UserProfileForm;
5
import { useEffect, useState, createContext, useContext } from "react";
const ThemeContext = createContext();
const useTheme = () => useContext(ThemeContext);
const ThemeProvider = ({ children }) => {
const [darkMode, setDarkMode] = useState(
() => JSON.parse(localStorage.getItem("darkMode")) || false
);
useEffect(() => {
localStorage.setItem("darkMode", JSON.stringify(darkMode));
document.documentElement.classList.toggle("dark", darkMode);
document.body.style.backgroundColor = darkMode ? "black" : "white";
}, [darkMode]);
return (
<ThemeContext.Provider value={{ darkMode, setDarkMode }}>
{children}
</ThemeContext.Provider>
);
};
const DarkModeToggle = () => {
const { darkMode, setDarkMode } = useTheme();
return (
<button
onClick={() => setDarkMode((prev) => !prev)}
className="p-2 rounded-full bg-gray-300 dark:bg-gray-800 text-
black dark:text-white transition-all duration-300 shadow-lg
hover:scale-105"
>
{darkMode ? "🌙 Dark Mode" : "☀️Light Mode"}
</button>
);
};
const App = () => {
return (
<ThemeProvider>
<div className="min-h-screen flex flex-col items-center justify-
center bg-white dark:bg-black text-gray-900 dark:text-white transition-
all">
<h1 className="text-3xl font-bold mb-6">Dark Mode Toggle</h1>
<DarkModeToggle />
</div>
</ThemeProvider>
);
};
export default App;
