diff --git a/Exercise 6/images/calculate-tax.gif b/Exercise 6/images/calculate-tax.gif new file mode 100644 index 0000000..f8bd4c6 Binary files /dev/null and b/Exercise 6/images/calculate-tax.gif differ diff --git a/Exercise 6/images/gif.mov b/Exercise 6/images/gif.mov new file mode 100644 index 0000000..c3b1932 Binary files /dev/null and b/Exercise 6/images/gif.mov differ diff --git a/Exercise 6/index.html b/Exercise 6/index.html new file mode 100644 index 0000000..0b8ddc0 --- /dev/null +++ b/Exercise 6/index.html @@ -0,0 +1,76 @@ + + + + + Tax form + + + + + + + + + +
+

Hero tax

+
+ +
+ + + + + + + + + + + + + + + + + + + +
+ + +
+ +
+ + + + + + + + + + +
+ +
+ + + + + + + + +
+ + +
+ + + \ No newline at end of file diff --git a/Exercise 6/questions.txt b/Exercise 6/questions.txt new file mode 100644 index 0000000..2003de5 --- /dev/null +++ b/Exercise 6/questions.txt @@ -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: \ No newline at end of file diff --git a/Exercise 6/script.js b/Exercise 6/script.js new file mode 100644 index 0000000..60a10b6 --- /dev/null +++ b/Exercise 6/script.js @@ -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); \ No newline at end of file diff --git a/Exercise 6/style.css b/Exercise 6/style.css new file mode 100644 index 0000000..32e4347 --- /dev/null +++ b/Exercise 6/style.css @@ -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; +} \ No newline at end of file diff --git a/Exercise 6/table.txt b/Exercise 6/table.txt new file mode 100644 index 0000000..6318a06 --- /dev/null +++ b/Exercise 6/table.txt @@ -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 diff --git a/Exercise 6/taxes.xml b/Exercise 6/taxes.xml new file mode 100644 index 0000000..4985f60 --- /dev/null +++ b/Exercise 6/taxes.xml @@ -0,0 +1,45 @@ + + + + Nick Nedd + Male + nick@tick.com + 1976 + The Tick + True + 9 + 7 + 5 + 0 + 90287 + 29794 + + + Bruce Wayne + Male + bruce@wayneenterprises.com + 1974 + Batman + False + 7 + 4 + 9 + 50144501 + 3343891 + 11132384 + + + Selina Kyle + Female + selina@whiskas.com + 1977 + Catwoman + True + 6 + 6 + 9 + 2987323 + 0 + 597464 + + \ No newline at end of file