Rozwiązanie - Egzamin Praktyczny E.14

Arkusz E.14-06-17.06 - Czerwiec 2017 - Wersja #06

Skrypt: JavaScript

Baza Danych:

Przykładowe rozwiązanie
Rozwiązanie - Arkusz praktyczny E.14-06-17.06 - Czerwiec 2017 - Wersja #06
Rozwiązanie - Arkusz praktyczny E.14-06-17.06 - Czerwiec 2017 - Wersja #06
Rozwiązanie - Arkusz praktyczny E.14-06-17.06 - Czerwiec 2017 - Wersja #06
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>Remonty mieszkań</title>
        <link rel="stylesheet" href="remont.css">
    </head>
    <body>
        <div id="menu1">
            <img src="logotyp.png" alt="Logo strony">
        </div>

        <div id="menu2">
            <a href="index.html">O FIRMIE</a>
        </div>

        <div id="menu3">
            <a href="adres.html">ADRES</a>
        </div>

        <div id="menu4">
            <a href="policz.html">POLICZ</a>
        </div>

        <div id="menu5">
            <a href="http://www.jakremontowac.pl/" target="_blank">LINKI</a>
        </div>

        <main>
            <h1>Zakres prac</h1>
            <ul>
                <li>układanie podłóg</li>
                <li>układanie glazury</li>
                    <ol>
                        <li>balkony</li>
                        <li>łazienki</li>
                        <li>kuchnie</li>
                    </ol>
                <li>malowanie</li>
            </ul>
        </main>

        <footer>
            <p>Autor strony: <a href="https://ee-informatyk.pl/" target="_blank" style="color: unset;text-decoration: none;">EE-Informatyk.pl</a></p>
        </footer>
    </body>
</html>
Plik policz.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>Remonty mieszkań</title>
        <link rel="stylesheet" href="remont.css">
    </head>
    <body>
        <div id="menu1">
            <img src="logotyp.png" alt="Logo strony">
        </div>

        <div id="menu2">
            <a href="index.html">O FIRMIE</a>
        </div>

        <div id="menu3">
            <a href="adres.html">ADRES</a>
        </div>

        <div id="menu4">
            <a href="policz.html">POLICZ</a>
        </div>

        <div id="menu5">
            <a href="http://www.jakremontowac.pl/" target="_blank">LINKI</a>
        </div>

        <main>
            <h1>Kafelkowanie łazienki</h1>
            <p>powierzchnia w m<sup>2</sup> <input type="number" name="powierzchnia" id="powierzchnia"></p>
            <input type="radio" name="rodzaj" id="rodzaj1" value="70"> Płytki 20 x 20 cm<br>
            <input type="radio" name="rodzaj" id="rodzaj2" value="80"> Płytki 25 x 12 cm<br><br>
            <button type="submit" onclick="przelicz()">PRZELICZ</button>
            <p id="wynik"></p>
        </main>

        <script src="skrypt.js"></script>

        <footer>
            <p>Autor strony: <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 przelicz() {
    let powierzchnia = document.getElementById("powierzchnia").value;
    let rodzaj = document.querySelector('input[name="rodzaj"]:checked').value;
    let wybor = powierzchnia * rodzaj;
    document.getElementById('wynik').innerHTML = "Koszt kafelkowania: " + wybor + " zł";
}
Plik adres.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>Remonty mieszkań</title>
        <link rel="stylesheet" href="remont.css">
    </head>
    <body>
        <div id="menu1">
            <img src="logotyp.png" alt="Logo strony">
        </div>

        <div id="menu2">
            <a href="index.html">O FIRMIE</a>
        </div>

        <div id="menu3">
            <a href="adres.html">ADRES</a>
        </div>

        <div id="menu4">
            <a href="policz.html">POLICZ</a>
        </div>

        <div id="menu5">
            <a href="http://www.jakremontowac.pl/" target="_blank">LINKI</a>
        </div>

        <main>
            <h1>Adres firmy</h1>
            <p>Remonty Mieszkań Krzysztof Kowalski</p>
            <p>ul. Korfantego 60</p>
            <p>Katowice</p>
            <a href="mailto:[email protected]"><button type="submit">Skontaktuj się z nami</button></a>
        </main>

        <footer>
            <p>Autor strony: <a href="https://ee-informatyk.pl/" target="_blank" style="color: unset;text-decoration: none;">EE-Informatyk.pl</a></p>
        </footer>
    </body>
</html>
Plik remont.css
#menu1,#menu2,#menu3,#menu4,#menu5 {
    background: rgb(57,180,107);
    color: white;
    text-align: center;
    font-size: 150%;
    width: 20%;
    height: 220px;
    float: left;
}

main {
    height: 300px;
    clear: both;
}

footer {
    background: rgb(57,180,107);
    color: white;
    text-align: center;
    font-size: 150%;
}

a {
    color: white;
}

button {
    background: green;
    border: 1px solid green;
    color: white;
    font-weight: bold;
    padding: 15px;
}

h1 {
    color: rgb(27,163,82);
}

Strona używa plików cookies

Serwis wykorzystuje ciasteczka głównie w celu prowadzenia systemu formularzy oraz zbierania danych dotyczących ruchu na stronie.

Więcej informacji znajdziesz w Polityce Prywatności

Akceptuję