oysteikt-skolearbeid/IT2805
oysteikt-skolearbeid/IT2805
1
0
Fork 0
Code Issues Pull Requests Activity

Add exercise

Browse Source
This commit is contained in:
Oystein Kristoffer Tveit 2020-10-07 00:19:57 +02:00
parent 58ffcec09b
commit 0983b959ab
8 changed files with 224 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
Exercise 6/images/calculate-tax.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

BIN
Exercise 6/images/gif.mov Normal file
View File

Binary file not shown.

76
Exercise 6/index.html Normal file
View File

@ -0,0 +1,76 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tax form</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<script src="./script.js" defer></script>
</head>
<body>
<header>
<h1>Hero tax</h1>
</header>
<form action="http://folk.ntnu.no/michaedm/norwegian-tax-administration/receive.php" method="post">
<label for="nameInput">Real name</label>
<input type="text" name="name" id="nameInput" pattern="[A-Za-z]+" title="Please use only alphanumeric characters" autofocus required>
<!-- Another option for genders would've been radio buttons -->
<label for="genderInput">Gender</label>
<select name="gender" id="genderInput" required>
<option value="">None</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<label for="emailInput">E-mail</label>
<input type="email" name="email" id="emailInput" required>
<!-- This might not return the value in the DD.MM.YYYY format, but it's usually considered to be the safest and most correct method for date inputs. Also, even though the html validator doesn't like it, the regexp is only used as a fallback field if the browser has no native date picker (see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date#Handling_browser_support). If you need conversion for something like a database, this would usually be done in javascript -->
<label for="birthdayInput">Birthdate</label>
<input type="date" name="birthday" id="birthdayInput" max="1987-12-31" pattern="\d{2}\.\d{2}\.\d{4}" required>
<label for="heroInput">Hero name</label>
<input type="text" name="hero" id="heroInput" required>
<div class="inline">
<label for="wearsSpandexInput">Do you wear spandex?</label>
<input type="checkbox" name="spandex" id="wearsSpandexInput" required>
</div>
<div id="sliders">
<!-- I made these inputs as sliders because I felt it made more sense considering the "floatish" nature of these properties. If we had been allowed to use javascript for this task, I probably also would've added some kind of a number that would show the slider value. If it's really important that these values could be specified as an exact value, you would only need to change the type from "range" to "number" (and maybe add a required-attribute). Min, max and step will work in the same way. -->
<label for="strengthInput">Strength</label>
<input type="range" name="strength" id="strengthInput" min="1" max="10" step="1">
<label for="speedInput">Speed</label>
<input type="range" name="speed" id="speedInput" min="1" max="10" step="1">
<label for="intelligenceInput">Intelligence</label>
<input type="range" name="intelligence" id="intelligenceInput" min="1" max="10" step="1">
</div>
<div id="taxFields">
<label for="incomeInput">Income</label>
<input type="number" name="income" id="incomeInput" min="0" step="1" required>
<label for="wealthInput">Wealth</label>
<input type="number" name="wealth" id="wealthInput" min="0" step="1" required>
<label for="taxInput">Tax</label>
<input type="number" name="tax" id="taxInput" readonly>
</div>
<input type="submit" value="Submit" id="submitButton">
</form>
</body>
</html>

23
Exercise 6/questions.txt Normal file
View File

@ -0,0 +1,23 @@
# Questions
1. Why does the expression `0.1 + 0.2 === 0.3` evaluate to `false` in javascript?
Because of how most programming languages represent fractions, not all numbers can be represented correctly. Just like how we can't represent 1/3 in our base 10 number system, neither 0.1 nor 0.2 can't be represented without recurring digits, and therefore we end up with an approximation. `0.1 + 0.2` is a pretty common example of this, and it resolves to `0.30000000000000004`
2. What does the `method` attribute on a `form` element decide?
The `method` of on a `form` decides what kind of HTTP request to send on submission. `POST` and `ADD` are the most normal ones to use for this. You might use `GET` if the data isn't sensitive.
3. Explain why the form fields appear in the URL when the `method` on `form` element is changed to `GET`?
There are several types of HTTP requests. Some of them are quite similar but named differently for semantic purposes. `GET` and `POST` however, are quite different. `POST` is a generic request used for sending data to a server. Therefore, the packets contain data fields, and it can even be encrypted. `GET` however is only supposed to be used to fetch information from the server. `GET` requests have no data fields. If you want to include any modifiers or data in the request, it has to go in the URL of the request (with a few exceptions for metadata such as some kinds of system information, cookies, authentication certificates etc.)
4. Why is it considered bad practise to only validate form input with HTML5 and/or Javascript?
You can't run all kinds of validation in HTML. There are only basic, but often used options for HTML validation. Javascript however can do a lot more advanced validation, but using this to reimplement everything that the browser already does for you is bad practise. You would essentially be reinventing the wheel. It also means you'd have to take care of things like giving the user feedback on what's wrong. In the end, you would also want backend validation on a real project so no one can just bypass the html and javascript validation with sending an http request directly containing bad or even malicious data.
5. When is it appropriate to use `textarea` over `input`?
`textarea` is used whenever you have a long text, such as a tweet, a paragraph or really just anything longer than a few words. If the user is going to write more than one sentence, textarea is usually easier to work with than `input`. While it is still possible to force `input` to act as some kind of textfield, it's bad practise to do so. The text type `input` tag is really only meant for short entries such as names, usernames, food preferences etc.
[//]: # vim: set syntax=markdown:

15
Exercise 6/script.js Normal file
View File

@ -0,0 +1,15 @@
const [incomeInput, wealthInput, taxInput] = ["incomeInput", 'wealthInput', 'taxInput']
.map(id => document.getElementById(id));
const tax = (income, wealth) => (0.35 * income) + (0.25 * wealth);
const updateTax = () => {
const [income, wealth] = [incomeInput.value, wealthInput.value]
.map(value => parseInt(value))
.map(value => isNaN(value) ? 0 : value);
taxInput.value = tax(income, wealth);
}
incomeInput.addEventListener('input', updateTax);
wealthInput.addEventListener('input', updateTax);

58
Exercise 6/style.css Normal file
View File

@ -0,0 +1,58 @@
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: grey;
}
h1 {
text-align: center;
color: #2b68d8;
padding: 10px;
border-radius: 20px;
background-color: #DFDFDF;
margin: 30px 10%;
}
form {
margin: 0 10%;
background-color: #DFDFDF;
padding: 50px;
border-radius: 20px;
}
input, select {
display: block;
margin-bottom: 20px;
}
input[type=text], input[type=number], input[type=email], input[type=date], select {
border-radius: 5px;
}
input[type=submit] {
font-size: large;
border-radius: 5px;
color: #2b68d8;
background-color: #DDDDDD;
}
input[type=submit]:hover {
background-color: #FFFFFF;
}
#sliders input, #taxFields input {
display: inline;
margin-right: 20px;
}
#sliders {
margin: 20px 0;
}
#taxFields {
margin: 20px 0;
}
.inline * {
display: inline;
}

