![simple todo app for windows simple todo app for windows](https://i.pcmag.com/imagery/articles/05hXk1J5R4iHWkM13wqrr9M-11..v1628519125.png)
Simple todo app for windows download#
You’ll want to download this file and place it under todo-mini/public/ to import this CSS to our project. I won’t be going too much into detail with the CSS, because it’s a long thing to teach in one article that doesn’t focus too much on it, but I’ve made available my CSS Stylesheet for this project. Now that we’ve defined these requests in the HTML, we’ll move on to the TypeScript file and add some endpoints to them. Allows us to mark a task as completed (remove it from the to-do list).This places all of our necessary components, and defines all the necessary HTML requests so that we can access and insert information into our to-do list: We’ll place the following in that index.ejs file: html, it will actually render as it, so hopefully your IDE highlights it as such. To actually write the HTML contents of our app, we’re going to want to create a new EJS directory named views in our root directory, and create a new file titled index.ejs. Now, to spice things up with HTML and CSS. Now, we should have all of the necessary components in the backend to handle all of our functionality. Inside our index.ts, we first import all of our dependencies:ĪddTask : function ( taskName : string, callback : any ) Note: We can also set this within the initial configuration. We’ll double check that our "main" is set to "index.ts".Under "scripts", we’ll add "tsc": "tsc" so that we can compile our TypeScript into JavaScript when we run our app.Create a new file called index.ts and open it in your favorite text editor.īecause we’re going to be using TypeScript instead of pure JavaScript for our Node app, we have to make some slight configuration changes to our package.json:.Fill out the requested information in as much depth as you like, making sure to set the "main" field to index.ts instead of index.jsbecause we’re using TypeScript.Navigate to the directory in a terminal and run npm init.Create a new directory named todo-mini.The first thing we’re going to do to start off our coding is some simple Node and Express things: If you’d like to skip the following along part, you can just fork this repository. Here is the repository where I host the current iteration of the todo app. Now that we have all of our dependencies, installed, we’re ready to create a new project and get coding! The Fun Stuff Getting it installed depends on your architecture if you have Ubuntu/Debian, you can simply run Our application depends on this because we’ll be using several different Node packages, such as the sqlite3 package to store our data and the ejs (ExpressJS) package to server our front-end website. Node is Server-Side JavaScript that you can use just as you would any other server-side language like Java or Python. This tutorial is heavily inspired by missating’s nodejs-todo project. Though this was only truly intended as a tool to learn the technologies and putting them together, it technically is a fully functional To-Do list, and I might just plan to use it in the future for quick and dirty tasks to keep track of. The product ended up being a Node server using ExpressJS to render the webpage, using TypeScript to handle backend requests, and storing the To-Dos on an SQLite server on the server. Have you found yourself needing a place to keep a list of To-Dos, but don’t trust big companies with having all of your information? Need the most lightweight todo client possible that you can access from anywhere? Want to be able to share a To-Do list with anyone, without having them download fancy apps and set up accounts? I certainly have, and instead of scouring the internet to try to find a solution, I decided to build it myself.
![simple todo app for windows simple todo app for windows](https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/5f8ad888-9a9b-11e6-bc1e-00163ec9f5fa/2792083497/to-do-list-windows-10-screenshot.jpg)
Creating a Simple To-Do App with TypeScript, Node, SQLite, and ExpressJS