Attempting to modify a button within a JavaScript task management application

Trying my hand at creating a todo list using vanilla Javascript, I aim to include the following features:

  1. Add a new todo item to the list
  2. Delete a todo item by clicking the trash icon in the list element (done)
  3. Edit a specific todo item by clicking the edit icon (currently facing difficulties with this)
  4. Mark completed todo items with a strike-through by clicking the checkbox

I am working on adding the edit function but could use some assistance:

/*When user enters text in the input field and clicks submit, an item should be added to the list
1. User enters text and clicks submit
2. Upon clicking submit, an item is added to the list
3. When a user clicks the edit icon, the respective list item should become editable
4. Selected text should be editable
*/


const items = document.querySelectorAll('#list li');
const todoTextInput = document.getElementById('todoTextInput'); 
const submitBtn = document.getElementById('submit_todo');

const tabs = [];
// const liIndex;

//Add todo to the list
submitBtn.addEventListener('click', () => {
    const todoText = document.getElementById('todoTextInput').value;
    const todoList = document.getElementById('list');
    const todoItem = document.createElement('li');
    todoItem.classList.add('list-group-item', 'd-flex', 'justify-content-between');
    todoItem.innerHTML = `
                            <span>${todoText}</span>
                            <span>
                                <a class="editBtn"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></a>
                                <a class="deleteBtn"><i class="fa fa-trash" aria-hidden="true"></i></a>
                            </span>
                                    `;

    todoList.appendChild(todoItem);
    tabs.push(todoText);

    //Clearing input box
    todoTextInput.value = '';
    
    const editBtn = document.getElementsByClassName('editBtn');
    
    // Selecting item by clicking edit button
    for (let i = 0; i < editBtn.length; i++) {
        editBtn[i].addEventListener('click', editItem);
    }
        
    const deleteBtn = document.getElementsByClassName('deleteBtn');
    
    //Selecting item by clicking delete button
    for (let i = 0; i < deleteBtn.length; i++) {
        deleteBtn[i].addEventListener('click', deleteItem);
    };

});


//Deleting selected item
function deleteItem() {
    console.log("Deleted")
    this.parentNode.parentNode.remove();
}


//Editing selected item
function editItem() {
    const todoTextVal = this.parentNode.parentNode.firstElementChild.innerHTML;
    const liIndex = tabs.indexOf(todoTextVal);
    todoTextInput.value = todoTextVal;
    console.log(todoTextVal + "Index -"+ liIndex);
    
    tabs[liIndex].innerHTML = todoTextInput.value;

    for (let i = 0; i < items.length; i++) {
        tabs.push(items[i].innerHTML);
        
    };
}
<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"
        integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg=="
        crossorigin="anonymous" />
    <link rel="stylesheet" href="./style.css">
    <script src="./todo.js" defer></script>

    <title>Hello, world!</title>
</head>

<body>
    <div class="container">

        <div class="form-group form-inline">
            <input type="text" name="todoTextInput" id="todoTextInput" class="form-control">
            <button type="submit" class="btn btn-outline-success m-2" id="submit_todo">Add Todo</button>
        </div>
        <ul class="list-group" id="list">
            <!-- <li class="list-group-item d-flex justify-content-between">
                <span>Apple</span>
                <span>
                    <a class="editBtn"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></a>
                    <a class="deleteBtn"><i class="fa fa-trash" aria-hidden="true"></i></a>
                </span>
            </li>
            <li class="list-group-item d-flex justify-content-between">
                <span>Mango</span>
                <span>
                    <a class="editBtn"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></a>
                    <a class="deleteBtn"><i class="fa fa-trash" aria-hidden="true"></i></a>
                </span>
            </li> -->
        </ul>
    </div>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
</body>

</html>

javascriptarrays

Answer №1

I suggest utilizing Google Firebase Firestore for your website's database needs. By utilizing vanilla JavaScript, you can easily integrate Firestore to create a small database that allows you to read and write data efficiently.

For more information on Google Firestore, visit their official documentation here.

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

Issue with Ag-Grid's getRowClass not locating the appropriate CSS styling

I am facing a simple challenge at the moment. My goal is to dynamically change the background color of my rows, with the intention of incorporating this feature when expanding or contracting groups. Currently, I am attempting to utilize gridOptions.getRow ...

javascriptcssvue.jsag-grid

Using Mongojs to retrieve data from two collections and combining the outcome

