React Todo List App

index.html

<div id="root"></div>

react-todo-list-app.markdown

React Todo List App

Todo list app made with React JS

A Pen by LiquidTime Creative on CodePen.

License.

script.babel

function App() {
	const [isShown, setIsShown] = React.useState(true);
	const [todoList, setTodoList] = React.useState([
		{ id: 1, taskName: "dummy text" },
		{ id: 2, taskName: "dummy text" },
		{ id: 3, taskName: "dummy text" },
		{ id: 4, taskName: "dummy text" },
		{ id: 5, taskName: "dummy text" },
		{ id: 6, taskName: "dummy text" },
	{ id: 7, taskName: "dummy text" },]);
	const [newTask, setNewTask] = React.useState("");

	const inputRef = React.useRef(null);
	const handleChange = (e) => {
		e.preventDefault();
		setNewTask(e.target.value);
	};
	const handleDelete = (id) => {
		setTodoList(todoList.filter((list) => list.id !== id));
	};

	const addTask = () => {
		if (newTask === "") {
			alert("Please type something");
			return;
		}
		const task = {
			id: todoList.length === 0 ? 1 : todoList[todoList.length - 1].id + 1,
			taskName: newTask,
		};
		setTodoList([...todoList, task]);
		setNewTask("");
		inputRef.current.value = "";
		inputRef.current.focus();
	};
	return (
		
			<div className="App">
				<div className="title">
					<h1>TODO APP</h1>
				</div>
				<button type="button" onClick={() => setIsShown(!isShown)}>
					{isShown ? "Shown" : "Hidden"}
				</button>
				{isShown && (
					<>
						<div className="addTask">
							<input ref={inputRef} type="text" onChange={handleChange} />
							<button onClick={addTask}>Add Task</button>
						</div>
						<div className="lists">
							{todoList.length > 0 ? (
								<>
									{todoList.map((list, id) => (
										<div key={id} className="list">
											<p> {list.taskName}</p>
											<span
												onClick={() => handleDelete(list.id)}
												title="delete"
											>
												X
											</span>
										</div>
									))}
								</>
							) : (
								<h1>Nothing To see here</h1>
							)}
						</div>
					</>
				)}
			<Foobar />
			</div>
		
	);
}
const Foobar = () => {
	return (
		<div id="foobar">Made with 💙 Liquid | {new Date().getFullYear()}</div>
	);
};
// Tells React to attach the HelloWorld component to the 'root' HTML div
ReactDOM.render(<App />, document.getElementById("root"))

scripts

<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

style.scss

:root {
	font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 24px;

	color-scheme: light dark;
	color: rgba(255, 255, 255, 0.87);
	background-color: #120722;

	font-synthesis: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	display: flex;

	min-width: 320px;
	min-height: 100vh;
	overflow-x: hidden;
}
#root {
	max-width: 1280px;
	width: 100%;
	margin: 0 auto;
	padding: 2rem;
	text-align: center;
}

@media (max-width: 480px) {
	#root {
		padding-top: 0;
	}
}
.App {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 1rem;

	@media (min-width: 480px) {
		gap: 2rem;
	}
}
button {
	font-size: large;
	margin-left: 10px;
	padding: 7px;
	outline: none;
	border: none;
	border: 1px solid #200648;
	background: none;
	color: #a771f9;
	border-radius: 10px;
	transition: 0.4s;
	box-shadow: -4px -4px 7px #160122, 4px 4px 7px #0c0015;
	cursor: pointer;
	&:active {
		scale: 0.9;
	}
	&:hover {
		border: 1px solid #430c94;
	}
}
.addTask {
	max-width: 1000px;
	width: 100%;
	display: flex;
	justify-content: space-between;
	input {
		flex: 1;
		outline: none;
		padding: 0.8rem 0.6rem;
		border: 1px solid #29065e;
		background: none;
		border-radius: 10px;
		font-size: 16px;
		letter-spacing: 0.3ch;
		box-shadow: -4px -4px 6px #160122, 4px 4px 10px #0c0015;
		transition: border 0.4s ease;
		&:focus {
			border: 1px solid #430c94;
		}
	}
}

.lists {
	margin-top: 1rem;
	max-width: 1000px;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	max-height: 650px;
	overflow-y: scroll;
	overflow-x: hidden;
	padding: 0 20px;
	position: relative;
	@media (max-height: 800px) {
		max-height: 500px;
	}
	@media (min-width: 860px) {
		padding: 0 30px;
	}

	.list {
		// background: rgba(37, 13, 74, 0.49);
		border-radius: 8px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		transition: scale 1s ease;
		box-shadow: -4px -4px 5px #200441, 4px 4px 5px #000000;
		margin: 5px;

		span {
			cursor: pointer;
			user-select: none;
			background: #00000080;
			height: 20px;
			width: 20px;
			padding: 5px;
			border-radius: 50%;
			transition: rotate 1s ease;
			margin-right: 5px;
		}
		p {
			margin-left: 10px;
			text-transform: capitalize;
		}
		&:hover {
			scale: 1.04;
			transition: 0ms;

			border-left: 4px solid #49149a;
			border-right: 4px solid #49149a;
			span {
				rotate: 90deg;
				transition: 0ms;
			}
		}
	}
	&::-webkit-scrollbar {
		width: 8px;
	}
	&::-webkit-scrollbar-thumb {
		background: #49149a;
		border-radius: 7px;
	}
}

::-webkit-scrollbar {
	width: 8px;
	background: #170137;
	
}
::-webkit-scrollbar-thumb {
	background: #49149a;
	border-radius: 7px;
}

#foobar {
	margin-top:auto;
}