Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pettiboy/javascript-todo-app
A TODO app using JavaScript for logic and Bootstrap for styling.
https://github.com/pettiboy/javascript-todo-app
beginner-project bootstrap javascript javascript-project localstorage todo-app todolist
Last synced: about 1 month ago
JSON representation
A TODO app using JavaScript for logic and Bootstrap for styling.
- Host: GitHub
- URL: https://github.com/pettiboy/javascript-todo-app
- Owner: pettiboy
- License: mit
- Created: 2022-07-16T09:35:12.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-07-22T17:02:09.000Z (over 2 years ago)
- Last Synced: 2024-11-09T18:39:09.358Z (3 months ago)
- Topics: beginner-project, bootstrap, javascript, javascript-project, localstorage, todo-app, todolist
- Language: JavaScript
- Homepage:
- Size: 61.5 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# TODO app using vanilla JavaScript
Building a TODO app is a very basic but thorough way to understand concepts of a software tool.
We will build a TODO app using [`JavaScript`](https://developer.mozilla.org/en-US/docs/Web/JavaScript) for logic and [`Bootstrap`](https://getbootstrap.com/) for styling in this tutorial.
Try out the app [`here`](https://pettiboy.github.io/javascript-todo-app/).
## We will follow the following steps:
### Building the `User Interface (UI)` with `Bootstrap`
1. Start with [`Bootstraps Starter Template`](https://getbootstrap.com/docs/5.2/getting-started/introduction/#quick-start)
1. Create a `form` for user to enter the TODO item.
1. Create an unordered list to `hold all todos`.
1. Create `list element` with checkbox for a todo item.
1. Make UI `responsive` using Bootstrap's grid system
### Handling `funtionality` with `JavaScript`
1. Define structure of our data - way to represent all TODOs in a [`JSON (JavaScript Object Notation)`](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON) format.
1. `renderTodos` function to display TODOs in the UI.
1. `renderTodo` helper function to render an individual TODO.
1. `addTodo` function to add a TODO
1. Setup an Event Listener for `submitting` the todo from the UI.
1. `completeTodo` function to mark a TODO as completed
## Building UI
##### Copy bootstrap's [starter template](https://getbootstrap.com/docs/5.0/getting-started/introduction/#starter-template) and add custom script tags
```html
TODO App
```
##### Create a [form](https://getbootstrap.com/docs/5.0/forms/form-control/#sizing) for user to enter the TODO item
- Give unique `id` to `text field` and `form` to refer them in our JavaScript later.
```html
```
##### Create an unordered list to hold all todos
```html
```
##### Create list element with [checkbox](https://getbootstrap.com/docs/5.0/forms/checks-radios/#checks) for a todo item
```html
TODO Text
```
##### Make UI responsive using Bootstrap's [grid system](https://getbootstrap.com/docs/5.0/layout/grid/#row-columns)
```html
```
## Handle functionality using JavaScript
##### Lets start by creating an [array of objects](https://www.freecodecamp.org/news/javascript-array-of-objects-tutorial-how-to-create-update-and-loop-through-objects-using-js-array-methods/) for our `todos`.
```js
var todos = [
{
id: 0,
text: "subscribe to KJSCE codecell",
complete: false,
},
{
id: 1,
text: "Star https://github.com/pettiboy/react-ui-scrollspy on GitHub",
complete: false,
},
];
```
##### Select all required elements from the `DOM`
```js
const list = document.getElementById("todo-list");
const form = document.getElementById("todo-form");
const todoText = document.getElementById("todo-text");
```
##### Lets try to render these `todos` to the DOM from our `JS`
```js
/*
loops over each todo in todos and if the task is not completed yet
calls the renderTodo function to render it to the DOM
*/
function renderTodos() {
emptyTodos();
todos.forEach((todo) => {
if (todo.complete === false) {
renderTodo(todo);
}
});
}
/*
takes a todo object as input and appends the innerHTML
of the unordered list with that todo
*/
function renderTodo(todo) {
list.innerHTML += `
${todo.text}
`;
}
```
##### Lets write a function that given a `todo` adds it to our array of objects called `todos`.
```js
function addTodo(todo) {
todos.push({
id: todo.id,
text: todo.text,
complete: todo.complete,
});
// render that todo to the DOM
renderTodo(todo);
}
```
##### Setup an `Event Listener` for submitting the todo
```js
// listen for form to be submitted
form.addEventListener("submit", (e) => {
e.preventDefault();
addTodo({
id: todos.length + 1,
text: todoText.value,
complete: false,
});
// reset value of input field
todoText.value = "";
});
```
##### Lets write a function to mark a `todo` as `completed`
```js
function completeTodo(removeId) {
// Find index of specific object using findIndex method.
todoIndex = todos.findIndex((todo) => todo.id == removeId);
// Update object's name property.
todos[todoIndex].complete = true;
// Just to wait for a sec before re rendering
setTimeout(function () {
saveTodosInMemory();
renderTodos();
}, 1000);
}
```
##### Store the todos in `localStorage`
```js
// on page load - the following functions will run
todos = JSON.parse(localStorage.getItem("todosInMemory")) || [];
renderTodos();
```
That's it! We have successfully built a TODO app using Vanilla JavaScript.