From 586359838b7e9a649c72456ac7de118d706c64d2 Mon Sep 17 00:00:00 2001
From: susmitapiya <susmitaduttapiya@gmail.com>
Date: Mon, 6 Apr 2020 21:37:53 +0300
Subject: [PATCH] Solution of weekly exercise 2
---
exec1.html | 120 +++++++++++++++++++++++++++++++++++++++++++++++++++++
exec2.html | 113 +++++++++++++++++++++++++++++++++++++++++++++++++
exec4.html | 50 ++++++++++++++++++++++
exec5.html | 31 ++++++++++++++
table.html | 82 ++++++++++++++++++++++++++++++++++++
5 files changed, 396 insertions(+)
create mode 100644 exec1.html
create mode 100644 exec2.html
create mode 100644 exec4.html
create mode 100644 exec5.html
create mode 100644 table.html
diff --git a/exec1.html b/exec1.html
new file mode 100644
index 0000000..33da08b
--- /dev/null
+++ b/exec1.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <title>The document of exercise 1</title>
+ <style>
+ table, th, td {
+ border-collapse: collapse;
+ border: 1px solid black;}
+ </style>
+ </head>
+
+ <body>
+ <h1>Introduction</h1>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In justo justo, volutpat et diam vel, mollis euismod nisl. Aenean ornare sed enim
+ sed suscipit. Donec luctus est a tellus tempus, id lobortis neque ultricies. Nulla non turpis non ligula consectetur auctor. Cras sit amet
+ elementum ex. Aliquam sapien magna, bibendum ut dictum a, commodo non nisl. Phasellus lectus arcu, pellentesque in ex id, iaculis imperdiet
+ lectus. Aliquam mollis, purus vel volutpat faucibus, lectus metus hendrerit libero, ac vehicula felis eros vel mauris. Lorem ipsum dolor sit
+ amet, consectetur adipiscing elit. Aliquam mi diam, congue sed mi eget, euismod interdum nulla.</p>
+
+ <p>Sed odio urna, rhoncus at sem placerat, tincidunt congue magna. Nam convallis mollis libero, non aliquam justo blandit a. Curabitur varius
+ faucibus porttitor. Nullam mollis arcu sit amet metus euismod lobortis. Vivamus id mi at ex commodo tempor. Suspendisse tempor ut mauris et
+ facilisis. In hac habitasse platea dictumst. Morbi ac quam sapien. Duis fermentum, magna eget aliquet ornare, nibh velit consequat sapien,
+ nec rhoncus nisl urna non nulla. Quisque efficitur vehicula felis sit amet condimentum. Phasellus dapibus, ante at gravida maximus, massa
+ urna viverra dolor, sed facilisis quam tellus vel nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at tellus accumsan,
+ venenatis neque ac, consequat est. Fusce vitae pulvinar lacus, vitae tincidunt eros. Nam luctus congue tellus ut mattis. Morbi massa magna,
+ sollicitudin quis rutrum in, pretium et nibh.</p>
+
+ <p>Aenean eleifend felis in dolor sollicitudin, nec congue ipsum faucibus. Pellentesque finibus neque ac libero posuere luctus. Vestibulum
+ imperdiet interdum velit ac gravida. Donec eu pharetra enim. Donec semper tellus at elit consequat, in faucibus nunc tincidunt. Fusce viverra
+ gravida odio, vel aliquam libero luctus in. Duis vel erat ut nulla volutpat lacinia. In nisl erat, gravida in ligula in, malesuada tristique
+ ipsum. Vivamus ornare, quam sit amet pulvinar lacinia, metus lectus cursus orci, vitae egestas libero diam ut tortor. Phasellus viverra arcu
+ ac felis elementum mattis. Nulla suscipit efficitur finibus. Pellentesque et augue felis. Aenean sagittis dapibus nibh, sed consectetur augue.
+ Ut ut dapibus ante, blandit consectetur elit. Nullam id lectus ac tellus ullamcorper congue.</p>
+
+ <h2>Problem description</h2>
+ In this article we discuss the following topics, which we consider very important:
+
+ <ul>
+ <li>Gibberish is poorly understood by most people</li>
+ <li>Gibberish is not considered a valid language</li>
+ <li>The language departments of universities do not teach gibberish</li>
+ <li>Answering exam questions in the gibberish language leads to a failing grade</li>
+ <li>Job applications written in gibberish language are rejected</li>
+ </ul>
+
+ <p>We argue that gibberish should be officially accepted as a language. We expect there to be counterarguments related to, e.g., gibberish being
+ poorly defined at best. While we acknowledge such concerns...</p>
+
+ <h2>The way forward</h2>
+ <p>We suggest the following measures to be taken to stregthen the position of gibberish:</p>
+
+ <ol>
+ <li>More funding for the research of gibberish</li>
+ <li>Establish support groups for professional gibberish speakers</li>
+ <li>Increase political pressure to accept gibberish as an official language</li>
+ <li>Make gibberish the only official language in our country</li>
+ <li>Agree on punitive measures to those who still use the old languages</li>
+ </ol>
+
+ We expect these measures to be taken in the order given above. The expected benefits are great, as shown in the table below. The
+ cost-benefit analyses were done using our in-house simulation program called PRNG. The simulation was run repeatedly until
+ we got the results we wanted.
+
+ <table>
+ <thead>
+ <tr> <th>Language</th> <th>Effect on GNP growth</th> <th>Effect on employment rate</th> <th>Effect on IQ</th> </tr>
+ </thead>
+ <tbody>
+ <tr> <th>English</th> <td>-0.16</td> <td>0.01</td> <td>-9.65</td> </tr>
+ <tr> <th>Swedish</th> <td>-0.26</td> <td>-0.08</td> <td>1.39</td> </tr>
+ <tr> <th>Gibberish</th> <td>0.81</td> <td>0.93</td> <td>8.43</td> </tr>
+ </tbody>
+ </table>
+
+ <p>Based on these results, it seems clear that gibberish should be the language of choice in all civilised countries.</p>
+
+ <h2>Discussion</h2>
+ <p>We showed the benefits of adopting gibberish as the only accepted language. The simulation results, using repeated PRNG, were
+ so clear that we are confident that we should go straight to the implementation phase, instead of conducting human
+ experiments... </p>
+
+ <script type="text/javascript">
+ // Your solutions here
+ let titleOfPage = document.getElementsByTagName('title')[0];
+ let firstTable = document.getElementsByTagName("table")[0];
+ let headingElement = document.getElementsByTagName("h1")[0];
+ let parent = headingElement.parentNode; //heading element means h1, parent means body
+ let orderedList = document.getElementsByTagName("ol")[0].querySelector('li:nth-child(4)');
+ let index;
+ let nodes=[];
+
+ for(let i = 0; i < parent.childNodes.length; i++){
+ if(parent.childNodes[i] === headingElement)
+ index = i;
+
+ if(i>index){
+ parent.childNodes[i].tagName === "P"?
+ nodes.push(parent.childNodes[i]):
+ null;
+ }
+
+ }
+
+
+ appendAsText(titleOfPage);
+ appendAsText(firstTable);
+ appendAsText(nodes[1]);
+ appendAsText(orderedList);
+
+
+ function appendAsText(elem) {
+ let textElement = (elem == null ? "null" : document.createTextNode(elem.outerHTML));
+ document.body.append(document.createElement("BR"), document.createElement("BR"), textElement);
+ }
+
+ </script>
+ </body>
+
+</html>
\ No newline at end of file
diff --git a/exec2.html b/exec2.html
new file mode 100644
index 0000000..20384d0
--- /dev/null
+++ b/exec2.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <title>The document of exercise 2</title>
+ <style>
+ table, th, td {
+ border-collapse: collapse;
+ border: 1px solid black;}
+ </style>
+ </head>
+
+ <body>
+ <h1>Introduction</h1>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In justo justo, volutpat et diam vel, mollis euismod nisl. Aenean ornare sed enim
+ sed suscipit. Donec luctus est a tellus tempus, id lobortis neque ultricies. Nulla non turpis non ligula consectetur auctor. Cras sit amet
+ elementum ex. Aliquam sapien magna, bibendum ut dictum a, commodo non nisl. Phasellus lectus arcu, pellentesque in ex id, iaculis imperdiet
+ lectus. Aliquam mollis, purus vel volutpat faucibus, lectus metus hendrerit libero, ac vehicula felis eros vel mauris. Lorem ipsum dolor sit
+ amet, consectetur adipiscing elit. Aliquam mi diam, congue sed mi eget, euismod interdum nulla.</p>
+
+ <p>Sed odio urna, rhoncus at sem placerat, tincidunt congue magna. Nam convallis mollis libero, non aliquam justo blandit a. Curabitur varius
+ faucibus porttitor. Nullam mollis arcu sit amet metus euismod lobortis. Vivamus id mi at ex commodo tempor. Suspendisse tempor ut mauris et
+ facilisis. In hac habitasse platea dictumst. Morbi ac quam sapien. Duis fermentum, magna eget aliquet ornare, nibh velit consequat sapien,
+ nec rhoncus nisl urna non nulla. Quisque efficitur vehicula felis sit amet condimentum. Phasellus dapibus, ante at gravida maximus, massa
+ urna viverra dolor, sed facilisis quam tellus vel nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at tellus accumsan,
+ venenatis neque ac, consequat est. Fusce vitae pulvinar lacus, vitae tincidunt eros. Nam luctus congue tellus ut mattis. Morbi massa magna,
+ sollicitudin quis rutrum in, pretium et nibh.</p>
+
+ <p>Aenean eleifend felis in dolor sollicitudin, nec congue ipsum faucibus. Pellentesque finibus neque ac libero posuere luctus. Vestibulum
+ imperdiet interdum velit ac gravida. Donec eu pharetra enim. Donec semper tellus at elit consequat, in faucibus nunc tincidunt. Fusce viverra
+ gravida odio, vel aliquam libero luctus in. Duis vel erat ut nulla volutpat lacinia. In nisl erat, gravida in ligula in, malesuada tristique
+ ipsum. Vivamus ornare, quam sit amet pulvinar lacinia, metus lectus cursus orci, vitae egestas libero diam ut tortor. Phasellus viverra arcu
+ ac felis elementum mattis. Nulla suscipit efficitur finibus. Pellentesque et augue felis. Aenean sagittis dapibus nibh, sed consectetur augue.
+ Ut ut dapibus ante, blandit consectetur elit. Nullam id lectus ac tellus ullamcorper congue.</p>
+
+ <h2>Problem description</h2>
+ In this article we discuss the following topics, which we consider very important:
+
+ <ul>
+ <li>Gibberish is poorly understood by most people</li>
+ <li>Gibberish is not considered a valid language</li>
+ <li>The language departments of universities do not teach gibberish</li>
+ <li>Answering exam questions in the gibberish language leads to a failing grade</li>
+ <li>Job applications written in gibberish language are rejected</li>
+ </ul>
+
+ <p>We argue that gibberish should be officially accepted as a language. We expect there to be counterarguments related to, e.g., gibberish being
+ poorly defined at best. While we acknowledge such concerns...</p>
+
+ <h2>The way forward</h2>
+ <p>We suggest the following measures to be taken to stregthen the position of gibberish:</p>
+
+ <ol>
+ <li>More funding for the research of gibberish</li>
+ <li>Establish support groups for professional gibberish speakers</li>
+ <li>Increase political pressure to accept gibberish as an official language</li>
+ <li>Make gibberish the only official language in our country</li>
+ <li>Agree on punitive measures to those who still use the old languages</li>
+ </ol>
+
+ We expect these measures to be taken in the order given above. The expected benefits are great, as shown in the table below. The
+ cost-benefit analyses were done using our in-house simulation program called PRNG. The simulation was run repeatedly until
+ we got the results we wanted.
+
+ <table>
+ <thead>
+ <tr> <th>Language</th> <th>Effect on GNP growth</th> <th>Effect on employment rate</th> <th>Effect on IQ</th> </tr>
+ </thead>
+ <tbody>
+ <tr> <th>English</th> <td>-0.16</td> <td>0.01</td> <td>-9.65</td> </tr>
+ <tr> <th>Swedish</th> <td>-0.26</td> <td>-0.08</td> <td>1.39</td> </tr>
+ <tr> <th>Gibberish</th> <td>0.81</td> <td>0.93</td> <td>8.43</td> </tr>
+ </tbody>
+ </table>
+
+ <p>Based on these results, it seems clear that gibberish should be the language of choice in all civilised countries.</p>
+
+ <h2>Discussion</h2>
+ <p>We showed the benefits of adopting gibberish as the only accepted language. The simulation results, using repeated PRNG, were
+ so clear that we are confident that we should go straight to the implementation phase, instead of conducting human
+ experiments... </p>
+
+ <script type="text/javascript">
+ // Your solutions here
+ let header = document.createElement("h2");
+ let headerText = document.createTextNode("Reviewer comments");
+ header.appendChild(headerText);
+ document.body.appendChild(header);
+
+
+ let paragraphText = document.createTextNode("This is a good article, accepted.");
+ document.body.appendChild(paragraphText);
+
+ let row = document.querySelector("tbody tr:nth-child(2)");
+ row.remove();
+ document.querySelector("ol li:last-child").innerText="Have fun";
+
+
+ let ul = document.body.querySelector("ul");
+ let ol = document.createElement("ol");
+
+ while(ul.children.length>0){
+ ol.appendChild(ul.children[0]);
+ //console.log(ul.children[0]);
+ }
+
+ ul.parentNode.replaceChild(ol, ul);
+
+
+ </script>
+ </body>
+
+</html>
\ No newline at end of file
diff --git a/exec4.html b/exec4.html
new file mode 100644
index 0000000..36b3b44
--- /dev/null
+++ b/exec4.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Exercise 4</title>
+ </head>
+
+ <body onload="appendListButton()">
+
+ <script>
+ "use strict";
+
+ function hideTable() { // Event handler for hiding table
+ document.getElementById("table").style.display = "none";
+ console.log("true");
+ }
+
+ // Add a new button for hiding the list
+ let listButton = document.createElement("button");
+ listButton.textContent = "Hide list";
+
+ function appendListButton(){
+ document.body.append(listButton);
+ }
+
+ // Add an event handler for hiding the list
+ listButton.onclick = function() {
+ let l = document.getElementById("list");
+ l.hidden = true;
+
+ }
+ </script>
+
+ <ul id="list">
+ <li>1</li>
+ <li>2</li>
+ <li>3</li>
+ </ul>
+
+
+
+ <table id="table">
+ <tr><td>1</td><td>2</td><td>3</td></tr>
+ <tr><td>4</td><td>5</td><td>6</td></tr>
+ </table>
+
+ <button id="table-button" onclick="hideTable()">Hide table</button>
+
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/exec5.html b/exec5.html
new file mode 100644
index 0000000..0bfb80f
--- /dev/null
+++ b/exec5.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <title>mass index calculator</title>
+ </head>
+ <body>
+ <form action="#" name="bmiForm">
+ Type your weight (kg) : <input type="text" id="weight" name="weight"> <br/><br/>
+ Type your height (cm) : <input type="text" id="height" name="height"> <br/><br/>
+ <input type="button" value="Result" onClick="myFunction()"> <br/><br/>
+ Your BMI is : <input type="text" name="ans">
+
+ </form>
+ <script type="text/javascript">
+
+ function myFunction(){
+ let weight = document.bmiForm.weight.value;
+ let height = document.bmiForm.height.value;
+ let bmi = weight/((height/100)^2);
+
+ document.bmiForm.ans.value = bmi.toFixed(3);
+
+ }
+
+
+ </script>
+
+ </body>
+
+</html>
\ No newline at end of file
diff --git a/table.html b/table.html
new file mode 100644
index 0000000..fa8b8f1
--- /dev/null
+++ b/table.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Table modification test</title>
+ </head>
+ <body>
+ <table border="1" class="dataframe"> <thead> <tr style="text-align: right;">
+ <th></th> <th>l1</th> <th>l2</th> <th>l3</th> </tr> </thead> <tbody>
+ <tr> <th>0</th> <td>39.881372</td> <td>30.886797</td>
+ <td>26.426483</td> </tr> <tr> <th>1</th> <td>47.122309</td>
+ <td>45.424395</td> <td>11.771349</td> </tr> <tr> <th>2</th>
+ <td>43.409710</td> <td>10.243109</td> <td>35.363305</td> </tr>
+ <tr> <th>3</th> <td>37.777957</td> <td>11.111839</td>
+ <td>44.642905</td> </tr> <tr> <th>4</th> <td>41.234206</td>
+ <td>32.901069</td> <td>21.373396</td> </tr> <tr> <th>5</th>
+ <td>17.845754</td> <td>44.446053</td> <td>17.198729</td> </tr> <tr>
+ <th>6</th> <td>31.306540</td> <td>39.691567</td> <td>24.499019</td>
+ </tr> <tr> <th>7</th> <td>32.803538</td> <td>20.652268</td>
+ <td>31.436150</td> </tr> <tr> <th>8</th> <td>22.373465</td>
+ <td>36.550800</td> <td>46.926281</td> </tr> <tr> <th>9</th>
+ <td>49.541157</td> <td>12.433515</td> <td>38.412131</td> </tr> <tr>
+ <th>10</th> <td>40.660321</td> <td>36.081476</td> <td>46.947565</td>
+ </tr> <tr> <th>11</th> <td>23.428468</td> <td>28.572784</td>
+ <td>43.438197</td> </tr> <tr> <th>12</th> <td>12.797306</td>
+ <td>10.572128</td> <td>40.881131</td> </tr> <tr> <th>13</th>
+ <td>27.867742</td> <td>38.768324</td> <td>39.182509</td> </tr> <tr>
+ <th>14</th> <td>21.523718</td> <td>49.443222</td> <td>30.352287</td>
+ </tr> <tr> <th>15</th> <td>28.700781</td> <td>18.962053</td>
+ <td>35.839428</td> </tr> <tr> <th>16</th> <td>12.178616</td>
+ <td>45.003774</td> <td>23.593837</td> </tr> <tr> <th>17</th>
+ <td>28.136274</td> <td>45.399157</td> <td>27.748549</td> </tr> <tr>
+ <th>18</th> <td>20.871166</td> <td>25.499391</td> <td>43.909278</td>
+ </tr> <tr> <th>19</th> <td>11.443896</td> <td>47.372888</td>
+ <td>14.518046</td> </tr> <tr> <th>20</th> <td>36.393427</td>
+ <td>20.269552</td> <td>44.392238</td> </tr> <tr> <th>21</th>
+ <td>30.492493</td> <td>48.938192</td> <td>12.673907</td> </tr> <tr>
+ <th>22</th> <td>26.542051</td> <td>16.769117</td> <td>40.525393</td>
+ </tr> <tr> <th>23</th> <td>15.185245</td> <td>27.800457</td>
+ <td>32.456263</td> </tr> <tr> <th>24</th> <td>27.257922</td>
+ <td>34.352808</td> <td>28.911604</td> </tr> <tr> <th>25</th>
+ <td>39.056351</td> <td>25.323935</td> <td>48.435725</td> </tr> <tr>
+ <th>26</th> <td>26.851790</td> <td>27.702057</td> <td>48.323517</td>
+ </tr> <tr> <th>27</th> <td>14.228176</td> <td>17.274647</td>
+ <td>36.562335</td> </tr> <tr> <th>28</th> <td>47.853290</td>
+ <td>17.168357</td> <td>23.200539</td> </tr> <tr> <th>29</th>
+ <td>21.224828</td> <td>25.435404</td> <td>46.845627</td> </tr> <tr>
+ <th>30</th> <td>23.387375</td> <td>24.859866</td> <td>42.612548</td>
+ </tr> <tr> <th>31</th> <td>34.235931</td> <td>25.065070</td>
+ <td>43.713713</td> </tr> <tr> <th>32</th> <td>32.597652</td>
+ <td>18.689168</td> <td>40.850310</td> </tr> <tr> <th>33</th>
+ <td>21.798644</td> <td>21.781336</td> <td>47.951691</td> </tr> <tr>
+ <th>34</th> <td>23.027987</td> <td>27.216349</td> <td>36.692430</td>
+ </tr> <tr> <th>35</th> <td>40.035540</td> <td>29.504912</td>
+ <td>12.527009</td> </tr> <tr> <th>36</th> <td>34.128380</td> <td>26.851145</td> <td>39.726875</td> </tr> <tr> <th>37</th> <td>13.747258</td> <td>37.058020</td> <td>36.958695</td> </tr> <tr> <th>38</th> <td>43.412964</td> <td>41.069649</td> <td>31.642180</td> </tr> <tr> <th>39</th> <td>26.502127</td> <td>34.107396</td> <td>12.665183</td> </tr> <tr> <th>40</th> <td>22.998686</td> <td>37.214523</td> <td>44.001140</td> </tr> <tr> <th>41</th> <td>35.593631</td> <td>36.180791</td> <td>18.140868</td> </tr> <tr> <th>42</th> <td>35.411392</td> <td>11.934926</td> <td>36.581653</td> </tr> <tr> <th>43</th> <td>11.162306</td> <td>47.535431</td> <td>29.046428</td> </tr> <tr> <th>44</th> <td>32.878051</td> <td>22.151169</td> <td>32.168147</td> </tr> <tr> <th>45</th> <td>31.050578</td> <td>20.461168</td> <td>36.931490</td> </tr> <tr> <th>46</th> <td>41.511735</td> <td>45.712651</td> <td>14.114157</td> </tr> <tr> <th>47</th> <td>33.243129</td> <td>12.795237</td> <td>17.873729</td> </tr> <tr> <th>48</th> <td>44.730422</td> <td>40.806330</td> <td>14.885221</td> </tr> <tr> <th>49</th> <td>24.244746</td> <td>41.336902</td> <td>26.689255</td> </tr> </tbody></table>
+ </body>
+
+ <script>
+ // your code here
+ let rows = document.querySelectorAll("tbody tr");
+
+ for(let row of rows){
+
+ const tds = row.querySelectorAll('td')
+ const values=[];
+ let biggestElement=0;
+
+ for(let td of tds){
+ values.push(td.textContent)
+ }
+
+ biggestElement = Math.max(...values);
+
+ for(let td of tds){
+ if(td.textContent == biggestElement){
+ td.innerHTML ="<strong>"+td.textContent+"</strong>"
+ }
+ }
+
+ }
+
+ </script>
+</html>
\ No newline at end of file
--
GitLab