Todo List app using html,js and tailwind.css with features login,logout,storing the data in localstorage addtodos,deletetodos and updating todos,toastify library and many more

 

Here's a fully functional To-Do List app with login/logout functionality, item management (add, edit, delete), and local storage for data persistence. The app uses HTML, CSS (with Tailwind CSS for design), and JavaScript for the logic.


File Structure:

  • index.html - The main structure of the app
  • style.css - Custom styles (if needed)
  • script.js - JavaScript logic for the app

You can use Tailwind CSS CDN for simplicity to quickly apply beautiful styles.

Features Breakdown:

  1. Login/Logout: The user can log in by entering a username and password. After logging in, they can manage their to-do list. If not logged in, they are redirected to the login screen.
  2. To-Do Management: The user can add, edit, and delete items from the to-do list.
  3. Local Storage: All data is stored in the browser's local storage, so the data persists even after the page is refreshed.
  4. Tailwind CSS: The app uses Tailwind CSS to create a clean, responsive, and modern design.

You can run this code by creating three files: index.html, script.js, and style.css, and then opening index.html in a browser.





1) Tailwind css,toast js,font awesome links


 <script src="https://cdn.tailwindcss.com"></script>

    <!-- Include Toastify CSS and JS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
    <script src="https://cdn.jsdelivr.net/npm/toastify-js"></script>

    <!-- Include Font Awesome for icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">


2) Design login form


  <!-- Login Form -->
        <div id="login-form" class="hidden">
            <h2 class="text-center text-2xl font-bold mb-4">Login to your account</h2>
            <input type="text" id="username" placeholder="Username"
                class="w-full p-3 mb-4 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
                required>
            <input type="password" id="password" placeholder="Password"
                class="w-full p-3 mb-4 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
                required>
            <button onclick="login()"
                class="w-full bg-black text-white p-3 rounded-lg hover:bg-[#0f172a]">Login</button>
        </div>



3) Design Todos section

  <div id="todo-app" class="hidden">
            <div class="flex justify-between mb-4">
                <h1 class="text-xl font-bold">To-Do List</h1>
                <button onclick="logout()" class="text-white bg-black rounded px-5 py-2 hover:text-blue-700">Logout</button>
            </div>

            <div class="mb-4 mt-[30px]">
                <input type="text" id="new-todo"
                    class="w-full p-3 mb-5 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
                    placeholder="Add a new to-do">
                <button onclick="addTodo()" class="w-full bg-black text-white p-3 rounded-lg hover:bg-[#0f172a]">Add
                    Todo</button>
            </div>

            <ul id="todo-list" class="space-y-2 mt-10">
                <!-- Todo items will be rendered here -->
            </ul>

        </div>


4) create a script.js file and import all the dom


const todoApp = document.getElementById('todo-app');
const loginForm = document.getElementById('login-form');
const todoList = document.getElementById('todo-list');
const newTodoInput = document.getElementById('new-todo');
const usernameInput = document.getElementById('username');
const passwordInput = document.getElementById('password');
const couponInput = document.getElementById('coupon');
const shareableLink = document.getElementById('shareable-link');
const couponButton = document.getElementById('coupon-button');
const todoShareContainer = document.getElementById('todo-share-container');


5) User login status and authentication


function login() {
    const username = usernameInput.value.trim();
    const password = passwordInput.value.trim();

    if (username === "" || password === "") {
        showToast("Both fields are required!", "error");
        return;
    }

    // Simple login logic, store in localStorage
    localStorage.setItem('user', JSON.stringify({ username, password }));
    showToast("Login successful!", "success");
    showTodoApp();
}

6) Check if user is logged in

function checkLoginStatus() {
    const user = localStorage.getItem('user');
    if (user) {
        showTodoApp();
    } else {
        showLoginForm();
    }
}


7) Show login form


function showLoginForm() {
    loginForm.classList.remove('hidden');
    todoApp.classList.add('hidden');
    todoShareContainer.classList.add('hidden');
}

8) Show Todo List App

function showTodoApp() {
    loginForm.classList.add('hidden');
    todoApp.classList.remove('hidden');
    loadTodos();
    todoShareContainer.classList.remove('hidden');
}


9) Logout the user


function logout() {
    localStorage.removeItem('user');
    showToast("You have logged out", "info");
    showLoginForm();
}

10) Add a new todo

function addTodo() {
    const todoText = newTodoInput.value.trim();
    if (todoText === "") {
        showToast("Please enter a to-do item", "error");
        return;
    }

    const todos = JSON.parse(localStorage.getItem('todos') || '[]');
    const newTodo = { id: Date.now(), text: todoText, done: false };
    todos.push(newTodo);
    localStorage.setItem('todos', JSON.stringify(todos));

    newTodoInput.value = '';
    showToast("Todo added successfully!", "success");
    loadTodos();
}


11) Load todos from localStorage


