diff --git a/Web-tekniikan-repo/20211108/code.js b/Web-tekniikan-repo/20211108/code.js new file mode 100644 index 0000000..b08217a --- /dev/null +++ b/Web-tekniikan-repo/20211108/code.js @@ -0,0 +1,10 @@ +let button = document.querySelector("button"); + +button.addEventListener("click", buttonClicked); + +function buttonClicked(e) { + e.preventDefault(); + let elem = document.createElement("p"); + elem.textContent = "Uusi elementti"; + document.querySelector("body").appendChild(elem); +} diff --git a/Web-tekniikan-repo/20211108/code1.js b/Web-tekniikan-repo/20211108/code1.js new file mode 100644 index 0000000..b08217a --- /dev/null +++ b/Web-tekniikan-repo/20211108/code1.js @@ -0,0 +1,10 @@ +let button = document.querySelector("button"); + +button.addEventListener("click", buttonClicked); + +function buttonClicked(e) { + e.preventDefault(); + let elem = document.createElement("p"); + elem.textContent = "Uusi elementti"; + document.querySelector("body").appendChild(elem); +} diff --git a/Web-tekniikan-repo/20211108/domManipulation2.html b/Web-tekniikan-repo/20211108/domManipulation2.html new file mode 100644 index 0000000..c1d4b19 --- /dev/null +++ b/Web-tekniikan-repo/20211108/domManipulation2.html @@ -0,0 +1,35 @@ + + + + + + + Document + + + +

Node manipulation

+
+
+

...and that's the end of story.

+

...ther were three code slaves...

+

Once upon a time....

+
+
+

Red

+
+
+

Blue

+
+
+

Green

+
+ + + +
Last nameFirst name
+
+ + diff --git a/Web-tekniikan-repo/20211108/index.html b/Web-tekniikan-repo/20211108/index.html new file mode 100644 index 0000000..61af758 --- /dev/null +++ b/Web-tekniikan-repo/20211108/index.html @@ -0,0 +1,16 @@ + + + + + + + + Document + + + +
+ +
+ + diff --git a/Web-tekniikan-repo/20211108/mission2.js b/Web-tekniikan-repo/20211108/mission2.js new file mode 100644 index 0000000..ea4e6f5 --- /dev/null +++ b/Web-tekniikan-repo/20211108/mission2.js @@ -0,0 +1,69 @@ +//A +let h2 = document.querySelector("h2"); +h2.textContent = "Let's manipulate some DOM again"; + +//b +let hr = document.createElement("hr"); +h2.parentElement.insertBefore(hr, h2); + +//C +let article = document.querySelector("article"); +let p1 = article.firstElementChild; + +let p2 = article.lastElementChild; +let temp = p1.textContent; +p1.textContent = p2.textContent; +p2.textContent = temp; + +//D + +let content = document.getElementById("content"); +let ul = document.createElement("ul"); +content.appendChild(ul); + +for (let i = 1; i < 6; i++) { + let li = document.createElement("li"); + li.textContent = "Number " + i; + ul.appendChild(li); +} + +//E + +let table = document.createElement("table"); + +let rows = [document.createElement("tr"), document.createElement("tr")]; +let ths = [document.createElement("th"), document.createElement("th")]; +let tds = [document.createElement("td"), document.createElement("td")]; + +ths[0].textContent = "First name"; +ths[1].textContent = "Last name"; + +tds[0].textContent = "John"; +tds[1].textContent = "Doe"; + +rows[0].append(ths[0], ths[1]); +rows[0].append(tds[0], tds[1]); + +table.append(rows[0], rows[1]); +table.append(rows[0], rows[1]); + +document.getElementById("content").appendChild(table); + +//F +//Valitsee kaikki contentit suorat lapset +let elems = document.querySelectorAll("#content>*"); + +for (const e of elems) { + let hr = document.createElement("hr"); + e.parentElement.insertBefore(hr, e); +} + +//G +elems = document.querySelectorAll("div>p:first-child"); + +for (const e of elems) { + let span = document.createElement("span"); + span.textContent = "***"; + + e.parentElement.insertBefore(hr, e); +} diff --git a/Web-tekniikan-repo/20211108/style.css b/Web-tekniikan-repo/20211108/style.css new file mode 100644 index 0000000..9484be4 --- /dev/null +++ b/Web-tekniikan-repo/20211108/style.css @@ -0,0 +1,2 @@ +.vivid { +} diff --git a/Web-tekniikan-repo/20211115/missions/button.html b/Web-tekniikan-repo/20211115/missions/button.html new file mode 100644 index 0000000..d30d90b --- /dev/null +++ b/Web-tekniikan-repo/20211115/missions/button.html @@ -0,0 +1,15 @@ + + + + + + + Document + + + + + + + + diff --git a/Web-tekniikan-repo/20211115/missions/buttonjs.js b/Web-tekniikan-repo/20211115/missions/buttonjs.js new file mode 100644 index 0000000..8a3a275 --- /dev/null +++ b/Web-tekniikan-repo/20211115/missions/buttonjs.js @@ -0,0 +1,9 @@ +document.querySelector("button").addEventListener("click", ok); + +let check = document.querySelector("input"); + +function ok() { + if (check.checked) { + console.log("valittu"); + } +} diff --git "a/Web-tekniikan-repo/20211115/missions/stylev\303\244ri.css" "b/Web-tekniikan-repo/20211115/missions/stylev\303\244ri.css" new file mode 100644 index 0000000..0e98cf3 --- /dev/null +++ "b/Web-tekniikan-repo/20211115/missions/stylev\303\244ri.css" @@ -0,0 +1,8 @@ +.colored { + background-color: burlywood; +} + +.important { + font-weight: bold; + color: red; +} diff --git "a/Web-tekniikan-repo/20211115/missions/teht\303\244v\303\2443color.js" "b/Web-tekniikan-repo/20211115/missions/teht\303\244v\303\2443color.js" new file mode 100644 index 0000000..e38f38c --- /dev/null +++ "b/Web-tekniikan-repo/20211115/missions/teht\303\244v\303\2443color.js" @@ -0,0 +1,18 @@ +let p = document.querySelector("p"); +document.querySelector("button").addEventListener("click", buttonClick); + +function buttonClick() { + p.classList.toggle("colored"); +} + +function buttonClick2U() { + p.style.backgroundColor = input.value; +} + +let items = document.querySelectorAll("li"); + +for (const i in items) { + if (i.textContent.includes("important")) { + i.classList.add("important"); + } +} diff --git "a/Web-tekniikan-repo/20211115/missions/teht\303\244v\303\2443v\303\244ri1.html" "b/Web-tekniikan-repo/20211115/missions/teht\303\244v\303\2443v\303\244ri1.html" new file mode 100644 index 0000000..dd9ca8e --- /dev/null +++ "b/Web-tekniikan-repo/20211115/missions/teht\303\244v\303\2443v\303\244ri1.html" @@ -0,0 +1,18 @@ + + + + + + + Document + + + +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, + delectus inventore sint consequuntur quod magnam sit. Eaque + reiciendis adipisci dolorum a repudiandae sint dicta maxime iure! + Necessitatibus reiciendis fuga laborum? +

