From the course: JavaScript Code Challenges: Creating Web Apps
Unlock this course with a free trial
Join today to access over 25,300 courses taught by industry experts.
Static task creation - JavaScript Tutorial
From the course: JavaScript Code Challenges: Creating Web Apps
Static task creation
- [Instructor] Let's add the functionality to add tasks to our to-do column. So what we need, we need to get the task from task inputs and let's get all the columns from our page with the selectors. So let's start with that on top. And you can see, I'm using the querySelectorAll to get all the elements that have the class column. Then I need to have a few functions. And the first one I need is my create task element. So let's create a function for that, createTaskElement. What will I need? Well, I'm going to need a text and I'm going to have an ID that by default I'll set to the current time. And there we go, toString. And then, in here, I need to do a few things. Let's go ahead and create my task with documents.createElement. And I'm going to make my task a little div. There we go. I already have the CSS for this, so it will look good. And I'm going to set my class name to task 'cause that's needed for the CSS. And then let's go ahead and set the text content to the text that was…
Contents
-
-
-
-
-
(Locked)
Introduction: Kanban board54s
-
(Locked)
Planning the features1m 6s
-
(Locked)
Creating the UI2m 7s
-
(Locked)
Overview of the necessary JavaScript concepts4m 23s
-
(Locked)
Static task creation4m 27s
-
Drag-and-drop logic4m 27s
-
(Locked)
Saving the state3m 11s
-
(Locked)
Final touches2m 47s
-
(Locked)
Challenge: Deleting tasks42s
-
(Locked)
Solution: Deleting tasks1m 14s
-
(Locked)
-
-
-