- Description
- Set a Language
- Entry Form
- Sort by Word and Category Buttons
- Entries Table
- Reset and Return to Home Screen Button
- Vite
- Page Loading Spinner
- Accessibility
- Testing
If you're learning one of the selected languages, you can use this app as an aid to make a word list.
The app, built with Vite/React, has the following features:
- Set a language.
- Create a word entry and add it to a table.
- Edit word, translation, category, sample sentence and notes.
- Sort words ascending and descending.
- Sort categories ascending and descending.
- Delete a word entry from the table.
- Delete all word entries from the table.
- Delete all (word entries and language settings) and return to the 'Select language' screen.
- All entries are saved to local storage.
On arriving at the site, choose a language from the select
dropdown.
You will then be prompted to confirm or cancel.
If you confirm, the title of the site will contain the name of the selected language.
Furthermore, the following elements will have the correct lang
attribute:
- 'Add word'
input
. - 'Sample phrase or sentence'
textarea
.
- 'Word'
cell
. - 'Sample phrase'
cell
.
- Add a word in the defined language (required).
- Add a translation of the word (required).
- Choose category from the select dropdown. If it isn't present, choose 'Other' (required).
- Add an optional phrase or sentence in the defined language.
- Add an optional note.
Note
Optional phrase and note are pre-populated with the string "..."
. This ensures that a note or phrase can be added to the entry after form submission.
These buttons are disabled by default. They only become operative after 2 or more entries have been created.
-
Edit word.
-
Edit translation.
-
Edit category. If you previously chose 'Other' from the select dropdown, you can enter the specific category here.
-
Edit optional phrase or sentence.
-
Edit optional note.
-
Delete entry. Clicking this button will launch a 'confirm' dialog.
Caution
Deleting an entry will permanently delete it from local storage.
Clicking this button will launch a 'confirm' dialog.
Caution
Clicking 'confirmj' will permanently delete all entries from local storage.
Clicking this button will launch a 'confirm' dialog.
Caution
Clicking 'confirm' will delete language settings and any/all entries from local storage and you will be returned to the 'Select Language' home screen.
I used the out-of-the-box setup to get React working in Vite.
This contains 2 official plugins:
- @vitejs/plugin-react uses Babel for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh
Additionally, in order to generate unique ids, I installed:
- uuid from npm (Node Package Manager).
See:
I would also strongly suggest watching the accompanying video, as it clarifies certain operations described in the article:
The first half of both the article and the video have the required steps for getting a Vite app (without routing) on to Git Pages.
I customised the code in How to Create a Loading Animation in React from Scratch to implement the page-loading spinner.
Tested on Windows 10 with:
- Chrome
- Firefox
- Microsoft Edge
Page tested in both browser and device views.