Rozwiązanie - Egzamin Praktyczny E.14
Arkusz E.14-01-16.08 - Sierpień 2016 - Wersja #01
Skrypt: JavaScript
Baza Danych:
Powiązana zawartość
Przykładowe rozwiązanie
Wymagane zdjęcia
haslo.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>Miernik jakości hasła</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1><a href="index.html">Sprawdź swoje hasło</a></h1>
</header>
<div id="lewy">
<h2>Wybierz</h2>
<ol>
<li><a href="haslo.html">Sprawdź hasło</a></li>
<li><a href="zasady.html">Zasady tworzenia hasła</a></li>
</ol>
</div>
<div id="prawy">
<img src="haslo.png" alt="jak silne jest Twoje hasło?">
</div>
<footer>
<h3>Miernik jakości hasła</h3>
<p>Stronę opracował: <a href="https://ee-informatyk.pl/" target="_blank" style="color: unset;text-decoration: none;">EE-Informatyk.pl</a></p>
</footer>
</body>
</html> Plik haslo.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>Miernik jakości hasła</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1><a href="index.html">Sprawdź swoje hasło</a></h1>
</header>
<div id="lewy">
<h2>Wybierz</h2>
<ol>
<li><a href="haslo.html">Sprawdź hasło</a></li>
<li><a href="zasady.html">Zasady tworzenia hasła</a></li>
</ol>
</div>
<div id="prawy">
<p><label for="haslo">Twoje hasło:</label> <input type="password" name="haslo" id="haslo"> <button type="submit" onclick="sprawdz()">Sprawdź</button></p>
<p id="wynik"></p>
<script src="skrypt.js"></script>
</div>
<footer>
<h3>Miernik jakości hasła</h3>
<p>Stronę opracował: <a href="https://ee-informatyk.pl/" target="_blank" style="color: unset;text-decoration: none;">EE-Informatyk.pl</a></p>
</footer>
</body>
</html> Plik skrypt.js
function sprawdz() {
let haslo = document.getElementById("haslo").value;
let wynik = document.getElementById("wynik");
let cyfra = false;
if (haslo.length > 0) {
for (let i = 0; i < haslo.length; i++) {
if (!isNaN(haslo[i])) {
cyfra = true;
}
}
if (haslo.length >= 7 && cyfra == true) {
wynik.style.color = "red";
wynik.innerHTML = "DOBRE";
}
else if (haslo.length >= 4 && haslo.length <= 6 && cyfra == true) {
wynik.style.color = "blue";
wynik.innerHTML = "ŚREDNIE";
}
else {
wynik.style.color = "yellow";
wynik.innerHTML = "SŁABE";
}
}
else {
wynik.style.color = "red";
wynik.innerHTML = "WPISZ HASŁO!";
}
} Plik zasady.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>Miernik jakości hasła</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1><a href="index.html">Sprawdź swoje hasło</a></h1>
</header>
<div id="lewy">
<h2>Wybierz</h2>
<ol>
<li><a href="haslo.html">Sprawdź hasło</a></li>
<li><a href="zasady.html">Zasady tworzenia hasła</a></li>
</ol>
</div>
<div id="prawy">
<table>
<tr>
<th>Jakość hasła</th>
<th>Opis</th>
</tr>
<tr>
<td>dobre</td>
<td>długość 7 znaków i więcej, zawiera przynajmniej jedną cyfrę</td>
</tr>
<tr>
<td>średnie</td>
<td>długość 4 do 6 znaków, zawiera przynajmniej jedną cyfrę</td>
</tr>
<tr>
<td>słabe</td>
<td>inne przypadki</td>
</tr>
</table>
</div>
<footer>
<h3>Miernik jakości hasła</h3>
<p>Stronę opracował: <a href="https://ee-informatyk.pl/" target="_blank" style="color: unset;text-decoration: none;">EE-Informatyk.pl</a></p>
</footer>
</body>
</html> Plik styl.css
header {
background: #829EB9;
height: 50px;
font-family: 'Arial';
text-align: center;
}
#lewy {
background: #B3C6D9;
height: 600px;
width: 25%;
float: left;
}
#prawy {
background: #E0E9F1;
height: 600px;
width: 75%;
text-align: center;
float: left;
}
footer {
clear: both;
background: #829EB9;
font-family: 'Arial';
text-align: right;
}Powiązana zawartość
Autorem arkusza jest CKE.GOV.PL