96 lines
3.2 KiB
JavaScript
96 lines
3.2 KiB
JavaScript
/* -------------------------------------------------------------------------- */
|
|
/* 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 eplekake, eple, kake or n based on what n can be divided by */
|
|
const eplekakeCheck = (n) => {
|
|
/* if it's divisible by 15 (which is 3*5), it's also divisible by both 3 and 5 */
|
|
if (i % 15 == 0) return 'eplekake';
|
|
else if (i % 3 == 0) return 'eple';
|
|
else if (i % 5 == 0) return 'kake';
|
|
else return String(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);
|
|
}
|