index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.8.8/brython.js" integrity="sha256-rA89wPrTJJQFWJaZveKW8jpdmC3t5F9rRkPyBjz8G04=" crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.8.8/brython_stdlib.js" integrity="sha256-Gnrw9tIjrsXcZSCh/wos5Jrpn0bNVNFJuNJI9d71TDs=" crossorigin="anonymous"></script>

    <style>
        * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      body {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 25px;
            padding: 30px;
            line-height: 1.6;
            background-image: url('./background.png');
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: 100% 100%; 
      
      }

      h1 {
        text-align: center;
        margin-bottom: 30px;
        border-bottom: 1px #ccc solid;
      }

      h2 {
        margin-top: 20px;
      }

      button {
        cursor: pointer;
        display: block;
        background: #333;
        color: #fff;
        border: 0;
        border-radius: 5px;
        padding: 10px 20px;
        margin: 20px 0;
      }

      input[type="text"] {
        border: 1px #ccc solid;
        width: 300px;
        padding: 4px;
        height: 35px;
        margin-top: 20px;
      }

      .card {
        margin: 20px 0;
        border: #ccc 1px solid;
        padding: 20px;
      }

    </style>
    <title>Songs Lyrics</title>
</head>
<body onload="brython()">
    <h1>Get Songs Lyrics</h1>

    <input type="text" id="artist-input" placeholder="Enter something">
    <button id="lyrics-btn">Get Lyrics</button>
    <div id="lyrics" class="card">Click the "get lyrics" button</div>


    <!-- Ajax call -->
    <script type="text/python" id="script3">
        import json
        from browser import document, ajax

        def on_complete(req):
            data = json.loads(req.responseText)
            lyrics = data['lyrics']
            document['lyrics'].text = lyrics

        def get_lyrics(e):
            req = ajax.ajax()
            input_data = document['artist-input'].value.split()
            artist = input_data[0]
            title = ' '.join(input_data[1:])
            url = f'https://api.lyrics.ovh/v1/{artist}/{title}'
            req.open('GET', url, True)
            req.bind('complete', on_complete)
            document['lyrics'].text = 'Loading...'
            req.send()

        document['lyrics-btn'].bind('click', get_lyrics)
    </script>

</body>
</html>