DOCS.md

DOCS

• handlers
  • artify.js
  • change-separator.js
  • checkScore.js
  • goToindexHandler.js
  • showResults.js
• listeners
  • change-separator.js
  • goToIndex.js
  • inputting.js
  • next.js
• logic
  • allAnswers.js
  • checkItem.js
  • dataQuestions.js
  • getNull.js
  • lastQuestion.js
  • lastQuestionSetter.js
  • reverse.js
  • reviewArray.js
  • reviewQuizSetter.js
• views
  • artify.js
  • correctAnswer.js
  • green.js
  • newArrayWithoutEmptyView.js
  • red.js
• data.js
• init.js
• review.js

---

Handlers

Handler function define user interactions. They will:

• read user input from events and from the DOM
• read and modify program data variables
• process user data with logic functions
• update the DOM to show changes to the user
• log any important information for developers

---

./src/handlers/artify.js

artifyHandler

creates a mirror-image rendering of the user input and displays the growing artwork

Param	Type	Description
event	Event	triggered whenever a user releases a key in the input area

---

./src/handlers/change-separator.js

changeSeparatorHandler

changes the program's separator value

Param	Type	Description
event	Event	triggered whenever a user types in the separator input area

---

./src/handlers/checkScore.js

checkScore(e)

update the score and store it in localStore

Param	Type	Description
e	e	event

---

./src/handlers/goToindexHandler.js

goToIndex

opens index.html

Param
=>{window.location.replace("./index.html"

---

./src/handlers/showResults.js

showResults()

opens ./review.html

TOP

---

---

Listeners

Event listeners are used to connect handler functions to user interactions with the DOM.

You can use the same handler in many different listeners, or add more than one listeners to the same DOM element.

---

./src/listeners/change-separator.js

change separator

calls handler that changes the mirror-arts separator

---

./src/listeners/goToIndex.js

---

./src/listeners/inputting.js

user input

calls the reverseHandler when a user types in the input field

---

./src/listeners/next.js

TOP

---

---

Logic

Logic functions are pure functions. They take primitives, objects or arrays as arguments and they return primitives, objects or arrays. Handlers will use logic functions to transform user input.

Logic functions will never ...

• read from the DOM
• write to the DOM
• use events
• use prompt/alert/confirm
• use data that is not passed as a parameter

---

./src/logic/allAnswers.js

---

./src/logic/checkItem.js

checkitem()

takes care of the Bootstrap carousel component and creates the UI

---

./src/logic/dataQuestions.js

dataFunction

reads data and creates all the elements of the UI

---

./src/logic/getNull.js

getNull

creates an array for localStorage's items called 'newArrayWithEmpty'

---

./src/logic/lastQuestion.js

lastQuestion

set the UI for the last button to review the quiz

---

./src/logic/lastQuestionSetter.js

lastQuestionSetter

set the event listener for the last question

Param	Type	Description
id	string	the id of the UI element

---

./src/logic/reverse.js

reverse ⇒ string

reverses a string

Returns: string - the string reversed

Param	Type	Description
input	string	a string to reverse

---

./src/logic/reviewArray.js

getArray()

creates the array of the answers given by the user, 'newArrayWithoutEmpty'

---

./src/logic/reviewQuizSetter.js

reviewQuizSetter

add the event listener to the button of the very last question

Param	Type	Description
id	string	the id of the UI element

TOP

---

---

Views

View functions are pure functions used to render JS data into DOM elements. They take primitives, objects or arrays as arguments and they return primitives, objects or arrays. Handlers will use view functions to render program state and update the UI.

VIEW functions will never ...

• read from the DOM
  • they will create new DOM elements
• write to the DOM
  • they return a DOM element that the handler will append
• use events
• use prompt/alert/confirm
• use data that is not passed as a parameter

---

./src/views/artify.js

artify ⇒ HTMLPreElement

creates a PRE element with artful text each line in the provided array will be mirrored around the separator

Returns: HTMLPreElement - a PRE element with the rendered string content

Param	Type	Description
lines	Array.<string>	an array of strings, each one will be mirrored around the separator on a new line
separator	string	the string to separate mirrored lines

---

./src/views/correctAnswer.js

correctAnswer()

returns text and a css class

---

./src/views/green.js

green()

returns a css class

---

./src/views/newArrayWithoutEmptyView.js

newArrayWithoutEmptyView(index, element) ⇒

returns a string and a css class

Returns: string

Param	Type	Description
index	string	string
element	string	string

---

./src/views/red.js

red()

returns a css class

TOP

---

---

./src/data.js

Constants

data

data that is saved and used between user interactionss

quizData

data

data that is saved and used between user interactionss

Properties

Name	Type	Description
separator	string	the full user artwork
lines	Array.<string>	all the lines that have been entered

quizData

---

./src/init.js

---

./src/review.js