Giter Club home page Giter Club logo

todolist's Introduction

Simple To-Do List

This To-Do List is a simple web app that I've been using for myself over the past few days. The list is interactive and allows a user to add or remove list items. List items can also be marked as completed, and any items that are marked as completed can be removed collectively. The slight challenge I had behind this to-do list, was storing the interface somewhere, without a server-side, so that the app doesn't reset each time it is opened, or the browser gets refreshed. Although there are a few ways to do this, for example by using cookies, I leveraged local storage.

Plan on hositng to Heroku to demo: Unfotunately, I cannot show the demo to this list as it is full-stack and github pages only hosts static.

alt tag

How It's Made:

Tech used: HTML, CSS, JavaScript

The local storage aspect of this project was an initial challenge as I had not worked with this browser object before. In order to work with the Local Storage object, I modified its setItem() and getItem() methods, which ended up being surprisingly easier than anticipated.

Optimizations

If I had more time I would go back and add better styling to the list to make it look more modern and less retro. I am also planning on making the list full-stack by using Express JS.

----UPDATE (3/14/18): list is now full stack. please view server & json files :)----

Lessons Learned:

In completing this project I learned a lot about built-in browser variables liked Local Storage. I also learned more about the client-server model, when reviewing concepts such as the fact that HTTP is stateless, which causes an application to reset the next time it is re-opened. As a developer, I needed to store the state of your interface somewhere. Although this is normally done on the server-side, I didn't want to force people to sign up to use the app. This is one of the main reasons I decided to leverage local storage.

Examples:

Take a look at other examples that I have in my own portfolio:

Spanish Colors Memory Game: https://github.com/karina001/spanishColorsMemoryGame

WuTangClan Name Generator: https://github.com/karina001/WuTangNameGenerator

Speech Recognition App: https://github.com/karina001/speechRecognitionApp

Installation

  1. Clone repo
  2. run npm install

Usage

  1. run node server.js
  2. Navigate to localhost:3000

todolist's People

Contributors

girl4tech avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.