DEV Community

Free Python Code
Free Python Code

Posted on

How to Create a Modern User Interface Using HTML, CSS, and JS in Python 😍

#python #ui #programming #tutorial

Hi 🙂🖐

In this tutorial, we will learn how to create a modern user interface using HTML, CSS, and JS in Python. We will start by creating a basic HTML structure, then we will add CSS to style the elements, and finally, we will add JS to add interactivity.

In this tutorial, I will use a module called eel
Eel is a little Python library for making simple Electron-like offline HTML/JS GUI apps, with full access to Python capabilities and libraries.

Install eel

pip install eel

Step 1

Create HTML, CSS, JS files and save them into folder named web

Image description

Step 2

Create main.py file

import eel eel.init('web') eel.start('index.html')
Enter fullscreen mode Exit fullscreen mode

result

Image description

Change Height and width of eel window

import eel eel.init('web') eel.start('index.html', size = (800, 500))
Enter fullscreen mode Exit fullscreen mode

Image description

Step 3

Add some CSS style and div

CSS File:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap'); body { margin: 0; padding: 0; font-family: 'Poppins', sans-serif; } .text { font-weight: bold; margin: 100px auto; width: 80%; background-color: beige; text-align: center; padding: 20px; font-size: 22px; }
Enter fullscreen mode Exit fullscreen mode

HTML File:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <div class="text"> Hello, World </div> </body> </html>
Enter fullscreen mode Exit fullscreen mode

result

Image description

Add javascript and get returned value from python function 

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <div class="text"> Hello, World </div> <script src="/eel.js"></script> <script src="main.js"></script> </body> </html>
Enter fullscreen mode Exit fullscreen mode

In addition to the files in the frontend folder, a Javascript library will be served at /eel.js. You should include this in any pages

main.py

import eel eel.init('web') @eel.expose def hello(): return 'Hello World From Pyhton' eel.start('index.html', size = (800, 500))
Enter fullscreen mode Exit fullscreen mode

main.js

let text = document.querySelector('.text'); async function get_value_from_python () { let msg = await eel.hello()(); text.textContent = msg } get_value_from_python()
Enter fullscreen mode Exit fullscreen mode

result

Image description

Send data from Javascript to Python

main.js

 eel.expose(js_random); function js_random() { return Math.random(); }
Enter fullscreen mode Exit fullscreen mode

main.py

import eel eel.init('web') def print_num(n): print('Got this from Javascript:', n) # Call Javascript function, and pass explicit callback function eel.js_random()(print_num) eel.start('index.html', size = (800, 500))
Enter fullscreen mode Exit fullscreen mode

learn more: https://github.com/python-eel/Eel

Now we're done 🤗

Don't forget to like and follow 🙂

Support me on PayPal 🤗
https://www.paypal.com/paypalme/amr396

Top comments (0)