Rozwiązanie - Egzamin Praktyczny E.14
Arkusz E.14-06-18.01 - Styczeń 2018 - Wersja #06
Skrypt: JavaScript
Baza Danych:
Powiązana zawartość
Przykładowe rozwiązanie
Wymagane zdjęcia
grafika.png
logo.png
Plik portal.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>Ogłoszenia</title>
<link rel="stylesheet" href="styl6.css">
</head>
<body>
<header>
<h1>Ogłoszenia drobne</h1>
</header>
<div id="informacyjny1">
<h3>telefon</h3>
<p>601601601</p>
</div>
<div id="informacyjny2">
<h3>e-mail</h3>
<p>[email protected]</p>
</div>
<div id="informacyjny3">
<h3>Adres</h3>
<p>ul. Morska 45<br>Gdynia</p>
</div>
<div id="informacyjny4">
<img src="logo.png" alt="logo strony">
</div>
<div id="lewy">
<h3>Ceny</h3>
<table>
<tr>
<td>Ile?</td>
<td>Koszt</td>
<td>Upust</td>
</tr>
<tr>
<td>1 - 40</td>
<td>3 PLN</td>
<td rowspan="2">0,30 PLN dla stałych klientów</td>
</tr>
<tr>
<td>41 i więcej</td>
<td>2 PLN</td>
</tr>
</table>
</div>
<div id="srodkowy">
<h2>Policz koszt ogłoszenia</h2>
<label for="liczba">Liczba ogłoszeń: </label><br>
<input type="number" name="liczba" id="liczba"><br>
<input type="checkbox" name="klient" id="klient"> Jestem stałym klientem<br>
<button type="submit" onclick="kalkulacja()">Kalkulacja</button>
<p id="wynik"></p>
<script src="skrypt.js"></script>
</div>
<div id="prawy">
<h2>Znajdujesz się na stronie portalu ogłoszeniowego</h2>
<img src="grafika.png" alt="Oblicz koszt ogłoszenia">
</div>
<footer>
Portal ogłoszeniowy opracował: <a href="https://ee-informatyk.pl/" target="_blank" style="color: unset;text-decoration: none;">EE-Informatyk.pl</a>
</footer>
</body>
</html> Plik skrypt.js
function kalkulacja() {
let liczba = document.getElementById("liczba").value;
let klient = document.getElementById("klient").checked;
let koszt;
if (liczba <= 40) {
koszt = liczba * 3;
} else {
koszt = liczba * 2;
}
if (klient) {
koszt -= liczba * 0.3;
}
document.getElementById("wynik").innerHTML = "Twoje ogłoszenia będą kosztować: " + koszt + " PLN";
} Plik styl6.css
header {
background: #993333;
color: white;
text-align: center;
height: 80px;
}
#informacyjny1,#informacyjny2,#informacyjny3,#informacyjny4 {
font-family: 'Tahoma';
background: #CC6666;
color: white;
text-align: center;
width: 25%;
height: 150px;
float: left;
}
#lewy {
clear: both;
}
#lewy,#prawy {
background: #CC9999;
width: 40%;
height: 550px;
text-align: center;
float: left;
}
#srodkowy {
background: #FFCCCC;
width: 20%;
height: 550px;
float: left;
}
footer {
clear: both;
background: #993333;
color: white;
text-align: right;
}
table {
border: 1px dotted red;
width: 100%;
}
td {
text-align: center;
}
button {
border: none;
padding: 20px;
background: red;
color: white;
}Powiązana zawartość
Autorem arkusza jest CKE.GOV.PL