NODE JS - To Do List

PROGRAM  1

  • FILE NAME        : Style.css 
  • FOLDER NAME : Public

body {

    font-family: Arial, sans-serif;
    margin: 20px;
  }
  
  h1 {
    text-align: center;
    color:rgb(9, 100, 210);
  }
  
  form {
    display: flex;
    margin-bottom: 20px;
  }
  
  input[type="text"] {
    flex: 1;
    padding: 10px;
    font-size: 16px;
    
  }
  
  button {
    padding: 10px 20px;
    font-size: 16px;
    align-items: end;
    background-color: rgb(9, 100, 210);
  }
  
  ul {
    list-style-type: none;
    padding: 0;
    align-items: center;
  }
  
  li {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    justify-content: space-between;
    width:100%;
  }
  
  li .tick {
    margin-right: 10px;
    width:150xp;
    height: 40px;
    background-color: rgb(22, 216, 22);
  }
  
  li .delete {
    display: none;
    width:120xp;
    height: 40px;
    margin-right: 10px;
    background-color: rgb(246, 55, 55);
  }
  
  li.completed .tick {
    display: none;
  }
  
  li.completed .delete {
    display: inline;
  }




PROGRAM  2

  • FILE NAME        : Index.ejs 
  • FOLDER NAME : Views

<!DOCTYPE html>
<html>
<head>
  <title>To-Do</title>
  <link rel="stylesheet" type="text/css" href="/style.css">
</head>
<body>
  <h1>To-Do</h1>

  <form action="/todos" method="POST">
    <input type="text" name="todo" placeholder="Enter a task" required>
    <button type="submit">Add To-Do</button>
  </form>

  <ul>
    <% todos.forEach((todo, index) => { %>
      <li class="<%= todo.completed ? 'completed' : '' %>">
        
        <%= index+1 +" . " + todo.task %>
        <button class="tick" onclick="completeTask(<%= index %>)">&#x2713;complete</button>
        <button class="delete" onclick="deleteTask(<%= index %>)">&#10006;Delete..</button>
      </li>
    <% }) %>
  </ul>

  <script>
    function completeTask(index) {
      fetch(`/todos/${index}/complete`, { method: 'POST' })
        .then(() => {
          location.reload();
        })
        .catch((error) => {
          console.error('Error:', error);
        });
    }

    function deleteTask(index) {
      fetch(`/todos/${index}/delete`, { method: 'POST' })
        .then(() => {
          location.reload();
        })
        .catch((error) => {
          console.error('Error:', error);
        });
    }
  </script>
</body>
</html>


PROGRAM  3
  • FILE NAME        : Index.js 
  • FOLDER NAME : Open folder (don't put any folder)

const express = require('express');
const app = express();
const port = 3000;

app.use(express.urlencoded({ extended: true }));
app.use(express.static('public'));

let todos = [];

app.set('view engine', 'ejs');

app.get('/', (req, res) => {
  res.render('index', { todos });
});

app.post('/todos', (req, res) => {
  const todo = req.body.todo;
  todos.push({ task: todo, completed: false });
  res.redirect('/');
});

app.post('/todos/:id/complete', (req, res) => {
  const id = req.params.id;
  todos[id].completed = true;
  res.redirect('/');
});

app.post('/todos/:id/delete', (req, res) => {
  const id = req.params.id;
  todos.splice(id, 1);
  res.redirect('/');
});

app.listen(port, () => {
  console.log(`App listening at http://localhost:${port}`);
});




2  TO DO LIST

TO DO LIST
THROUGH NODE JS

  • Node package manager (NPM)
Initiate node package
“-Y”  installation

Result : Package.json  (File created at source folder)

  • Express Package 
Client to server connectivity
Request – Response
Http link – produced

Result : “node_modules”  folder Created and “Package-lock.json” file created

  • Embedded Java Script
Script + html

STEP 1
CMD: npm init –y
  • Node package manager (NPM)
Initiate node package
“-Y”  installation
Result : Package.json  (File created at source folder)


STEP 2
CMD: npm install express
  • Express Package 
Client to server connectivity
Request – Response
Http link – produced

Result : “node_modules”  folder Created and “Package-lock.json” file created


STEP 3
CMD: node index.js
  • Embedded Java Script
Script + html
Out put

No comments:

Post a Comment

Subscribe to: Comments (Atom)