Add exercise
This commit is contained in:
parent
58ffcec09b
commit
0983b959ab
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
|
@ -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>
|
||||||
|
|
@ -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:
|
||||||
|
|
@ -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);
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -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
|
||||||
|
|
@ -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>
|
||||||
Loading…
Reference in New Issue