JSFiddle - React, Tailwind, and code Playground

by ramsunvtech

HTML

<ul class="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" action="">
    <label>
        <input name="username" placeholder="Name" type="text" required>
    </label>
    <label>
        <input name="email" placeholder="Email" type="email" required>
    </label>
    <button>Submit</button>
</form>

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));

/**
 * Task 2: Could you find a way to optimize the following code?
 */
var list = document.querySelectorAll('.list li');
function logContent() {
    console.log(this.innerHTML);
}
for (var i = 0; i < list.length; i++) {
    list[i].addEventListener('click', logContent, 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
 */
var list2 = document.querySelectorAll('.list2 li');
for (var i = 0; i < list2.length; i++) {
    list2[i].addEventListener('click', function () {
    	console.log('My index:', i);
    }, false);
}

/**
 * Task 4: Explain why the logs happen in the following order:
 * one, three, two
 */
(function () {
    console.log('one');
    setTimeout(function() {
      console.log('two');
    }, 0);
    console.log('three');
})();

/**
 * Task 5: Explain how "this" works in this particular scenario 
 * (how iPad is logged, followed by iPhone)
 */
var product = 'iPhone';
var obj = {
   product: 'iMac',
   prop: {
      product: 'iPad',
      getProductName: function() {
         return this.product;
      }
   }
};
console.log(obj.prop.getProductName());
var test = obj.prop.getProductName;
console.log(test());

/**
 * Task 6: Return the file extension or false if no extension. Please
 * explain how would you implement unit test for this function. Show
 * all the test cases.
 */
function getFileExtension(file) {

}
console.log(getFileExtension('mozio.png'));

/**
 * Task 7:...