This is a ToDoList project from TheOdinProject. I have been stuck on this part of code for days, as my inputs will console.log empty strings in the module createTodos. I can’t seem to figure out why the first input, name, would work, but the other 3 would not. Does anyone know why?
Module createProject.js
import { createTodos } from "./createTodos";
function appendInputsAndButton(currentProject) {
let inputContainer = document.createElement("div");
inputContainer.className = "input-container";
inputContainer.innerHTML = `<input class="name"></input> <input class="description"></input> <input class="dueDate"></input> <input class="priority"></input>
<button class="submit-todos">Submit</button> <button class="close">X</button> `;
currentProject.appendChild(inputContainer);
inputContainer.querySelector('.submit-todos').addEventListener('click', (event)=>{
event.stopPropagation();
createTodos();
})
inputContainer.querySelector('.close').addEventListener('click',()=>{
currentProject.removeChild(inputContainer);
} )
}
function makeProject(name) {
return {
name: name,
todos: [],
};
}
export let projects = [];
export function createProject() {
projects.push(
makeProject(document.querySelector("#projectName").value.trim())
);
console.log(projects);
let archives = document.querySelector(".container");
archives.innerHTML = "";
for (let i = 0; i < projects.length; i++) {
let project = projects[i];
let newProject = document.createElement("div");
newProject.className = "project";
newProject.textContent = project.name;
newProject.addEventListener("click", (e) => {
let currentProject = e.target;
appendInputsAndButton(currentProject);
});
archives.appendChild(newProject);
}
}
Module 2 createTodos.js
import { projects } from "./createProject"
function makeTodos (name, description, dueDate, priority){
return {
name: name,
description: description,
dueDate: dueDate,
priority: priority,
}
}
export function createTodos(){
console.log("createTodos function executed");
const name = document.querySelector('.name').value;
const description = document.querySelector('.description').value;
const dueDate = document.querySelector('.dueDate').value;
const priority = document.querySelector('.priority').value;
console.log("Name:", name);
console.log("Description:", description);
console.log("Due Date:", dueDate);
console.log("Priority:", priority);
// projects[0] is just to test
projects[0].todos.push(makeTodos);
console.log("Updated Todos:", projects[0].todos);
}
Module 3 index.js
import './styles.css';
import {createProject} from './createProject.js'
const submitButton = document.querySelector('#submit-btn');
submitButton.addEventListener('click', ()=> {
createProject();
})