Python Flask — Create HTML5 Dictionary Word Lookup On Replit Platform

Published in

Python’s Gurus

4 min readJun 16, 2024

Replit provides a user-friendly, web-based IDE that makes it easy to create, run, and quickly deploy Python Flask applications without the need to set up a local development environment, making it a convenient choice for prototyping, collaborative development, and hosting small-scale projects, although larger or more complex applications may be better suited for traditional hosting platforms or cloud services.

To publish the Python Flask applications using the Replit platform, follow these steps:

1. Create a new Replit project:
— Go to the Replit website (https://replit.com/) and sign in to your account.
— Click on the “Create new” button and select “New Repl”.

2. Add the Python and HTML5 files:
— Replace the contents of these files with your actual code, respectively.

3. Set up the Flask app:
— Create a new file called main.py and add your Flask app code.

4. Run the app:
— In the top right corner, click the “Run” button to start your application.
— If you’re using a Flask app, the “Run” button will start the Flask development server.

5. Publish the app:
— Once your app is running, you can publish it to make it publicly accessible.
— Click the “Share” button in the top right corner.
— In the “Sharing” tab, toggle the “Make this Repl public” option.
— You can now copy the URL of your published app and share it with others.

The following is the detailed steps.

[1] Create a new project

Choose Flask template.

Give a name e.g. search-word-in-dictionary-python-flask.

Prepare files and folders as follows:

The 1–1000.txt is sourced from https://gist.github.com/deekayen/4148741. ( refer Using Power BI to scrap dictionary words from various web sources)

Power BI — Scrap dictionary words from various web sources

Power BI can indeed be a convenient tool for web scraping, especially for those who prefer a no-code or low-code…

medium.com

[2] Edit the codes

[2.1] main.py

from flask import Flask, jsonify, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/get_wordlist')
def get_wordlist():
    with open('1-1000.txt', 'r') as file:
        wordlist = file.read().splitlines()
    return jsonify(wordlist)

if __name__ == '__main__':
  app.run(host='0.0.0.0', port=5000)

This Flask code sets up a web application with two routes: the root route (/) that renders an HTML template called index.html, and a /get_wordlist route that reads a text file called 1-1000.txt, extracts the words into a list, and returns the list as a JSON response; the application is run on a development server listening on the 0.0.0.0 host and 5000 port, with the Flask, jsonify, and render_template modules imported to provide the necessary functionality for creating the web application.

[2.2] index.html

<!DOCTYPE html>
<html>
<head>
  <title>Word Search</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body>
  <input type="text" id="search-input" placeholder="Type a word">
  <div id="result"></div>

  <script>
    var wordList = [];

    // Load the word list data
    axios.get('/get_wordlist')
      .then(function (response) {
        wordList = response.data;
        console.log(wordList);

        // Attach an event listener to the input field after the word list is loaded
        document.getElementById('search-input').addEventListener('input', function() {
          var searchTerm = this.value;

          // Check if the search term is in the word list
          var isFound = wordList.includes(searchTerm);

          // Display the result
          document.getElementById('result').textContent = isFound ? 'Word found in the dictionary!' : 'Word not found in the dictionary.';
        });
      })
      .catch(function (error) {
        console.error('Error:', error);
      });
  </script>
</body>
</html>

This HTML code sets up a simple web page with a search input field and a result display area. The page uses the Axios library to make an asynchronous GET request to the /get_wordlist route of the Flask application, which returns a list of words. Once the word list is loaded, an event listener is attached to the search input field, which checks if the user's input matches any of the words in the list and displays the corresponding result. The code demonstrates how to integrate a Flask backend with a client-side JavaScript application to provide an interactive word search functionality.

Replit:

🤓

Python’s Gurus🚀

Thank you for being a part of the Python’s Gurus community!

Before you go:

Be sure to clap x50 time and follow the writer ️👏️️
Follow us: Newsletter
Do you aspire to become a Guru too? Submit your best article or draft to reach our audience.