+ + diff --git a/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/BETASIVU/images/LIITU2999.png b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/BETASIVU/images/LIITU2999.png new file mode 100644 index 0000000..3470716 Binary files /dev/null and b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/BETASIVU/images/LIITU2999.png differ diff --git a/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/BETASIVU/images/Maantietokys1.jpg b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/BETASIVU/images/Maantietokys1.jpg new file mode 100644 index 0000000..d823a59 Binary files /dev/null and b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/BETASIVU/images/Maantietokys1.jpg differ diff --git a/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/BETASIVU/images/Maantietokys2.jpg b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/BETASIVU/images/Maantietokys2.jpg new file mode 100644 index 0000000..e38d1fa Binary files /dev/null and b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/BETASIVU/images/Maantietokys2.jpg differ diff --git a/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/BETASIVU/images/Maantietokys3.png b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/BETASIVU/images/Maantietokys3.png new file mode 100644 index 0000000..8f278ee Binary files /dev/null and b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/BETASIVU/images/Maantietokys3.png differ diff --git a/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/BETASIVU/images/Maantietokys4.webp b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/BETASIVU/images/Maantietokys4.webp new file mode 100644 index 0000000..b18049f Binary files /dev/null and b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/BETASIVU/images/Maantietokys4.webp differ diff --git a/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/BETASIVU/images/Maantietokys5.webp b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/BETASIVU/images/Maantietokys5.webp new file mode 100644 index 0000000..5903992 Binary files /dev/null and b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/BETASIVU/images/Maantietokys5.webp differ diff --git a/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/BETASIVU/images/Puu2.png b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/BETASIVU/images/Puu2.png new file mode 100644 index 0000000..af54485 Binary files /dev/null and b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/BETASIVU/images/Puu2.png differ diff --git a/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/BETASIVU/images/Tabicon.png b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/BETASIVU/images/Tabicon.png new file mode 100644 index 0000000..4eb668f Binary files /dev/null and b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/BETASIVU/images/Tabicon.png differ diff --git a/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/BETASIVU/images/Tausta2.jpg b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/BETASIVU/images/Tausta2.jpg new file mode 100644 index 0000000..f83d92a Binary files /dev/null and b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/BETASIVU/images/Tausta2.jpg differ diff --git a/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/BETASIVU/indexbeta.html b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/BETASIVU/indexbeta.html new file mode 100644 index 0000000..d44b9a2 --- /dev/null +++ b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/BETASIVU/indexbeta.html @@ -0,0 +1,81 @@ + + + + + + + + + + + Hello, world! +<<<<<<< Updated upstream +======= + +>>>>>>> Stashed changes + + + + +

TULE TESTAAMAAN TAITOSI AEVAN MAHOTTOMAN HULLUNKURISISSA VISOISSA

+ + + +
+
+

MAANTIETO

+

MATIKKA

+
+
+

PASKA

+

KUSI

