DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,673 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Kate Galushko
Kate Galushko

Posted on • Updated on

Temperature Converter in Python Flask For Beginners

Today, we will discuss how to create a Temperature Converter App using a flask module where the user will enter the value in Fahrenheit or Celsius and the system will do some calculations and return the value in Celsius or Fahrenheit as per the user choice

Temperature Converter APP

Before start working on this project please make sure you have Python installed on the machine.
Step 1: Create a folder with the name flask_project7

PS C:\VSCODE_PROJECTS\Flask Projects> mkdir flask_project7
PS C:\VSCODE_PROJECTS\Flask Projects> cd .\flask_project7\

Step2: Install Virtual environment using command pip install virtualenv

PS C:\VSCODE_PROJECTS\Flask Projects\flask_project7> pip install virtualenv

Step 3: Create a virtual environment that will be used for our project

PS C:\VSCODE_PROJECTS\Flask Projects\flask_project7> py -3 -m venv env

Step4: Activate the environment created

PS C:\VSCODE_PROJECTS\Flask Projects\flask_project7> .\env\Scripts\activate

Step5: Now install flask using command pip install flask

(env) PS C:\VSCODE_PROJECTS\Flask Projects\flask_project7> pip install flask

Step6: Create a main.py file and add the following code in that. (Make sure that you are placing the main.py file in the main folder i.e flask_project7) and install os

from flask import Flask, redirect, request,url_for,render_template
import flask
import requests
from bs4 import BeautifulSoup
import lxml
import os


app = Flask(__name__)


def fahrentocelsius(val1):
      celsius = ((val1-32)*5)/9  
      return celsius

def celsiustofahren(val2):
      fahrein = float(val2)*1.8 +32
      return fahrein

@app.route('/',methods = ['POST', 'GET'])
def main_method():
      val1=''
      result1 = ''
      val2 = ''
      result2 = ''
      if request.method=='POST' and 'fahren_celsius' in request.form:
            val1 = float(request.form.get('enter'))
            result1 = fahrentocelsius(val1)
      elif request.method=='POST' and 'celsius_fahren' in request.form:
            val2 = float(request.form.get('enter'))
            result2 = celsiustofahren(val2)


      return render_template('index.html',conversion1 = result1,conversion2 = result2)


if __name__ == '__main__':
   app.run(debug = True)
In the templates/index.html file place the following code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Notepad</title>
    <style>
                div {
        width: 70%;
        border: 15px solid green;
        padding: 50px;
        margin: 50px;
        }

    </style>
</head>
<body>
    <h1 style = 'background-color: rgb(238, 238, 236);color: green;text-align:center;font-family: "Lucida Console", "Courier New", monospace;'>Let's Convert the Temperatures</h1>
    <div><h2>Fahrenheit to Celsius Conversion</h2>
    <form action = '' method = "POST">
        <input type="text" name = "enter" size="5">

        <input type = "submit" name = "fahren_celsius" value = "Convert" />
        <p>It is {{ conversion1 }}<span>&#176;</span>C</p>
    </form>
    <br>
    <h2>Celsius to Fahrenheit Conversion</h2>
    <form action = '' method = "POST">
        <input type="text" name = "enter" size="5">
        <input type = "submit" name = "celsius_fahren" value = "Convert" />
        <p>It is {{ conversion2 }}<span>&#176;</span>F</p>
    </form>
    <br>
</div>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Step7: set the variable FLASK_APP to the file name. In our case, it is β€œmain.py”.

(env) PS C:\VSCODE_PROJECTS\Flask Projects\flask_project7> set FLASK_APP=main.py
(env) PS C:\VSCODE_PROJECTS\Flask Projects\flask_project7> $env:FLASK_APP="main.py"

Step8: Now run the final flask app

(env) PS C:\VSCODE_PROJECTS\Flask Projects\flask_project7> flask run

  • Serving Flask app 'main.py' (lazy loading)
  • Environment: production WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
  • Debug mode: off
  • Running on http://127.0.0.1:5000/ (Press CTRL+C to quit) Got to http://127.0.0.1:5000/

Explanation:
In the first part, we need to import the libraries required to run the code

from flask import Flask, redirect, request,url_for,render_template
import flask
import os
Enter fullscreen mode Exit fullscreen mode

In the next step, we need to write a function that will take a value as an input and will convert that into celsius by using the below mathematical formula

def fahrentocelsius(val1):
      celsius = ((val1-32)*5)/9 # mathematical formula to convert temp 
      return celsius
Enter fullscreen mode Exit fullscreen mode

Then, develop another function that will convert celsius to fahreheit

def celsiustofahren(val2):
      fahrein = float(val2)*1.8 +32
      return fahrein
Enter fullscreen mode Exit fullscreen mode

Now, come to the main function of the flask

@app.route('/',methods = ['POST', 'GET'])
def main_method():
      val1=''
      result1 = ''
      val2 = ''
      result2 = ''
      if request.method=='POST' and 'fahren_celsius' in request.form:
            val1 = float(request.form.get('enter'))
            result1 = fahrentocelsius(val1)
      elif request.method=='POST' and 'celsius_fahren' in request.form:
            val2 = float(request.form.get('enter'))
            result2 = celsiustofahren(val2)


      return render_template('index.html',conversion1 = result1,conversion2 = result2)
Enter fullscreen mode Exit fullscreen mode

Here, we are initializing empty values for val1,val2,result1 and result2 . As in our HTML page, we are using two forms having submitted buttons so we need to call the function based on the form submitted by the user. For instance,if the user wants to convert Temperature from Fahrenheit to Celsius then the value will be added in the first form.

Top comments (0)

Update Your DEV Experience Level:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›