3.1. Web development with Python and JavaScript

In this chapter we’ll turn our guessing game from a single HTML page to a simple web app. Our goal is to have a high score table for the guessing game: the page should store and track the number of guesses for different players, and show which players have finished the game in the smallest number of guesses.

We’ll learn about the following topics:

  • HTML table generation
  • JSON; which we’ll need to transfer data between backend and frontend
  • Setting up a simple NoSQL database
  • AJAX; data transfer between backend and frontend in practice
  • Putting everything together

What we’ll end up is a two-page guessing game as well as a simple algorithm to play it for us, with a high score list displayed on the page and stored in a database. The high score list could look e.g. like this:

Position Date User Guesses
1 2018-02-14 22:00:47.418645 ai 5
2 2018-02-14 22:01:14.371682 User 6
3 2018-02-14 22:00:35.543943 ai 6
4 2018-02-14 22:00:45.238895 ai 7
5 2018-02-14 22:00:51.128031 ai 8

It doesn’t sound like much but includes some software development fundamentals.

Again, this book does not cover modern web development practices. However, the following sections will help the reader understand some concepts related to web development such as the difference around frontend (client) and backend (server) and using a database in the backend.