-
Notifications
You must be signed in to change notification settings - Fork 2
/
temperature-converter.html
75 lines (66 loc) · 5.36 KB
/
temperature-converter.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Temperature Converter | 7GUIs</title>
<link rel="icon" href="./images/favicon.ico">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="layout">
<div class="layout__content">
<div class="task">
<nav class="task__nav">
<a href="./">Back</a>
</nav>
<header class="title task__title">
<h1 class="title__text">Temperature Converter</h1>
</header>
<div class="line task__line">===================================================================================================================================================================</div>
<div class="task__body">
<div class="task__description">
<h2 class="h2">Challenge</h2>
<p class="p">Bidirectional data flow, user-provided text input.</p>
<h2 class="h2">Criteria</h2>
<ul class="ul">
<li>Build a frame containing two textfields <em>T<sub>C</sub></em> and <em>T<sub>F</sub></em> representing the temperature in Celsius and Fahrenheit, respectively.</li>
<li>Initially, both <em>T<sub>C</sub></em> and <em>T<sub>F</sub></em> are empty.</li>
<li>When the user enters a numerical value into <em>T<sub>C</sub></em> the corresponding value in <em>T<sub>F</sub></em> is automatically updated and vice versa.</li>
<li>When the user enters a non-numerical string into <em>T<sub>C</sub></em> the value in <em>T<sub>F</sub></em> is not updated and vice versa.</li>
<li>The formula for converting a temperature <em>C</em> in Celsius into a temperature <em>F</em> in Fahrenheit is <em>F = C * (9/5) + 32</em>.</li>
<li>The formula for converting a temperature <em>F</em> in Fahrenheit into a temperature <em>C</em> in Celsius is <em>C = (F - 32) * (5/9)</em>.</li>
</ul>
<p class="p">Temperature Converter increases the complexity of Counter by having bidirectional data flow between the Celsius and Fahrenheit inputs and the need to check the user input for validity. A good solution will make the bidirectional dependency very clear with minimal boilerplate code.</p>
<p class="p p--mb-large">Temperature Converter is inspired by the <a href="https://www.artima.com/pins1ed/gui-programming.html#32.4" target="_blank" rel="noopener noreferrer">Celsius/Fahrenheit converter</a> from the book Programming in Scala. It is such a widespread example—sometimes also in the form of a currency converter—that one could give a thousand references. The same is true for the Counter task.</p>
<div class="task__screenshot">
<img src="./images/temperature-converter.png" alt='A frame with the title "TempConv", containing two textfields. The textfield on the left contains the number "5" and has the "Celsius" label to its right. The textfield on the right contains the number "41" and has the "Fahrenheit" label to its right.' />
</div>
</div>
<div class="task__gui">
<div class="task__app container">
<div id="app"></div>
<script src="./js/temperature-converter.js"></script>
<script>Elm.TemperatureConverter.init({ node: document.getElementById("app") });</script>
</div>
<h2 class="h2">Code</h2>
<p class="p p--mb-small">After opening a code link below, hit the '.' key to open GitHub's browser editor for an improved reading experience.</p>
<ul class="src-links">
<li><a href="https://github.com/dwayne/elm-7guis/blob/master/html/temperature-converter.html" rel="noreferrer" target="_blank">HTML</a></li>
<li><a href="https://github.com/dwayne/elm-7guis/blob/master/css/temperature-converter.css" rel="noreferrer" target="_blank">CSS</a></li>
<li><a href="https://github.com/dwayne/elm-7guis/blob/master/src/Task/TemperatureConverter.elm" rel="noreferrer" target="_blank">Elm</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<a class="github" href="https://github.com/dwayne/elm-7guis" rel="noreferrer" target="_blank">
<svg class="octocat" width="80" height="80" viewBox="0 0 250 250">
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" class="octocat__arm"></path>
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor"></path>
</svg>
</a>
</body>
</html>