+
+
+ + + + + + + + + + + \ No newline at end of file diff --git a/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/BETASIVU/style.css b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/BETASIVU/style.css new file mode 100644 index 0000000..6871eb0 --- /dev/null +++ b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/BETASIVU/style.css @@ -0,0 +1,89 @@ +body { + background: url('images/Liitutaulu29.jpg') no-repeat center fixed; + background-size: 100% 100%; +} +nav { + background: url("images/PUUKUVA.jpg") fixed; + background-size: 100% 100%; + height: 50px; + border: 3px solid #341A06; +} +a { + color: white; +} +.nav-link { + color: white; + transition: color white; +} +a:hover { + color: white; +} +#footer { + position:absolute; + bottom:0; + width:100%; + height: 50px; + background: url("images/PUUKUVA.jpg") fixed; + background-size: 100% 100%; + border: 3px solid #341A06; + } + body { + margin:0; + padding:0; + height:100%; + } + .navbar-brand { + font-family: fantasy; + font-size: 1.9em; + } + .row { + background-color: transparent; + } + .col-3 { + height: 300px; + margin-right: 100px; + + border: 5px solid #341A06; + border-radius: 10px; + } +#yksi { +background-image: url("images/TELLUS.webp"); +background-repeat: no-repeat; +background-size: 100% 100%; +} +.container { + margin-left: 600px; + margin-top: 30px; +} +*[id^="alempi"] { + margin-top: 50px; + background-image: url(); +} +#kaksi { + background-image: url("images/MATIKKA.webp"); + background-repeat: no-repeat; + background-size: 100% 100%; +} +#alempiCol3 { + background-image: url("images/PASKA.webp"); + background-repeat: no-repeat; + background-size: 100% 100% +} +#alempiCol4 { + background-image: url("images/TIMPPARILLAATAAS.webp"); + background-repeat: no-repeat; + background-size: 100% 100% +} +h1 { + text-align: center; + margin-top: 30px; + font-family:Ink Free; + font-weight: bold; + color: white; +} +h1:hover { + + cursor: url("images/LIITU2999.png"), default; + + +} \ No newline at end of file diff --git a/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/README.md b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/README.md new file mode 100644 index 0000000..5ac7467 --- /dev/null +++ b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/README.md @@ -0,0 +1 @@ +# AlaAsteSivu \ No newline at end of file diff --git a/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/aapo.css b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/aapo.css new file mode 100644 index 0000000..8d8a481 --- /dev/null +++ b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/aapo.css @@ -0,0 +1,67 @@ +footer { + bottom: 0px; + position: relative; +} +.container { + margin-top: 10%; + margin-bottom: 10%; + border-left: 10px solid #341a06; + border-right: 10px solid #341a06; +} +.row { + margin-bottom: 5em; + justify-content: center; +} + +p { + font-family: ink free; + font-size: 2em; + color: white; + font-weight: bold; +} + +.col-12 { + width: 17em; +} + +label { + font-family: ink free; + font-size: 1.5em; + font-weight: bolder; +} + +#tarkista, +#uudestaan { + border-radius: 7px; + padding: 10px 24px; + font-size: 1.5em; + background-image: url("BETASIVU/images/Puu2.png"); + color: white; + border: 3px solid black; + font-family: ink free; + font-weight: bolder; + cursor: url("BETASIVU/images/LIITU2999.png"), default; +} +#uudestaan, +#oikeintext { + visibility: hidden; +} + +.form-check-input { + cursor: url("BETASIVU/images/LIITU2999.png"), default; + width: 2em; + height: 2em; +} +.coloroikein { + color: chartreuse; +} + +.colorvaarin { + color: red; +} +#tehkuva { + width: 15em; + height: 15em; + border: 1px solid black; + box-shadow: 5px 5px 5px black; +} diff --git a/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/aapo.js b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/aapo.js new file mode 100644 index 0000000..e3c653f --- /dev/null +++ b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/aapo.js @@ -0,0 +1,87 @@ +document.querySelector("#tarkista").addEventListener("click", tarkista); + +function tarkista() { + //Tulokset ja "Ota testi uudestaan"-button esiin + laskuri + uudestaan.style.visibility = "visible"; + oikeintext.style.visibility = "visible"; + let oikein = 0; + // + + //Tehtävä 1 tarkistus + let teh1 = document.querySelector("input[name = teh1]:checked"); + + if (teh1.value == "7") { + oikein++; + document.getElementById("7").classList.toggle("coloroikein"); + } + if (teh1.value == "9") { + document.getElementById("9").classList.toggle("colorvaarin"); + } + if (teh1.value == "11") { + document.getElementById("11").classList.toggle("colorvaarin"); + } + // + + //Tehtävä 2 tarkistus + let teh2 = document.querySelector("input[name = teh2]:checked"); + + if (teh2.value == "tanska") { + document.getElementById("tanska").classList.toggle("colorvaarin"); + } + if (teh2.value == "kreikka") { + document.getElementById("kreikka").classList.toggle("colorvaarin"); + } + if (teh2.value == "iso-britannia") { + oikein++; + document.getElementById("iso-britannia").classList.toggle("coloroikein"); + } + // + + //Tehtävä 3 tarkistus + let teh3 = document.querySelector("input[name = teh3]:checked"); + + if (teh3.value == "kiina") { + document.getElementById("kiina").classList.toggle("coloroikein"); + oikein++; + } + if (teh3.value == "intia") { + document.getElementById("intia").classList.toggle("colorvaarin"); + } + if (teh3.value == "brasilia") { + oikein++; + document.getElementById("brasilia").classList.toggle("colorvaarin"); + } + // + + //Tehtävä 4 tarkistus + let teh4 = document.querySelector("input[name = teh4]:checked"); + + if (teh4.value == "indonesia") { + document.getElementById("indonesia").classList.toggle("colorvaarin"); + } + if (teh4.value == "puola") { + document.getElementById("puola").classList.toggle("coloroikein"); + oikein++; + } + if (teh4.value == "kanada") { + document.getElementById("kanada").classList.toggle("colorvaarin"); + } + // + + //Tehtävä 5 tarkistus + let teh5 = document.querySelector("input[name = teh5]:checked"); + + if (teh5.value == "venäjä") { + document.getElementById("venäjä").classList.toggle("coloroikein"); + oikein++; + } + if (teh5.value == "yhdysvallat") { + document.getElementById("yhdysvallat").classList.toggle("colorvaarin"); + } + if (teh5.value == "australia") { + document.getElementById("australia").classList.toggle("colorvaarin"); + } + // + + document.getElementById("oikein").innerHTML = oikein; +} diff --git a/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/aapokiviniemi.html b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/aapokiviniemi.html new file mode 100644 index 0000000..710b845 --- /dev/null +++ b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/aapokiviniemi.html @@ -0,0 +1,327 @@ + + + + + + + + + + + + Maantieto + + + +
+
+
+

MAANTIETO

+
+
+
+
+
+
+ +

1.Montako maanosaa on yhteensä?

+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+ +

2.Mikä maa kuvassa?

+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+
+ +

3.Missä maailman maassa asuu eniten ihmisiä?

+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+
+ +

4.Minkä maan lippu kuvassa?

+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+
+ +

5.Mikä maa on pinta-alaltaan maailman suurin?

+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+ +
+
+ +
+
+

/5 OIKEIN

+
+
+ +
+
+ +
+
+
+ + + + + + diff --git a/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/atte.css b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/atte.css new file mode 100644 index 0000000..df3c716 --- /dev/null +++ b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/atte.css @@ -0,0 +1,25 @@ +*[id^="lask"] +{ + background-color: white; + margin-top: 3em; + padding: 2em; + border-radius: 5px; + height: 75%; + font-size: larger; +} + +#laatikko{ + padding: 1em; +} + +footer{ + bottom: 0px; + margin-top: 3em; + position: relative; +} + +#tuloslaatikko{ + float: right; + font-size: larger; + margin-right: 2em; +} diff --git a/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/atteScript.js b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/atteScript.js new file mode 100644 index 0000000..bcb290a --- /dev/null +++ b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/atteScript.js @@ -0,0 +1,367 @@ + + + +function random(min, max){ + return Math.floor(Math.random() * (max - min + 1) ) + min; +} + +//let joku = document.querySelector("input[name = teh1]:checked") + + +oikein = 0; + +//***************************** */ + +document.getElementById("tulos").innerHTML = oikein + "/5"; + +function teht1(){ + + let num1 = random(1, 10); + let num2 = random(1, 10); + + let paikka = random(1, 3); + chosen1 = paikka.toString(); + + document.getElementById("teht1").innerHTML = num1 + " + " + num2; + + let ran1 = num1 + num2 - random(1, 10); + let ran2 = num1 + num2 + random(1, 10); + let ran3 = num1 + num2 - random(1, 10); + let oike = num1 + num2; + + document.getElementById("1").innerHTML = ran1; + document.getElementById("2").innerHTML = ran2; + document.getElementById("3").innerHTML = ran3; + + document.getElementById(chosen1).innerHTML = oike; + + document.getElementById("ra1").value = ran1; + document.getElementById("ra2").value = ran2; + document.getElementById("ra3").value = ran3; + + vas = "ra"+ chosen1; + + document.getElementById(vas).value = oike; + + +} + +function tark1(){ + + if(document.getElementById(vas).checked){ + document.getElementById("lasku1").style.backgroundColor = "green"; + document.getElementById("laske1").style.backgroundColor = "green"; + oikein++; + + document.getElementById("ra1").disabled = true; + document.getElementById("ra2").disabled = true; + document.getElementById("ra3").disabled = true; + + document.getElementById("tulos").innerHTML = oikein + "/5"; + + } + else{ + document.getElementById("lasku1").style.backgroundColor = "red"; + document.getElementById("laske1").style.backgroundColor = "red"; + + document.getElementById("ra1").disabled = true; + document.getElementById("ra2").disabled = true; + document.getElementById("ra3").disabled = true; + } +} + +teht1(); + +/****************************** */ + + + +function teht2(){ + + let num1 = random(1, 20); + let num2 = random(1, 20); + + let paikka = random(4, 6); + chosen2 = paikka.toString(); + + document.getElementById("teht2").innerHTML = num1 + " + " + num2; + + let ran1 = num1 + num2 - random(1, 10); + let ran2 = num1 + num2 + random(1, 10); + let ran3 = num1 + num2 - random(1, 10); + let oike = num1 + num2; + + document.getElementById("4").innerHTML = ran1; + document.getElementById("5").innerHTML = ran2; + document.getElementById("6").innerHTML = ran3; + + document.getElementById(chosen2).innerHTML = oike; + + document.getElementById("ra4").value = ran1; + document.getElementById("ra5").value = ran2; + document.getElementById("ra6").value = ran3; + + vas1 = "ra"+ chosen2; + + document.getElementById(vas1).value = oike; + + +} + +function tark2(){ + + if(document.getElementById(vas1).checked){ + document.getElementById("lasku2").style.backgroundColor = "green"; + document.getElementById("laske2").style.backgroundColor = "green"; + oikein++; + + document.getElementById("ra4").disabled = true; + document.getElementById("ra5").disabled = true; + document.getElementById("ra6").disabled = true; + + document.getElementById("tulos").innerHTML = oikein + "/5"; + + } + else{ + document.getElementById("lasku2").style.backgroundColor = "red"; + document.getElementById("laske2").style.backgroundColor = "red"; + + document.getElementById("ra4").disabled = true; + document.getElementById("ra5").disabled = true; + document.getElementById("ra6").disabled = true; + } +} + +teht2(); + +/****************************** */ + +function teht3(){ + + let num1 = random(1, 30); + let num2 = random(1, 30); + + let paikka = random(7, 9); + chosen3 = paikka.toString(); + + document.getElementById("teht3").innerHTML = num1 + " + " + num2; + + let ran1 = num1 + num2 - random(1, 10); + let ran2 = num1 + num2 + random(1, 10); + let ran3 = num1 + num2 - random(1, 10); + let oike = num1 + num2; + + document.getElementById("7").innerHTML = ran1; + document.getElementById("8").innerHTML = ran2; + document.getElementById("9").innerHTML = ran3; + + document.getElementById(chosen3).innerHTML = oike; + + document.getElementById("ra7").value = ran1; + document.getElementById("ra8").value = ran2; + document.getElementById("ra9").value = ran3; + + vas2 = "ra"+ chosen3; + + document.getElementById(vas2).value = oike; + + +} + +function tark3(){ + + + if(document.getElementById(vas2).checked){ + document.getElementById("lasku3").style.backgroundColor = "green"; + document.getElementById("laske3").style.backgroundColor = "green"; + oikein++; + + document.getElementById("ra7").disabled = true; + document.getElementById("ra8").disabled = true; + document.getElementById("ra9").disabled = true; + + document.getElementById("tulos").innerHTML = oikein + "/5"; + } + else + { + document.getElementById("lasku3").style.backgroundColor = "red"; + document.getElementById("laske3").style.backgroundColor = "red"; + + document.getElementById("ra7").disabled = true; + document.getElementById("ra8").disabled = true; + document.getElementById("ra9").disabled = true; + } +} + +teht3(); + +/****************************** */ + +function teht4(){ + + let num1 = random(4, 30); + let num2 = random(6, 30); + + let paikka = random(10, 12); + chosen4 = paikka.toString(); + + document.getElementById("teht4").innerHTML = num1 + " + " + num2; + + let ran1 = num1 + num2 - random(1, 10); + let ran2 = num1 + num2 + random(1, 10); + let ran3 = num1 + num2 - random(1, 10); + let oike = num1 + num2; + + document.getElementById("10").innerHTML = ran1; + document.getElementById("11").innerHTML = ran2; + document.getElementById("12").innerHTML = ran3; + + document.getElementById(chosen4).innerHTML = oike; + + document.getElementById("ra10").value = ran1; + document.getElementById("ra11").value = ran2; + document.getElementById("ra12").value = ran3; + + vas3 = "ra"+ chosen4; + + document.getElementById(vas3).value = oike; + + +} + +function tark4(){ + + + if(document.getElementById(vas3).checked){ + document.getElementById("lasku4").style.backgroundColor = "green"; + document.getElementById("laske4").style.backgroundColor = "green"; + oikein++; + + document.getElementById("ra10").disabled = true; + document.getElementById("ra11").disabled = true; + document.getElementById("ra12").disabled = true; + + document.getElementById("tulos").innerHTML = oikein + "/5"; + + } + else + { + document.getElementById("lasku4").style.backgroundColor = "red"; + document.getElementById("laske4").style.backgroundColor = "red"; + + document.getElementById("ra10").disabled = true; + document.getElementById("ra11").disabled = true; + document.getElementById("ra12").disabled = true; + } +} + +teht4(); + + +/****************************** */ + +function teht5(){ + + let num1 = random(6, 33); + let num2 = random(2, 38); + + let paikka = random(13, 15); + chosen5 = paikka.toString(); + + document.getElementById("teht5").innerHTML = num1 + " + " + num2; + + let ran1 = num1 + num2 - random(3, 14); + let ran2 = num1 + num2 + random(6, 12); + let ran3 = num1 + num2 - random(3, 22); + let oike = num1 + num2; + + document.getElementById("13").innerHTML = ran1; + document.getElementById("14").innerHTML = ran2; + document.getElementById("15").innerHTML = ran3; + + document.getElementById(chosen5).innerHTML = oike; + + document.getElementById("ra13").value = ran1; + document.getElementById("ra14").value = ran2; + document.getElementById("ra15").value = ran3; + + vas4 = "ra"+ chosen5; + + document.getElementById(vas4).value = oike; + + +} + +function tark5(){ + + + if(document.getElementById(vas4).checked){ + document.getElementById("lasku5").style.backgroundColor = "green"; + document.getElementById("laske5").style.backgroundColor = "green"; + oikein++; + + document.getElementById("ra13").disabled = true; + document.getElementById("ra14").disabled = true; + document.getElementById("ra15").disabled = true; + + document.getElementById("tulos").innerHTML = oikein + "/5"; + + } + else + { + document.getElementById("lasku5").style.backgroundColor = "red"; + document.getElementById("laske5").style.backgroundColor = "red"; + + document.getElementById("ra13").disabled = true; + document.getElementById("ra14").disabled = true; + document.getElementById("ra15").disabled = true; + } +} + +teht5(); + +function reset() { + teht1(); + teht2(); + teht3(); + teht4(); + teht5(); + + document.getElementById("lasku1").style.backgroundColor = "white"; + document.getElementById("laske1").style.backgroundColor = "white"; + + document.getElementById("ra1").disabled = false; + document.getElementById("ra2").disabled = false; + document.getElementById("ra3").disabled = false; + /************* */ + document.getElementById("lasku2").style.backgroundColor = "white"; + document.getElementById("laske2").style.backgroundColor = "white"; + + document.getElementById("ra4").disabled = false; + document.getElementById("ra5").disabled = false; + document.getElementById("ra6").disabled = false; + /************* */ + document.getElementById("lasku3").style.backgroundColor = "white"; + document.getElementById("laske3").style.backgroundColor = "white"; + + document.getElementById("ra7").disabled = false; + document.getElementById("ra8").disabled = false; + document.getElementById("ra9").disabled = false; + /************* */ + document.getElementById("lasku4").style.backgroundColor = "white"; + document.getElementById("laske4").style.backgroundColor = "white"; + + document.getElementById("ra10").disabled = false; + document.getElementById("ra11").disabled = false; + document.getElementById("ra12").disabled = false; + /************* */ + document.getElementById("lasku5").style.backgroundColor = "white"; + document.getElementById("laske5").style.backgroundColor = "white"; + + document.getElementById("ra13").disabled = false; + document.getElementById("ra14").disabled = false; + document.getElementById("ra15").disabled = false; + + oikein = 0; + document.getElementById("tulos").innerHTML = oikein + "/5"; + } \ No newline at end of file diff --git a/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/attetaajoranta.html b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/attetaajoranta.html new file mode 100644 index 0000000..74d310d --- /dev/null +++ b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/attetaajoranta.html @@ -0,0 +1,413 @@ + + + + + + + + + + + Matikka + + + +
+
+
+

Matikka

+
+
+
+ +
+
+
+
+

Tehtävä 1

+

+
+
+
+
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
+
+ +
+
+
+
+

Tehtävä 2

+

+
+
+
+
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
+
+ +
+
+
+
+

Tehtävä 3

+

+
+
+
+
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
+
+ +
+
+
+
+

Tehtävä 4

+

+
+
+
+
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
+
+ +
+
+
+
+

Tehtävä 5

+

+
+
+
+
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
+
+ +
+ + +

+
+ + + + + + + diff --git a/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/essa.css b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/essa.css new file mode 100644 index 0000000..8ecd5ba --- /dev/null +++ b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/essa.css @@ -0,0 +1,114 @@ +#suomivisa { + margin-top: 4em; + background-image: url("videot/finlandia.webp"); + background-size: cover; + color: white; + border-radius: 10px; + font-family: Ink Free; + font-weight: bold; + cursor: url("BETASIVU/images/LIITU2999.png"), default; +} +h3 { + color: #002F6C; + font-weight: bold; + margin-left: 1em; +} +label.radio { + cursor: pointer +} +label.radio input { + position: absolute; + top: 0; + left: 0; + visibility: hidden; + pointer-events: none; +} +label.radio span { + padding: 6px 6px; + border: 2px solid #002F6C; + display: inline-block; + color: #002F6C; + text-align: center; + border-radius: 10px; + margin-top: 7px; + margin-left: 1em; +} +label.radio input:checked+span { + border-color: #002F6C; + background-color: #002F6C; + color: white; +} +#answer { + color: #002F6C; + margin-bottom: 1em; + margin-left: 1.5em; +} +.question { + width: inherit; +} +.question, button, .d-flex { + border-radius: 10px; + display: inline-block; + align-items: center; +} +.question, .d-flex { + margin-top: 1em; +} +.btn:hover { + background-color: #002F6C; + border: 1px solid #002F6C +} +.btn:focus { + outline: 0; + box-shadow: none; +} +.btn:active { + outline: 0; + box-shadow: none +} +#again { + border-radius: 5px; + background-color: #002F6C; + visibility: hidden; + color: white +} +#checkResults { + border-radius: 5px; + background-color: #002F6C; + color: white; +} +.colorRight { + color: green; +} +.colorWrong { + color: red; +} +footer { + position: relative; + bottom: 0px; + left: 0px; + margin-top: 1em; +} + +@media (min-height: 749px) { + footer { + position: fixed; + } +} + +@media(max-width: 411px) { + footer{ + position: relative; + } +} + +@media(max-width:576px) { + .question { + width: 100%; + word-spacing: 2px + } + .answer { + margin-left: 1em; + } + +} \ No newline at end of file diff --git a/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/essa.js b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/essa.js new file mode 100644 index 0000000..28ae27c --- /dev/null +++ b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/essa.js @@ -0,0 +1,66 @@ +document.querySelector("#checkResults").addEventListener("click", check); + +function check() { + + again.style.visibility = "visible"; + + let question1 = document.querySelector('input[name = question1]:checked'); + + if (question1.value == "manna") { + document.getElementById("manna").classList.toggle("colorWrong") + } + if (question1.value == "sanna") { + document.getElementById("sanna").classList.toggle("colorRight") + } + if (question1.value == "anna") { + document.getElementById("anna").classList.toggle("colorWrong") + } + + let question2 = document.querySelector('input[name = question2]:checked'); + + if (question2.value == "kotka") { + document.getElementById("kotka").classList.toggle("colorWrong") + } + if (question2.value == "lokki") { + document.getElementById("lokki").classList.toggle("colorWrong") + } + if (question2.value == "joutsen") { + document.getElementById("joutsen").classList.toggle("colorRight") + } + + let question3 = document.querySelector('input[name = question3]:checked'); + + if (question3.value == "venaja") { + document.getElementById("venaja").classList.toggle("colorRight") + } + if (question3.value == "tanska") { + document.getElementById("tanska").classList.toggle("colorWrong") + } + if (question3.value == "viro") { + document.getElementById("viro").classList.toggle("colorWrong") + } + + let question4 = document.querySelector('input[name = question4]:checked'); + + if (question4.value == "oulu") { + document.getElementById("oulu").classList.toggle("colorWrong") + } + if (question4.value == "tampere") { + document.getElementById("tampere").classList.toggle("colorWrong") + } + if (question4.value == "turku") { + document.getElementById("turku").classList.toggle("colorRight") + } + + let question5 = document.querySelector('input[name = question5]:checked'); + + if (question5.value == "nerds") { + document.getElementById("nerds").classList.toggle("colorWrong") + } + if (question5.value == "birds") { + document.getElementById("birds").classList.toggle("colorRight") + } + if (question5.value == "herds") { + document.getElementById("herds").classList.toggle("colorWrong") + } +} \ No newline at end of file diff --git a/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/essahaapanen.html b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/essahaapanen.html new file mode 100644 index 0000000..3d96e8f --- /dev/null +++ b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/essahaapanen.html @@ -0,0 +1,143 @@ + + + + + + + + + + + + Suomi + + +
+ +
+
+
+
+

Suomi-visa

+
+
+
+
+
+
+
+

1. Kuka on Suomen pääministeri (2021)?

+
+
+ + +
+
+ + +
+
+ + +
+
+
+

2. Mikä on Suomen kansallislintu?

+
+
+ + +
+
+ + +
+
+ + +
+
+
+

3. Mitkä ovat Suomen rajanaapurit?

+
+
+ + +
+
+ + +
+
+ + +
+
+
+

4. Mikä oli Suomen pääkaupunki ennen Helsinkiä?

+
+
+ + +
+
+ + +
+
+ + +
+
+
+

5. Mikä peli on kehitetty Suomessa?

+
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+ + + + \ No newline at end of file diff --git a/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/index copy.html b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/index copy.html new file mode 100644 index 0000000..4783a41 --- /dev/null +++ b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/index copy.html @@ -0,0 +1,74 @@ + + + + + + + + + Document + + + +
+
+
+

TULE TESTAAMAAN TAITOSI AEVAN MAHOTTOMAN HULLUNKURISISSA VISOISSA

+ +
+
+
+ +
+
+
+

Maantieto

+ +
+ +
+

Matikka

+
+
+ +
+
+

Suomi

+
+ +
+

Historia

+
+
+ + +
+ + + + + + \ No newline at end of file diff --git a/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/index.html b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/index.html new file mode 100644 index 0000000..c0ca038 --- /dev/null +++ b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/index.html @@ -0,0 +1,141 @@ + + + + + + + + + + Liitutaulu + + + +
+
+
+

TÄÄLLÄ ON MINKÄLAISTA VISAA SATTUU

+
+
+
+ +
+
+ + + +
+ +
+ + + +
+
+ + + + + + diff --git a/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/pohja.css b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/pohja.css new file mode 100644 index 0000000..45fd24d --- /dev/null +++ b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/pohja.css @@ -0,0 +1,157 @@ +html { + height: 100%; + cursor: url("BETASIVU/images/LIITU2999.png"), default; +} + +body { + background: url("BETASIVU/images/Tausta2.jpg") no-repeat center fixed; + background-size: 100% 100%; +} + +nav { + background: url("BETASIVU/images/Puu2.png") no-repeat center fixed; + background-size: cover; + height: auto; + border: 3px solid #341a06; +} + +#linkki:hover { + color: white; + background-color: black; + opacity: 50%; + cursor: url("BETASIVU/images/LIITU2999.png"), default; +} + +#linkki:visited, +.navbar-brand:visited { + color: white; +} + +.navbar-brand, +.navbar-light #navbar-brand { + color: white; + padding: 5px; + font-family: Ink Free; + margin: 0; + font-weight: bold; + font-size: 2em; + text-shadow: black 2px 0px 0px; +} + +#linkki { + margin-left: 1em; + font-size: 1.5em; + text-shadow: black 2px 0px 0px; + color: white; +} + +#footer { + background: url("BETASIVU/images/Puu2.png"); + background-size: cover; + width: 100%; + height: 65px; + border: 3px solid #341a06; + display: table; +} +h2 { + color: white; + display: table-cell; + vertical-align: middle; + padding: 20px; + font-family: ink free; + font-weight: bold; + font-size: 2em; + text-shadow: black 2px 0px 0px; +} + +.row { + height: 50%; + margin-left: 1em; + margin-right: 1em; +} + +*[id^="visa"] { + border: 5px solid #341a06; + background-repeat: no-repeat; + background-size: cover; + background-position: center; + box-sizing: content-box; + margin-bottom: 1em; + padding-left: 0; + padding-right: 0; +} +#visa1 { + background-image: url("videot/TELLUS.webp"); +} + +#visa2 { + background-image: url("videot/matika.webp"); +} + +#visa3 { + background-image: url("videot/finlandia.webp"); +} + +#visa4 { + background-image: url("videot/history.webp"); +} + +#container { + height: 100%; + margin-top: 1em; +} + +#headline { + text-align: center; + margin-top: 1em; +} +#headlinetext { + font-weight: bold; + min-height: 100%; + min-width: 100%; + text-shadow: black 3px 0px 0px; + color: white; + border-bottom: 5px #341a06 solid; +} + +#pelitext { + height: 100%; + width: 100%; + text-align: center; + vertical-align: middle; + line-height: 400px; + color: white; + font-size: 3em; + font-weight: bold; + text-shadow: black 3px 0px 0px; +} + +#pelitext:hover { + background-color: black; + opacity: 0.5; +} +a { + text-decoration: none; +} + +@media (min-width: 1140px) { + *[id^="visa"] { + max-width: 30em; + } +} + +@media (max-width: 767px) { + .row { + height: auto; + } + + html { + height: auto; + } +} + +@media (min-height: 1138px) { + body { + height: 100%; + } +} diff --git a/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/teemu.css b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/teemu.css new file mode 100644 index 0000000..6509bf7 --- /dev/null +++ b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/teemu.css @@ -0,0 +1,45 @@ +footer { + position: relative; + bottom: 0px; + margin-top: 1em; +} +#headline { + text-shadow: none; +} + +.container-fluid { + text-align: center; + font-size: 24; + + color: black; +} + +.question { + color: white; + padding: 1em; +} + +#submit { + font-weight: bolder; + border-radius: 5px; + padding: 5px; + margin-top: 10px; +} + +#quiz { + font-weight: bolder; + font-size: 1.2em; + font-family: Ink Free; +} + +@media (min-height: 787px) { + footer{ + position: fixed; + } +} + +@media(max-width: 411px) { + footer{ + position: relative; + } +} \ No newline at end of file diff --git a/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/teemuJS.js b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/teemuJS.js new file mode 100644 index 0000000..e53fe76 --- /dev/null +++ b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/teemuJS.js @@ -0,0 +1,128 @@ +function buildQuiz() { + // variable to store the HTML output + const output = []; + + myQuestions.forEach((currentQuestion, questionNumber) => { + // variable to store the list of possible answers + const answers = []; + + // and for each available answer... + for (letter in currentQuestion.answers) { + // ...add an HTML radio button + answers.push( + `` + ); + } + + // add this question and its answers to the output + output.push( + `
${currentQuestion.question}
+
${answers.join("")}
` + ); + }); + + // finally combine our output list into one string of HTML and put it on the page + quizContainer.innerHTML = output.join(""); +} + +function showResults() { + // gather answer containers from our quiz + const answerContainers = quizContainer.querySelectorAll(".answers"); + + // keep track of user's answers + let numCorrect = 0; + + // for each question... + myQuestions.forEach((currentQuestion, questionNumber) => { + // find selected answer + const answerContainer = answerContainers[questionNumber]; + const selector = `input[name=question${questionNumber}]:checked`; + const userAnswer = ( + answerContainer.querySelector(selector) || { numCorrect } + ).value; + + // if answer is correct + if (userAnswer === currentQuestion.correctAnswer) { + // add to the number of correct answers + numCorrect++; + + // color the answers green + answerContainers[questionNumber].style.color = "lightgreen"; + } + // if answer is wrong or blank + else { + // color the answers red + answerContainers[questionNumber].style.color = "red"; + } + }); + + // show number of correct answers out of total + resultsContainer.innerHTML = `${numCorrect} out of ${myQuestions.length}`; +} + +const quizContainer = document.getElementById("quiz"); +const resultsContainer = document.getElementById("results"); +const submitButton = document.getElementById("submit"); + +const myQuestions = [ + { + question: "1. Mikä on Suomen vanhin selviytynyt linna?", + answers: { + a: "Hämeenlinna", + b: "Turun linna", + c: "Olavinlinna", + }, + correctAnswer: "a", + }, + { + question: "2. Kuka oli Suomen ensimmäinen presidentti?", + answers: { + a: "Halonen, Tarja Kaarina", + b: "Kekkonen, Urho Kaleva", + c: "Ståhlberg, Kaarlo Juho", + }, + correctAnswer: "c", + }, + { + question: "3. Minä vuonna Suomi itsenäistyi?", + answers: { + a: "1337", + b: "1689", + c: "1887", + d: "1917", + }, + correctAnswer: "d", + }, + { + question: "4. Minä vuonna Suomi liittyi lopullisesti Ruotsiin?", + answers: { + a: "1809", + b: "1475", + c: "850", + d: "420", + }, + correctAnswer: "a", + }, + { + question: "5. Milloin alkoi toinen maailmansota?", + answers: { + a: "1939", + b: "1875", + c: "1420", + d: "1945", + }, + correctAnswer: "a", + }, +]; + +// display quiz right away +buildQuiz(); + +// on submit, show results +submitButton.addEventListener("click", showResults); + +//Ohjetta mitä seurattu https://www.sitepoint.com/simple-javascript-quiz/ diff --git "a/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/teemuv\303\244lim\303\244ki.html" "b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/teemuv\303\244lim\303\244ki.html" new file mode 100644 index 0000000..e418926 --- /dev/null +++ "b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/teemuv\303\244lim\303\244ki.html" @@ -0,0 +1,103 @@ + + + + + + + + + + + + Historia + + + +
+
+
+

Historia

+
+
+
+ +
+
+ +
+
+ + + + + + diff --git a/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/tietoja.css b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/tietoja.css new file mode 100644 index 0000000..59dacb7 --- /dev/null +++ b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/tietoja.css @@ -0,0 +1,13 @@ +#footer { + position:fixed; + bottom:0px; + } + .row{ + text-align: center; + } + p { + font-family: ink free; + font-size: 2em; + color: white; + font-weight: bold; + } \ No newline at end of file diff --git a/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/tietoja.html b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/tietoja.html new file mode 100644 index 0000000..3fd1033 --- /dev/null +++ b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/tietoja.html @@ -0,0 +1,111 @@ + + + + + + + + + + + Tietoja + + + +
+
+
+

TIETOJA

+
+
+
+ +
+
+
+

+ Tekijät: Aapo Kiviniemi, Atte Taajoranta, Essa Haapanen + ja Teemu Välimäki
+ Vastuualueet:
+ Atte - Matikka
Aapo - Maantieto
Essa - Suomi +
Teemu - Historia +

+

Lähteet: Pixabay.com

+
+
+
+ + + + + + diff --git a/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/videot/TELLUS.webp b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/videot/TELLUS.webp new file mode 100644 index 0000000..a3941e8 Binary files /dev/null and b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/videot/TELLUS.webp differ diff --git a/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/videot/finlandia.webp b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/videot/finlandia.webp new file mode 100644 index 0000000..11e7a31 Binary files /dev/null and b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/videot/finlandia.webp differ diff --git a/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/videot/history.webp b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/videot/history.webp new file mode 100644 index 0000000..ee784d0 Binary files /dev/null and b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/videot/history.webp differ diff --git a/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/videot/math1.jpg b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/videot/math1.jpg new file mode 100644 index 0000000..e251126 Binary files /dev/null and b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/videot/math1.jpg differ diff --git a/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/videot/matika.webp b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/videot/matika.webp new file mode 100644 index 0000000..cd9747d Binary files /dev/null and b/Web-tekniikan-repo/Bootstrap/AlaAsteSivu/videot/matika.webp differ diff --git a/Web-tekniikan-repo/Bootstrap/bottom.css b/Web-tekniikan-repo/Bootstrap/bottom.css new file mode 100644 index 0000000..a06fd61 --- /dev/null +++ b/Web-tekniikan-repo/Bootstrap/bottom.css @@ -0,0 +1,88 @@ +* { + font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif; +} +body { + background: gray no-repeat center fixed; + background-size: 100% 100%; +} + +nav { + background-size: cover; + height: 50px; + border: 3px solid #341a06; + color: black; +} +a { + color: white; +} +.nav-link { + color: white; + transition: color white; +} +li > a:hover { + color: white; +} + +#linkki:hover { + color: white; + background-color: black; + opacity: 50%; +} + +#linkki:active { + color: white; +} + +#linkki:checked { + color: white; +} + +.dropdown-item:hover { + background-color: grey; +} + +.navbar-brand { + color: white; + padding: 5px; + font-size: 1.5em; + font-family: Ink Free; + margin: 0; + font-weight: bold; + font-size: 2em; + text-shadow: black 2px 0px 0px; +} + +.navbar { + padding: 2em; + padding-left: 0; +} + +#linkki { + margin-left: 2em; + font-size: 1.5em; + text-shadow: black 2px 0px 0px; +} + +#footer { + background-size: cover; + position: absolute; + bottom: 0; + width: 100%; + height: 65px; + border: 3px solid #341a06; +} + +.row { + height: 18.75em; + margin: 1em; +} + +#container { + height: 100%; + margin-top: 8em; +} + +#headline { + text-align: center; + height: 1em; +} diff --git a/Web-tekniikan-repo/Bootstrap/index.html b/Web-tekniikan-repo/Bootstrap/index.html new file mode 100644 index 0000000..4904f63 --- /dev/null +++ b/Web-tekniikan-repo/Bootstrap/index.html @@ -0,0 +1,130 @@ + + + + + + + + + + + + Hello, world! + + + +

Hello, world!

+ + +
+
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. + Dolorem veritatis molestias ea cum est facere maxime nemo + vero accusantium, dolore officia optio numquam quos, + consequatur mollitia officiis reiciendis. Cupiditate, + soluta. +
+
Item 1
+
Item 2
+
Item 3
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. + Dolorem veritatis molestias ea cum est facere maxime nemo + vero accusantium, dolore officia optio numquam quos, + consequatur mollitia officiis reiciendis. Cupiditate, + soluta. +
+
+
+
Hello
+
Hello
+
Hello
+
+
+ + + + diff --git a/Web-tekniikan-repo/Bootstrap/indextest.html b/Web-tekniikan-repo/Bootstrap/indextest.html new file mode 100644 index 0000000..e81b3a6 --- /dev/null +++ b/Web-tekniikan-repo/Bootstrap/indextest.html @@ -0,0 +1,128 @@ + + + + + + + + + Document + + + + +
+
+
+

+ TULE TESTAAMAAN TAITOSI AEVAN MAHOTTOMAN HULLUNKURISISSA + VISOISSA +

+
+
+
+ +
+
+
+ +
+

KOVA

+
+
+ +
+
+

KOVA

+
+ +
+

KOVA

+
+
+
+

aaaaa KaKKa

+ + + + + diff --git a/Web-tekniikan-repo/Bootstrap/second.html b/Web-tekniikan-repo/Bootstrap/second.html new file mode 100644 index 0000000..f1fff07 --- /dev/null +++ b/Web-tekniikan-repo/Bootstrap/second.html @@ -0,0 +1,252 @@ + + + + + + + + + + + + Hello, world! + + +
+
+
+
+ + Menu + + +
+ + +
+
+
+
Content area...
+
+ + +

Hello, world!

+ + + + + + + --> + + diff --git a/Web-tekniikan-repo/Bootstrap/style.css b/Web-tekniikan-repo/Bootstrap/style.css new file mode 100644 index 0000000..6d48980 --- /dev/null +++ b/Web-tekniikan-repo/Bootstrap/style.css @@ -0,0 +1,4 @@ +*[class^="col-"], +.col { + border: 1px solid black; +} diff --git a/Web-tekniikan-repo/README.md b/Web-tekniikan-repo/README.md new file mode 100644 index 0000000..2108492 --- /dev/null +++ b/Web-tekniikan-repo/README.md @@ -0,0 +1,3 @@ +# Web-tekniikat + +Just a student. :) diff --git "a/Web-tekniikan-repo/Teht\303\244v\303\244\303\244/code.js" "b/Web-tekniikan-repo/Teht\303\244v\303\244\303\244/code.js" new file mode 100644 index 0000000..ecb1eeb --- /dev/null +++ "b/Web-tekniikan-repo/Teht\303\244v\303\244\303\244/code.js" @@ -0,0 +1,28 @@ +//Hae element by id +var elem = document.getElementById("header"); +var elem2 = document.querySelector("#header"); + +//Hae elementtejä +var list_items = document.getElementsByTagName("li"); + +// +var item = document.querySelector("li"); +var items = document.querySelectorAll("li"); + +var spessut = document.querySelectorAll(".special"); + +var lista = document.querySelector(".special"); +lista.document.querySelector("li").textContent = "lol"; + +//toinen itemi +var secondItem = items[1]; + +secondItem.textContent = "Toka"; + +for (let i = 0; i < items.length; i++) { + items[i].textContent = "

" + i + "

"; +} + +//Tulosta ekan li teksti +var lista = document.querySelector("li"); +console.log(lista.childNodes[0].nodeValue); diff --git "a/Web-tekniikan-repo/Teht\303\244v\303\244\303\244/index.html" "b/Web-tekniikan-repo/Teht\303\244v\303\244\303\244/index.html" new file mode 100644 index 0000000..fc4ea41 --- /dev/null +++ "b/Web-tekniikan-repo/Teht\303\244v\303\244\303\244/index.html" @@ -0,0 +1,29 @@ + + + + + + + + Document + + +

Hello

+ + + + + diff --git a/Web-tekniikan-repo/Testing.txt b/Web-tekniikan-repo/Testing.txt new file mode 100644 index 0000000..63cd04a --- /dev/null +++ b/Web-tekniikan-repo/Testing.txt @@ -0,0 +1 @@ +Hey \ No newline at end of file diff --git a/Web-tekniikan-repo/Web-tekniikka/README.md b/Web-tekniikan-repo/Web-tekniikka/README.md new file mode 100644 index 0000000..727ce3e --- /dev/null +++ b/Web-tekniikan-repo/Web-tekniikka/README.md @@ -0,0 +1,2 @@ +# Web-tekniikka +Kurssin hommia diff --git a/Web-tekniikan-repo/tonttu.css b/Web-tekniikan-repo/tonttu.css new file mode 100644 index 0000000..461029f --- /dev/null +++ b/Web-tekniikan-repo/tonttu.css @@ -0,0 +1,3 @@ +* { + font-size: large; +} diff --git a/Web-tekniikan-repo/tonttu.html b/Web-tekniikan-repo/tonttu.html new file mode 100644 index 0000000..f6acb0f --- /dev/null +++ b/Web-tekniikan-repo/tonttu.html @@ -0,0 +1,16 @@ + + + + + + + + + + + + +

Hey

+ + + diff --git a/Web-tekniikan-repo/tonttu.js b/Web-tekniikan-repo/tonttu.js new file mode 100644 index 0000000..c0cfb50 --- /dev/null +++ b/Web-tekniikan-repo/tonttu.js @@ -0,0 +1 @@ +// :) \ No newline at end of file