As a beginner in mongodb, I am seeking assistance with the problem outlined below. I have two collections named "users" and "bags". The "users" collection consists of fields {username, firstname, lastname} while the "bag" collection includes fields {usern ...

javascriptnode.jsmongodbmongojs

What is the process for loading polymer?

I am new to polymer and currently trying to understand how it is loaded. I came across this useful resource that gives a brief overview: https://www.polymer-project.org/2.0/start/quick-tour In their basic example, they start by loading a polyfill: <s ...

javascripthtmlpolymer

The $dbServiceProvider in AngularJS, Sqlite, Electron seems to be unrecognized

I am currently working on an electron app that is supposed to display and retrieve items from a SQL database I created. However, I keep encountering an unknown provider error. Despite trying various solutions found online, the issue persists and I am unab ...

javascriptangularjssqliteelectron

How can you determine the locations where the "return" key has been pressed in a text document?

I am attempting to modify a text that contains pressed return (Enter) keys. For example: "Hey man, how are you? Here there is one enter above. And pressing 2 enters below. Ok?" The modified text should appear as: "Hey man, how are you?XHer ...

javascriptreactjsreact-native

How to combine and return an observable and a value simultaneously in an Angular service using RxJS

Within my Angular application, I am utilizing the ngx-bootstrap modal component. This modal is being used to provide observable callbacks when the modal is shown and hidden (onShown / onHidden) after a button click event. The code snippet for this functi ...

javascriptangulartypescriptrxjsngx-bootstrap

Categorize an array by shared values

Here is an example of my array structure: myArray = [ {SKU: "Hoo12", Name: "ACyrlic watch",OrderNo:"26423764233456"}, {SKU: "S0002", Name: "Princes Geometry",OrderNo:"124963805662313"}, {SKU ...

javascriptarraysgroup-by

A guide on tallying blog categories using Django and showcasing them on a template

I'm currently learning how to build a blog using Django, and I have functions for post_list, category_detail, and post detail. However, I'm facing an issue with the post_list function that renders a blog.html page. I want to display the blog cate ...

javascriptpythonhtmldjango

Attempting to categorize JSON object elements into separate arrays dynamically depending on their values

Here's the JSON data I'm currently working with: ?$where=camis%20=%2230112340%22 I plan to dynamically generate queries using different datasets, so the information will vary. My main objective is to categorize elements within this array into ...

javascriptarraysjsonsortingtypescript

Uncertain about the distinction between reducers and dispatchers when it comes to handling actions

I'm feeling a bit confused regarding reducers and dispatchers. While both receive actions as parameters, it doesn't necessarily mean that the actions I use in my dispatchers are the same as those used in my reducers, correct? For example, if I h ...

javascripttypescriptdesign-patternsredux

Using Rails 4 UJS to effectively merge multiple ajax events into one cohesive function

Exploring the ins and outs of rails as a newcomer, I find myself pondering the realm of utilizing rails UJS events versus resorting to jQuery for managing event states within an ajax request. Typically, my approach involves triggering an action based on e ...

javascriptjqueryruby-on-railsajaxdom-events

Can Angular JS handle Object Logging?

Exploring the possibility of using Angular JS with MVC 5.0, I am looking for a way to log the complete class Object into a database whenever an Insert/Edit/Delete operation is performed. Is there a library available in Angular JS that can help serialize ...

javascriptasp.net-mvcangularjs

Troubleshooting: Inability of Angular2 Component to access class property within template

Here is the code snippet that I am currently working with: post.component.ts: import { Component } from '@angular/core'; import { Router } from '@angular/router'; import { JobsService } from '../jobs.service'; @Component({ ...

javascriptangulartypescript

Guide to effectively pass router properties in a Modal/Dialog component within a React application for seamless navigation

I have encountered an issue with my React-Project. I integrated a login component in a modal/dialog form, and the button to access it is located within the Header component of the project. However, I did not set a router path for the login module, which is ...

javascriptreactjsreact-routerreact-router-dom

Can Jest Vue handle loading dynamic imports for snapshot testing?

Having an issue with unit testing a Vue component that dynamically loads its child component. Jest and Vue utils don't seem to render it. Any suggestions on how to tackle this? Here's the component code: <template> <component :is=&quo ...

javascriptvue.jsunit-testingjestjs

Populate a table dynamically using JavaScript based on existing cell values

I am currently working on filling an HTML table based on the contents of its left cells. The code below creates a table that is populated with variables: <table id="myTable" ></table> <script> var rightcell = [{name : "Name ...

javascriptjqueryarrayssorting

Querying data from a label using jQuery

I am facing a challenge with reading label attributes in jQuery. I have multiple labels, each with the same class. These labels contain important information that I need to access. However, despite being able to select the object using $, I am struggling ...

javascriptjquery

Automatically close the menu in ReactJS when transitioning to a new page

I have created a nested menu, but I am facing an issue with it. Here is the structure: Parent_Menu Parent1 > Child_Menu1 > Child_Menu2 Parent2 Currently, when I click on, for example, Child_Menu1, I am redirected to the correct page ...

javascriptreactjsreactstrap

How can one effectively tackle A, B, and C simultaneously, considering that A relies on B and B relies on C?

I am contemplating the most effective workflow for working on projects A, B, and C simultaneously, where project A relies on project B, which in turn relies on project C. Currently, I have all three projects stored in one repository, which helped speed up ...

javascriptgitworkflownpm

Is it possible to generate an array of objects, where each object includes an observable retrieved through forkJoin?

let food = { id: 1, isTasty: false } Imagine I have a custom function that takes the ID of a food item and returns an observable which resolves to a boolean indicating whether the food is tasty or not. I wish to loop through an array of food items an ...

javascriptangularrxjsfork-joinrxjs-observables