3. remove a word

a user can remove a word from the list.
the list will be re-rendered.

HTML

• an i tag for bin icon aside each word in the list
• a "remove all" button aside add button

CSS

• styling to position the bin icon and "remove all" button correctly in the form

Listeners

• a listener connected to the "bin" icon, I'll try a "click" event first
• a listener connected to the "remove all" button, I'll try a "click" event first

Handlers

• one handler that remove a word from the list and re-render the list in the UI
• one handler that remove the entire list and re-render the list in the UI

Utils

• none.

Components

• none. I can reuse the component from add a word to render word list.

• this will be developed on the branch 3-feature-remove.

4. sort words with options

a user can sort words with 6 options.
select 'oldest' then will sort words from oldest to newest.
select 'newest' then will sort words from newest to oldest.
select 'shortest' then will sort words from shortest to longest.
select 'longest' then will sort words from longest to shortest.
select 'a' then will sort alphabetical order.
select 'z' then will reverse alphabetical order.

HTML

• a select element with the name attribute "sort" to create a drop-down list.
• 6 option tags inside the select element define the available options in the drop-down list.

CSS

• styling to position the drop-down list correctly on the screen

Listeners

• a listener connected to the select, I'll try a "click" event first

Handlers

• one handler that sort the word list and re-render the list in the UI

Utils

• none.

Components

• none. I can reuse the component from add a word to render word list.

• this will be developed on the branch 4-feature-sort.

plus-1. move words between new list and remembered list

a user can move words between new list and remembered list

HTML

• one div element with the id remembered-list as container.
• one remembered button aside new words list
• one overlooked button aside remembered words list
• one checkbox aside each word.

CSS

• styling to position the two lists correctly on the screen

Listeners

• a listener connected to the checkbox, I'll try a "click" event first

Handlers

• one handler that move the word list and re-render the list in the UI

Utils

• none.

Components

• none. I can reuse the component from add a word to render word list.

• this will be developed on the branch plus-1-feature-move.

PULL_REQUEST_TEMPLATE

• - colorful button: As a user I want colorful button so that I can easily identify add or remove button by color.

  • Set the 'add' button to green.
  • Set the 'remove' button to red.

Get warnings

"As a user I want to get warnings so that I know I did something wrong."

• Give '123' and click add button then will get the warning: "123" is not a word.
• If 'abc' has not added yet. Give 'abc' and click remove button then will get the warning: "abc" is not in the list.

Logic: Get warnings

• type: logic: Write a function isWord(text = '') in /logic to check if the user input is a word. export function.

• type: handlers:

  • Write a function inputWord(event) in/handlers. It's an entry point for adding or removing a word. It is called each time the user clicks the "add word" or the "remove word" button. It gathers user input from DOM and then render new words by calling function sortStrings(data.words, data.sort) and renderList(sorted) to a div with the id listContainer.

  • Add a guard to check if user input is a word by calling function isWord(text = ''), if it isn't, post a warning "${userInput}" is not a word.

  • Add a guard to check text, use data.words.includes(text), if not, post a warning "${text}" is not in the list

  • export function.

Interface: Get warnings

• type:html: a code tag with the id warnings, then assign the warning message to it's innerText.

Interaction: Get warnings

• Given the input contains non-letters, it will not be added a warning is displayed.

• Given the input is not in the list a warning is posted.

5. edit a word

a user can edit a word from the list.

HTML

• an i tag for pen icon aside each word in the list

CSS

• styling to position the pen icon correctly in the list

Listeners

• a listener connected to the pen icon, I'll try a "click" event first

Handlers

• one handler that print the specific word to input. (User can edit it and then add to word list. Finally click bin icon to remove the original word.)

Utils

• none.

Components

• none.

• this will be developed on the branch 5-feature-edit.

for dev branch

• - create dev branch
• - merge planning and all feature branches into dev branch one by one
  • plan
  • 1-feature-intro
  • 2-feature-add
  • 3-feature-remove
  • 4-feature-sort
  • 7-feature-enter-key
  • plus-1-feature-move
  • 5-feature-edit

Word Mnemonic Device - development strategy version 2

This is an individual project to practice working on a full HTML/CSS/JS website.

