What steps should be taken to showcase user input in a newly created task?

I am struggling to display the user input list, but it seems like I might be missing something here:

const createTask = () => {
    const id = createId()
    const task = elements.input.value;
    const date = elements.cal.value;

    if(!task && !date) return alert("Please fill in task and select date");
    if(!task) return alert("Please fill in task");
    if(!date) return alert("Please select date");

    const tasks = document.createElement("div");

    tasks.innerHTML = `
    <div class="task" date-id = "${id}">
        <div class="content">
            <input type ="checkbox" class="tick">
            <input class = text id = "text" readonly>
            <label class = "due-date" for ="text">${date}</label>
        </div>
		
		<div class = "action">
            <button class="edit" data-id="${id}">Edit</button>
            <button class="delete" data-id="${id}">Delete</button>
        </div>
    </div>
    `

    elements.list.appendChild(tasks)
    return tasks
}

I have added an event listener that listens for clicks on submit, edit, and delete buttons.

/******************************************************
 * Event that listens for the edit and delete button  *
 ******************************************************/

elements.list.addEventListener('click',event => {
    const {target} = event;

    const {id} = target.dataset
    const task = id ? document.querySelector('[data-id="${id}"]'): null
    const displayText =  document.querySelector()

    const type = {
        edit: event.target.classList.contains('edit'),
        delete: event.target.classList.contains('delete'),
    }

    const isFromSaveLabel = target.innerText.toLowerCase() === 'save'

    if(tasks && type.edit && isFromSaveLabel){
        const text = tasks.querySelector('text')
        target.innerText = 'Edit'
        text.addAttribute('readonly')
        return
    }

    if(tasks && type.edit){
        const text = task.querySelector('text')
        target.innerText = 'Save'
        text.removeAttribute('readonly')
        text.focus()
        return
    }

    if(tasks && type.delete){
        return
    }
});

const submitHandler = (event) =>{
    event.preventDefault();
    createTask();
}

elements.form.addEventListener("submit", submitHandler);

The output is currently not displaying the user input text or the delete and edit buttons. Take a look at the image below:

https://i.sstatic.net/XV0X0.png

Answer №1

Revise this sentence:

 <label class = "due-date" for ="text">${date}</label>
to the following:

 <label class = "due-date" for ="text">${task} - ${date}</label>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Svelte language switcher experiencing technical difficulties

Currently delving into Svelte 3, I embarked on a project intended to be shared on GitHub in English. However, I realized that some of my friends do not speak English. To accommodate different language preferences, I decided to create a language switcher. H ...

Issues arise when attempting to transmit JSON data from JavaScript to the server using the POST method

I'm having trouble viewing the JSON data I sent to the server using XMLHttpRequest. It seems like the server isn't receiving it because when I run the JavaScript, the alert window pops up but doesn't display anything. Does anyone have a solu ...

Is it possible to create an HTML link that prevents users from navigating back to the previous page or displaying the previous link in their browsing history?

I've been tasked with creating a button on a client's website that links to another page, like Google, for the purpose of assisting someone seeking help in case of an emergency. The challenge is finding a way to prevent the user from easily retur ...

Is there a way to incorporate a base64 encoded image from a text file into an HTML image?

I have several images stored as base64 blobs in a remote location. Let's focus on one specific image: llorkcir.txt data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxISEhASEBAQDxAQDw8QEA8PEA8PDw0PFRIWFhURFRUYHSggGBolGxUVITEhJSkrLi4uFx8zODMt ...

Is there a Node Package available for storing data indefinitely?

When I execute my code, I need to store a variable permanently. Is there a node package or another method to achieve this? I want to ensure that I can access the stored data even after restarting my server. For instance, in my file named "runMe.js": var ...

Adding the number of occurrences to duplicates in a string array using JavaScript

