Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/theemperorofdaiviet/form-app

Examples on how different form inputs are handled with Vue and Vuex
https://github.com/theemperorofdaiviet/form-app

css3 html5 javascript semantic-ui vuejs vuex

Last synced: 11 days ago
JSON representation

Examples on how different form inputs are handled with Vue and Vuex

Host: GitHub
URL: https://github.com/theemperorofdaiviet/form-app
Owner: theEmperorofDaiViet
Created: 2023-10-05T15:30:11.000Z (about 1 year ago)
Default Branch: master
Last Pushed: 2023-10-08T12:11:23.000Z (about 1 year ago)
Last Synced: 2023-10-08T16:42:55.558Z (about 1 year ago)
Topics: css3, html5, javascript, semantic-ui, vuejs, vuex
Language: JavaScript
Homepage:
Size: 367 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

      

        Built With

      

    

    

      Getting Started

      

        Prerequisites

        Installation

        Project Setup

      

    

    Key Features

    Usage

    Contact

  


# About The Project

Examples on how different form inputs are handled with Vue and Vuex, based on chapter 7 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]

* [![Semantic-UI][Semantic-UI-shield]][Semantic-UI-url]

(back to top)


# Getting Started

## Prerequisites

Before cloning and using this application, you'll need to install these things on your computer:

* [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.

* [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer): An extension for Visual Studio Code that help to launch a local development server with live reload feature for static & dynamic pages.

## Installation

You can install this application by cloning this repository into your current working directory:

```sh

git clone https://github.com/theEmperorofDaiViet/form-app.git

```

After cloning the repository, you can open the project by Visual Studio Code.

Click to Go Live from the status bar to turn the server on/off.

As usual, the app should automatically open in a new tab in your browser. It runs on port 5500 by default.

(back to top)


# Key Features

- Handle input from buttons, text fields, select dropdowns, checkbox

- Validate on the level of individual field and on the form as a whole

- Disable the submit button when either of the field error validations is present

- Persist data to localStorage if no fields errors exist

- Keep track of persistence status:

    - The Submit button reflects the current save status and prevents the user from performing an unwanted action like a double-save

    - Display a loading indicator in the items list when data is still being fetched.

- Clear the input if the persistence is successful. Otherwise, don't clear the fields to give the user an opportunity to try again without having to re-input the information

- Display the result

We will use different ways of managing data:

- v1.0.0: using only component's data()

- v2.0.0: using Vuex

(back to top)


# Usage



    

    

    

    

    

    

    

    



(back to top)


# 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]




(back to top)


[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/

[Semantic-UI-shield]: https://img.shields.io/badge/Semantic%20UI%20React-35BDB2.svg?style=for-the-badge&logo=Semantic-UI-React&logoColor=white

[Semantic-UI-url]: https://semantic-ui.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