index.html 6.28 KB
Newer Older
Ratnadeep Rajendra Kharade's avatar
Ratnadeep Rajendra Kharade committed
1
2
<!DOCTYPE html>
<html>
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<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-->

Ratnadeep Rajendra Kharade's avatar
Ratnadeep Rajendra Kharade committed
22
    <!-- ÄNDERUNGEN NUR NACH DIESER ZEILE -->
23

Ratnadeep Rajendra Kharade's avatar
Ratnadeep Rajendra Kharade committed
24
    <!-- TODO Blindtext anpassen: -->
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

    <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="huey" name="drone" value="huey" checked>
            <label for="huey">I will enter text manually.</label></div>
          <div>
            <input onclick="handleTextRadioClick()" type="radio" id="dewey" name="drone" value="dewey">
            <label for="dewey">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>
            <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>
        </div>
        <div>
          <label for="readerLevel">Select reader level:</label>
          <select class="box-input" id="readerLevel">
            <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>
        <div>
          <label for="readerLevel">Select category of the reader:</label>
          <select class="box-input" id="readerLevel">
            <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>
        <div>
          <div>
            <button onclick="calculateReadingTime()">Calculate</button>
          </div>
81
82
          <div id="calculate-time-element" style="display: none;">
            <div class="title">
83
84
              <h2>Estimated Reading Time: 5 min</h2>
            </div>
85
86
87
88
            <div>
              Send your feedback on: ybehira@yahoo.com
              <button onclick="showFeedbackForm()">Feedback</button>
            </div>
89
          </div>
90
          
Ratnadeep Rajendra Kharade's avatar
Ratnadeep Rajendra Kharade committed
91
        </div>
92
        <div id="feedback-form" style="display: none;">
93
          <div class="title" style="padding-bottom: 12px; border-bottom: 1px solid #dddddd; margin-bottom: 10px;">
94
            <h3>Feedback Form</h3>
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
          </div>
          <div>
            <form action="mailto:ratnadeepkharade@gmail.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>
      let inputObj = {};

      function handleTextRadioClick() {
        let textChoice = document.querySelector('input[name="drone"]:checked').value;
        console.log(textChoice);
        toggleElement('character-calculation-wrapper');
        toggleElement('manual-character-input');
      }

      function toggleElement(id) {
        let x = document.getElementById(id);
        if (x.style.display === "none") {
          x.style.display = "block";
        } else {
          x.style.display = "none";
        }
      }

      function handleTextAreaChange() {
        let value = document.getElementById("manual-text-entry").value;
        value = value.trim();
        let characters = value.split(' ').join('').length;
        setCharacterLength(characters);
        document.getElementById("calculatedTextCharacters").setAttribute('value', characters)
      }

      function handleCharacterInputChange() {
        let value = document.getElementById("inputTextCharacters").value;
        setCharacterLength(value);
      }

      function setCharacterLength(characters) {
        inputObj.characters = characters;
        console.log('Character length: ' + inputObj.characters);
      }

      function calculateReadingTime() {
        let x = document.getElementById('calculate-time-element');
        x.style.display = "block";
      }

167
168
169
170
171
      function showFeedbackForm() {
        let x = document.getElementById('feedback-form');
        x.style.display = "block";
      }

172
    </script>
Ratnadeep Rajendra Kharade's avatar
Ratnadeep Rajendra Kharade committed
173

174
175
176
    <!-- KEINE ÄNDERUNGEN NACH DIESER ZEILE -->
    <script src="settings.js"> </script>
</body>
Ratnadeep Rajendra Kharade's avatar
Ratnadeep Rajendra Kharade committed
177

178
</html>