JSFiddle - React, Tailwind, and code Playground

by Plínio Naves

HTML

<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

<ul class="list2">
    <li>Text</li>
    <li>Text</li>
    <li>Text</li>
    <li>Text</li>
    <li>Text</li>
</ul>

<form name="myForm" novalidate>
    <label>
        <input name="username" placeholder="Name" type="text" required>
    </label>
    <label>
        <input name="email" placeholder="Email" type="email" required>
    </label>
    
     <label>
      <select required>
        <option value="">Select a value...</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
    </label>
    <label>
      <textarea required></textarea>
    </label>
    <label>
        <input name="notifications" type="checkbox" required>
        Receive notifications
    </label>
    <button type="submit">Submit</button>
</form>

CSS

.valid {
  border: 1px solid lightgreen;
}

.invalid {
  border: 1px solid lightcoral;
}

label {
  display: block;
}

JavaScript

/***********************************************\
 * Mozio JavaScript challenge
 * Browser support is irrelevant here, but any comments on specific
 * methods you use is a plus to show deeper understanding of the language
\***********************************************/



/**
 * Task 1: Write a function that repeats the String
 * with the following output:
 * 'Mozio'.repeatString(3); // 'MozioMozioMozio';
 */
//console.log('Mozio'.repeatString(3));
function repeat(word, amount) {
	// simple way
	// return word.repeat(amount);
  
  // can also be
  return Array(amount).fill(word).join('');
}
console.log(repeat('Mozio', 3));



/**
 * Task 2: Could you find a way to optimize the following code?
 */
 
/** 
 * Optmization made: attached only one listener and used 
 * id instead class, and call function only when necessary 
 * with the correct this arg via apply
 */
var list = document.querySelector('#list');
function logContent() {
    console.log(this.innerHTML);
}
list.addEventListener('click', function(e) {
	logContent.call(e.target);
}, false);



/**
 * Task 3: Inspect the output in the console from clicking an
 * item from ".list2", each index is the same
 * Explain why, and also fix the problem to log the correct index
 */
 
/**
 * This happens because of Closures concept in JavaScript, when one element of the list
 * is clicked, the function (closure) has access to outer scope, but "i" variable
 * already was iterated over 5 times in loop, then your value for all callback
 * on the event will be the same: last value received inside the block
 
 * To solve this, i made an IIFE que receives as argument the current value of i, 
 * and internally I used the value of that argument (called me index), so I got the
 * current value in the internal function that was returned to the event itself
 */

var list2 = document.querySelectorAll('.list2 li');
for (var i = 0; i < list2.length; i++) {
    list2[i].addEventListener('click', (function (index) {
    	return...