Rozwiązanie - Egzamin Praktyczny E.14
Arkusz E.14-05-19.06 - Czerwiec 2019 - Wersja #05
Skrypt: JavaScript
Baza Danych:
Powiązana zawartość
Przykładowe rozwiązanie
Wymagane zdjęcia
baner1.png
baner2.png
animacja.gif
grafika.jpg
klatki.jpg
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>Usługi informatyczne</title>
<link rel="stylesheet" href="styl.css">
<link rel="shortcut icon" href="logo.png" type="image/x-icon">
</head>
<body>
<div id="kontener">
<div id="logo">
<img src="logo.png" alt="logo firmy">
</div>
<nav>
<a href="index.html">O nas</a>
<a href="uslugi.html">Usługi</a>
<a href="kontakt.html">Kontakt</a>
</nav>
<header>
<img src="animacja.gif" alt="animacja baneru">
</header>
<main>
<hr>
<h1>Firma IT - Usługi Informatyczne</h1>
<p>Jesteśmy firmą z wieloletnim doświadczeniem w zakresie IT.</p>
<p>Co nas cechuje? Doświadczenie, niezawodność, konkurencyjne ceny.</p>
<hr>
</main>
<footer>
<p>Autor strony: <a href="https://ee-informatyk.pl/" target="_blank" style="color: unset;text-decoration: none;"><b>EE-Informatyk.pl</b></a></p>
</footer>
</div>
</body>
</html> Plik uslugi.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>Usługi informatyczne</title>
<link rel="stylesheet" href="styl.css">
<link rel="shortcut icon" href="logo.png" type="image/x-icon">
</head>
<body>
<div id="kontener">
<div id="logo">
<img src="logo.png" alt="logo firmy">
</div>
<nav>
<a href="index.html">O nas</a>
<a href="uslugi.html">Usługi</a>
<a href="kontakt.html">Kontakt</a>
</nav>
<header>
<img src="animacja.gif" alt="animacja baneru">
</header>
<main>
<hr>
<h1>Oferowane usługi</h1>
<ul>
<li>Outsourcing IT</li>
<li>Instalacja i konfiguracja systemów operacyjnych</li>
<li>Sprzęt komputerowy</li>
<li>Serwis komputerów</li>
<li>Projektowanie i aktualizacja stron WWW</li>
<li>Hosting</li>
</ul>
<hr>
</main>
<footer>
<p>Autor strony: <a href="https://ee-informatyk.pl/" target="_blank" style="color: unset;text-decoration: none;"><b>EE-Informatyk.pl</b></a></p>
</footer>
</div>
</body>
</html> 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>Usługi informatyczne</title>
<link rel="stylesheet" href="styl.css">
<link rel="shortcut icon" href="logo.png" type="image/x-icon">
</head>
<body>
<div id="kontener">
<div id="logo">
<img src="logo.png" alt="logo firmy">
</div>
<nav>
<a href="index.html">O nas</a>
<a href="uslugi.html">Usługi</a>
<a href="kontakt.html">Kontakt</a>
</nav>
<header>
<img src="animacja.gif" alt="animacja baneru">
</header>
<main>
<hr>
<h2>Kontakt</h2>
<table>
<tr>
<td>Imię:</td>
<td><input type="text" name="imie" id="imie"></td>
</tr>
<tr>
<td>Nazwisko:</td>
<td><input type="text" name="nazwisko" id="nazwisko"></td>
</tr>
<tr>
<td>E-mail:</td>
<td><input type="email" name="email" id="email"></td>
</tr>
<tr>
<td>Usługa:</td>
<td>
<textarea name="usluga" id="usluga" cols="30" rows="5"></textarea>
</td>
</tr>
<tr>
<td></td>
<td><input type="checkbox" name="regulamin" id="regulamin"> Zapoznałam/em się z regulaminem</td>
</tr>
<tr>
<td></td>
<td><button type="reset" onclick="reset()">Resetuj</button> <button type="submit" onclick="submit()">Prześlij</button></td>
</tr>
</table>
<p id="wynik"></p>
<script src="skrypt.js"></script>
<hr>
</main>
<footer>
<p>Autor strony: <a href="https://ee-informatyk.pl/" target="_blank" style="color: unset;text-decoration: none;"><b>EE-Informatyk.pl</b></a></p>
</footer>
</div>
</body>
</html> Plik skrypt.js
function reset() {
document.getElementById("imie").value = "";
document.getElementById("nazwisko").value = "";
document.getElementById("email").value = "";
document.getElementById("usluga").value = "";
}
function submit(){
let imie = document.getElementById("imie").value;
let nazwisko = document.getElementById("nazwisko").value;
let email = document.getElementById("email").value;
let usluga = document.getElementById("usluga").value;
let regulamin = document.getElementById("regulamin");
let wynik = document.getElementById("wynik");
if(regulamin.checked){
wynik.innerHTML = imie.toUpperCase() + " " + nazwisko.toUpperCase() + "<br>Treść Twojej sprawy:<br>" + usluga + "<br>Na podany e-mail zostanie wysłana oferta."
} else {
wynik.innerHTML = "<span style='color: red;'>Musisz zapoznać się z regulaminem.</span>"
}
} Plik styl.css
body {
background: #EEEEEE;
}
#kontener {
width: 1000px;
margin: auto;
text-align: center;
}
#logo,nav,footer {
background: #C0C0C0;
height: 100px;
padding: 10px unset;
}
#logo,nav {
float: left;
}
header {
clear: both;
}
#logo {
width: 400px;
}
nav {
width: 600px;
}
header {
background: #DDDDDD;
height: 200px;
}
main {
padding: 50px;
}
footer {
text-align: right;
}
nav a {
color: #555555;
padding: 50px;
font-size: 200%;
text-decoration: none;
}
hr {
background: #C0C0C0;
width: 70%;
height: 2px;
}
table {
text-align: left;
}Powiązana zawartość
Autorem arkusza jest CKE.GOV.PL