Rozwiązanie - Egzamin Praktyczny INF.03
Arkusz INF.03-02-24.01-SG - Styczeń 2024 - Wersja #02
Skrypt: JavaScript
Baza Danych:
Powiązana zawartość
Przykładowe rozwiązanie
Wymagane zdjęcia
mysz.jpg
favicon.png
baner1.png
baner2.png
animacja.gif
klatki.jpg
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>Komputery</title>
<link rel="stylesheet" href="styl.css">
<link rel="shortcut icon" href="favicon.png" type="image/x-icon">
</head>
<body>
<div id="container">
<header>
<img src="animacja.gif" alt="Pogotowanie komputerowe">
</header>
<nav>
<a href="index.html">Strona Główna </a><a href="kontakt.html"> Kontakt</a>
</nav>
<div id="lewy">
<h3>Kim jesteśmy?</h3>
<p>Jesteśmy firmą z wieloletnim doświadczeniem w zakresie IT.</p>
</div>
<div id="srodek">
<h3>Co robimy?</h3>
<ul>
<li>naprawa komputerów</li>
<li>odzyskiwanie danych</li>
<li>wirusy</li>
<li>konfiguracja LAN</li>
</ul>
</div>
<div id="prawy">
<h3>Jaki jest nasz znak?</h3>
<img src="favicon.png" alt="doświadczenie i niezawodność">
</div>
<footer>
Autor: <a href="https://ee-informatyk.pl/" target="_blank" style="text-decoration: none;color: unset;"><i>EE-Informatyk.pl</i></a>
</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>Komputery</title>
<link rel="stylesheet" href="styl.css">
<link rel="shortcut icon" href="favicon.png" type="image/x-icon">
</head>
<body>
<div id="container">
<header>
<img src="animacja.gif" alt="Pogotowanie komputerowe">
</header>
<nav>
<a href="index.html">Strona Główna</a>
<a href="kontakt.html">Kontakt</a>
</nav>
<div id="lewy">
</div>
<div id="srodek">
<h2>Kontakt</h2>
<table>
<tr>
<td>
<label for="imie">Imię:</label>
</td>
<td>
<input type="text" id="imie" name="imie">
</td>
</tr>
<tr>
<td>
<label for="nazwisko">Nazwisko:</label>
</td>
<td>
<input type="text" id="nazwisko" name="nazwisko">
</td>
</tr>
<tr>
<td>
<label for="email">E-Mail:</label>
</td>
<td>
<input type="email" id="email" name="email">
</td>
</tr>
<tr>
<td>
<label for="zgloszenie">Zgłoszenie:</label>
</td>
<td>
<select name="zgloszenie" id="zgloszenie">
<option value="naprawa komputerów">naprawa komputerów</option>
<option value="odzyskiwanie danych">odzyskiwanie danych</option>
<option value="wirusy">wirusy</option>
<option value="konfiguracja LAN">konfiguracja LAN</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td><input type="checkbox" name="kopia" id="kopia" checked> Wyślij kopię wiadomości</td>
</tr>
<tr>
<td></td>
<td><button type="reset" onclick="czysc()">Czyść</button> <button type="submit" onclick="wyslij()">Wyślij</button></td>
</tr>
</table>
<script src="skrypt.js"></script>
<hr>
<p id="wynik"></p>
</div>
<div id="prawy">
</div>
<footer>
Autor: <a href="https://ee-informatyk.pl/" target="_blank" style="text-decoration: none;color: unset;"><i>EE-Informatyk.pl</i></a>
</footer>
</div>
</body>
</html> Plik styl.css
body {
background-color: #E0F7FA;
font-family: 'Arial';
text-align: center;
}
#container {
width: 95%;
margin: auto;
}
header {
background-color: #00838F;
height: 200px;
}
nav {
background-color: #006064;
padding: 15px;
}
nav a {
color: white;
text-decoration: none;
font-size: 150%;
padding: 0 10px;
}
#lewy,
#srodek,
#prawy {
height: 350px;
width: 33%;
float: left;
}
footer {
clear: both;
background-color: #006064;
color: white;
text-align: right;
padding: 10px;
}
ul > li {
text-align: left;
}
button {
background-color: #00838F;
color: #fff;
}
button:hover {
color: #80DEEA;
} Plik skrypt.js
function czysc() {
document.getElementById("imie").value = "";
document.getElementById("nazwisko").value = "";
document.getElementById("email").value = "";
document.getElementById("zgloszenie").value = "naprawa komputerów";
}
function wyslij() {
let imie = document.getElementById("imie").value;
let nazwisko = document.getElementById("nazwisko").value;
let email = document.getElementById("email").value;
let zgloszenie = document.getElementById("zgloszenie").value;
let wynik = document.getElementById("wynik");
wynik.innerHTML = "<p>" + imie + " " + nazwisko + "<br>" + email.toLowerCase() + "<br>Usługa: " + zgloszenie + "</p>";
}Powiązana zawartość
Autorem arkusza jest CKE.GOV.PL