At first many of them create their first project as Calculator, Now here I will explain how I do a calculator project using flask.
Flask is a Framework in python, Which was lightweight and everyone has quickly learn about flask. Now for this you must have basic knowledge of html, css, javaScript, and python.
The Following html code is the UI for calculator which contains css and javaScript file also.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculator</title>
</head>
<style>
table {
border: 1px solid black;
margin-left: auto;
margin-right: auto;
}
button {
width: 100%;
padding: 20px 40px;
background-color: grey;
color: white;
font-size: 24px;
font-weight: bold;
border: none;
border-radius: 5px;
}
input[type="text"] {
padding: 20px 20px;
font-size: 20px;
border-radius: 5px;
border: 2px solid black;
}
</style>
<script>
function dis(val) {
document.getElementById("result").value += val
}
function clr() {
document.getElementById("result").value = ""
}
</script>
</head>
<body>
<form method="post">
<table cellspacing="5">
<tr>
<td><button type="button" onclick="clr()">del</button></td><td colspan="3" > <input type="text" id="result" name="result" value="{{ answer }}"></td>
</tr>
<tr>
<td><button type="button" onclick="dis('1')">1</button></td><td><button type="button" onclick="dis('2')">2</button></td><td><button type="button" onclick="dis('3')">3</button></td><td><button type="button" onclick="dis('+')">+</button></td>
</tr>
<tr>
<td><button type="button" onclick="dis('4')">4</button></td><td><button type="button" onclick="dis('5')">5</button></td><td><button type="button" onclick="dis('6')">6</button></td><td><button type="button" onclick="dis('-')">-</button></td>
</tr>
<tr>
<td><button type="button" onclick="dis('7')">7</button></td><td><button type="button" onclick="dis('8')">8</button></td><td><button type="button" onclick="dis('9')">9</button></td><td><button type="button" onclick="dis('*')">*</button></td>
</tr>
<tr>
<td><button type="button" onclick="dis('.')">.</button></td><td><button type="button" onclick="dis('0')">0</button></td><td><button type="submit">=</button></td><td><button type="button" onclick="dis('/')">/</button></td>
</tr>
</table>
</form>
</body>
</html>
This was an simple UI. When we click = then this form will submit and then python file will run, then it gives result and it will show in the main page.
from flask import Flask, render_template, request
app = Flask(__name__)
@app.route('/')
def home():
return render_template('index.html')
@app.route('/', methods=['POST'])
def result():
ans = 0
if request.method == 'POST':
try:
ans = eval(str(request.form.get("result")))
except:
ans = "Invalid opertaion"
return render_template('index.html', answer=ans)
if __name__ == "__main__":
app.run(debug=True)
for Flask you need to create a folder template and then write your html file inside of it.
In this python file at first I import Flask, then create name for app then make the default route / then home() renders our html file.
Then create a function called result, which receives the request from post method and then it calculates the result value by using eval() in python. In main function I run my app.
you can find my source code here.
If you can't understand this you could learn some basics and then come back and see this, consistent learning definitely gives you success.
THANK YOU ❤️.....
Top comments (0)