Rozwiązanie - Egzamin Praktyczny INF.03
Arkusz INF.03-03-24.01-SG - Styczeń 2024 - Wersja #03
Skrypt: JavaScript
Baza Danych:
Powiązana zawartość
Przykładowe rozwiązanie
Wymagane zdjęcia
grafika.jpg
logo.png
baner1.png
baner2.png
klatki.jpg
animacja.gif
Plik index.html
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Firma IT</title>
<link rel="stylesheet" href="styl.css">
<link rel="shortcut icon" href="logo.png">
</head>
<body>
<div id="kontener">
<div id="logo">
<img src="logo.png" alt="firma it">
</div>
<nav>
<a href="index.html">Strona Główna</a>
<a href="uslugi.html">Usługi</a>
<a href="kontakt.html">Kontakt</a>
</nav>
<header>
<img src="animacja.gif" alt="Usługi informatyczne">
</header>
<main>
<h2>firma it</h2>
<p>Jesteśmy firmą z wieloletnim doświadczeniem w zakresie IT</p>
<hr>
</main>
<footer>
Autor strony: <b><a href="https://ee-informatyk.pl/" target="_blank" style="color: unset;text-decoration: none;">EE-Informatyk.pl</a></b>
</footer>
</div>
</body>
</html> Plik uslugi.html
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Firma IT</title>
<link rel="stylesheet" href="styl.css">
<link rel="shortcut icon" href="logo.png">
</head>
<body>
<div id="kontener">
<div id="gora">
<div id="logo">
<img src="logo.png" alt="firma it">
</div>
<nav>
<a href="index.html">Strona Główna</a>
<a href="uslugi.html">Usługi</a>
<a href="kontakt.html">Kontakt</a>
</nav>
</div>
<header>
<img src="animacja.gif" alt="Usługi informatyczne">
</header>
<main>
<h2>Oferta</h2>
<ol>
<li>Outsourcing IT</li>
<li>Konfiguracja komputerów</li>
<li>Sprzęt komputerowy</li>
<li>Strony internetowe</li>
</ol>
<hr>
</main>
<footer>
Autor strony: <b><a href="https://ee-informatyk.pl/" target="_blank" style="color: unset;text-decoration: none;">EE-Informatyk.pl</a></b>
</footer>
</div>
</body>
</html> Plik kontakt.html
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Firma IT</title>
<link rel="stylesheet" href="styl.css">
<link rel="shortcut icon" href="logo.png">
</head>
<body>
<div id="kontener">
<div id="gora">
<div id="logo">
<img src="logo.png" alt="firma it">
</div>
<nav>
<a href="index.html">Strona Główna</a>
<a href="uslugi.html">Usługi</a>
<a href="kontakt.html">Kontakt</a>
</nav>
</div>
<header>
<img src="animacja.gif" alt="Usługi informatyczne">
</header>
<main>
<h2>Kontakt</h2>
<table>
<tr>
<td><label for="imie">Imię:</label></td>
<td><input type="text" name="imie" id="imie"></td>
</tr>
<tr>
<td><label for="nazwisko">Nazwisko:</label></td>
<td><input type="text" name="nazwisko" id="nazwisko"></td>
</tr>
<tr>
<td><label for="email">E-mail:</label></td>
<td><input type="email" name="email" id="email"></td>
</tr>
<tr>
<td><label for="zgloszenie">Zgłoszenie:</label></td>
<td><textarea name="zgloszenie" id="zgloszenie" cols="40" rows="10"></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="checkbox" name="zgody" id="zgody"> <label for="zgody"> Zapoznałam/em się z regulaminem</label></td>
</tr>
<tr>
<td></td>
<td><button type="reset" onclick="reset()">Resetuj</button> <button type="submit" onclick="przeslij()">Prześlij</button></td>
</tr>
</table>
<hr>
<p id="wynik"></p>
<script src="skrypt.js"></script>
</main>
<footer>
Autor strony: <b><a href="https://ee-informatyk.pl/" target="_blank" style="color: unset;text-decoration: none;">EE-Informatyk.pl</a></b>
</footer>
</div>
</body>
</html> Plik skrypt.js
function reset() {
document.getElementById("imie").value = "";
document.getElementById("nazwisko").value = "";
document.getElementById("email").value = "";
document.getElementById("zgloszenie").value = "";
}
function przeslij() {
let imie = document.getElementById("imie").value;
let nazwisko = document.getElementById("nazwisko").value;
let email = document.getElementById("email").value;
let zgloszenie = document.getElementById("zgloszenie").value;
const checkbox = document.getElementById('zgody');
let wynik = document.getElementById("wynik");
if (checkbox.checked) {
wynik.innerHTML = "<span style='color: Navy;'>" + imie + " " + nazwisko + " Treść Twojej sprawy " + zgloszenie;
}
else {
wynik.innerHTML = "<span style='color: red;'>Musisz zapoznać się z regulaminem</span>";
}
} Plik styl.css
body {
background-color: #EEEEEE;
font-family: 'Helvetica';
}
#kontener {
width: 90%;
margin: auto;
}
#logo,
nav {
background-color: LightBlue;
height: 100px;
width: 50%;
padding-top: 10px;
padding-bottom: 10px;
float: left;
}
header {
clear: both;
background-color: #DDDDDD;
height: 200px;
}
main {
color: Navy;
margin: 50px;
height: 400px;
}
footer {
text-align: right;
background-color: lightblue;
padding: 10px;
}
button {
background-color: LightBlue;
color: 'Navy';
}
nav a {
color: navy;
font-size: 150%;
font-weight: bold;
text-decoration: none;
margin: 10px;
padding: 5px;
}
nav a:hover {
border: 1px solid Navy;
}Powiązana zawartość
Autorem arkusza jest CKE.GOV.PL