Rozwiązanie - Egzamin Praktyczny E.14
Arkusz E.14-05-18.01 - Styczeń 2018 - Wersja #05
Skrypt: JavaScript
Baza Danych:
Powiązana zawartość
Przykładowe rozwiązanie
Wymagane zdjęcia
logo-duze.png
logo-male.png
Plik ogloszenia.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>Portal ogłoszeniowy</title>
<link rel="stylesheet" href="styl5.css">
</head>
<body>
<header>
<h1>Portal Ogłoszeniowy</h1>
</header>
<div id="informacyjny1">
<img src="logo-male.png" alt="Małe logo strony">
</div>
<div id="informacyjny2">
<h3>Adres</h3>
<p>ul. Morska 45 Gdynia</p>
</div>
<div id="informacyjny3">
<h3>telefon</h3>
<p>601601601</p>
</div>
<div id="informacyjny4">
<h3>e-mail</h3>
<p>[email protected]</p>
</div>
<div id="lewy">
<h2>Ceny ogłoszeń</h2>
<table>
<tr>
<td>Liczba<br>ogłoszeń</td>
<td>Cena<br>ogłoszenia</td>
<td>Bonus</td>
</tr>
<tr>
<td>1 - 50</td>
<td>2 PLN</td>
<td rowspan="2">Subsskrypcja newslettera to upust 0,20 PLN na ogłoszenie</td>
</tr>
<tr>
<td>51 i więcej|</td>
<td>1 PLN</td>
</tr>
</table>
</div>
<div id="srodkowy">
<h2>Witamy na stronie naszego portalu!</h2>
<img src="logo-duze.png" alt="ogłoszenia">
</div>
<div id="prawy">
<h2>Ile kosztuje ogłoszenie?</h2>
<label for="liczba">Podaj liczbę ogłoszeń:</label><br>
<input type="number" name="liczba" id="liczba"><br>
<input type="checkbox" name="newsletter" id="newsletter"> Policz upust na newsletter<br>
<button type="submit" onclick="oblicz()">Oblicz</button>
<p id="wynik">
</p>
<script src="skrypt.js"></script>
</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 oblicz(){
let liczba = document.getElementById("liczba").value;
let newsletter = document.getElementById("newsletter").checked;
let cena;
if (liczba > 50){
cena = liczba * 1;
}
else {
cena = liczba * 2;
}
if (newsletter == true){
cena = cena - (liczba * 0.2);
}
document.getElementById("wynik").innerHTML = "<b>Koszt ogłoszeń: " + cena + " PLN</b>";
} Plik styl5.css
header {
background: #009999;
color: white;
text-align: center;
height: 80px;
}
#informacyjny1,#informacyjny2,#informacyjny3,#informacyjny4 {
font-family: 'Arial';
background: #009999;
color: white;
text-align: center;
width: 25%;
height: 150px;
float: left;
}
#lewy {
clear: both;
}
#lewy,#prawy {
background: #669999;
width: 30%;
height: 600px;
float: left;
}
#srodkowy {
background: #99CCCC;
width: 40%;
height: 600px;
text-align: center;
float: left;
}
footer {
background: #009999;
color: white;
text-align: right;
clear: both;
}
table,td {
border: 1px solid green;
text-align: center;
}
button {
border: none;
margin: 10px;
background: green;
color: white;
}Powiązana zawartość
Autorem arkusza jest CKE.GOV.PL