76 views

1 Answer

0 votes
by (487 points)

Hello guys, 

Today I am giving a nice To-do app script for html web site. 

At first make html a file named todo.html and copy paste the following code into the file and save.

Now open the file with web browser and see the magic of the To-do app. Enjoy....

by (487 points)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"

        integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

    <title>To-Do List</title>

    <style>

        body {

            font-family: Arial, sans-serif;

            background-color: #f4f4f4;

            margin: 0;

            padding: 0;

        }

        .container {

            background-color: #fff;

            border-radius: 8px;

            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

            width: 750px;

            padding: 15px;

            margin: 15px auto;

            position: relative;

            top: 60px;

        }

        h1 {

            text-align: center;

            color: #333;

        }

        .input-container {

            display: flex;

            justify-content: space-between;

            margin-bottom: 10px;

        }

        input[type="text"] {

            width: calc(100% - 50px);

            padding: 10px;

            border: 1px solid #ddd;

            border-radius: 4px;

        }

        button {

            padding: 10px 15px;

            background-color: #28a745;

            color: white;

            border: none;

            border-radius: 4px;

            cursor: pointer;

        }

        button:hover {

            background-color: #218838;

        }

        ul {

            list-style-type: none;

            padding: 0;

            margin-top: 10px; /* To create space for the fixed container */

        }

        ul li {

            background-color: #f9f9f9;

            border: 1px solid #ddd;

            border-radius: 4px;

            padding: 10px;

            margin-bottom: 10px;

            display: flex;

            justify-content: space-between;

            align-items: center;

        }

        .remove {

            color: #dc3545;

            cursor: pointer;

        }

        .remove:hover {

            color: #c82333;

        }

    </style>

</head>

<body>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

        <a class="navbar-brand" href="index.html">My Note</a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"

            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

            <span class="navbar-toggler-icon"></span>

        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">

            <ul class="navbar-nav mr-auto">

            </ul>

            <a class="navbar-brand" href="todo.html">To do</a>

<ul class="navbar-nav mr-auto"></ul>

<a class="navbar-brand" href="phone.html">Phone Book</a>

  </div>

    </nav>

<center>    

<div class="container">

        <h3>To-Do List</h3>

        <div class="input-container">

            <input type="text" id="taskInput" placeholder="Add a new task...">

            <button onclick="addTask()">Add</button>

        </div>

        <ul id="taskList"></ul>

    </div>

</center>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"

 integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"

            crossorigin="anonymous"></script>   

 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"

            integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"

            crossorigin="anonymous"></script>

    <script>

        document.addEventListener('DOMContentLoaded', (event) => {

            loadTasks();

        });

        function addTask() {

            const taskInput = document.getElementById('taskInput');

            const taskList = document.getElementById('taskList');

            if (taskInput.value.trim() !== '') {

                const li = document.createElement('li');

                li.textContent = taskInput.value;

                const removeButton = document.createElement('span');

                removeButton.textContent = '✖';

                removeButton.className = 'remove';

                removeButton.onclick = function() {

                    if (confirm('Are you sure you want to delete this task?')) {

                        taskList.removeChild(li);

                        saveTasks();

                    }

                };

                li.appendChild(removeButton);

                taskList.appendChild(li);

                taskInput.value = '';

                saveTasks();

            }

        }

        function saveTasks() {

            const taskList = document.getElementById('taskList');

            const tasks = [];

            taskList.querySelectorAll('li').forEach(task => {

                tasks.push(task.firstChild.textContent);

            });

            localStorage.setItem('tasks', JSON.stringify(tasks));

        }

        function loadTasks() {

            const tasks = JSON.parse(localStorage.getItem('tasks'));

            if (tasks) {

                tasks.forEach(taskText => {

                    const taskList = document.getElementById('taskList');

                    const li = document.createElement('li');

                    li.textContent = taskText;

                    const removeButton = document.createElement('span');

                    removeButton.textContent = '✖';

                    removeButton.className = 'remove';

                    removeButton.onclick = function() {

                        if (confirm('Are you sure you want to delete this task?')) {

                            taskList.removeChild(li);

                            saveTasks();

                        }

                    };

                    li.appendChild(removeButton);

                    taskList.appendChild(li);

                });

            }

        }

    </script>

</body>

</html>

312 questions

91 answers

6 comments

5,034 users

7 Online Users
0 Member 7 Guest
Today Visits : 7526
Yesterday Visits : 2524
Total Visits : 6983316
...