index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="generator" content="GitLab Pages">
  <title>Home</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div id="topbar">
    <div id="menu" class="navbar"></div>
  </div>

  <div class="content">
    <header>
      <h1 id='projectname'></h1>
    </header>
    <!--Projektname kommt aus settings.js, hier nichts einfügen-->

    <!-- ÄNDERUNGEN NUR NACH DIESER ZEILE -->

    <!-- TODO Blindtext anpassen: -->

    <section class="wrapper">
      <div class="title">
        <h2>Reading time calculator</h2>
      </div>
      <section class="inner">
        <div>
          <div class="title">
            <h3>Please select an option</h3>
          </div>
          <div>
            <input onclick="handleTextRadioClick()" type="radio" id="manual" name="text-input-option" value="manual"
              checked>
            <label for="manual">I will enter text manually.</label></div>
          <div>
            <input onclick="handleTextRadioClick()" type="radio" id="calculated" name="text-input-option"
              value="calculated">
            <label for="calculated">I have already calculated the text length.</label>
          </div>
          <div id="character-calculation-wrapper">
            <div>
              <textarea oninput="handleTextAreaChange()" placeholder="Enter text here..." class="box-input"
                name="textarea" id="manual-text-entry" cols="90" rows="5" value=""></textarea>
              <div id="textarea-validation" class="error-message">Please enter the text.</div>
            </div>
            <div>
              <label for="calculatedTextCharacters">Total characters in text: </label>
              <input class="box-input" type="number" id="calculatedTextCharacters" name="calculatedTextCharacters"
                value="" disabled>
            </div>
          </div>
          <div id="manual-character-input" style="display: none;">
            <label for="inputTextCharacters">Enter number of characters: </label>
            <input oninput="handleCharacterInputChange()" placeholder="e.g. 120" class="box-input" type="number"
              id="inputTextCharacters" name="inputTextCharacters" value="">
            <div id="textCharacters-validation" class="error-message">Please enter number the of characters.</div>
          </div>
        </div>
        <div>
          <label for="readerLevel">Reader Level:</label>
          <select class="box-input" id="readerLevel" onchange="readerLevelChangeEvent(event)">
            <option value="">Select level</option>
            <option value="First Year">First Year</option>
            <option value="Second Year">Second Year</option>
            <option value="Third Year">Third Year</option>
            <option value="Fourth Year">Fourth Year</option>
          </select>
          <div id="readerLevel-validation" class="error-message">Please select the reader level.</div>
        </div>
        <div>
          <label for="readerCategory">Reader Category:</label>
          <select class="box-input" id="readerCategory" onchange="readerCategoryChangeEvent(event)">
            <option value="">Select category</option>
            <option value="Mixed-ability group">Mixed-ability group</option>
            <option value="High-ability group">High-ability group</option>
            <option value="Good-ability group">Good-ability group</option>
            <option value="Average-ability group">Average-ability group</option>
          </select>
          <div id="readerCategory-validation" class="error-message">Please select the reader category.</div>
        </div>
        <div>
          <div>
            <button onclick="calculateReadingTime()">Calculate</button>
          </div>
          <div id="calculate-time-element" style="display: none;">
            <div class="title">
              <h2>Estimated Reading Time: 5 min</h2>
            </div>
            <div>
              Send your feedback on: ybehira@yahoo.com
              <button onclick="showFeedbackForm()">Feedback</button>
            </div>
          </div>

        </div>
        <div id="feedback-form" style="display: none;">
          <div class="title" style="padding-bottom: 12px; border-bottom: 1px solid #dddddd; margin-bottom: 10px;">
            <h3>Feedback Form</h3>
          </div>
          <div>
            <form action="mailto:ybehira@yahoo.com" method="GET" target="_blank">
              <div class="field">
                <div>
                  <label class="label" for="subject">Email Subject</label>
                </div>
                <div>
                  <input class="box-input full-width" name="subject" id="subject" type="text" class="input"
                    placeholder="Enter email subject here...">
                </div>
              </div>
              <div class="field">
                <div>
                  <label class="label" for="body">Email Body</label>
                </div>
                <div>
                  <textarea class="box-input full-width" cols="90" rows="5" class="textarea" name="body" id="body"
                    placeholder="Enter email body here..."></textarea>
                </div>
              </div>
              <div>
                <button type="submit">Create Email</button>
              </div>
            </form>
          </div>
        </div>
      </section>
    </section>

    <script src="index.js" type="text/javascript"> </script>

    <!-- KEINE ÄNDERUNGEN NACH DIESER ZEILE -->
    <script src="settings.js"> </script>
</body>

</html>