DEV Community

Free Python Code
Free Python Code

Posted on

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

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)