We do add the same attribute and value for the trash icon (delBtn). liElement.innerText = object_item.todoText tAttribute(“data-id”, object_item.id) The reason of this move will be clear very soon. Then we set a new attribute to and assign the id property value as the value of it. const liElement = document.createElement(“li”) const delBtn = document.createElement(“i”) First we create two new variables for creating elements for displaying the incoming data. Now we create a forEach loop for every object_item in the object array, and inside we do several work. If we do not clear at the beginning, we display items repetitive each time user clicks add button. Because the algorithm here is that the method creates the content every time from start to end. This line below is for cleaning the content of the element at the beginning. And since we got the value of the input we can clear the input area so that the user does not need to do it.ĭisplay() is perhaps the hardest part, but still no big deal. Now it’s time to display what we have got. The reason we used unshift() instead of push() is that we want the most recent entries show up on top. After creating the first object we add it into the object array. We will turn it into true when the user clicks on the element. todoText is the same as the string type user input, and isDone is a boolean which is false by default. As we push new objects in, the id increases by one every time. We assign the length of the object array as id, which is a simple solution. To store the data we prefer to use an object consisting of three properties: id, todoText and isDone. If the input is an empty string give an alert, else take the input. A very simple approach is to use if statement. But we should check if the user has clicked the add button without entering anything. Therefore we set user-select property to none, and add extra codes so that this takes effect in several other browsers.įirst we get the value of the user input in string format and assign it to todoInput variable. Preferable we do not want the elements to be selectable by the user. But in order for them to take position in respect to the parent element, we have to give the parent element position relative.Īgain transition value is for setting the duration of style change from normal to hover.
One way to accomplish this is by giving position absolute to the child elements. This is because we are going to add two items/icons as a child or as a before pseudo element, and we are going to position the icons in relation to the elements’ position. First we set the cursor to pointer to show the user that this is a clickable element. These elements are simply the elements containing the ToDo texts and more.Īll the elements should appear the same way, so there is no need to label them with class or id. Now we will set design for elements which do not exist in the beginning, but will appear as we get user inserts. Up to here we styled the elements which are visible. We import the “Acme” font style from Google Fonts.
#Todolist app javascript free#
The choices here are my personal preferences, so feel free to change anything you see here.
Part-2 CSSįirst I should remind you that all the content in CSS part is up to the person’s understanding of design. įinally, at the end of the part we link the Javascript file in a tag. This is where we will display the input items in elements when we get inputs from the user.Įach elements under will look like this: Clean the gardenĪnd the element below is the one for displaying trash can, which will be placed as a child of each element. In the element we have a title, and below we have a text input element for the user to enter the ToDo items in, and a button that we will use for getting the input values. Then it comes to, we have 2 sections: and. In this specific example we’ll only pull the trash can icon), and the title respectively. To explain briefly in the section we add meta tags, the link tag for connecting the document to style.css file, the script (that helps us to pull an icon from.
0 kommentar(er)
