Funktiot, eventit, dom

//Tehtävät toimivat vain yksinään, sillä monessa on käytetty samoja nimeämisiä
//Funktiotehtävät
'use strict';
//Tehtävä 1
function muunnos() {
let gallons = +prompt('Anna bensamäärä gallonoina');
alert(gallons*3.785).toFixed(3)+' l';
}
muunnos();

//Tehtävä 2
function muunnos(gallons) {
    return (gallons*3.785).toFixed(3)+' l';
}
alert(muunnos(+prompt('Anna bensamäärä gallonoina')));

//Tehtävä 3
function itseisarvo(luku) {
    if(luku<0) {
        return luku*(-1);
    }
    return luku;
}
alert(itseisarvo(+prompt('Anna luku'))+' on luvun itseisarvo');

//Tehtävä 4
function suurin(a,b,c) {
    let suurinLuku = a;
    if(suurinLuku<b) {
        suurinLuku = b;
    }
    if(suurinLuku<c) {
        suurinLuku = c;
    }
    return suurinLuku;
}
let eka = +prompt('Syötä ensimmäinen luku');
let toka = +prompt('Syötä toinen luku');
let kolmas = +prompt('Syötä kolmas luku');
alert('Suurin luku on '+suurin(eka, toka, kolmas));

//Tehtävä 5
function liita(taulukko) {
    let sana = taulukko[0];
    for(let i=1;i<taulukko.length;i++) {
        sana +=taulukko[i];
    }
    return sana;
}
let lista= [];
for(let i=0;;i++) {
    let syote = prompt('Syötä merkkijonon osa (tyhjä pysäyttää)');
    if(syote===''){
        break;
    }
    lista[i] = syote;
}
alert(liita(lista));

//Tehtävä 6
function vastaluvuksi(taulukko) {
    for(let i=0;i<taulukko.length;i++) {
        taulukko[i]=taulukko[i]*(-1);
        console.log(taulukko[i]);
        return;
    }
}
let lista= [];
for(let i=0;;i++) {
    let syote = +prompt('Syötä luku (nolla pysäyttää)');
    if(syote===0){
        break;
    }
    lista[i] = syote;
}
vastaluvuksi(lista);

//Tehtävä 7
function parilliset(taulukko) {
    let uusiTaulukko = [];
    let x =0;
    for(let i=0; i<taulukko.length;i++) {
        if(taulukko[i]%2 === 0) {
            uusiTaulukko[x] = taulukko[i];
            x++;
        }
    }
    return uusiTaulukko;
}
let lista= [];
for(let i=0;;i++) {
    let syote = +prompt('Syötä luku (nolla pysäyttää)');
    if(syote===0){
        break;
    }
    lista[i] = syote;
}
console.log(parilliset(lista));

//Tehtävä 8
function fibbonacci(luku) {
    if(luku<=2 && luku>0) {
        return 1;
    } else if(luku===0){
        return 0;
    }
        return fibbonacci(luku-1)+fibbonacci(luku-2);
    }
}
document.write(fibbonacci(+prompt('Syötä luku')));

//Tehtävä 9
const fibb = (a) =>
{
    if(a>2)
        return fibb(a-1)+fibb(a-2);
     else if(a>0)
        return 1;
     else
        return 0;
}
console.log(fibb(+prompt("Syötä luku")));

//DOM-tehtävät

//Tehtävä 1
let tiedot = document.querySelectorAll('td');
tiedot[0].innerText = 'Pauli';
tiedot[1].innerText = 'Alasaari';
tiedot[2].innerText = 'Paultsa';
tiedot[3].innerText = 'Asdasd 00100 jokupaikka';
const tr = document.querySelectorAll('tr');
const puhelinnumero = document.createTextNode('Puhelinnumero');
const th = document.createElement('th');
tr[0].appendChild(th);
th.appendChild(puhelinnumero);
const td = document.createElement('td');
const tdNumero = document.createTextNode('012 345 6789');
tr[1].appendChild(td);
td.appendChild(tdNumero);
tiedot[2].remove();
document.querySelectorAll('th')[2].remove();

//Tehtävä 2
let kuvat = document.querySelectorAll('img');
kuvat[0].style.display = "block";
kuvat[1].classList = "visible";

/* CSS
.hidden {
    display: none;
}
.visible {
    display: block;
}
*/

//Tehtävä 3
const kuvat = [
  'http://placekitten.com/321/240',
  'http://placekitten.com/320/241',
  'http://placekitten.com/322/242',
  'http://placekitten.com/321/240',
  'http://placekitten.com/331/240',
];
let ul = document.querySelector('ul');
let str = "";
for(let i=0;i<kuvat.length;i++) {
  str += '<li><img src="' + kuvat[i] + '" alt="kuva"/></li>';
}
ul.innerHTML = str;

//Tehtävä 4
const kuvat = [
  'http://placekitten.com/321/240',
  'http://placekitten.com/320/241',
  'http://placekitten.com/322/242',
  'http://placekitten.com/321/240',
  'http://placekitten.com/331/240',
];
let ul = document.querySelector('ul');

