Rozwiązanie - Egzamin Praktyczny E.14
Arkusz E.14-05-17.06 - Czerwiec 2017 - Wersja #05
Skrypt: JavaScript
Baza Danych:
Powiązana zawartość
Przykładowe rozwiązanie
Wymagane zdjęcia
logo.png
Plik index.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>Wyremontuj mieszkanie</title>
<link rel="stylesheet" href="remont.css">
</head>
<body>
<header>
<img src="logo.png" alt="logo strony">
</header>
<div id="menu1">
<a href="index.html">O NAS</a>
</div>
<div id="menu2">
<a href="kontakt.html">KONTAKT</a>
</div>
<div id="menu3">
<a href="kalkulator.html">KALKULATOR</a>
</div>
<div id="menu4">
<a href="http://jakremontowac.pl/" target="_blank">POLECANE STRONY</a>
</div>
<main>
<h1>Nasza oferta</h1>
<ol>
<li>malowanie</li>
<ul>
<li>elewacji</li>
<li>wnętrza mieszkania</li>
</ul>
<li>układanie glazury</li>
<li>układanie podłóg</li>
</ol>
</main>
<footer>
<p>Autor strony: <a href="https://ee-informatyk.pl/" target="_blank" style="color: unset;text-decoration: none;">EE-Informatyk.pl</a></p>
</footer>
</body>
</html> Plik kalkulator.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>Wyremontuj mieszkanie</title>
<link rel="stylesheet" href="remont.css">
</head>
<body>
<header>
<img src="logo.png" alt="logo strony">
</header>
<div id="menu1">
<a href="index.html">O NAS</a>
</div>
<div id="menu2">
<a href="kontakt.html">KONTAKT</a>
</div>
<div id="menu3">
<a href="kalkulator.html">KALKULATOR</a>
</div>
<div id="menu4">
<a href="http://jakremontowac.pl/" target="_blank">POLECANE STRONY</a>
</div>
<main>
<h1>Malowanie pokoju: 8 zł za m<sup>2</sup></h1>
<p>
Wymiary pokoju w metrach: <input type="number" name="metry1" id="metry1"> <input type="number" name="metry2" id="metry2">
</p>
<button type="submit" onclick="kalkulator()">OBLICZ KOSZT</button>
<p id="wynik1"></p>
<p id="wynik2"></p>
</main>
<script src="skrypt.js"></script>
<footer>
<p>Autor strony: <a href="https://ee-informatyk.pl/" target="_blank" style="color: unset;text-decoration: none;">EE-Informatyk.pl</a></p>
</footer>
</body>
</html> Plik skrypt.js
function kalkulator() {
let metry1 = document.getElementById("metry1").value;
let metry2 = document.getElementById("metry2").value;
let powierzchnia = ((metry1 * 2.7) * 2) + ((metry2 * 2.7) * 2);
let koszt = powierzchnia * 8;
document.getElementById("wynik1").innerHTML = "Powierzchnia całkowita ścian: " + powierzchnia;
document.getElementById("wynik2").innerHTML = "Koszt malowania: " + koszt + " zł";
} Plik kontakt.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>Wyremontuj mieszkanie</title>
<link rel="stylesheet" href="remont.css">
</head>
<body>
<header>
<img src="logo.png" alt="logo strony">
</header>
<div id="menu1">
<a href="index.html">O NAS</a>
</div>
<div id="menu2">
<a href="kontakt.html">KONTAKT</a>
</div>
<div id="menu3">
<a href="kalkulator.html">KALKULATOR</a>
</div>
<div id="menu4">
<a href="http://jakremontowac.pl/" target="_blank">POLECANE STRONY</a>
</div>
<main>
<h1>Dane kontaktowe</h1>
<p>Usługi remontowe Jan Nowak</p>
<p>ul. Postępu 135</p>
<p>Warszawa</p>
<a href="mailto:[email protected]"><button type="submit">Wyślij do nas maila</button></a>
</main>
<footer>
<p>Autor strony: <a href="https://ee-informatyk.pl/" target="_blank" style="color: unset;text-decoration: none;">EE-Informatyk.pl</a></p>
</footer>
</body>
</html> Plik remont.css
header {
background: rgb(255,213,162);
text-align: center;
padding: 20px;
}
#menu1,#menu2,#menu3,#menu4 {
background: rgb(191,112,17);
color: white;
text-align: center;
font-size: 150%;
width: 25%;
float: left;
}
main {
height: 400px;
clear: both;
}
footer {
background: rgb(191,112,17);
color: white;
text-align: right;
font-size: 150%;
}
a {
color: white;
}
button {
background: brown;
border: 2px solid brown;
color: white;
font-weight: bold;
padding: 10px;
}Powiązana zawartość
Autorem arkusza jest CKE.GOV.PL