small react alarm project
..
npx create-react-app react-alarm-clock
cd react-alarm-clock
..
npm start
…
import logo from './[Link]';
import React, { useState, useEffect } from 'react';
import './[Link]';
function App() {
const [time, setTime] = useState(new Date());
const [alarmTime, setAlarmTime] = useState('');
const [alarmTriggered, setAlarmTriggered] = useState(false);
useEffect(() => {
const timer = setInterval(() => {
setTime(new Date());
}, 1000);
return () => clearInterval(timer);
}, []);
useEffect(() => {
if (
alarmTime &&
`${[Link]()}:${[Link]()}` === alarmTime
){
setAlarmTriggered(true);
alert('Alarm ringing!');
}
}, [time, alarmTime]);
const handleAlarmChange = (e) => {
setAlarmTime([Link]);
setAlarmTriggered(false);
};
return (
<div style={{ textAlign: 'center', marginTop: '50px' }}>
<h1>React Alarm Clock</h1>
<h2>{[Link]()}</h2>
<input
type="time"
value={alarmTime}
onChange={handleAlarmChange}
/>
<p>{alarmTriggered && 'Alarm is ringing!'}</p>
</div>
);
};
export default App;
..
To-Do List
…
import logo from './[Link]';
import React, { useState, useEffect } from 'react';
import './[Link]';
function App() {
const [tasks, setTasks] = useState([]);
const [taskInput, setTaskInput] = useState('');
const handleTaskInputChange = (e) => {
setTaskInput([Link]);
};
const addTask = () => {
if ([Link]()) {
setTasks([...tasks, taskInput]);
setTaskInput('');
}
};
const removeTask = (index) => {
const newTasks = [Link]((_, i) => i !== index);
setTasks(newTasks);
};
return (
<div style={{ textAlign: 'center', marginTop: '50px' }}>
<h1>React To-Do List</h1>
<div>
<input
type="text"
placeholder="Add a new task"
value={taskInput}
onChange={handleTaskInputChange}
/>
<button onClick={addTask}>Add Task</button>
</div>
<ul style={{ listStyleType: 'none', padding: 0 }}>
{[Link]((task, index) => (
<li key={index} style={{ margin: '10px 0' }}>
{task} <button onClick={() => removeTask(index)}>Delete</button>
</li>
))}
</ul>
</div>
);
};
export default App;
API='[Link]
build small API call project
..
import logo from './[Link]';
import React, { useState, useEffect } from 'react';
import './[Link]';
function App() {
const [categories, setCategories] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
fetch('[Link]
.then((response) => {
if (![Link]) {
throw new Error('Network response was not ok');
}
return [Link]();
})
.then((data) => {
setCategories(data);
setLoading(false);
})
.catch((error) => {
setError([Link]);
setLoading(false);
});
}, []);
if (loading) return <p>Loading...</p>;
if (error) return <p>Error: {error}</p>;
return (
<div style={{ textAlign: 'center', marginTop: '50px' }}>
<h1>Product Categories</h1>
<ul style={{ listStyleType: 'none', padding: 0 }}>
{[Link]((category, index) => (
<li key={index} style={{ margin: '10px 0' }}>{category}</li>
))}
</ul>
</div>
);
};
export default App;
..
build small video player
local file music.mp3
..
import logo from './[Link]';
import React, { useState, useEffect } from 'react';
import './[Link]';
function App() {
const [isPlaying, setIsPlaying] = useState(false);
const audioRef = [Link]();
const togglePlay = () => {
if (isPlaying) {
[Link]();
} else {
[Link]();
}
setIsPlaying(!isPlaying);
};
return (
<div style={{ textAlign: 'center', marginTop: '50px' }}>
<h1>Simple Music Player</h1>
<audio
ref={audioRef}
src="/path/to/your/music.mp3"
preload="auto"
/>
<div>
<button onClick={togglePlay}>
{isPlaying ? 'Pause' : 'Play'}
</button>
</div>
</div>
);
};
export default App;
..
…
….
