NLWSetup - Documentation

Constructor

new NLWSetup(form)

Description:

You must build the HTML structure like this

<form>
  <div class="habits">
    <div class="habit" data-name="run">🏃🏽‍♂️</div>
    <div class="habit" data-name="water">💧</div>
    <div class="habit" data-name="food">🍎</div>
  </div>

  <div class="days"></div>
</form>

Example of usage

const form = document.querySelector('form')
const nlwSetup = new NLWSetup(form)

Source:

NLWSetup.js, line 5

Parameters:

Name	Type	Description
`form`	HTMLFormElement

Methods

addDay(date)

Description:

Add a day to registered days and render the layout after that

example of usage
```
nlwSetup.addDay('31/12')
```

Source:

NLWSetup.js, line 225

Parameters:

Name Type Description

Name	Type	Description
`date`	string	`DD/MM` `DD` day with 2 digits (01-31) `MM` month with 2 digits (01-12)

date

string

DD/MM

DD day with 2 digits (01-31)
MM month with 2 digits (01-12)

dayExists(date) → {boolean}

Description:

Check if day already exists in the set of days

example of usage
```
nlwSetup.dayExists('31/12') // true or false
```

Source:

NLWSetup.js, line 210

Parameters:

Name Type Description

Name	Type	Description
`date`	string	`DD/MM` `DD` day with 2 digits (01-31) `MM` month with 2 digits (01-12)

date

string

DD/MM

DD day with 2 digits (01-31)
MM month with 2 digits (01-12)

Returns:

Type: boolean

load()

Description:

It will load the internal data and render the layout

Source:

NLWSetup.js, line 71

renderLayout()

Description:

Will render the layout by checking the registered days of the habits data
Each day that was included in the habits data, will be checked in the input layout

The <div class="days"></div> container will be filled with html,
repeating the .day container for every day registered

example
```
 <div class="day">
     <div>01/01</div>
     <input type="checkbox" name="run" value="01/01"/>
     <input type="checkbox" name="water" value="01/01"/>
     <input type="checkbox" name="food" value="01/01"/>
 </div>
```

Source:

NLWSetup.js, line 105

setData(data)

Description:

The data to build the habits table

Example of usage

const data = { 
  run: ['01-01', '01-02', '01-06'], 
  water: ['01-04', '01-05'],
  food: ['01-01', '01-03'],
}

nlwSetup.setData(data)

Source:

NLWSetup.js, line 185

Parameters:

Name Type Description

Name	Type	Description
`data`	object	Object that contains the data composed by key: The habit name as the `data-name` of the `.habit` container value: `Array` of days to be checked as done Each day must be like the format `MM-DD` where `MM`: is the month and `DD`: is the day `{ run: ['01-01', '01-02', '01-06'] }`

data

object

Object that contains the data composed by

key: The habit name as the data-name of the .habit container
value: Array of days to be checked as done

Each day must be like the format MM-DD
where MM: is the month and DD: is the day

 { run: ['01-01', '01-02', '01-06'] }