7
Exercise 6/table.txt Normal file
View File

@ -0,0 +1,7 @@
The PDF didn't want to cooperate so here you have the table for part 6.
| Real name | Gender | E-Mail | Birthyear | Hero name | Spandex | Strength | Speed | Intelligence | Wealth | Income | Tax
|-------------|--------|----------------------------|-----------|-----------|---------|----------|-------|--------------|----------- |-----------|-----
| Nick Nedd | Male | nick@tick.com | 1976 | The Tick | Yes | 9 | 7 | 5 | 0 | 90 287 | 29 794
| Bruce Wayne | Male | bruce@wayneenterprises.com | 1974 | Batman | No | 7 | 4 | 9 | 50 144 501 | 3 343 891 | 11 132 384
| Selina Kyle | Female | selina@whiskas.com | 1977 | Catwoman | Yes | 6 | 6 | 9 | 2 987 323 | 0 | 597 464

45
Exercise 6/taxes.xml Normal file
View File

@ -0,0 +1,45 @@
<?xml version="1.0" encoding="UTF-8"?>
<people>
<person>
<name>Nick Nedd</name>
<gender>Male</gender>
<email>nick@tick.com</email>
<birthyear>1976</birthyear>
<hero>The Tick</hero>
<spandex>True</spandex>
<strength>9</strength>
<speed>7</speed>
<intelligence>5</intelligence>
<wealth>0</wealth>
<income>90287</income>
<tax>29794</tax>
</person>
<person>
<name>Bruce Wayne</name>
<gender>Male</gender>
<email>bruce@wayneenterprises.com</email>
<birthyear>1974</birthyear>
<hero>Batman</hero>
<spandex>False</spandex>
<strength>7</strength>
<speed>4</speed>
<intelligence>9</intelligence>
<wealth>50144501</wealth>
<income>3343891</income>
<tax>11132384</tax>
</person>
<person>
<name>Selina Kyle</name>
<gender>Female</gender>
<email>selina@whiskas.com</email>
<birthdate>1977</birthdate>
<hero>Catwoman</hero>
<spandex>True</spandex>
<strength>6</strength>
<speed>6</speed>
<intelligence>9</intelligence>
<wealth>2987323</wealth>
<income>0</income>
<tax>597464</tax>
</person>
<people>