https://github.com/kmarryo/gottodo

Simple Todo-app built with Vue.js
https://github.com/kmarryo/gottodo

todo vue vuejs vuejs2

Last synced: 22 days ago
JSON representation

Simple Todo-app built with Vue.js

• Host: GitHub
• URL: https://github.com/kmarryo/gottodo
• Owner: kmarryo
• Created: 2017-03-22T15:48:13.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-03-22T15:51:31.000Z (almost 8 years ago)
• Last Synced: 2024-11-20T14:50:59.448Z (3 months ago)
• Topics: todo, vue, vuejs, vuejs2
• Language: JavaScript
• Size: 20.5 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# gotTODO App - made with love and Vue.js

## Description

This is my very first app I built with **Vue.js**. gotTODO is a simple Todo web app. You can add, modify, delete and prioritize tasks.

## Installation

- Download the project on Github: [gotTODO - Todo-App with Vue.js](https://github.com/kmarryo/gotTODO)

OR

- See the result on [Github Pages](https://kmarryo.github.io/gotTODO)

## Getting started

- Open the index.html in your **local webserver**

OR

- Click on my  [Github Pages Website](https://kmarryo.github.io/gotTODO)

## Usage

In your index.html you can see the input field with the "Add your task" placeholder. For adding tasks just type in what you have to do and press enter. As you can see, nothing happens when you just press enter without typing in anything at all.

Furthermore you have three different icons to click on:

- On the left hand side of your input field is the "Done"-Icon. When clicking on it, the task will get marked as done which you can recognize by a grey background on the input field and strikethrough text.

- On the right hand side of your input first there is the "Priority"-Icon. When clicking on it, you can set the priority of the todo to important. When this happens the input field as well as the icon itself will get a light red color.

- At last you have the opportunity to delete a task by clicking on the right. As you will see, if there is only one task remaining, this task will of course will not be "deleted" as the other ones but it will be cleared so you can start fresh with writing tasks.

## Used resources

- Vue.js

- jQuery

- Google Fonts

- Font Awesome

- Sass

- Gulp

- npm

## Additional info

I made the design to work responsive, but because this is of course just a demo, it is not totally optimized for small devices such as smartphones. For example, there sure are better solutions to add new tasks when working with a smartphone than just clicking enter.

## Open tasks:

- Add transition effect, when todo is getting deleted.

# License

MIT