Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/chrisnajman/sortable-dictionary-v2

Sortable dictionary with edit and delete functionality.
https://github.com/chrisnajman/sortable-dictionary-v2

accessible-tables css-nesting darkmodetoggle html-css-javascript html-template localstorage

Last synced: 21 days ago
JSON representation

Sortable dictionary with edit and delete functionality.

Host: GitHub
URL: https://github.com/chrisnajman/sortable-dictionary-v2
Owner: chrisnajman
License: mit
Created: 2023-11-09T07:46:48.000Z (over 1 year ago)
Default Branch: main
Last Pushed: 2024-01-19T12:23:39.000Z (about 1 year ago)
Last Synced: 2024-11-21T00:52:26.300Z (3 months ago)
Topics: accessible-tables, css-nesting, darkmodetoggle, html-css-javascript, html-template, localstorage
Language: CSS
Homepage: https://chrisnajman.github.io/sortable-dictionary-v2/
Size: 16.6 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# Sortable Dictionary (V2)

## Description

I'm always looking up words, in several languages, so I decided to build my own sortable dictionary.

Note: the page doesn't break when viewed on a mobile, but I'd recommend using tablet or desktop for the best experience.

This build features enhancements and modifications to my previous [sortable dictionary](https://github.com/chrisnajman/sortable-dictionary) project.

### How it works

#### Adding an entry

- Add a word or phrase (required) to the modal dialog form.
- All language characters and accents are allowed, together with hyphens and single apostrophes.
- Special characters are not allowed.
- Clicking 'Cancel' will close the form and modal.
- Select a language (optional):
- If the form is submitted without selecting a language, the default language (English) will be printed to the table row.
- If the language is not available, you can select "Other". This can be edited after the form is submitted.
- Add a definition (optional). This can be added (or edited) after the form is submitted.

#### Editing/sorting/deleting an entry

Once the form has been submitted, a new table row is generated.

Note: usually, new table rows go to the bottom of the table. For ease of use in this project, the newly-generated entry appears at the top. To signal this, the new entry is briefly highlighted.

- Either the word/phrase or language can be sorted (a-z and z-a) via:
- two buttons in the 'Word/phrase' table header, and
- two buttons in the 'Language' table header.
- At least two rows need to be generated before the sort buttons are enabled.
- A definition can be edited (or added).
- If the language selected was "Other", a "Set language" button will appear in the entry under 'Language'.

Entries, edits, additions and sort order are saved to local storage.
Deleted entries are also deleted from local storage.

## HTML

- `template` used for dynamic `table` rows.
- `dialog` is used to house the form.
- The table has a min-width of 736px. At screens smaller than 768px (width dimensions of iPad Mini) scrollbars will appear.

## Javascript

- Dialog modal.
- Theme switcher.
- Sort functionality (using ES6 `.sort()` method).
- ES6 (no transpilation to ES5)

## CSS

- `grid` used for page layout.
- `flexbox` used for page elements.
- Files are organised using `@import` to pull modules into `style.css`.
- Files are organised internally using CSS nesting.
- Responsive (as far as a data table can be responsive).
- Dark theme.

## Adding a language

This requires adding code to both the HTML and JavaScript (You can add as many languages as you require).
First, look up the relevant [ISO Country Code](https://www.w3docs.com/learn-html/html-language-codes.html).

- E.g. for 'Portuguese', the country code is 'pt'.

Then, in `./index.html` add `Portuguese` somewhere in the `select` dropdown:

```HTML

English
French
German
Italian
Latin
Spanish
Portuguese
Other

```

Finally, in `./js/script.js` add a new `case` in the `switch` statement:

```JavaScript
function convertLangSelectToFullName(entry) {
switch (entry.language) {
case "en":
entry.language = "English"
break
case "fr":
entry.language = "French"
break
case "de":
entry.language = "German"
break
case "it":
entry.language = "Italian"
break
case "la":
entry.language = "Latin"
break
case "es":
entry.language = "Spanish"
break
case "pt":
entry.language = "Portuguese" /* Portuguese added */
break
case "und":
entry.language = "Other"
break
default:
entry.language = "Not available"
}
}
```

## Testing

- Tested on:
- Windows 10
- Chrome
- Firefox
- Microsoft Edge

The page has been tested in both browser and device views.