index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Interest Calculator</title>
<link rel="icon" type="image/png" href="../../../favicon.png">
<link rel="stylesheet" href="styles.css"/>
<script defer src="../../../pyscript/pyscript.js"></script>
</head>
<body>
<section class="calculator-demo">
<section class="calculator-inner">
<div class="flexelement" id="first_div">
<p id="first_p">
Welcome to the "Simple and Compound Interest Calculator!"
<br/>
<strong>"how does it work?"</strong>
to use the "Simple and Compound Interest Calculator", please enter the input data into the form.
after clicking "Calculate", your result will be shown at the bottom of the form.
</p>
<div style="margin-left: 15%;">
<div style="width: 100%;">
<input type="radio" name='expander' id="expander-1">
<label class="expander_label" for="expander-1">Compound Interest Formula »</label>
<img src="compound-interest.png" alt="Compound Interest"
style="height: 200px;"/>
</div>
<div style="margin-top: 25px;">
<input type="radio" name='expander' id="expander-2">
<label class="expander_label" for="expander-2">Simple Interest Formula »</label>
<img src="simple-interest.png" alt="Simple Interest"
style="height: 150px;"/>
</div>
</div>
</div>
<div class="flexelement">
<div id="form">
<div>
<label>Principal
<input id="principal" type="number" step="1" , style="color: black; min-height: 60px;"/></label>
<br/><br>
<label>Interest rate
<input id="interest_rate" type="number" step="0.1" style="color: black; min-height: 60px;"
placeholder="Decimal, f.e. 0.8"/>
</label>
<br>
<br/>
<label>Time
<input id="time" type="number" step="1" min="0" style="color: black; min-height: 60px;"
placeholder="in years"/></label>
<br> <br/>
<button py-click="interest()" id="calc" style="min-height: 60px;" disabled>Calculate</button>
<div style="margin-top: 2%;">
<span id="simple_interest"></span>
<br/>
<span id="compound_interest"></span>
</div>
</div>
</div>
</div>
<py-config src="../py_config.toml"></py-config>
<py-script src="./calculator.py"></py-script>
</section>
</section>
<footer>
<p id="footer_p">
Thank you for using the "Simple and Compound
Interest Calculator!", powered by PyScript!
</p>
</footer>
</body>
</html>
calculator.py
"""Calculate the interest."""
def interest(*args, **kwargs):
"""Main interest calculation function."""
# Signal that PyScript is alive by setting the ``Calculate``
# button away from disabled.
calculate_button = Element("calc") # noqa
# calculate_button.element.setAttribute("disabled")
# Now get the various inputs
element_principal = Element("principal") # noqa
element_rate = Element("interest_rate") # noqa
element_time = Element("time") # noqa
principal = float(element_principal.value)
rate = float(element_rate.value)
time = float(element_time.value)
output1 = Element("simple_interest") # noqa
output2 = Element("compound_interest") # noqa
res1 = round(principal + (principal * rate * time))
res2 = round(principal * ((1 + rate) ** time))
output1.write(f"simple interest: {res1}")
output2.write(f"compound interest: {res2}")
def setup():
"""When Pyodide starts up, enable the Calculate button."""
calculate_button = Element("calc") # noqa
calculate_button.element.removeAttribute("disabled")
setup()
styles.css
section.calculator-demo {
background-color: #F3F6F8;
min-height: 100vh;
display: flex;
flex-direction: column;
margin: 0;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
font-size: 14px;
line-height: 1.5;
}
section.calculator-inner {
display: flex;
flex-direction: row;
}
img {
flex: 1;
margin: 5%;
margin-left: 20%;
}
#first_div {
align-content: center;
margin: 1%;
flex: 1.25;
}
#first_p {
margin: 3.5%;
margin-left: 15%;
font-family: Tahoma, sans-serif;
}
.flexelement {
flex: 1;
padding: 2%;
}
#form {
margin-top: 7%;
height: 100%;
display: flex;
align-content: center;
justify-content: center;
}
#form input[type=number] {
border: 1px solid white;
border-radius: 0.3em;
height: 12%;
width: 100%;
margin-bottom: 5px;
}
#form button {
width: 100%;
height: 12%;
margin-bottom: 5px;
border: 0;
}
#form button:disabled, #form button[disabled] {
background-color: #0097e863;
}
header {
height: 100px;
}
footer {
margin-top: auto;
height: 57px;
}
header, footer {
background-color: #1A1A27;
}
#header_h1 {
padding-top: 2.2%;
margin-left: 40%;
font-weight: bold;
color: white;
}
input[type=number] {
padding: 1%;
}
#principal, #interest_rate, #time {
width: 25%;
}
#calc {
width: 25%;
padding: 1%;
font-weight: bold;
margin-top: 2%;
color: white;
background-color: #0095E8;
}
#simple_interest, #compound_interest {
color: black;
font-weight: bold;
}
input[type=radio] {
display: none;
}
label {
cursor: pointer;
}
input[type=radio] ~ img {
animation: close 1.5;
display: none;
height: 0;
max-height: 500px;
overflow: hidden;
}
input[type=radio]:checked ~ img {
animation: open 1.5s;
display: block;
height: auto;
max-height: 500px;
}
@keyframes open {
from {
max-height: 0;
}
to {
max-height: auto;
}
}
@keyframes close {
from {
display: block;
max-height: auto;
}
to {
display: none;
height: 0;
}
}
.expander_label {
border: 1px solid #0095E8;
border-radius: 0.1em;
padding: 1%;
font-weight: 500;
color: white;
background-color: #0095E8;
background-color: #0095E8;
}
#footer_p {
font-weight: bold;
font-size: 13px;
text-align: center;
color: white;
vertical-align: central;
padding: 1.2%;
}