First commit

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Christopher. Najman
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,126 @@
+# 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
+
+- `flexbox` used for page layout and 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 `<option value="pt">Portuguese</option>` somewhere in the `select` dropdown:
+
+```HTML
+<select id="language-select" name="language-select" data-language-select>
+    <option value="en">English</option>
+    <option value="fr">French</option>
+    <option value="de">German</option>
+    <option value="it">Italian</option>
+    <option value="la">Latin</option>
+    <option value="es">Spanish</option>
+    <option value="pt">Portuguese</option> <!-- Portuguese added -->
+    <option value="und">Other</option>
+</select>
+```
+
+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.

css/base.css

@@ -0,0 +1,195 @@
+*,
+*::after {
+    box-sizing: border-box;
+    margin: 0;
+}
+
+html {
+    overflow-y: scroll;
+    scroll-behavior: smooth;
+
+    /* 
+        This allows easily setting any/all dimension in rems, 
+        e.g. width: 30rem === width: 300px 
+    */
+    font-size: 10px;
+}
+
+html:focus-within {
+    scroll-behavior: smooth;
+}
+
+body {
+    background-color: var(--body-bg);
+    font-family: var(--font-sans);
+    margin: 0;
+    line-height: 1.5;
+    font-size: 1.6rem;
+}
+
+h1 {
+    font-size: clamp(1.6rem, 1.1739rem + 2.4348vw, 3rem);
+    line-height: 1.1;
+    text-wrap: balance;
+}
+
+img {
+    max-width: 100%;
+    height: auto;
+    vertical-align: middle; /* replaces display: block but also removes space below */
+    font-style: italic;
+}
+
+:focus-visible {
+    outline: 2px solid var(--focus);
+    outline-offset: -2px;
+}
+
+button {
+    all: unset;
+    color: inherit;
+    cursor: pointer;
+}
+
+button,
+input[type="text"],
+textarea,
+select {
+    font-size: inherit;
+    font-family: inherit;
+}
+
+.button {
+    color: var(--class-button-text);
+    background-color: var(--class-button-bg);
+    padding: 0.4rem 0.8rem;
+    border: 1px solid var(--class-button-border);
+    border-radius: 0.3rem;
+}
+.button:hover {
+    opacity: 0.7;
+}
+
+.page-layout {
+    min-height: 100vh;
+    min-height: 100dvh;
+    display: var(--flex);
+    flex-direction: column;
+    align-items: stretch;
+}
+
+header,
+main,
+footer {
+    flex-shrink: 0;
+}
+
+main {
+    flex-grow: 1;
+}
+
+.page-header {
+    padding: 1.6rem 1.6rem 3.2rem 1.6rem;
+}
+
+.main,
+.page-footer {
+    padding: 5rem 1.6rem;
+}
+
+.page-header,
+.page-footer {
+    background-color: var(--header-footer-bg);
+    color: var(--text-lightest);
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+}
+
+.page-footer a {
+    color: var(--link);
+    text-decoration: none;
+}
+
+.page-footer a:hover {
+    text-decoration: underline;
+}
+
+.page-footer a::after {
+    content: " \27F6";
+}
+
+/** Helpers */
+/* Scrollable container for tables */
+[role="region"][aria-labelledby][tabindex] {
+    overflow: auto;
+}
+
+/* Skip link */
+.skip-link {
+    background-color: var(--skip-link-bg);
+    color: var(--skip-link-text);
+    text-decoration: none;
+    padding: 1rem 1.5rem;
+    border-radius: 0 0 0.8rem 0;
+}
+.element-invisible {
+    clip: rect(1px, 1px, 1px, 1px);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    left: 0;
+    z-index: 10;
+}
+.element-invisible.element-focusable:active,
+.element-invisible.element-focusable:focus {
+    clip: auto;
+    height: auto;
+    overflow: visible;
+}
+/* Screenreader only */
+.visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(0);
+    border: 0;
+}
+
+/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
+@media (prefers-reduced-motion: reduce) {
+    html,
+    html:focus-within {
+        scroll-behavior: auto;
+    }
+    *,
+    *::before,
+    *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+        scroll-behavior: auto !important;
+        transition-delay: 0ms !important;
+    }
+}
+
+.info {
+    font-size: 1.4rem;
+    margin-bottom: 0.5rem;
+}
+
+.warning {
+    color: var(--clr-warning);
+}
+
+.serif {
+    font-family: var(--font-serif);
+}
+/* Always comes last **/
+.hide {
+    display: none;
+}