todo

codeswing.json

{
  "scripts": [
    "react",
    "react-dom"
  ],
  "styles": [
    "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.css"
  ]
}

index.html

<div id="app"></div>

script.jsx

function App() {
	const [todos, setTodos] = React.useState([
		{
			"text": "This a sample item",
		}
	])

	const [text, setText] = React.useState(
		""
	)

	const removeTodo = (index) => {
		const newTodos = [...todos]
		newTodos.splice(index, 1)
		setTodos(newTodos)
	}

	const addTodo = () => {
		const newTodos = [...todos, { "text": text }]
		setTodos(newTodos)
	}

	return <div className="container">
		<h1>Hi, I'm GistPad</h1>
		<p>Feel free to edit the HTML, JavaScript and CSS in the playground. The preview will be updated in real time, so that you can visually explore your ideas.</p>
		<button className="fa fa-heart"></button>

		<div>
			<h1>TODO List</h1>
			<div className="f-space">
				<input
					type="text"
					value={text}
					onChange={(e) => setText(e.target.value)}
					placeholder="Add new todo"
				/>
				<button onClick={(e) => addTodo()}>add</button>
			</div>
			{todos.map((todo, index) => (
				<div className="f-space">
					<span>{todo.text}</span>
					<button onClick={(e) => removeTodo(index)}> X </button>
				</div>
			))}
		</div>
	</div>
}

ReactDOM.render(<App />, document.getElementById("app"));

style.css

body {
  background: rgb(193, 193, 182);
}

.container {
  margin: 0px 20px;
}

.f-space {
  display: flex;
  justify-content: space-between;
}