Untitled

<html>
    <head>
        <meta charset="utf-8">
        <title>Stacja Meteo</title>
        <style>
            a{
                color: yellow;
            }
            img{
                border: solid blue 1px;
            }
            .wrapper{
                display: flex;
            }
            .header{
                background-color: #4A7684;
                color: white;
                text-align: center;
                font-family: Arial;
                padding: 20px;
            }
            .footer{
                background-color: #4A7684;
                color: white;
                text-align: center;
                font-family: Arial;
                padding: 20px;
            }
            .left{
                text-align: center;
                width: 65%;
                height: 500px;
            }
            .right{
                background-color: #4A7684;
                color: white;
                width: 35%;
                height: 500px;
            }
        </style>
    </head>
    <body>
        <div class="header">
            <h1>STACJA METEO</h1>
        </div>
        <div class="wrapper">
            <div class="left">
            <h2>Dokumentacja wyników zapytań w bazie Meteo</h2>
            <table>
                <tr>
                    <td><img src="kw.jpg" alt="kwerenda1"></td>
                    <td><img src="kw.jpg" alt="kwerenda2"></td>
                </tr>
                <tr>
                    <td><img src="kw.jpg" alt="kwerenda3"></td>
                    <td><img src="kw.jpg" alt="kwerenda4"></td>
                </tr>
            </table>
        </div>
        <div class="right">
            <h2>zamiana jednostek temperatury</h2>
            Temperatura w O C:<br>
            <input type="text" id="convTemp">
            <br><br>
            Zamień na:<br>
            <button type="button" id="Kbutt">Kelwiny</button>
            <button type="button" id="Fbutt">Fahrenheity</button>
            <p id="temp"></p>
            <h2>Do pobrania</h2>
            <ul>
                <li><a href="kwerendy.txt">Kwerendy</a></li>
                <li><a href="baza_zad5.sql">Eksport MySQL</a></li>
            </ul>
        </div>
        </div>
        <div class="footer">
            <p>PESEL AUTORA STRONY: 99999999999999</p>
        </div>
        <script>
            function toKelvin(t){
                return t + 273,15;
            }
            function toFahrenheit(t){
                return (t * 1,8) + 32;
            }

            document.getElementById("Kbutt").addEventListener("click",function(){
                let num = parseInt(document.getElementById("convTemp").value);
                document.getElementById("temp").innerHTML = toKelvin(num);
            });

            document.getElementById("Fbutt").addEventListener("click",function(){
                let num = Number(document.getElementById("convTemp").value);
                document.getElementById("temp").innerHTML = toFahrenheit(num);
            });
        </script>
    </body>
</html>