Skip to content

feature1 #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

feature1 #4

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
249 changes: 51 additions & 198 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,199 +1,52 @@
import {
Button,
Container,
Text,
Title,
Modal,
TextInput,
Group,
Card,
ActionIcon,
Code,
} from '@mantine/core';
import { useState, useRef, useEffect } from 'react';
import { MoonStars, Sun, Trash } from 'tabler-icons-react';

import {
MantineProvider,
ColorSchemeProvider,
ColorScheme,
} from '@mantine/core';
import { useColorScheme } from '@mantine/hooks';
import { useHotkeys, useLocalStorage } from '@mantine/hooks';

export default function App() {
const [tasks, setTasks] = useState([]);
const [opened, setOpened] = useState(false);

const preferredColorScheme = useColorScheme();
const [colorScheme, setColorScheme] = useLocalStorage({
key: 'mantine-color-scheme',
defaultValue: 'light',
getInitialValueInEffect: true,
});
const toggleColorScheme = value =>
setColorScheme(value || (colorScheme === 'dark' ? 'light' : 'dark'));

useHotkeys([['mod+J', () => toggleColorScheme()]]);

const taskTitle = useRef('');
const taskSummary = useRef('');

function createTask() {
setTasks([
...tasks,
{
title: taskTitle.current.value,
summary: taskSummary.current.value,
},
]);

saveTasks([
...tasks,
{
title: taskTitle.current.value,
summary: taskSummary.current.value,
},
]);
}

function deleteTask(index) {
var clonedTasks = [...tasks];

clonedTasks.splice(index, 1);

setTasks(clonedTasks);

saveTasks([...clonedTasks]);
}

function loadTasks() {
let loadedTasks = localStorage.getItem('tasks');

let tasks = JSON.parse(loadedTasks);

if (tasks) {
setTasks(tasks);
}
}

function saveTasks(tasks) {
localStorage.setItem('tasks', JSON.stringify(tasks));
}

useEffect(() => {
loadTasks();
}, []);

return (
<ColorSchemeProvider
colorScheme={colorScheme}
toggleColorScheme={toggleColorScheme}>
<MantineProvider
theme={{ colorScheme, defaultRadius: 'md' }}
withGlobalStyles
withNormalizeCSS>
<div className='App'>
<Modal
opened={opened}
size={'md'}
title={'New Task'}
withCloseButton={false}
onClose={() => {
setOpened(false);
}}
centered>
<TextInput
mt={'md'}
ref={taskTitle}
placeholder={'Task Title'}
required
label={'Title'}
/>
<TextInput
ref={taskSummary}
mt={'md'}
placeholder={'Task Summary'}
label={'Summary'}
/>
<Group mt={'md'} position={'apart'}>
<Button
onClick={() => {
setOpened(false);
}}
variant={'subtle'}>
Cancel
</Button>
<Button
onClick={() => {
createTask();
setOpened(false);
}}>
Create Task
</Button>
</Group>
</Modal>
<Container size={550} my={40}>
<Group position={'apart'}>
<Title
sx={theme => ({
fontFamily: `Greycliff CF, ${theme.fontFamily}`,
fontWeight: 900,
})}>
My Tasks
</Title>
<ActionIcon
color={'blue'}
onClick={() => toggleColorScheme()}
size='lg'>
{colorScheme === 'dark' ? (
<Sun size={16} />
) : (
<MoonStars size={16} />
)}
</ActionIcon>
</Group>
{tasks.length > 0 ? (
tasks.map((task, index) => {
if (task.title) {
return (
<Card withBorder key={index} mt={'sm'}>
<Group position={'apart'}>
<Text weight={'bold'}>{task.title}</Text>
<ActionIcon
onClick={() => {
deleteTask(index);
}}
color={'red'}
variant={'transparent'}>
<Trash />
</ActionIcon>
</Group>
<Text color={'dimmed'} size={'md'} mt={'sm'}>
{task.summary
? task.summary
: 'No summary was provided for this task'}
</Text>
</Card>
);
}
})
) : (
<Text size={'lg'} mt={'md'} color={'dimmed'}>
You have no tasks
</Text>
)}
<Button
onClick={() => {
setOpened(true);
}}
fullWidth
mt={'md'}>
New Task
</Button>
</Container>
</div>
</MantineProvider>
</ColorSchemeProvider>
);
import React, { useState } from "react";

function App() {
// State to manage tasks
const [tasks, setTasks] = useState([]);
const [newTask, setNewTask] = useState("");

// Add task function
const addTask = () => {
if (newTask.trim() === "") return;
setTasks([...tasks, newTask]);
setNewTask("");
};

// Remove task function
const removeTask = (index) => {
const updatedTasks = tasks.filter((_, i) => i !== index);
setTasks(updatedTasks);
};

return (
<div className="min-h-screen flex flex-col items-center justify-center bg-gray-100 p-4">
<h1 className="text-2xl font-bold mb-4">To-Do List</h1>

{/* Input & Add Button */}
<div className="flex gap-2">
<input
type="text"
className="border p-2 rounded"
placeholder="Enter task..."
value={newTask}
onChange={(e) => setNewTask(e.target.value)}
/>
<button className="bg-blue-500 text-white px-4 py-2 rounded" onClick={addTask}>
Add Task
</button>
</div>

{/* Task List */}
<ul className="mt-4 w-64">
{tasks.map((task, index) => (
<li key={index} className="flex justify-between bg-white p-2 mb-2 shadow rounded">
{task}
<button className="text-red-500" onClick={() => removeTask(index)}>❌</button>
</li>
))}
</ul>
</div>
);
}

export default App;