Lab Activity 5:
A. Create a To Do App using React JS.
App.js
import React, { useState } from 'react';
import './App.css';
function App() {
const [todos, setTodos] = useState([]);
const [newTodo, setNewTodo] = useState("");
const addTodo = () => {
if (newTodo.trim()) {
setTodos([...todos, { text: newTodo.trim(), completed: false }]);
setNewTodo("");
}
};
const toggleTodo = (index) => {
const updatedTodos = todos.map((todo, idx) =>
idx === index ? { ...todo, completed: !todo.completed } : todo
);
setTodos(updatedTodos);
};
const deleteTodo = (index) => {
const updatedTodos = todos.filter((_, idx) => idx !== index);
setTodos(updatedTodos);
};
return (
<div className="App">
<h1>Todo List</h1>
<div className="todo-input">
<input
type="text"
placeholder="Add a new task..."
value={newTodo}
onChange={(e) => setNewTodo(e.target.value)}
/>
<button onClick={addTodo}>Add</button>
</div>
<ul className="todo-list">
{todos.map((todo, index) => (
<li key={index} className={todo.completed ? 'completed' : ''}>
<span onClick={() => toggleTodo(index)}>{todo.text}</span>
<button onClick={() => deleteTodo(index)}>Delete</button>
</li>
))}
</ul>
</div>
);
}
export default App;
App.css:
.App {
text-align: center;
font-family: sans-serif;
padding: 2rem;
max-width: 500px;
margin: auto;
}
.todo-input {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1rem;
}
.todo-input input {
padding: 0.5rem;
flex: 1;
}
.todo-input button {
padding: 0.5rem 1rem;
}
.todo-list {
list-style: none;
padding: 0;
}
.todo-list li {
display: flex;
justify-content: space-between;
padding: 0.5rem;
border-bottom: 1px solid #ccc;
cursor: pointer;
}
.todo-list li.completed span {
text-decoration: line-through;
color: #999;
}
Output:
B. Create a quiz app using React JS.
Quiz.js
import React, { useState } from 'react';
import './App.css'
const questions = [
{
questionText: "What is the capital of France?",
options: ["Berlin", "Madrid", "Paris", "Rome"],
answer: "Paris",
},
{
questionText: "Who developed React?",
options: ["Facebook", "Google", "Microsoft", "Apple"],
answer: "Facebook",
},
{
questionText: "Which language is used for styling web pages?",
options: ["JavaScript", "HTML", "CSS", "Python"],
answer: "CSS",
},
{
questionText: "What is 2 + 2?",
options: ["3", "4", "5", "6"],
answer: "4",
},
];
const App = () => {
const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
const [score, setScore] = useState(0);
const [isQuizOver, setIsQuizOver] = useState(false);
const handleAnswer = (answer) => {
if (answer === questions[currentQuestionIndex].answer) {
setScore(score + 1);
}
if (currentQuestionIndex < questions.length - 1) {
setCurrentQuestionIndex(currentQuestionIndex + 1);
} else {
setIsQuizOver(true);
}
};
const restartQuiz = () => {
setCurrentQuestionIndex(0);
setScore(0);
setIsQuizOver(false);
};
return (
<div className="quiz-container">
<h1>Quiz App</h1>
{isQuizOver ? (
<div className="quiz-result">
<h2>Your score is {score} out of {questions.length}</h2>
<button onClick={restartQuiz}>Restart Quiz</button>
</div>
):(
<div className="question-container">
<h2>{questions[currentQuestionIndex].questionText}</h2>
<div className="options">
{questions[currentQuestionIndex].options.map((option, index) => (
<button
key={index}
onClick={() => handleAnswer(option)}
className="option-button">
{option}
</button>
))}
</div>
</div>
)}
</div>
);
};
Quiz.css
.quiz-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
font-family: Arial, sans-serif;
h1 {
font-size: 2.5em;
.question-container {
margin-bottom: 20px;
}
.options {
display: flex;
flex-direction: column;
}
.option-button {
padding: 10px;
margin: 5px;
font-size: 1.2em;
cursor: pointer;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f0f0f0;
transition: background-color 0.3s ease;
}
.option-button:hover {
background-color: #d3d3d3;
}
.quiz-result {
text-align: center;
button {
padding: 10px 20px;
font-size: 1.2em;
cursor: pointer;
background-color: #4caf50;
color: white;
border: none;
border-radius: 5px;
}
button:hover {
background-color: #45a049;
}
Output:
C. Create coin flipping app using React JS.
CoinFlipping.js
import React, { useState } from 'react';
import './App.css';
const App = () => {
const [flipResult, setFlipResult] = useState(null);
const [isFlipping, setIsFlipping] = useState(false);
const flipCoin = () => {
if (isFlipping) return;
setIsFlipping(true);
setTimeout(() => {
const result = Math.random() < 0.5 ? 'Heads' : 'Tails';
setFlipResult(result);
setIsFlipping(false);
}, 1000); // Simulate a delay of 1 second for the coin flip animation
};
return (
<div className="coin-flip-container">
<h1>Coin Flip Simulator</h1>
<div className="coin">
{isFlipping ? (
<div className="coin-flipping">Flipping...</div>
):(
<div className={coin-face ${flipResult ? flipResult.toLowerCase() : ''}}>
{flipResult || 'Start Flipping!'}
</div>
)}
</div>
<button className="flip-button" onClick={flipCoin} disabled={isFlipping}>
Flip Coin
</button>
</div>
);};
CoinFlipping.css
.coin-flip-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
font-size: 2.5em;
margin-bottom: 20px;
}
.coin {
width: 150px;
height: 150px;
border-radius: 50%;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 30px;
font-size: 1.5em;
font-weight: bold;
color: #333;
transition: transform 1s ease-in-out;
}
.coin-face {
font-size: 1.5em;
color: #333;
}
.coin-face.heads {
color: #f1c40f; /* Gold color for heads */
}
.coin-face.tails {
color: #95a5a6; /* Gray color for tails */
}
.coin-flipping {
font-size: 1.5em;
font-weight: bold;
color: #3498db;
}
.flip-button {
padding: 10px 20px;
font-size: 1.2em;
cursor: pointer;
background-color: #4caf50;
color: white;
border: none;
border-radius: 5px;
transition: background-color 0.3s ease;
margin-top: 20px;
}
.flip-button:hover {
background-color: #45a049;
}
.flip-button:disabled {
background-color: #b0b0b0;
cursor: not-allowed;
}
Output:
D. Create color box app using React JS.
ColorBox.js
import React, { useState } from 'react';
import './App.css';
const App = () => {
const [color, setColor] = useState('#FFFFFF');
const getRandomColor = () => {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
};
const changeColor = () => {
const newColor = getRandomColor();
setColor(newColor); // Update the state with the new color
};
return (
<div className="color-box-container">
<div
className="color-box"
style={{ backgroundColor: color }} // Dynamically set the background color
></div>
<button className="change-color-button" onClick={changeColor}>
Change Color
</button>
</div>
);
};
export default App;
ColorBox.css
.color-box-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
font-family: Arial, sans-serif;
}
.color-box {
width: 200px;
height: 200px;
margin-bottom: 20px;
border: 1px solid #000;
transition: background-color 0.3s ease;
}
.change-color-button {
padding: 10px 20px;
font-size: 1.2em;
cursor: pointer;
background-color: #4caf50;
color: white;
border: none;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.change-color-button:hover {
background-color: #45a049;
}
Output:
E. Create rolling app using React JS.
Rolling.js
import React, { useState } from 'react';
import './App.css';
const App = () => {
const [diceValue, setDiceValue] = useState(1); // Initial dice value is 1
const rollDice = () => {
const randomValue = Math.floor(Math.random() * 6) + 1;
setDiceValue(randomValue); // Update dice value state
};
return (
<div className="dice-container">
<div className="dice">
<div className={dot ${diceValue === 1 ? 'dot-1' : ''}} />
<div className={dot ${diceValue === 2 ? 'dot-2' : ''}} />
<div className={dot ${diceValue === 3 ? 'dot-3' : ''}} />
<div className={dot ${diceValue === 4 ? 'dot-4' : ''}} />
<div className={dot ${diceValue === 5 ? 'dot-5' : ''}} />
<div className={dot ${diceValue === 6 ? 'dot-6' : ''}} />
</div>
<button className="roll-button" onClick={rollDice}>
Roll Dice
</button>
</div>
);
};
export default App;
Rolling.css
.dice-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
font-family: Arial, sans-serif;
}
.dice {
display: grid;
grid-template-columns: repeat(3, 50px);
grid-template-rows: repeat(3, 50px);
gap: 10px;
width: 180px;
height: 180px;
background-color: white;
border: 5px solid #333;
border-radius: 10px;
margin-bottom: 30px;
position: relative;
}
.dot {
width: 20px;
height: 20px;
background-color: black;
border-radius: 50%;
visibility: hidden;
}
.dot-1 {
visibility: visible;
position: absolute;
top: 40%;
left: 40%;
}
.dot-2 {
visibility: visible;
position: absolute;
top: 20%;
left: 20%;
}
.dot-3 {
visibility: visible;
position: absolute;
top: 20%;
right: 20%;
.dot-4 {
visibility: visible;
position: absolute;
top: 20%;
left: 20%;
right: 20%;
.dot-5 {
visibility: visible;
position: absolute;
top: 20%;
left: 20%;
right: 20%;
bottom: 20%;
}
.dot-6 {
visibility: visible;
position: absolute;
top: 20%;
left: 20%;
right: 20%;
bottom: 20%;
}
.roll-button {
padding: 10px 20px;
font-size: 1.2em;
cursor: pointer;
background-color: #4caf50;
color: white;
border: none;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.roll-button:hover {
background-color: #45a049;
}
Output:
