Question 45195 in Html Question posted in
Some basic documentation can be found here.

From login page it didnt redirect me to the TO-DO-List – Html

I have here those codes. So basicly this is website with login to page and To do list but when I enter the username and password it didnt redirect me to the to do list website. The password and username in the JS code is password and username for now and it didnt work.Any ideas?

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>To-Do List</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>To-Do List</h1>
  <div id="login-container">
    <h2>Login</h2>
    <input type="text" id="username" placeholder="Username">
    <input type="password" id="password" placeholder="Password">
    <button id="login-btn">Login</button>
  </div>
  <div id="todo-container" style="display: none;">
    <div id="input-container">
      <input type="text" id="new-task" placeholder="Enter a new task">
      <button id="add-btn">Add</button>
    </div>
    <ul id="task-list">
    </ul>
  </div>
  <script src="script.js"></script>
</body>
</html>

CSS:

body {
  font-family: Arial, sans-serif;
  background-color: #f2f2f2;
}

h1 {
  text-align: center;
}

#login-container {
  width: 40%;
  margin: 50px auto;
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

#todo-container {
  width: 60%;
  margin: 0 auto;
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

#input-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

#new-task {
  flex-grow: 1;
  padding: 10px;
  font-size: 16px;
  border-radius: 5px;
  border: none;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

#add-btn {
  padding: 10px 20px;
  font-size: 16px;
  color: #fff;
  background-color: #007bff;
  border: none;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

#task-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.task {
  margin-bottom: 10px;
  padding: 10px;
  font-size: 16px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.delete-btn {
  margin-left: 10px;
  padding: 5px 10px;
  font-size: 14px;
  color: #fff;
  background-color: #dc3545;
  border: none;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

JS

const loginForm = document.getElementById("login-container");
const todoContainer = document.getElementById("todo-container");
const usernameInput = document.getElementById("username");
const passwordInput = document.getElementById("password");
const loginBtn = document.getElementById("login-btn");
const addBtn = document.getElementById("add-btn");
const newTaskInput = document.getElementById("new-task");
const taskList = document.getElementById("task-list");

let tasks = [];

// Check if the user is logged in
if (isLoggedIn()) {
  showTodo();
} else {
  showLogin();
}

// Event listeners
loginBtn.addEventListener("click", handleLogin);
addBtn.addEventListener("click", handleAddTask);
taskList.addEventListener("click", handleDeleteTask);

// Functions
function handleLogin(event) {
  event.preventDefault();
  const username = usernameInput.value;
  const password = passwordInput.value;
  if (username === "Username" && password === "password") {
    showTodo();
    clearLoginInputs();
  } else {
    alert("Incorrect username or password. Please try again.");
  }
}

function handleAddTask(event) {
  event.preventDefault();
  const taskName = newTaskInput.value;
  if (taskName.trim() === "") {
    alert("Please enter a task name.");
    return;
  }
  const newTask = {
    name: taskName,
    completed: false,
  };
  tasks.push(newTask);
  renderTasks();
  clearNewTaskInput();
}

function handleDeleteTask(event) {
  if (event.target.classList.contains("delete-btn")) {
    const taskIndex = event.target.dataset.taskIndex;
    tasks.splice(taskIndex, 1);
    renderTasks();
  }
}

function renderTasks() {
  taskList.innerHTML = "";
  tasks.forEach((task, index) => {
    const taskElement = document.createElement("li");
    taskElement.classList.add("task");
    if (task.completed) {
      taskElement.classList.add("completed");
    }
    const taskNameElement = document.createElement("span");
    taskNameElement.textContent = task.name;
    const deleteBtnElement = document.createElement("button");
    deleteBtnElement.classList.add("delete-btn");
    deleteBtnElement.textContent = "Delete";
    deleteBtnElement.setAttribute("data-task-index", index);
    taskElement.appendChild(taskNameElement);
    taskElement.appendChild(deleteBtnElement);
    taskList.appendChild(taskElement);
  });
}

function clearNewTaskInput() {
  newTaskInput.value = "";
}

function clearLoginInputs() {
  usernameInput.value = "";
  passwordInput.value = "";
}

function showLogin() {
  loginForm.style.display = "block";
  todoContainer.style.display = "none";
}

function showTodo() {
  loginForm.style.display = "none";
  todoContainer.style.display = "block";
}

function isLoggedIn() {
  return localStorage.getItem("isLoggedIn") === "true";
}

I tryed a lot of things from changing little bit a code to switch to another browser.

Tags:

2

Answers


  1. 0

    Use console.log to find where exactly the error is instead of posting the entire code. The css was definitely not needed.

    Try this:

    if (username === "Username" && password === "password") {
    console.log('Username and password matched');
    showTodo();
    clearLoginInputs();
}

    If the statement is logged that would mean showTodo();clearLoginInputs(); are being executed. In this specific case, if the login inputs are being cleared, it means that the block is being called.

    Now the question will be why isn’t element.style.diplsay="block" not working.

    Check out this link. I think it’ll help
    getElementById().style.display does not work

    Cheers 🙂

    Login or Signup to reply.
  2. 0

    I tested the same code locally and it works fine. You should check that the script file is included correctly. As a demonstration, instead of including an external script, copy and paste your script in the .html file between script tags and you will see that it works as expected.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search