Todo App | Notion

Sure, here's a simple guide to creating a basic to-do list application using HTML, CSS, and JavaScript.

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Todo App</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <h1>Todo List</h1>
    <input id="todoInput" type="text" placeholder="New task...">
    <button id="addButton">Add</button>
    <ul id="todoList">
    </ul>
    <script src="scripts.js"></script>
  </body>
</html>

CSS

body {
  font-family: Arial, sans-serif;
}

#todoList {
  list-style-type: none;
}

#todoList li {
  margin: 5px 0;
}

JavaScript

document.getElementById('addButton').addEventListener('click', function() {
  var value = document.getElementById('todoInput').value;
  if (value) {
    addTodo(value);
    document.getElementById('todoInput').value = '';
  }
});

function addTodo(text) {
  var list = document.getElementById('todoList');

  var item = document.createElement('li');
  item.innerText = text;

  var deleteButton = document.createElement('button');
  deleteButton.innerText = 'Delete';
  deleteButton.addEventListener('click', function() {
    list.removeChild(item);
  });
  item.appendChild(deleteButton);

  list.appendChild(item);
}

Python with Flask

First, you will need to install Flask and MySQL connector for Python. You can do this using pip:

pip install flask flask-mysql

Now, let's create a Flask application that connects to the MySQL database:

from flask import Flask, request
import mysql.connector

app = Flask(__name__)

@app.route('/add', methods=['POST'])
def add_task():
    data = request.get_json()
    task = data['task']

    cnx = mysql.connector.connect(user='username', password='password', host='127.0.0.1', database='tododb')
    cursor = cnx.cursor()

    add_task = ("INSERT INTO tasks (task) VALUES (%s)")
    cursor.execute(add_task, (task,))

    cnx.commit()
    cursor.close()
    cnx.close()

    return 'Task added successfully!'

@app.route('/delete', methods=['DELETE'])
def delete_task():
    data = request.get_json()
    task = data['task']

    cnx = mysql.connector.connect(user='username', password='password', host='127.0.0.1', database='tododb')
    cursor = cnx.cursor()

    delete_task = ("DELETE FROM tasks WHERE task = %s")
    cursor.execute(delete_task, (task,))

    cnx.commit()
    cursor.close()
    cnx.close()

    return 'Task deleted successfully!'

In this code, replace 'username' and 'password' with your MySQL credentials, and replace 'tododb' with the name of your database. The add_task route adds a task to the MySQL database, and the delete_task route deletes a task.

Note that this is just a simple example and doesn't include important aspects such as error handling and security measures.

JavaScript

document.getElementById('updateButton').addEventListener('click', function() {
  var value = document.getElementById('updateInput').value;
  if (value) {
    updateTodo(value);
    document.getElementById('updateInput').value = '';
  }
});

function updateTodo(text) {
  var list = document.getElementById('todoList');

  var item = document.createElement('li');
  item.innerText = text;

  var updateButton = document.createElement('button');
  updateButton.innerText = 'Update';
  updateButton.addEventListener('click', function() {
    item.innerText = prompt("Please enter new text", item.innerText);
  });
  item.appendChild(updateButton);

  list.appendChild(item);
}

HTML