This app helps user remembering words. You can add word, remove word, edit word, sort word... Check the words from New Words list and click remembered button, you can move the words to remembered list. check the words from Remembered Words list and click overlooked button, you will move the words back to new words list.

planning documents

As a user/developer I can read a readme of the project and follow the development process.

• there is a readme file

• there is a constraints document

• there is a backlog file

• there is a development strategy

• there is a retrospective

• this will be developed on the branch planning.

As a user/developer I can follow the design process.

• there is a mobile wireframe file

• there is a desktop wireframe file

• there is a figma document link

• this will be developed on the branch design.

Must-Haves

1. instruction

a user can read instruction of this word list app.

HTML

• a title tag "word list maker"
• a h1 tag "word list maker"
• a p tag of some instruction

CSS

• styling to position the instruction section correctly and readably on the screen.

• this will be developed on the branch 1-feature-intro.

2. add a word

a user can add a new item to the list.
a user can see the added word list.

HTML

• a form input field
• a add button
• a div with id new-list to display the word list

CSS

• styling to position the new field and button correctly in the form

Listeners

• a listener connected to the "add" button, I'll try a "click" event first

Handlers

• one handler that takes the user input from the form and:
  • validates it
  • if it's valid:
    • add it to the list in memory
    • re-render the list in the UI
  • if it's not valid:
    warns the user what is wrong with their input

Utils

• a pure function that validates new list entries and returns either true or a message describing what is wrong

Components

• a component to render word list.

• this will be developed on the branch 2-feature-add.

3. remove a word

a user can remove a word from the list.
the list will be re-rendered.

HTML

• an i tag for bin icon aside each word in the list
• a "remove all" button aside add button

CSS

• styling to position the bin icon and "remove all" button correctly in the form

Listeners

• a listener connected to the "bin" icon, I'll try a "click" event first
• a listener connected to the "remove all" button, I'll try a "click" event first

Handlers

• one handler that remove a word from the list and re-render the list in the UI
• one handler that remove the entire list and re-render the list in the UI

Utils

• none.

Components

• none. I can reuse the component from add a word to render word list.

• this will be developed on the branch 3-feature-remove.

4. sort words with options

a user can sort words with 6 options.
select 'oldest' then will sort words from oldest to newest.
select 'newest' then will sort words from newest to oldest.
select 'shortest' then will sort words from shortest to longest.
select 'longest' then will sort words from longest to shortest.
select 'a' then will sort alphabetical order.
select 'z' then will reverse alphabetical order.

HTML

• a select element with the name attribute "sort" to create a drop-down list.
• 6 option tags inside the select element define the available options in the drop-down list.

CSS

• styling to position the drop-down list correctly on the screen

Listeners

• a listener connected to the select, I'll try a "click" event first

Handlers

• one handler that sort the word list and re-render the list in the UI

Utils

• none.

Components

• none. I can reuse the component from add a word to render word list.

• this will be developed on the branch 4-feature-sort.

Should-Haves

these will complete the user experience, but are not necessary

plus-1. move words between new list and remembered list

a user can move words between new list and remembered list

HTML

• one div element with the id remembered-list as container.
• one remembered button aside new words list
• one overlooked button aside remembered words list
• one checkbox aside each word.

CSS

• styling to position the two lists correctly on the screen

Listeners

• a listener connected to the checkbox, I'll try a "click" event first

Handlers

• one handler that move the word list and re-render the list in the UI

Utils

• none.

Components

• none. I can reuse the component from add a word to render word list.

• this will be developed on the branch plus-1-feature-move.

5. edit a word

a user can edit a word from the list.

HTML

• an i tag for pen icon aside each word in the list

CSS

• styling to position the pen icon correctly in the list

Listeners

• a listener connected to the pen icon, I'll try a "click" event first

Handlers

• one handler that print the specific word to input. (User can edit it and then add to word list. Finally click bin icon to remove the original word.)

Utils

• none.

Components

• none.

• this will be developed on the branch 5-feature-edit.

6. colorful button

a user can easily identify add or remove button by color.
set the 'add' button to green.
set the 'remove all' button to red.

HTML

• none.

CSS

• styling the 'add' and 'remove all' button

Listeners

• none.

Handlers

• none.

Utils

• none.

Components

• none.

• this will be developed on the branch 6-feature-button-color.

