Creating a todo list application with Marko.js involves building a frontend interface for managing tasks and integrating it with backend functionality to store and retrieve the todo items. Below is a step-by-step guide on how to create a simple todo list application using Marko.js:
1. Setup your Project
First, create a new project directory and initialize a new Node.js project:
mkdir marko-todo-list
cd marko-todo-list
npm init -y
2. Install Dependencies
Install the necessary packages:
npm install marko express @marko/express body-parser nedb
marko: The Marko.js library.express: The Express.js framework for creating the server.@marko/express: Middleware for using Marko.js with Express.body-parser: Middleware to parse incoming request bodies.nedb: Embedded database for storing todo items (you can replace it with any database of your choice).
3. Project Structure
Organize your project directory like this:
marko-todo-list/
├── src/
│ ├── components/
│ │ ├── TodoItem.marko
│ ├── pages/
│ │ ├── index.marko
│ ├── layouts/
│ │ ├── main.marko
│ ├── server.js
├── package.json
4. Create Page Templates
Create the main layout template in src/layouts/main.marko:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>${input.title}</title>
</head>
<body>
<header>
<h1>${input.title}</h1>
</header>
<main>
<${input.body} />
</main>
</body>
</html>
Create the homepage template in src/pages/index.marko:
<layout-use template="../../layouts/main.marko">
<layout-put into="title">Todo List</layout-put>
<layout-put into="body">
<form method="post" action="/add">
<input type="text" name="task" placeholder="Add new task">
<button type="submit">Add</button>
</form>
<ul>
<for|item| of=input.todos>
<li>${item.task}</li>
</for>
</ul>
</layout-put>
</layout-use>
5. Create Components
Create the TodoItem.marko component in src/components/TodoItem.marko:
<const { item } = input/>
<li>${item.task}</li>
6. Setup the Express Server
Create src/server.js to set up the Express server:
const express = require('express');
const markoMiddleware = require('@marko/express').default;
const bodyParser = require('body-parser');
const Datastore = require('nedb');
const app = express();
const db = new Datastore({ filename: './data/todo.db', autoload: true });
app.use(markoMiddleware());
app.use(bodyParser.urlencoded({ extended: true }));
app.get('/', async (req, res) => {
db.find({}, (err, todos) => {
if (err) {
res.status(500).send('Error fetching todos');
} else {
res.marko(require('./pages/index.marko'), { todos });
}
});
});
app.post('/add', (req, res) => {
const task = req.body.task.trim();
if (task) {
db.insert({ task }, (err, newTodo) => {
if (err) {
res.status(500).send('Error adding todo');
} else {
res.redirect('/');
}
});
} else {
res.redirect('/');
}
});
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});
7. Add Start Script
Update package.json to add a start script:
"scripts": {
"start": "node src/server.js"
}
8. Run Your Application
Start your application by running:
npm start
Now, open your browser and navigate to http://localhost:3000 to see the todo list application. You can add new tasks, and they will be displayed on the page.
This setup provides a simple todo list application using Marko.js and Express.js. You can expand this application by adding features such as marking tasks as completed, deleting tasks, and persisting tasks to a more robust database. Marko's component-based architecture makes it easy to manage and update UI elements, while Express provides a flexible backend framework for handling HTTP requests and interacting with databases.
