must have 2: add a word

[AlinaTaoRao]

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.