Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!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>
- <body>
- <p style="color:#FF0000";>Get Songs Lyrics</p>
- </body> </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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement