Rozwiązanie - Egzamin Praktyczny E.14
Arkusz E.14-02-19.01 - Styczeń 2019 - Wersja #02
Skrypt: JavaScript
Baza Danych:
Powiązana zawartość
Przykładowe rozwiązanie
Wymagane zdjęcia
napisy.png
Plik formaty.html
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formatowanie</title>
<link rel="stylesheet" href="styl2.css">
</head>
<body>
<header>
<h1>Fortmatowanie dokumentów HTML</h1>
</header>
<div id="gorny1">
<h2>Przykład listy - hobby</h2>
<ul>
<li>muzyka</li>
<li>turystyka</li>
<ol>
<li>góry</li>
<li>jeziora</li>
<li>na rowerze</li>
</ol>
<li>książki</li>
</ul>
</div>
<div id="gorny2">
<h2>Przykład tabeli - rozkład dnia</h2>
<table>
<tr>
<th>Pora dnia</th>
<th>Obowiązki</th>
</tr>
<tr>
<td>rano</td>
<td>nauka</td>
</tr>
<tr>
<td>południe</td>
<td>zajęcia dodatkowe</td>
</tr>
<tr>
<td>popołudnie</td>
<td rowspan="2">moje hobby</td>
</tr>
<tr>
<td>wieczór</td>
</tr>
</table>
</div>
<div id="gorny3">
<img src="napisy.png" alt="technologia web">
</div>
<main>
<p><label for="rozmiar">Podaj rozmiar tekstu w procentach:</label> <input type="number" name="rozmiar" id="rozmiar"> %</p>
<p>
<select name="lista" id="lista">
<option value="normal">prosty</option>
<option value="italic">kursywa</option>
</select>
</p>
<p>Jakim kolorem sformatować tekst? Wybierz przycisk</p>
<button type="submit" id="czerwony" onclick="czerwony()"> </button>
<button type="submit" id="zielony" onclick="zielony()"> </button>
<button type="submit" id="niebieski" onclick="niebieski()"> </button>
<p id="wynik">To jest przykład paragrafu, który może być dowolnie formatowany przez JavaScript</p>
<script src="skrypt.js"></script>
</main>
<footer>
<p>Formatowaniem tekstu zajmował się: <a href="https://ee-informatyk.pl/" target="_blank" style="color: unset;text-decoration: none;"><i>EE-Informatyk.pl</i></a></p>
<a href="formatowanie.pl" target="_blank">Odwiedź także</a>
</footer>
</body>
</html> Plik skrypt.js
function czerwony() {
document.querySelector('#wynik').style.color = 'red';
ustawRozmiar();
}
function zielony() {
document.querySelector('#wynik').style.color = 'green';
ustawRozmiar();
}
function niebieski() {
document.querySelector('#wynik').style.color = 'blue';
ustawRozmiar();
}
const rozmiar = document.querySelector('#rozmiar');
const lista = document.querySelector('#lista');
let przycisnietyKlawisz = document.querySelectorAll('button[type="submit"]');
Array.from(przycisnietyKlawisz).forEach(element => {
element.addEventListener('click', ustawRozmiar);
});
function ustawRozmiar() {
document.querySelector('#wynik').style.fontSize = `${rozmiar.value}%`;
document.querySelector('#wynik').style.fontStyle = lista.value;
} Plik styl2.css
body {
font-family: Georgia;
}
header {
background: #824555;
color: white;
text-align: center;
padding: 20px;
}
#gorny1,#gorny2 {
background: #A26475;
color: white;
width: 30%;
height: 300px;
float: left;
}
#gorny3 {
background: #A26475;
color: white;
width: 40%;
height: 300px;
text-align: right;
float: left;
}
main {
background: #F0EAE2;
padding: 50px;
clear: both;
}
footer {
background: #824555;
color: white;
text-align: center;
padding: 20px;
}
table,td,th {
border: 2px solid #69293A;
padding: 7px;
border-collapse: collapse;
}
ul {
list-style: square;
}
main button#czerwony {
background: red;
}
main button#zielony {
background: green;
}
main button#niebieski {
background: blue;
}Powiązana zawartość
Autorem arkusza jest CKE.GOV.PL