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

Advertisements

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.

>Solution :

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 🙂

Leave a Reply Cancel reply