Rozwiązanie - Egzamin Praktyczny E.14
Arkusz E.14-02-22.01-SG - Styczeń 2022 - Wersja #02
Skrypt: JavaScript
Baza Danych:
Powiązana zawartość
Przykładowe rozwiązanie
Wymagane zdjęcia
kawa.png
ksztalty.png
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>Kochamy kawę</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<div id="menu">
<a href="index.html">Strona główna</a>
<a href="zamowienia.html">Zamówienia</a>
<a href="blog.html">Blog</a>
<a href="http://gatunki-kawy.pl/">Gatunki kawy</a>
</div>
<div id="logo">
<img src="logo.png" alt="Kawa">
</div>
<header>
<h1>Sklep z kawą</h1>
</header>
<div id="lewy">
<img src="kawa.png" alt="filiżanka kawy?">
</div>
<div id="prawy">
<h3>Oferta</h3>
<ul>
<li>Arabica</li>
<li>Robusta</li>
<li>bezkofeinowa</li>
<li>zielona</li>
</ul>
</div>
<footer>
Stronę przygotował: <a href="https://ee-informatyk.pl/" target="_blank" style="color: unset;margin: unset;font-size: unset;line-height: unset;border: none !important;"><b>EE-Informatyk.pl</b></a>
</footer>
</body>
</html> Plik zamowienia.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>Kochamy kawę</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<div id="menu">
<a href="index.html">Strona główna</a>
<a href="zamowienia.html">Zamówienia</a>
<a href="blog.html">Blog</a>
<a href="http://gatunki-kawy.pl/">Gatunki kawy</a>
</div>
<div id="logo">
<img src="logo.png" alt="Kawa">
</div>
<header>
<h1>Sklep z kawą</h1>
</header>
<div id="lewy">
Podaj numer kawy: <input type="number" name="kawa" id="kawa"><br>
Podaj wagę w dekagramach: <input type="number" name="waga" id="waga"><br>
<button type="submit" onclick="koszt()">Zamów</button>
<div id="wynik"></div>
</div>
<script src="skrypt.js"></script>
<div id="prawy">
<h3>Oferta</h3>
<ul>
<li>Arabica</li>
<li>Robusta</li>
<li>bezkofeinowa</li>
<li>zielona</li>
</ul>
</div>
<footer>
Stronę przygotował: <a href="https://ee-informatyk.pl/" target="_blank" style="color: unset;margin: unset;font-size: unset;line-height: unset;border: none !important;"><b>EE-Informatyk.pl</b></a>
</footer>
</body>
</html> Plik blog.html
Strona w trakcie budowy Plik skrypt.js
function koszt(){
let kawa = document.getElementById("kawa").value;
let waga = document.getElementById("waga").value;
let cena;
if (kawa == 1){
cena = 5;
}
else if (kawa == 2){
cena = 7;
}
else if (kawa == 4){
cena = 6;
}
else {
cena = 0;
}
let koszt = waga*cena;
document.getElementById('wynik').innerHTML = "Koszt zamówienia wynosi: " + koszt + " zł";
} Plik styl.css
body {
font-family: Garamond;
}
#logo {
background: Olive;
width: 25%;
height: 110px;
float: left;
}
#menu {
background: olive;
width: 75%;
height: 110px;
float: left;
}
header,footer {
background: saddlebrown;
color: white;
text-align: center;
padding: 30px;
clear: both;
}
#lewy,#prawy {
background: wheat;
width: 50%;
height: 450px;
font-size: 120%;
float: left;
}
#lewy {
text-align: center;
}
h1 {
letter-spacing: 12px;
}
a {
color: lightgrey;
margin: 30px;
font-size: 150%;
line-height: 110px;
text-decoration: none;
}
a:hover {
color: white;
border-bottom: 1px solid white;
}
ul li:nth-child(3) {
text-decoration: line-through;
}Powiązana zawartość
Autorem arkusza jest CKE.GOV.PL