function loadTodos() {
    const todos = JSON.parse(localStorage.getItem('todos') || '[]');
    todoList.innerHTML = ''; // Clear the list

    todos.forEach(todo => {
        const li = document.createElement('li');
        li.className = 'flex justify-between items-center p-3 border border-gray-300 rounded-lg bg-gray-50';

        const todoText = document.createElement('span');
        todoText.className = 'flex-1';
        todoText.textContent = todo.text;

        const actions = document.createElement('div');
        actions.className = 'flex space-x-2';

        const editIcon = document.createElement('button');
        editIcon.className = 'text-yellow-500 hover:text-yellow-600';
        editIcon.innerHTML = '<i class="fas fa-edit"></i>'; // Font Awesome edit icon
        editIcon.onclick = () => editTodo(todo.id);

        const deleteIcon = document.createElement('button');
        deleteIcon.className = 'text-red-500 hover:text-red-600';
        deleteIcon.innerHTML = '<i class="fas fa-trash"></i>'; // Font Awesome delete icon
        deleteIcon.onclick = () => deleteTodo(todo.id);

        actions.appendChild(editIcon);
        actions.appendChild(deleteIcon);

        li.appendChild(todoText);
        li.appendChild(actions);

        todoList.appendChild(li);
    });
}


12) Edit todo item


function editTodo(id) {
    const todos = JSON.parse(localStorage.getItem('todos') || '[]');
    const todo = todos.find(todo => todo.id === id);
    const newTodoText = prompt("Edit todo", todo.text);

    if (newTodoText !== null && newTodoText.trim() !== "") {
        todo.text = newTodoText.trim();
        localStorage.setItem('todos', JSON.stringify(todos));
        showToast("Todo updated successfully!", "success");
        loadTodos();
    }
}


13) Delete todo item


function deleteTodo(id) {
    const todos = JSON.parse(localStorage.getItem('todos') || '[]');
    const updatedTodos = todos.filter(todo => todo.id !== id);
    localStorage.setItem('todos', JSON.stringify(updatedTodos));
    showToast("Todo deleted successfully!", "error");
    loadTodos();
}


14) Show Toastify Notifications


function showToast(message, type) {
    let backgroundColor;
    switch (type) {
        case 'success':
            backgroundColor = "bg-green-500";
            break;
        case 'error':
            backgroundColor = "bg-red-500";
            break;
        case 'info':
            backgroundColor = "bg-blue-500";
            break;
        default:
            backgroundColor = "bg-gray-500";
            break;
    }


    Toastify({
        text: message,
        duration: 3000, // The toast will last for 3 seconds
        gravity: "top", // Position at the top
        position: "right", // Position on the right
        backgroundColor: backgroundColor,
        stopOnFocus: true, // Stop toast if mouse hovers over it
    }).showToast();
}

// Initialize the app
checkLoginStatus();



Comments

Post a Comment

Popular posts from this blog

Lets build a Markdown blog using Next.js, Shadcn, Tailwind, Pieces, Remark & Rehype 🔥

 Building a Markdown blog using **Next.js**, **Shadcn**, **Tailwind CSS**, **Pieces**, **Remark**, and **Rehype** is a fantastic idea! This stack will give you a modern, performant, and highly customizable blog. Let’s break it down step by step. --- ### **1. Set Up Next.js Project** Start by creating a new Next.js project: ```bash npx create-next-app@latest my-markdown-blog cd my-markdown-blog ``` --- ### **2. Install Tailwind CSS** Install Tailwind CSS and configure it: ```bash npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p ``` Update `tailwind.config.js`: ```javascript /** @type {import('tailwindcss').Config} */ module.exports = {   content: [     "./app/**/*.{js,ts,jsx,tsx}",     "./pages/**/*.{js,ts,jsx,tsx}",     "./components/**/*.{js,ts,jsx,tsx}",   ],   theme: {     extend: {},   },   plugins: [], }; ``` Add Tailwind to your `globals.css`: ```css @tailwind base; @tailwind components; @...
Read more

React Portflio Website Basic to Advance

To build a React-based portfolio website with Tailwind CSS, follow these steps to integrate Tailwind and style your components. 1. Set Up Tailwind CSS in Your React Project First, create a new React project and install Tailwind CSS.   npx create-react-app portfolio-website  cd portfolio-website  npm install -D tailwindcss postcss autoprefixer  npx tailwindcss init After running ,    npx tailwindcss init   a    tailwind.config.js  file will be created. Now, configure Tailwind to purge unused styles by editing tailwind.config.js as follows: tailwind.config.js /** @type {import('tailwindcss').Config} */ module . exports = {   content : [     " ./src/**/*.{js,jsx,ts,tsx} " ,   ],   theme : {     extend : {},   },   plugins : [], } 2. Add Tailwind Directives to CSS Create a new file  src / index .css   (or edit the existing one) to include the Tailwind directives: sr...
Read more