-
Notifications
You must be signed in to change notification settings - Fork 2
/
counter.html
70 lines (62 loc) · 4.04 KB
/
counter.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Counter | 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">Counter</h1>
</header>
<div class="line task__line">===================================================================================================================================================================</div>
<div class="task__body">
<div class="task__description">
<h2 class="h2">Challenge</h2>
<p class="p">Understanding the basic ideas of a language/toolkit.</p>
<h2 class="h2">Criteria</h2>
<ul class="ul">
<li>Build a frame containing a label or read-only textfield <em>T</em> and a button <em>B</em>.</li>
<li>Initially, the value in <em>T</em> is 0.</li>
<li>Each click of <em>B</em> increases the value in <em>T</em> by 1.</li>
</ul>
<p class="p p--mb-large">Counter serves as a gentle introduction to the basics of the language, paradigm, and toolkit for one of the simplest GUI applications imaginable. Thus, Counter reveals the required scaffolding and how the very basic features work together to build a GUI application. A good solution will have almost no scaffolding.</p>
<div class="task__screenshot">
<img src="./images/counter.png" alt='A frame with the title "Counter", containing a textfield with the number "2" and a button labelled "Count".' />
</div>
</div>
<div class="task__gui">
<div class="task__app">
<div id="app"></div>
<script src="./js/counter.js"></script>
<script>Elm.Counter.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/counter.html" rel="noreferrer" target="_blank">HTML</a></li>
<li><a href="https://github.com/dwayne/elm-7guis/blob/master/css/counter.css" rel="noreferrer" target="_blank">CSS</a></li>
<li><a href="https://github.com/dwayne/elm-7guis/blob/master/src/Task/Counter.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>