Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/theemperorofdaiviet/calendar-todo-list
A To-Do List App where users can add, delete, and edit day to day events within a week.
https://github.com/theemperorofdaiviet/calendar-todo-list
bulma css3 font-awesome html5 javascript scss todo-list vue3 vuejs
Last synced: 11 days ago
JSON representation
A To-Do List App where users can add, delete, and edit day to day events within a week.
- Host: GitHub
- URL: https://github.com/theemperorofdaiviet/calendar-todo-list
- Owner: theEmperorofDaiViet
- Created: 2023-07-22T16:30:50.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2023-07-24T04:46:10.000Z (over 1 year ago)
- Last Synced: 2023-07-24T05:20:06.771Z (over 1 year ago)
- Topics: bulma, css3, font-awesome, html5, javascript, scss, todo-list, vue3, vuejs
- Language: Vue
- Homepage:
- Size: 783 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Table of Contents
# About The Project
A To-Do List App where users can add, delete, and edit day to day events within a week. It's based on chapter 3 of the book "Fullstack Vue 3"".
## Built With
* [![HTML5][HTML5-shield]][HTML5-url]
* [![CSS3][CSS3-shield]][CSS3-url]
* [![JavaScript][JavaScript-shield]][JavaScript-url]
* [![Vue.js][Vue.js-shield]][Vue.js-url]
* [![Bulma][Bulma-shield]][Bulma-url]
* [![Font Awesome][Font Awesome-shield]][Font Awesome-url]
# Getting Started
## Prerequisites
Before cloning and using this application, you'll need to install these things on your computer:
* [npm](https://docs.npmjs.com/about-npm): the default package manager for the JavaScript runtime environment Node.js. It consists of a command line client, also called npm, and an online database of public and paid-for private packages, called the npm registry. The registry is accessed via the client, and the available packages can be browsed and searched via the npm website.
* [Vue](https://vuejs.org/): a JavaScript framework for building user interfaces. It builds on top of standard HTML, CSS, and JavaScript and provides a declarative and component-based programming model that helps you efficiently develop user interfaces, be they simple or complex.
* [Visual Studio Code](https://code.visualstudio.com/download): You can choose any IDE or Text Editor that you want. To build a simple application like this, I recommend Visual Studio Code.
## Installation
You can install this application by cloning this repository into your current working directory:
```sh
git clone https://github.com/theEmperorofDaiViet/calendar-todo-list.git
```
After cloning the repository, you can open the project by Visual Studio Code.
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Lints and fixes files
```
npm run lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
# Key Features
In our app, a user can add, delete, and edit day to day events within a week. Each
event corresponds to a particular task/to-do item that the user would like to keep track of:
- When the user clicks a day within the calendar week, our CalendarEntry component should
appropriately reference the correct day selected. (i.e. the user clicks THU - text in CalendarEntry
becomes Day of Event: Thursday)
- The user can submit a new event to a certain day by typing the details in the input within the
CalendarEntry component and clicking Submit. (If the user clicks Submit with a blank input, an
error message should appear stating blank inputs are invalid)
- If the user clicks the edit icon on an event, an input is provided to allow the user to change the
event details. When the user updates the event and clicks the confirm icon, the event details are
updated. (If the user clicks the edit icon, then the confirm icon with a blank input - the event details
remains the same)
- The user is able to completely remove an event by clicking the delete icon on an event
# Usage
Our app looks like this:
# Contact
You can contact me via:
* [![GitHub][GitHub-shield]][GitHub-url]
* [![LinkedIn][LinkedIn-shield]][LinkedIn-url]
* ![Gmail][Gmail-shield]: [email protected]
* [![Facebook][Facebook-shield]][Facebook-url]
* [![Twitter][Twitter-shield]][Twitter-url]
[HTML5-shield]: https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white
[HTML5-url]: https://www.w3.org/html/
[CSS3-shield]: https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white
[CSS3-url]: https://www.w3.org/Style/CSS/
[JavaScript-shield]: https://img.shields.io/badge/JavaScript-323330?style=for-the-badge&logo=javascript&logoColor=F7DF1E
[JavaScript-url]: https://www.ecma-international.org/
[Vue.js-shield]: https://img.shields.io/badge/vuejs-%2335495e.svg?style=for-the-badge&logo=vuedotjs&logoColor=%234FC08D
[Vue.js-url]: https://vuejs.org/
[Bulma-shield]: https://img.shields.io/badge/Bulma-00D1B2?style=for-the-badge&logo=Bulma&logoColor=white
[Bulma-url]: https://bulma.io/
[Font Awesome-shield]: https://img.shields.io/badge/Font_Awesome-339AF0?style=for-the-badge&logo=fontawesome&logoColor=white
[Font Awesome-url]: https://fontawesome.com/
[GitHub-shield]: https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white
[GitHub-url]: https://github.com/theEmperorofDaiViet
[LinkedIn-shield]: https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white
[LinkedIn-url]: https://www.linkedin.com/in/khiet-to/
[Gmail-shield]: https://img.shields.io/badge/Gmail-D14836?style=for-the-badge&logo=gmail&logoColor=white
[Facebook-shield]: https://img.shields.io/badge/Facebook-%231877F2.svg?style=for-the-badge&logo=Facebook&logoColor=white
[Facebook-url]: https://www.facebook.com/Khiet.To.Official/
[Twitter-shield]: https://img.shields.io/badge/Twitter-%231DA1F2.svg?style=for-the-badge&logo=Twitter&logoColor=white
[Twitter-url]: https://twitter.com/KhietTo