How to render a Python Guess The Number game on HTML page

Question

I just learned the guess a number game from a book called Automate the Boring Stuff With Python (code below). I got it to work using a terminal but I'm wondering how I could set it up to render on an html page. Ideally, I would like to use Flask and just render the html pages locally for now.

import random

correct = random.randint(1,20)

print('I am thinking of a number between 1 and 20.')

for guessesTaken in range(1,6):
    print('Take a guess.')
    guess = int(input())

    if guess < correct:
        print('Your number is too low')

    elif guess > correct:
        print('Your number is too high')
    else:
        break

if guess == correct:
    print('Good work! You got the number in '+ str(guessesTaken)+ ' guesses')
else:
    print('Nope. The number I was thinking of was ' + str(correct))

Does this answer your question? [How to run python script in webpage](https://stackoverflow.com/questions/7460938/how-to-run-python-script-in-webpage) — Nick is tired, May 17 '20 at 05:09

score 0 · Answer 1 · answered May 17 '20 at 05:12

0

To use python to print text or display anything on a browser you will need a framework! Something like Django, Web2py, Flask etc..

All frameworks are pretty simple and you could make great apps with them!

Cheers, happy coding!

answered May 17 '20 at 05:12

Aneesh Bharath

49
1
5

I just edited that in the description, I want to use Flask as I'm learning it for another project. – Tilman Nathaniel May 17 '20 at 05:17
You could try some tutorials on youtube or some free learning platforms to get a start.. its pretty simple.. and you could do a lot more than create a number guessing app.. I had followed [link](https://www.youtube.com/watch?v=zRwy8gtgJ1A) – Aneesh Bharath May 17 '20 at 05:23

SahilDesai · Answer 2 · 2020-05-18T03:59:08.290

create a folder with 1 file named app.py and 1 folder named templates containing a.html

1) app.py

from flask import Flask
from flask import request
from flask import render_template
import random

correct = random.randint(1,20)
count=0
app = Flask(__name__)

@app.route('/new')
def my_form():
    return render_template("a.html") # this should be the name of your html file

@app.route('/new', methods=['POST'])
def my_form_post():
    global correct
    global count
    msg = ''
    print(count)
    if count<6:
        count+=1
        text1 = request.form['text1']
        text1 = int(text1)

        if text1 < correct:
            msg = 'Your number is too low'
            return render_template("a.html", msg=msg)
        elif text1 > correct:
            msg = 'Your number is too high'
            return render_template("a.html", msg=msg)
        else:
            if text1 == correct:
                msg = 'Good work! You got the number in '+ str(count)+ ' guesses'
                count = 0
                correct = random.randint(1,20)
                return render_template("a.html", msg=msg)
    else:
        num = 'Nope. The number I was thinking of was ' + str(correct)
        correct = random.randint(1,20)
        msg = ''
        count=0
        return render_template("a.html", num=num)

if __name__ == '__main__':
    app.run(debug=True)

2) a.html

<!DOCTYPE html>
<html lang="en">
<body>
    <h1>I am thinking of a number between 1 and 20.</h1>
    <form action="/new" method="POST">
        <input type="text" name="text1">
        <input type="submit" name="my-form" value="Check !">
    </form>
    <h1>{{ msg }}</h1>
    <h1>{{ num }}</h1>
</body>
</html>

Thank you! I'm trying to add it to an existing project and the only way I can get it to work is if it replaces my main index.html '/' page. How can I get it to work from a page other than the '/' route? If I try changing that to a it doesn't work. I tried changing it to "b" too and that didn't work either. — Tilman Nathaniel, May 17 '20 at 17:47
Hi @TilmanNathaniel I have updated the code check if it works for you. — SahilDesai, May 18 '20 at 04:00

How to render a Python Guess The Number game on HTML page

2 Answers2