Rozwiązanie - Egzamin Praktyczny E.14
Arkusz E.14-06-18.06 - Czerwiec 2018 - Wersja #06
Skrypt: JavaScript
Baza Danych:
Powiązana zawartość
Przykładowe rozwiązanie
Wymagane zdjęcia
logo.png
pizza.png
Plik pizzeria.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>Pizzeria Marghertia</title>
<link rel="stylesheet" href="styl6.css">
</head>
<body>
<header>
<h2>Najlepsza pizza w mieście <img src="logo.png" alt="Logo strony" height="100px"></h2>
</header>
<div id="lewy">
<p>U nas zamówisz pizzę z dowozem</p>
<a href="logo.png">Nasze logo</a>
</div>
<div id="srodkowy">
<h3>Pizzeria Margherita</h3>
<p>ul. Botaniczna 4, Zielona Góra</p>
</div>
<div id="prawy">
<h3>Oferta</h3>
<ol>
<li>Pizza</li>
<li>Lasagne</li>
<li>Sałatki</li>
<p><a href="oferta.txt">Pobierz pełną ofertę</a></p>
</ol>
</div>
<div id="dolny">
<h3>Oblicz koszt dostawy</h3>
<input type="checkbox" name="miejscowosc" id="miejscowosc"> Jestem z Zielonej Góry
<p>albo</p>
<label for="odleglosc">Podaj liczbę kilometrów od Zielonej Góry:</label> <input type="number" name="odleglosc" id="odleglosc"><br>
<button type="submit" onclick="oblicz()">Oblicz</button>
<p id="wynik"></p>
<script src="skrypt.js"></script>
</div>
<footer>
Stronę internetową 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() {
var miejscowosc = document.getElementById("miejscowosc");
var odleglosc = document.getElementById("odleglosc");
var wynik = document.getElementById("wynik");
if(miejscowosc.checked == true) {
wynik.innerHTML = "Dowieziemy Twoją pizzę za darmo";
}
else {
wynik.innerHTML = "Dowóz będzie Cię kosztował " + odleglosc.value*2 + " złotych";
}
} Plik oferta.txt
Pizza Margherita 20 zł Plik styl6.css
header {
background: #4E885C;
color: orange;
text-align: center;
height: 110px;
}
#lewy {
background: #72A37D;
width: 30%;
height: 300px;
float: left;
}
#srodkowy {
background: #A2C3A9 url(pizza.png);
width: 40%;
height: 300px;
float: left;
}
#prawy {
background: #72A37D;
text-align: center;
width: 30%;
height: 300px;
float: left;
}
#dolny {
clear: both;
background: #A2C3A9;
text-align: center;
height: 250px;
}
footer {
background: #4E885C;
color: orange;
}
#prawy a {
background: orange;
color: green;
padding: 15px;
}
ol {
list-style: inside;
}Powiązana zawartość
Autorem arkusza jest CKE.GOV.PL