template.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>HIERDA?</title>
    <style media="screen">
      *{
        appearance: none;
      }
      body{
        padding: 2rem;
        font-family: serif;
        font-size:2vh;
        line-height:1.5em;
      }
      h1{
        font-weight: bold;
        text-align: center;
      }
      h2{
        font-style: italic;
        text-align: center;
      }
      #out{
        width: 100%;
        max-width: 480px;
        margin: 0 auto;
      }
      p{
        margin: 0;
        margin-bottom: 0.5em;
      }
    </style>
  </head>
  <body>
    <h1>Von Hier nach Da</h1><br>
    <h2>Johannes Hassenstein</h2><br>
    <div id="out"></div>
    <script>
    function generate(paragraphs,total){ //generates a random text based on array of paragraphs passed with a total number of words passed
      let hier = 0 //have a counter for both words
      let da = 0
      console.log(hier,da) //return the count, there has to be an equal amount of both words and the amount has to be half the total
      return "" //return joined output
    }
      const paragraphs = [3,4,8,9,2,3,1,11,6,8,3,12,3,7,6,14,6,6,7,6,9,10,14,3,4,3,9,4,6,3,8,2]
      let total = 0
      for(let p of paragraphs){
        total += p
      }
      window.addEventListener("load",function(){
        document.getElementById("out").innerHTML = generate(paragraphs,total)
      })
    </script>
  </body>
</html>