Skip to content

Commit 0904f0f

Browse files
pauleverittpauleveritt
committed
Cleaned up the styling. Fixed an issue with a BOM that was messing up parsing of this example.
1 parent 84dc20c commit 0904f0f

File tree

4 files changed

+70
-75
lines changed

4 files changed

+70
-75
lines changed

‎src/psc/gallery/examples/interest_calculator/index.html

Lines changed: 58 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,88 +1,83 @@
1-
<!DOCTYPE html>
2-
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
3-
1+
<!DOCTYPE html>
2+
<html lang="en">
43
<head>
5-
<meta charset="utf-8"/>
64
<title>Interest Calculator</title>
5+
<link rel="icon" type="image/png" href="../../../favicon.png">
76
<link rel="stylesheet" href="styles.css"/>
87
<script defer src="../../../pyscript/pyscript.js"></script>
98
</head>
10-
119
<body>
1210

13-
<header>
14-
<h1 id="header_h1">Welcome to the Compound Calculator!</h1>
15-
</header>
16-
17-
<main>
18-
19-
<div class="flexelement" id="first_div">
20-
<p id="first_p">
21-
Welcome to the "Simple and Compound Interest Calculator!"
22-
<br/>
23-
<strong>"how does it work?"</strong>
24-
to use the "Simple and Compound Interest Calculator", please enter the input data into the form.
25-
after clicking "Calculate", your result will be shown at the bottom of the form.
26-
</p>
27-
28-
<div style="margin-left: 15%;">
29-
<div style="width: 100%;">
30-
<input type="radio" name='expander' id="expander-1">
31-
<label class="expander_label" for="expander-1">Compound Interest Formula &#187;</label>
32-
<img src="compound-interest.png" alt="Compound Interest"
33-
style="height: 200px;"/>
34-
</div>
11+
<section class="calculator-demo">
12+
<section class="calculator-inner">
13+
<div class="flexelement" id="first_div">
14+
<p id="first_p">
15+
Welcome to the "Simple and Compound Interest Calculator!"
16+
<br/>
17+
<strong>"how does it work?"</strong>
18+
to use the "Simple and Compound Interest Calculator", please enter the input data into the form.
19+
after clicking "Calculate", your result will be shown at the bottom of the form.
20+
</p>
21+
22+
<div style="margin-left: 15%;">
23+
<div style="width: 100%;">
24+
<input type="radio" name='expander' id="expander-1">
25+
<label class="expander_label" for="expander-1">Compound Interest Formula &#187;</label>
26+
<img src="compound-interest.png" alt="Compound Interest"
27+
style="height: 200px;"/>
28+
</div>
3529

36-
<div style="margin-top: 25px;">
37-
<input type="radio" name='expander' id="expander-2">
38-
<label class="expander_label" for="expander-2">Simple Interest Formula &#187;</label>
39-
<img src="simple-interest.png" alt="Simple Interest"
40-
style="height: 150px;"/>
30+
<div style="margin-top: 25px;">
31+
<input type="radio" name='expander' id="expander-2">
32+
<label class="expander_label" for="expander-2">Simple Interest Formula &#187;</label>
33+
<img src="simple-interest.png" alt="Simple Interest"
34+
style="height: 150px;"/>
35+
</div>
4136
</div>
4237
</div>
43-
</div>
4438

4539

46-
<div class="flexelement">
40+
<div class="flexelement">
4741

48-
<div id="form">
42+
<div id="form">
4943

50-
<div>
51-
<label>Principal
52-
<input id="principal" type="number" step="1", style="color: black; min-height: 60px;"/></label>
53-
<br/><br>
54-
<label>Interest rate
55-
<input id="interest_rate" type="number" step="0.1" style="color: black; min-height: 60px;"
56-
placeholder="Decimal, f.e. 0.8"/>
57-
</label>
58-
<br>
59-
<br/>
44+
<div>
45+
<label>Principal
46+
<input id="principal" type="number" step="1" , style="color: black; min-height: 60px;"/></label>
47+
<br/><br>
48+
<label>Interest rate
49+
<input id="interest_rate" type="number" step="0.1" style="color: black; min-height: 60px;"
50+
placeholder="Decimal, f.e. 0.8"/>
51+
</label>
52+
<br>
53+
<br/>
6054

61-
<label>Time
62-
<input id="time" type="number" step="1" min="0" style="color: black; min-height: 60px;"
63-
placeholder="in years"/></label>
64-
<br> <br/>
55+
<label>Time
56+
<input id="time" type="number" step="1" min="0" style="color: black; min-height: 60px;"
57+
placeholder="in years"/></label>
58+
<br> <br/>
6559