7. use Enter key add

a user can add a word by press Enter key.

HTML

• none.

CSS

• none.

Listeners

• a listener connected to the input, I'll try a keydown event first.

Handlers

• a handler that add word to list and re-render the list in the UI

Utils

• none.

Components

• none. I can reuse the component from add a word to render word list.

• this will be developed on the branch 7-feature-enter-key.

8. change font

a user can change word list font with option.

HTML

• a select element with the name attribute "font" and id "font" to create a drop-down list.
• 3 option tags inside the select element define the available options in the drop-down list.

CSS

• a listener connected to the select with id "font", I'll try a "click" event first

Handlers

• one handler that change the font of the word list and re-render the list in the UI

Utils

• none.

Components

• none.

• this will be developed on the branch 8-feature-change-font.

Could-Haves

would be really cool ... if there's

9. share word list

a user can share the word list on facebook, email.

10. export word list

a user can export word list to a file.

Add word

"As a user I want a input field and a add button so that I can input and add a word to the list."

• Given the input contains only letters it will be added to the words list, and the list will be re-rendered.

Logic: Add word

• type: listeners: Add listener addEventListener('click', inputWord) to form element with the id input-form in /listeners.

• type: handlers: Write a function inputWord(event) in/handlers. It's an entry point for adding or removing a word. It is called each time the user clicks the "add word" or the "remove word" button. It gathers user input from DOM and then render new words by calling function sortStrings(data.words, data.sort) and renderList(sorted) to a div with the id listContainer. export function.

• type: logic: Write a function sortStrings(toSort = [], sortType = 'oldest') in /logic. It will sort words depend on sort type option. export function.

• type: logic: Write a function isWord(text = '') in /logic to check if the user input is a word. export function.

• type: components: Write a function renderList(toRender = []) in render-list.js. Convert each word element from an array to text in each litag , and an ultag wrap around all the li. export function.

Interface: Add word

• type html: A form tag with the id input-form.

• type html: A input tag with name="text" placeholder="new word" as a form element.

• type html: A input tag with type="button" value="add" as a form element.

Interaction: Add word

• Given the input contains only letters it will be added to the words list, and the list will be re-rendered.

• Turn on GitHub Pages and put a link to your website in the repo's description
• in the Branches section of your repo's settings make sure:
  • The repository requires a review before pull requests can be merged.
  • check Dismiss stale pull request approvals when new commits are pushed
  • The master/main branch must "Require status checks to pass before merging"
  • The master/main branch must "Require require branches to be up to date before merging"
• In enable the Actions section of your repository so the automated checks will run each time you send a PR to master/

7. use Enter key add

a user can add a word by press Enter key.

HTML

• none.

CSS

• none.

Listeners

• a listener connected to the input, I'll try a keydown event first.

Handlers

• a handler that add word to list and re-render the list in the UI

Utils

• none.

Components

• none. I can reuse the component from add a word to render word list.

• this will be developed on the branch 7-feature-enter-key.

Word list

"As a user I want a word list so that I can see the words I've added."

• There is a list to show every word the user has added. By default the word list is blank.

Logic: Word list

• type: components: Write a function renderList(toRender = []) in /components. Convert each word element from an array to text in each litag , and an ultag wrap around all the li. export function.

Interface: Word list

• type html: A div with the id list-container to store rendered word list.

Interaction: Word list

• When the app just loaded, the word list is blank.

Add word

"As a user I want a input field and a add button so that I can input and add a word to the list."

• Given the input contains only letters it will be added to the words list, and the list will be re-rendered.

• /planning
  • constraints
  • backlog
  • wireframe
  • development strategy
  • retrospective
• project board

planning documents

As a user/developer I can read a readme of the project and follow the development process.

• there is a readme file

• there is a constraints document

• there is a backlog file

• there is a development strategy

• there is a retrospective

• this will be developed on the branch planning.

As a user/developer I can follow the design process.

• there is a mobile wireframe file

• there is a desktop wireframe file

• there is a figma document link

• this will be developed on the branch design.

• - hint music: As a user I want to get hint music so that I know I added a word successfully or removed a word.

  • Input a word and click add button, then happy melody playing.
  • Input a word and click remove button, then sad melody playing.
  • Input a number and click add button, then warning melody playing.