/* -------------------------------------------------------------------------- */
/*                                   Part 2                                   */
/* -------------------------------------------------------------------------- */

console.log('PART 2')

/* Log i from 1 until i is no longer less than or equal to 20 */
for (i=1; i<=20; i++) {
  console.log(i);
}

/* -------------------------------------------------------------------------- */
/*                                   Part 3                                   */
/* -------------------------------------------------------------------------- */

console.log('PART 3')

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]

/* A function that returns eple and/or kake if it's divisible by 3 or 5, but defaults
*  to n if it's not (an empty string combined with || will return the latter element)
*/
const eplekakeCheck = (n) => (n % 3 ? '' : 'eple') + (n % 5 ? '' : 'kake') || n;

/* Print the output of eplekakeCheck for each element in numbers */
for (i of numbers) {
  console.log(eplekakeCheck(i));
}

/* -------------------------------------------------------------------------- */
/*                                   Part 4                                   */
/* -------------------------------------------------------------------------- */

/* Store the DOM node as a variable and change its innerText */
const title = document.getElementById("title");
title.innerText = 'Hello JavaScript';

/* -------------------------------------------------------------------------- */
/*                                   Part 5                                   */
/* -------------------------------------------------------------------------- */

const magicBox = document.getElementById('magic');

function changeDisplay () {
  magicBox.style.display = 'none'
}

function changeVisibility () {
  magicBox.style.display = 'block'
  magicBox.style.visibility = 'hidden'  
}

function reset () {
  magicBox.style.display = 'block'
  magicBox.style.visibility = 'visible'
}

/* Connect each button to their respective function */
document.getElementById('displayButton').addEventListener('click', changeDisplay);
document.getElementById('visibilityButton').addEventListener('click', changeVisibility);
document.getElementById('resetButton').addEventListener('click', reset);

/* -------------------------------------------------------------------------- */
/*                                   Part 6                                   */
/* -------------------------------------------------------------------------- */

const technologies = [
    'HTML5',
    'CSS3',
    'JavaScript',
    'Python',
    'Java',
    'AJAX',
    'JSON',
    'React',
    'Angular',
    'Bootstrap',
    'Node.js'
];

const technologyList = document.getElementById("tech");

/* 
  for each technology, create an HTML element, add the technology as innertext and append
  the element as a child of the list
*/
for (technology of technologies) {
  const listElement = document.createElement('li');
  listElement.innerText = technology;
  technologyList.appendChild(listElement);
}