66-
<button py-click="interest()" id="calc" style="min-height: 60px;" disabled>Calculate</button>
60+
<button py-click="interest()" id="calc" style="min-height: 60px;" disabled>Calculate</button>
61+
62+
<div style="margin-top: 2%;">
63+
<span id="simple_interest"></span>
64+
<br/>
65+
<span id="compound_interest"></span>
66+
</div>
6767

68-
<div style="margin-top: 2%;">
69-
<span id="simple_interest"></span>
70-
<br/>
71-
<span id="compound_interest"></span>
7268
</div>
7369

7470
</div>
7571

7672
</div>
7773

78-
</div>
79-
80-
<py-config src="../py_config.toml"></py-config>
81-
<py-script src="calculator.py"></py-script>
82-
<py-script>
83-
setup()
84-
</py-script>
85-
</main>
74+
<py-config src="../py_config.toml"></py-config>
75+
<py-script src="calculator.py"></py-script>
76+
<py-script>
77+
setup()
78+
</py-script>
79+
</section>
80+
</section>
8681

8782
<footer>
8883
<p id="footer_p">
@@ -94,3 +89,4 @@ <h1 id="header_h1">Welcome to the Compound Calculator!</h1>
9489
</body>
9590

9691
</html>
92+

‎src/psc/gallery/examples/interest_calculator/styles.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
body {
1+
section.calculator-demo {
22
background-color: #F3F6F8;
33
min-height: 100vh;
44
display: flex;
@@ -9,7 +9,7 @@
99
line-height: 1.5;
1010
}
1111

12-
main {
12+
section.calculator-inner {
1313
display: flex;
1414
flex-direction: row;
1515
}

‎tests/examples/test_interest_calculator.py

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ def test_calculator(fake_document, fake_element) -> None:
1515
fake_document.values["time"] = "10"
1616
fake_document.values["simple_interest"] = "0.1"
1717
fake_document.values["compound_interest"] = "0.1"
18+
fake_document.values["calc"] = "Calculate"
1819
interest()
1920
assert fake_document.log[0] == "simple interest: 200"
2021
assert fake_document.log[1] == "compound interest: 259"

‎tests/test_fixtures.py

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
from playwright.sync_api import Route
88
from starlette.testclient import TestClient
99

10-
from psc.fixtures import DummyPage
10+
from psc.fixtures import DummyPage, ElementCallable
1111
from psc.fixtures import DummyRequest
1212
from psc.fixtures import DummyResponse
1313
from psc.fixtures import DummyRoute
@@ -19,8 +19,6 @@
1919
from psc.here import STATIC
2020

2121

22-
Element = cast("Unknown", "Element")
23-
2422
def test_test_client(test_client: TestClient) -> None:
2523
"""Ensure fixture returns an initialized TestClient."""
2624
assert test_client.app
@@ -141,32 +139,32 @@ def test_route_handler_fake_bad_path() -> None:
141139
def test_fake_element_not_installed() -> None:
142140
"""We don't request the fixture so it isn't available."""
143141
with pytest.raises(NameError):
144-
Element # noqa
142+
Element # noqa
145143

146144

147-
def test_fake_element_installed(fake_element: function) -> None:
145+
def test_fake_element_installed(fake_element: ElementCallable) -> None:
148146
"""Element is available as ``fake_element`` installed it."""
149-
Element # noqa
147+
Element # noqa
150148

151149

152-
def test_fake_element_find_element(fake_document: FakeDocument, fake_element: function) -> None:
150+
def test_fake_element_find_element(fake_document: FakeDocument, fake_element: ElementCallable) -> None:
153151
"""The Element can get a value from the fake document."""
154152
fake_document.values["btn1"] = "value1"
155153
button = Element("btn1") # noqa
156154
assert button.value == "value1"
157155

158156

159-
def test_fake_element_write(fake_document: FakeDocument, fake_element: function) -> None:
157+
def test_fake_element_write(fake_document: FakeDocument, fake_element: ElementCallable) -> None:
160158
"""The Element can write a value that is captured."""
161159
fake_document.values["btn1"] = "value1"
162-
button = Element("btn1") # noqa
160+
button = Element("btn1") # noqa
163161
button.write("Some Value")
164162
assert fake_document.log[0] == "Some Value"
165163

166164

167-
def test_fake_element_remove_attribute(fake_document: FakeDocument, fake_element: function) -> None:
165+
def test_fake_element_remove_attribute(fake_document: FakeDocument, fake_element: ElementCallable) -> None:
168166
"""The Element can pretend to remove an attribute."""
169167
fake_document.values["btn1"] = "value1"
170-
button = Element("btn1") # noqa
168+
button = Element("btn1") # noqa
171169
button.removeAttribute("disabled")
172170
assert fake_document.log == []

0 commit comments

Comments
 (0)