Skip to content

Commit 447dc24

Browse files
harshita2216harshita2216
authored
Merge pull request #242 from tanvi355/isseu#224
Simple calculator using flask
2 parents 54fcf2d + 3502233 commit 447dc24

File tree

5 files changed

+164
-2
lines changed

5 files changed

+164
-2
lines changed

‎Index.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@
6161
| [Expand Button](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Expand-Button) |It is a basic website with an expanding button on it. As we click on the button it expands and shrinks after 5 seconds. |
6262
| [Color Guessing Game](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/color-guessor) |It is a basic color guessing game where the player is given a rgb value and he has to guess the color from that.|
6363
| [Double Vertical Slider](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Double-Vertical-Slider) | This App helps to Slide the two different parts of the webpage content at the same time . |
64-
| [Compound Interest Calculator](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Compound%20Interest%20Calculator) | A basic gradient Background Generator which allows you to create a background by selecting your required colors. This will make up a gradient mix and provide you the code line so that you can use it in your Website |
64+
| [Compound Interest Calculator](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Compound%20Interest%20Calculator) | A basic gradient Background Generator which allows you to create a background by selecting your required colors. This will make up a gradient mix and provide you the code line so that you can use it in your Website |
6565
| [Image Finder](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/image-finder-app) |A single page web application that uses the PixaBay API to display the images according to user search. |
6666
| [Youtube UI Clone](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Youtube-Clone) | A project which aims to clone YouTube UI with responsiveness by using HTML & CSS. |
6767
| [Blog Application](https://github.com/khushi-purwar/Web-dev-mini-projects/tree/main/Blog%20Application) | Blog Application is an application where user can add a new blog, edit it, delete it as well as view other blogs and make changes in them. |
@@ -81,8 +81,8 @@
8181
| [Chess Game](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Chess-Game) | A basic chess game for entertainment purpose. |
8282
| [Password Generator](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Password%20Generator) | A password generator app to generate strong passwords which can be easily used for authentication. |
8383
| [Parallex Website](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Chess-Game) | A basic website using HTML, CSS, JAVASCRIPT with modern look. |
84-
8584
| [To Do List](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/todolist) |This app allows you to make a list of events you want to do and you can strikeout the events completed.|
8685
| [Weight Converter](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Weight%20Converter) |A web page where used can convert weight from kilograms to grams, ounces and pounds.|
8786
| [Restaurant website](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Restaurant-website) |A Restuarant website with a simple and user friendly design ad a database linked to it.|
8887
| [Speed-Distance-Time-Calculator](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/speed-distance-time-calculator) |It is a multi pager Speed Distnace Time Calculator with simple but userfriendly design.|
88+
| [Simple Calculator (Flask)](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Simple%20Calculator%20(Flask))| A simple calculator with 2 input fields and some options to perform different operations on them.|

‎Simple Calculator (Flask)/README.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# Simple Calculator using Flask
2+
3+
A simple calculator with 2 input fields and some options to perform different operations on them.
4+
5+
## Technologies used:
6+
7+
- HTML
8+
- CSS
9+
- Python
10+
- Flask
11+
12+
## How to use:
13+
14+
1. Fork and clone [this](https://github.com/Ayushparikh-code/Web-dev-mini-projects) project.
15+
2. In your command prompt, navigate to **Web-dev-mini-projects/Simple Calculator (Flask)**.
16+
3. Run this app using the command `python app.py`.
17+
4. Now, navigate to `http://127.0.0.1:5000/` in your web browser to use the calculator.
18+
19+
## Screenshot
20+
21+
<img src="https://imgur.com/sTJUKFy.png"/>

‎Simple Calculator (Flask)/app.py

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
from flask import Flask, render_template, request
2+
3+
#declare the app
4+
app = Flask(__name__)
5+
6+
#start an app route
7+
@app.route('/')
8+
9+
#declare the main function
10+
def main():
11+
return render_template('index.html')
12+
13+
#form submission route
14+
@app.route('/send', methods=['POST'])
15+
def send():
16+
try:
17+
if request.method == 'POST':
18+
#start pulling the data from form input
19+
var1 = request.form['var1']
20+
var2 = request.form['var2']
21+
operation = request.form['operation']
22+
23+
#calculating answer
24+
if operation == 'add':
25+
ans = float(var1) + float(var2)
26+
elif operation == 'subtraction':
27+
ans = float(var1) - float(var2)
28+
elif operation == 'multiply':
29+
ans = float(var1) * float(var2)
30+
else:
31+
ans = float(var1) / float(var2)
32+
return render_template('index.html', result=ans)
33+
except ValueError as error:
34+
error = "Please enter all the input fields."
35+
return render_template('index.html', result=error)
36+
37+
if __name__ == '__main__':
38+
app.run(debug=True)

‎Simple Calculator (Flask)/static/style.css

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
body{
2+
text-align: center;
3+
font: 800 15px Lato, sans-serif;
4+
background: #B993D6;
5+
background: -webkit-linear-gradient(to right, #8CA6DB, #B993D6);
6+
background: linear-gradient(to right, #8CA6DB, #B993D6);
7+
}
8+
9+
select:invalid {
10+
color: gray;
11+
}
12+
13+
.result{
14+
padding: 1rem;
15+
border-radius: 5px;
16+
}
17+
18+
#no1,
19+
#no2,
20+
#op{
21+
text-align: left;
22+
}
23+
24+
#calc_btn{
25+
color: black;
26+
border-color: black;
27+
}

‎Simple Calculator (Flask)/templates/index.html

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<!--Required meta tags-->
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
8+
9+
<!--Stylesheets-->
10+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css"/>
11+
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='style.css') }}" />
12+
13+
<!--Google Fonts-->
14+
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
15+
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif&display=swap" rel="stylesheet">
16+
17+
<!--Icons-->
18+
<script src="https://kit.fontawesome.com/7e8697690d.js" crossorigin="anonymous"></script>
19+
20+
<title>Calculator</title>
21+
</head>
22+
<body>
23+
<div class="container">
24+
<h1><u>Calculator App using Flask</u></h1>
25+
</div>
26+
27+
<hr><br>
28+
29+
<div class="container">
30+
<!-- Form -->
31+
<div class="container">
32+
<form action="/send" method="POST">
33+
<label for="Number One" id="no1">First Number</label>
34+
<input
35+
type="text"
36+
placeholder="First Number"
37+
class="u-full-width"
38+
name="var1"
39+
/>
40+
41+
<label for="Number Two" id="no2">Second Number</label>
42+
<input
43+
type="text"
44+
placeholder="Second Number"
45+
class="u-full-width"
46+
name="var2"
47+
/>
48+
49+
<label for="Operation" id="op">Operation</label>
50+
<select required class="u-full-width" name="operation">
51+
<option value="" disabled selected hidden>Select operation</option>
52+
<option value="add">Add</option>
53+
<option value="subtract">Subtract</option>
54+
<option value="multiply">Multiply</option>
55+
<option value="divide">Divide</option>
56+
</select>
57+
58+
<input type="submit" value="Calculate" id="calc_btn" />
59+
</form>
60+
<!--Form ends-->
61+
62+
<div class="result">
63+
<label for="Result">Result: {{ result }}</label>
64+
</div>
65+
66+
</div>
67+
68+
<hr>
69+
70+
<div class="container">
71+
<h5>Made by Tanvi</h5>
72+
<a href="https://github.com/tanvi355"><i class="fab fa-github fa-2x" style="color:black"></i></a>
73+
</div>
74+
75+
</body>
76+
</html>

0 commit comments

Comments
 (0)