Looking to append a count to duplicate entries within a string array. The array in question contains duplicates, as shown below. var myarray = ["John", "John", "John", "Doe", "Doe", "Smith", "John", "Doe", "Joe"]; The desired output shoul ...

What is the best way to save numerous records using the saveRecord function in nlapi methods?

After customizing the default promotion form, I implemented a feature where clicking on a specific promotion triggers dynamic elements to be displayed using jQuery. Since the fields or records for this requirement haven't been created yet, multiple re ...

Discovering the destination link of a website while utilizing GM_xmlhttpRequest

Picture yourself browsing a webpage called "www.yourWebsite.com" and utilizing userscripts in Tampermonkey to extract data from another site using the GM_xmlhttpRequest function. As you make requests with the GM_xmlhttpRequest function to visit "exampleWe ...

Sending data from Ruby to JavaScript

I'm currently implementing an SMS validation feature on a Sinatra website. Here is the code snippet that I am using: post '/coop/sendcode' do @code = Random.rand(1000..9999).to_s phone = params[:phone].to_s HTTParty.get('http:// ...

The output of new Date() varies between app.js and ejs

app.get("/test",function(req,res){ var d = new Date(); res.send(d); }); When I access mydomain/test, it displays the output "2019-03-19T04:50:47.710Z" which is in UTC. app.get("/testejs",function(req,res){ res.render("testejs");}); Below is the content ...

Retrieving data from a dynamically-created Ajax form

I am encountering an issue that I need help with. Using AJAX, I have generated a table dynamically which includes a form with checkboxes for item checking. Here is a snippet of the code: <form name="formdocs"> Followed by: <input type="checkbo ...

Upgrade your development stack from angular 2 with webpack 1 to angular 6 with webpack 4

Recently, I have made the transition from Angular 2 and Webpack 1 to Angular 6 and Webpack 4. However, I am facing challenges finding the best dependencies for this new setup. Does anyone have any suggestions for the best dependencies to use with Angular ...

An issue has been detected in the constants.json file located in the constants-browserify

I organized my folders into client-side and server-side categories, but I failed to work from a parent folder perspective. Now, as I attempt to deploy to Heroku, I realize that I need one main folder for the deployment process. To address this issue, I dec ...

Creating a textbox with pre-filled content

Seeking assistance with a Java compiler app I am developing through phonegap. Need help setting the default Java Class name in a textarea without it disappearing. This is what I have: <div> <label for="source">Source Code:</label> ...

What is the best way to track and document the specific Context Provider being utilized while invoking useContext?

After creating a custom component that displays AuthContext.Provider with specific values, I encountered an issue. Even though it functions correctly, when I utilize useContext within a child of the AuthProvider component, my code editor (VS Code) is unabl ...

angular 4 observable is yielding an [object Object]

My frontend is built using Angular 4, while my backend consists of Laravel 5.5 serving as the restful API. When interacting with the backend, everything works smoothly as I am able to send curl requests and receive back the expected JSON response with 2 ke ...

The Next.js build version encounters an issue with 'auth' property being undefined and causes a failure

Our team has been happily working on a Next.js based website for the past few months. Everything was running smoothly without any major issues until yesterday when we encountered an error on the production version while using router.push: Cannot read prope ...

undefined event typescript this reactjs

I have come across the following TypeScript-written component. The type definitions are from definitelytyped.org. I have bound the onWheel event to a function, but every time it is triggered, this becomes undefined. So, how can I access the referenced el ...

Incorporating the fadeout technique in conjunction with the append() function

Here is some code that I am working with: $('body').on('click' , function(){ $('body').append('<div class="ajax-success"><p>Its Done !!!</p></div>').fadeOut(2000); }); The goal was to a ...

How can we choose the best set of samples to accurately represent a curve with a fixed number of samples?

Background Exploring my passion project involves analyzing an RC aircraft control input device. In the realm of this hobby, there is a common feature known as "stick expo" where control sticks vary in sensitivity based on their position. As I delve into t ...