Untitled

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Strona</title>
  </head>
  <body>
    <div id="header">
      Imie Nazwisko
    </div>

    <div id="main">

      <div id="lewy">
        <form action="#" method="get" id="potega" onsubmit="obliczPotege();">
          Podaj x: <input type="number" name="x" id="x" required> <br>
          Podaj n: <input type="number" name="n" id="n" required><br>
          <input type="submit" value="Oblicz">
        </form>

          <p id="wynik"></p>

    <script type="text/javascript">
      function obliczPotege(){
      var x = document.getElementById("x").value;
      var n = document.getElementById("n").value;

      document.getElementById("wynik").innerHTML = "Wynik " + Math.pow(+x, +n);

    }
    </script>
      </div>


      <div id="prawy">
          <textarea rows="8" cols="60" id="area"></textarea>
        <form id="text" action="#" method="get">
        <input type="submit" name="bletters" value="DUŻE LITERY" onclick="upperAll();">
        <input type="button" name="bletter" value="PIERWSZA LITERA DUŻĄ" onclick="upperFirstLetter();">
        </form>

        <script>
          function upperAll(){
          var text = document.getElementById("area").value;


            var uptext = text.toUpperCase();
            document.getElementById("area").value = uptext;
            window.open('mailto:test@example.com?subject=subject&body='+uptext);
        }

        function upperFirstLetter(){
          String.prototype.capitalize = function() {
          return this.charAt(0).toUpperCase() + this.slice(1);
          }


        var text = document.getElementById("area").value;

        var uptext = text.capitalize();

          document.getElementById("area").value = uptext;
          window.open('mailto:test@example.com?subject=subject&body='+uptext);
      }

        </script>


      </div>
    </div>


    <div id="footer">

<p id="time"></p>


      <script>

       function getDateTime() {
         var now     = new Date();
         var year    = now.getFullYear();
         var month   = now.getMonth()+1;
         var day     = now.getDate();
         var hour    = now.getHours();
         var minute  = now.getMinutes();
         var second  = now.getSeconds();
         if(month.toString().length == 1) {
             var month = '0'+month;
         }
         if(day.toString().length == 1) {
             var day = '0'+day;
         }
         if(hour.toString().length == 1) {
             var hour = '0'+hour;
         }
         if(minute.toString().length == 1) {
             var minute = '0'+minute;
         }
         if(second.toString().length == 1) {
             var second = '0'+second;
         }
         var dateTime = year+'/'+month+'/'+day+' '+hour+':'+minute+':'+second;
          return dateTime;
     }


     document.getElementById("time").innerHTML = getDateTime();

      </script>

    </div>


  </body>


  <style>
    #header{
      text-align: left;
      border-top: 6px;
      border-right: 6px;
      border-left: 6px;
      border-color: black;
      border-style: inset;
      float: center;
      font-size: 22px;
      padding: 25px;
      height: 30px;
    }

    #main{
      display: flex;

    }

    #lewy{
      text-align: left;
      border-left: 6px;
      border-color: black;
      border-style: inset;
      font-size: 22px;
      padding: 25px;
      width: 50%;
      height: 500px;
      float:left;
    }

    #prawy{
      text-align: left;
      border-right: 6px;
      border-color: black;
      border-style: inset;
      float: center;
      font-size: 22px;
      padding: 25px;
      width: 50%;
      height: 500px;
      float:right;
    }


    #footer{
      text-align: left;
      border-bottom: 6px;
      border-right: 6px;
      border-left: 6px;
      border-color: black;
      border-style: inset;
      float: center;
      font-size: 22px;
      padding: 25px;
      height: 30px;
      text-align: center;
    }


  </style>
</html>