todolist-js's Introduction
# Todo List Application This project is a simple Todo List application implemented in JavaScript, consisting of three main components: `view`, `controller`, and `db`. The `view` module is responsible for rendering the user interface, the `controller` module handles the application's logic, and the `db` module manages data storage. ## View Module The `view` module is responsible for rendering the user interface and handling user interactions. It interacts with the HTML elements of the application to display todos and respond to user actions. ### Functions - **`render(todos)`**: Renders the list of todos based on the provided array of todo objects. It clears the existing list and appends new list items for each todo. ### User Interaction - The `init` function sets up an event handler for the "Add" button (`addButton`). When clicked, it triggers the `addTodo` function from the associated `controller`. ## Controller Module The `controller` module manages the application's logic, including adding, toggling completion, removing todos, and setting filters. It interacts with the `view` module to update the user interface. ### Functions - **`addTodo(value)`**: Adds a new todo with the provided value. - **`toggleComplete(todo)`**: Toggles the completion status of a todo. - **`removeAllTodos()`**: Removes all todos. - **`remove(todo)`**: Removes a specific todo. - **`setFilter(value)`**: Sets the filter for displaying todos. ### Initialization - The `init` function initializes the `controller` by retrieving the model from the `db` module and rendering the initial state. ### Filtering - The `filterTodos` function filters todos based on the selected filter (all, active, complete) and returns the filtered array. ### Rendering - The `render` function updates the model in the `db` module and triggers the `render` function in the `view` module with the filtered todos. ## Database Module The `db` module is a simple local storage-based database for storing the model data. ### Functions - **`getModelFromLocalStorage()`**: Retrieves the model data from local storage. - **`setModelToLocalStorage(value)`**: Stores the model data to local storage. ## How to Use 1. Open the `index.html` file in a web browser. 2. Use the input field and "Add" button to add new todos. 3. Click on todo items to toggle their completion status. 4. Use the "Activate" or "Complete" buttons to change the completion status. 5. Click the "X" button to remove a todo. 6. Use the "Clear All" button to remove all todos. ## Notes - This Todo List application uses local storage for data persistence. - The application includes a simple HTTP server for serving the HTML and JavaScript files using the `ecstatic` module. The server listens on port 8080. - Ensure that the necessary HTML elements are present with the specified IDs for proper functionality. Feel free to explore and modify the code to suit your needs. For additional information on building interactive web applications, refer to the relevant documentation for JavaScript and web development. { // in the project folder // --> npm init // npm install ecstatic --save-dev // node server.js }
todolist-js's People
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.