for(let i=0; i<kuvat.length;i++) {
  let kuva = document.createElement('img');
  kuva.src = kuvat[i];
  kuva.alt = 'Kuva';
  let li = document.createElement('li');
  ul.appendChild(li);
  li.appendChild(kuva);
}

//Tehtävä 5 CSS
/*
ul {
    list-style-type: none;
}

li:nth-of-type(2n) {
    background: grey;
}
*/

//Tehtävä 6
function clock() {
var date = new Date();
var hour = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
var kello = document.querySelector('#kello');
if(hour<10) {
    hour = '0'+hour;
}
if(min<10) {
    min = '0'+min;
}
if(sec<10) {
    sec = '0' + sec;
}
    kello.innerHTML = hour + ':' + min + ':' + sec;
}
setInterval(clock, 1000);

//Event-tehtävät
//Tehtävä 1
const nappi = document.querySelector('button');
function popup() {
    alert('Nappia klikattu');
}
nappi.onclick = popup;

//Tehtävä 2
'use strict';
const img = document.querySelector('img');
function show() {
    const p = document.querySelector('p');
    p.style.display = 'block';
}
function hide() {
    const p = document.querySelector('p');
    p.style.display = 'none';
}
img.onmouseenter = show;
img.onmouseleave = hide;

//Tehtävä 3
'use strict';

const summa = document.querySelector('#sum');
const vahennys = document.querySelector('#sub');
const tulo = document.querySelector('#multi');
const jako = document.querySelector('#div');
const p = document.querySelector('#vastaus');

function sum(evt) {
    const eka = +document.querySelector('input[name=numero1]').value;
    const toka = +document.querySelector('input[name=numero2]').value;
    p.innerText = eka+toka;
}
function vah(evt) {
    const eka = +document.querySelector('input[name=numero1]').value;
    const toka = +document.querySelector('input[name=numero2]').value;
    p.innerText = eka-toka;
}
function tul(evt) {
    const eka = +document.querySelector('input[name=numero1]').value;
    const toka = +document.querySelector('input[name=numero2]').value;
    p.innerText = eka*toka;
}
function jak(evt) {
    const eka = +document.querySelector('input[name=numero1]').value;
    const toka = +document.querySelector('input[name=numero2]').value;
    p.innerText = eka/toka;
}
summa.onclick = sum;
vahennys.onclick = vah;
tulo.onclick = tul;
jako.onclick = jak;

//Tehtävä 4A
const pics = [
  {
    thumb: 'http://www.fillmurray.com/100/100',
    big: 'http://www.fillmurray.com/640/480',
  },
  {
    thumb: 'http://lorempixel.com/100/100/sports/1/',
    big: 'http://lorempixel.com//640/480/sports/1/',
  },
  {
    thumb: 'https://placeimg.com/100/100/tech',
    big: 'https://placeimg.com/640/480/tech',
  },
];
let isoKuva = document.getElementsByTagName('div')[0];
let ul = document.querySelector('ul');
let str = "";
for(let i=0;i<pics.length;i++) {
    str += '<li><img src="' + pics[i].thumb + '" alt="kuva"/></li>';
}
ul.innerHTML = str;
isoKuva.classList.add('visible');
let listanjasenet = document.getElementsByTagName('li');

for(let i=0;i<listanjasenet.length;i++) {
    listanjasenet[i].addEventListener('click', e => {
    let div = document.querySelector('div');
    div.innerHTML = '<img src="'+pics[i].big+'" alt=kuva/>';
    isoKuva.classList = 'visible';
  });
}


isoKuva.addEventListener('click', e => {
  isoKuva.classList = 'hidden';
});

//Tehtävä 4B
const pics = [
  {
    thumb: 'http://www.fillmurray.com/100/100',
    big: 'http://www.fillmurray.com/640/480',
  },
  {
    thumb: 'http://lorempixel.com/100/100/sports/1/',
    big: 'http://lorempixel.com//640/480/sports/1/',
  },
  {
    thumb: 'https://placeimg.com/100/100/tech',
    big: 'https://placeimg.com/640/480/tech',
  },
];
let isoKuva = document.getElementsByTagName('div')[0];
let ul = document.querySelector('ul');
for(let i=0;i<pics.length;i++) {
  let li = document.createElement('li');
  let img = document.createElement('img');
  img.src = pics[i].thumb;
  img.alt = 'thumbnail';
  li.appendChild(img);
  ul.appendChild(li);
}
isoKuva.classList.add('visible');
let listanjasenet = document.getElementsByTagName('li');

for(let i=0;i<listanjasenet.length;i++) {
  listanjasenet[i].addEventListener('click', e => {
    isoKuva.innerHTML="";
    let img = document.createElement('img');
    img.src = pics[i].big;
    img.alt = 'picture';
    isoKuva.appendChild(img);
    isoKuva.classList = 'visible';
  });
}
  isoKuva.addEventListener('click', e => {
      isoKuva.classList = 'hidden';
  });

/* Teht 4 CSS
ul {
            list-style-type: none;
        }
        .hidden {
            display: none;
        }
        .visible {
            display: block;
        }
*/