Today we're gonna learn how to do CRUD Operations in JavaScript by making a Todo App. Let's get started π₯ Show
This is the app we're making today:
You can watch this tutorial on YouTube as well if you like π₯Table of Contents
What is CRUD?CRUD stands for -
CRUD is a type of mechanism that allows you to create data, read data, edit it, and delete those data. In our case, we're gonna make a Todo app, so we will have 4 options to create tasks, read tasks, update tasks, or delete tasks. Understanding CRUD PrinciplesBefore starting the tutorial, first, let's understand the CRUD principles. For that, let's create a very very simple Social Media Application. SetupFor this project, we will be following these steps below:
HTMLInside the body tag, create a div with a class name 4. There, we will have 2 sections, 5 and 6 π
On the left side, we will create our posts. On the right side, we can see, update, and delete our posts. Now, create a form inside the .left div tag π
Write this code inside the HTML so that we can display our post on the right side π
Next, we'll insert the font-awesome CDN inside the head tag to use its fonts in our project π
Now, we're gonna make some sample posts with delete and edit icons. Write this code inside the div with the id #posts: π
The result so far looks like this: CSSLet's keep it simple. Write these styles inside your stylesheet: π
Now, write these styles for the post div and option icons: π
The results so far look like this:π JavaScript PartAccording to this flow chart, we will go forward with the project. Don't worry, I'll explain everything along the way. π Form ValidationFirst, let's target all the ID selectors from the HTML in JavaScript. Like this: π
Then, build a submit event listener for the form so that it can prevent the default behaviour of our App. At the same time, we will create a function named 7. π
Now, we're gonna make an if else statement inside our 7 function. This will help us prevent users from submitting blank input fields. π
Here's the result so far: π As you can see, a message will also show up if the user tries to submit the form blank. How to accept data from input fieldsWhatever data we get from the input fields, we will store them in an object. Let's create an object named 9. And, create a function named 0: π 0The main idea is that, using the function, we collect data from the inputs and store them in our object named 9. Now let's finish building our 0 function. 1Also, we need the 0 function to work when the user clicks the submit button. For that, we will fire this function in the else statement of our 7 function. π 2When we input data and submit the form, on the console we can see an object holding our user's input values. Like this: π How to create posts using JavaScript template literalsIn order to post our input data on the right side, we need to create a div element and append it to the posts div. First, let's create a function and write these lines: π 3The backticks are template literals. It will work as a template for us. Here, we need 3 things: a parent div, the input itself, and the options div which carries the edit and delete icons. Let's finish our function π 4In our 5 function, we will fire our 6 function. Like this: π 5The result so far: π So far so good guys, we're almost done with project 1. How to delete a postIn order to delete a post, first of all, let's create a function inside our javascript file: 6Next up, we fire this 7 function inside all of our delete icons using an onClick attribute. You'll write these lines in HTML and on the template literal. π 7The 8 keyword will refer to the element that fired the event. in our case, the 8 refers to the delete button.Look carefully, the parent of the delete button is the span with class name options. The parent of the span is the div. So, we write 0 twice so that we can jump from the delete icon to the div and target it directly to remove it.Let's finish our function. π 8The result so far: π How to edit a postIn order to edit a post, first of all, let's create a function inside our JavaScript file: 9Next up, we fire this 1 function inside all of our edit icons using an onClick attribute. You'll write these lines in HTML and on the template literal. π 0The 8 keyword will refer to the element that fired the event. In our case, the 8 refers to the edit button.Look carefully, the parent of the edit button is the span with class name options. The parent of the span is the div. So, we write 0 twice so that we can jump from the edit icon to the div and target it directly to remove it.Then, whatever data is inside the post, we bring it back on the input field to edit it. Let's finish our function. π 1The result so far: π Take a Break!Congratulations everyone for completing project 1. Now, take a small break! How to Make a To-Do App using CRUD OperationsLet's start making project 2, which is a To-Do App. Project SetupFor this project, we will be following these steps below:
HTMLWrite this starter code inside the HTML file: π 2The div with an id 5 is the button that will open the modal. The span will be displayed on the button. The 6 is the icon from font-awesome.We're going to use bootstrap to make our modal. We'll use the modal to add new tasks. For that, add the bootstrap CDN link inside the head tag. π 3To see the created tasks, we'll use a div with an id tasks, inside the div with the classname app. π 4Insert the font-awesome CDN inside the head tag to use fonts in our project π
Copy and paste the code below which are from the bootstrap modal. It carries a form with 3 input fields and a submit button. If you want then you can search Bootstrap's website by writing 'modal' in the search bar. 6The result so far: π We're done with the HTML file setup. Let's start the CSS. CSSAdd these styles in the body so that we can keep our app at the exact center of the screen. 7Let's style the div with the classname app. π 8The result so far: π Now, let's style the button with the id 5. π 9The result so far: π If you click on the button, the modal pops up like this: π Add the JSIn the JavaScript file, first of all, select all the selectors from the HTML that we need to use. π 0Form ValidationsWe cannot let a user submit blank input fields. So, we need to validate the input fields. π 1Also, add this line inside the CSS: 2The result so far: π As you can see, the validation is working. The JavaScript code doesn't let the user submit blank input fields, otherwise you're gonna see an error message. How to collect data and use local storageWhatever inputs the user writes, we need to collect them and store them in local storage. First, we collect the data from the input fields, using the function named 0 and an array named 9. Then we push them inside the local storage like this: π 3Also note that this will never work unless you invoke the function 0 inside the else statement of the form validation. Follow along here: π 4You may have noticed that the modal doesn't close automatically. To solve this, write this small function inside the else statement of the form validation: π 5If you open Chrome dev tools, go to the application and open the local storage. You can see this result: π How to create new tasksIn order to create a new task, we need to create a function, use template literals to create the HTML elements, and use a map to push the data collected from the user inside the template. Follow along here: π 6Also note that the function will never run unless you invoke it inside the 0 function, like this: π 7Once we're done collecting and accepting data from the user, we need to clear the input fields. For that we create a function called 2. Follow along: π 8The result so far: π As you can see, there's no styles with the card. Let's add some styles: π 9Style the edit and delete buttons with this code: π 0The result so far: π Function to delete a taskLook here carefully, I added 3 lines of code inside the function.
1Now create a dummy task and try to delete it. The result so far looks like this: π Function to edit tasksLook here carefully, I added 5 lines of code inside the function.
2Now, try to create a dummy task and edit it. The result so far: π How to get data from local storageIf you refresh the page, you'll note that all of your data is gone. In order to solve that issue, we run a IIFE (Immediately invoked function expression) to retrieve the data from local storage. Follow along: π 3Now the data will show up even if you refresh the page. ConclusionCongratulations for successfully completing this tutorial. You've learned how to create a todo list application using CRUD operations. Now, you can create your own CRUD application using this tutorial. Here's your medal for reading until the end. β€οΈ Suggestions & Criticisms Are Highly Appreciated β€οΈ
ADVERTISEMENT ADVERTISEMENT ADVERTISEMENT ADVERTISEMENT ADVERTISEMENT ADVERTISEMENT ADVERTISEMENT ADVERTISEMENT ADVERTISEMENT ADVERTISEMENT ADVERTISEMENT ADVERTISEMENT ADVERTISEMENT ADVERTISEMENT ADVERTISEMENT ADVERTISEMENT ADVERTISEMENT Joy is an experienced Senior Frontend Developer and a mentor based in Dhaka, Bangladesh. He is highly enthusiastic about javascript & He is on a mission to create the best web dev tutorials online If you read this far, tweet to the author to show them you care. Tweet a thanks Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started How to make a todo app with JavaScript?See the live demo.. Prerequisites. This tutorial assumes that you have a basic knowledge of JavaScript. ... . Get started. The todo list app we'll build in this tutorial will be pretty basic. ... . Add a todo. ... . Render the todo items. ... . Mark a task as completed. ... . Delete todo items. ... . Add an empty state prompt. ... . A subtle bug.. How do you program a To Do list?15 secrets for a better to-do list. Capture everything. ... . Lists, lists, and more lists. ... . Organize your to-do list by workflow, priority, or due date. ... . Make it actionable. ... . Verbs first, details later. ... . Prioritize your to-dos. ... . Always include a deadline. ... . Break big work into smaller tasks.. How do I make an editable list in HTML?To edit the content in HTML, we will use contenteditable attribute. The contenteditable is used to specify whether the element's content is editable by the user or not. This attribute has two values. true: If the value of the contenteditable attribute is set to true then the element is editable.
How to create edit button in JavaScript?const paragraph = document. getElementById("edit");. const edit_button = document. getElementById("edit-button");. const end_button = document. getElementById("end-editing");. edit_button. addEventListener("click", function() {. paragraph. contentEditable = true;. paragraph. style. backgroundColor = "#dddbdb";. |