miniprojekt

<!DOCTYPE html>

<html lang="pl">


<head>

    <meta charset="UTF-8">

    <title>Wakacje - Wiktor Madera</title>


    <style>

        body {

          text-align: center;

          font-family:Arial, Helvetica, sans-serif;

        }


        h1 {

          color: maroon;

        }

        h2 {

            color: purple;

        }

        p {

            font-style: italic;

        }

        li{

            text-align: left;

        }

    </style>

</head>


<body>

<div class="wrapper">

<h1>Nareszcie wakacje!</h1>

<p id='tekst1' class='paragraf'>Witaj na mojej stronie.</p>

Wybierz kolor tła strony:

<button id="white">Biały</button>

<button id="green">Zielony</button>

<button id="red">Czerwony</button>

<button id="black">Czarny</button>

<button id="purple">Fioletowy</button>

<p class='paragraf'>Przedstawię Ci kilka kierunków idealnych na spędzenie wakacji w tym roku</p>


<h2 id="naglowek">Polecane kierunki:</h2>

<ol>

<li>Hiszpania - państwo w zachodniej części Europy Południowej, położone głównie na Półwyspie Iberyjskim, obejmujące także Baleary na Morzu Śródziemnym, Wyspy Kanaryjskie na Oceanie Atlantyckim, mniejsze wysepki oraz tereny w północnej Afryce.</li>

<li>Włochy - państwo położone w Europie Południowej, na Półwyspie Apenińskim, będące członkiem Unii Europejskiej oraz wielu organizacji, m.in.: NATO, należące do siedmiu najbardziej uprzemysłowionych i bogatych państw świata – G7.</li>

<li>Stany Zjednoczone</li>

</ol>

<h3>A najbardziej polecamy piękną wyspę jaką jest Madera.</h3>

<img src="madera.jpg">


</div>

<script>


var q = document.getElementById('tekst1');


console.log(q);


var w = document.getElementsByClassName('paragraf');


console.log(w);


var e = document.getElementsByTagName('li');


console.log(e);


var r = document.querySelector('h1');


console.log(r);


var t = document.querySelectorAll('ol');


console.log(t);


r.style.color="red";

e[0].style.color="darkblue";

e[1].style.color="red";

e[2].style.color="green";


e[1].textContent="Francja - państwo, którego część metropolitalna znajduje się w Europie Zachodniej, posiadające także zamorskie terytoria na innych kontynentach. Francja metropolitalna rozciąga się od Morza Śródziemnego na południu do kanału La Manche i Morza Północnego na północy, oraz od Renu na wschodzie do Zatoki Biskajskiej na zachodzie. Francuzi często nazywają swój kraj l’Hexagone (sześciokąt) – pochodzi to od kształtu Francji metropolitalnej.";

e[2].textContent="Portugalia - państwo europejskie położone w zachodniej części Europy Południowej na południowym zachodzie Półwyspu Iberyjskiego. Jest najdalej wysuniętym na zachód państwem Europy, od północy i wschodu graniczy z Hiszpanią, a od zachodu i południa Portugalię oblewają wody Oceanu Atlantyckiego. Dodatkowo w skład Portugalii wchodzą dwa archipelagi wysp położonych na Oceanie Atlantyckim – Azory i Madera. Jest członkiem Unii Europejskiej oraz NATO.";


var naglowek = document.getElementById("naglowek");

naglowek.outerHTML="<p><b> Wybierz jeden z polecanych przez specjalistów kierunków:</b> </p>"


var paragrafy = document.getElementsByTagName('p');

paragrafy[2].classList.add("class");


var nowyelement=document.createElement('li');

var tekst=document.createTextNode("Malezja - państwo w Azji Południowo-Wschodniej, na Półwyspie Malajskim i wyspie Borneo; obszar 329 847 km², ludność 28 300 000 (według stanu na 2010 r.)[3], stolica Kuala Lumpur (ok. 1 760 000 mieszkańców), siedziba rządu w Putrajaya.");

nowyelement.appendChild(tekst);

var pozycja = document.getElementsByTagName('ol')[0];

pozycja.appendChild(nowyelement);


q.addEventListener("click", () => {

    q.style.fontSize="30px";

    q.textContent="Witaj na mojej stronie!";

    });


r.addEventListener('mousemove', () => {

r.style.fontSize='40px';

});


var btn1 = document.getElementById("white");

var btn2 = document.getElementById('green');

var btn3 = document.getElementById('red');

var btn4 = document.getElementById('black');

var btn5 = document.getElementById('purple');


var body = document.querySelector('body');


btn1.addEventListener('mouseup', () =>

{

   body.style.backgroundColor="white";

});

btn2.addEventListener('mouseup', () =>

{

   body.style.backgroundColor="green";

});

btn3.addEventListener('mouseup', () =>

{

   body.style.backgroundColor="red";

});

btn4.addEventListener('mouseup', () =>

{

   body.style.backgroundColor="black";

});

btn5.addEventListener('mouseup', () =>

{

   body.style.backgroundColor="purple";

});


</script>


</body>

</html>