Python in browser - Brython

How to run python code in browser with brython

<!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;
      }

      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;
      }

      .box {
          background: steelblue;
          width: 1.6em;
          height: 1.6em;
      }
    </style>
    <title>Brython Demo</title>
</head>
<body onload="brython()">
    <h1>Brython Crash Course</h1>

    <h2 id="hello"></h2>
    <button id="alert-btn">Alert & Insert</button>

    <input type="text" id="text" placeholder="Enter something">
    <span id="output"></span>

    <h2 id="greet">Hello {name}</h2>

    <button id="joke-btn">Get Joke</button>
    <div id="joke" class="card">Click the "get joke" button</div>

    <input type="file" id="file-upload">
    <br>
    <textarea id="file-text" cols="60" rows="10"></textarea>

    <div class="card">
        <button id="rotate-btn">Rotate</button>
        <div id="rotate-box" class="box"></div>
    </div>

    <h2>Saved Item: <span id="item"></span></h2>
    <input type="text" id="item-input" placeholder="Add to local storage">
    <button id="add-btn" style="display: inline;">Add</button>
    <button id="remove-btn" style="display: inline;">Remove</button>

    <!-- Alert & DOM insert -->
    <script type="text/python" id="script0">
        from browser import document, console, alert

        def show(e):
            console.log(e)
            alert('Hello World')
            document['hello'] <= 'Hello World'

        document['alert-btn'].bind('click', show)
    </script>

    <!-- Text bind -->
    <script type="text/python" id="script1">
        from browser import document

        def show_text(e):
            document['output'].textContent = e.target.value;

        document['text'].bind('input', show_text)
    </script>

    <!-- Template and variable -->
    <script type="text/python" id="script2">
        from browser import document
        from browser.template import Template

        Template(document['greet']).render(name='Brad')
    </script>

    <!-- Ajax call -->
    <script type="text/python" id="script3">
        from browser import document, ajax

        url = 'https://api.chucknorris.io/jokes/random'

        def on_complete(req):
            import json
            data = json.loads(req.responseText)
            joke = data['value']
            document['joke'].text = joke

        def get_joke(e):
            req = ajax.ajax()
            req.open('GET', url, True)
            req.bind('complete', on_complete)
            document['joke'].text = 'Loading...'
            req.send()

        document['joke-btn'].bind('click', get_joke)
    </script>

    <!-- Load file data -->
    <script type="text/python" id="script4">
        from browser import document, window

        def file_read(e):
            def onload(e):
                document['file-text'].value = e.target.result 
            
            file = document['file-upload'].files[0]
            reader = window.FileReader.new()
            reader.readAsText(file)
            reader.bind('load', onload)
        
        document['file-upload'].bind('input', file_read)
    </script>

    <!-- Rotate - manipulate style -->
    <script type="text/python" id="script5">
        from browser import document, html

        box = document['rotate-box']
        angle = 10

        def change(e):
            global angle
            box.style.transform = f"rotate({angle}deg)"
            angle += 10

        document['rotate-btn'].bind('click', change)
    </script>

    <!-- Local storage -->
    <script type="text/python" id="script6">
        from browser import document, html, window, console

        storage = window.localStorage

        if storage.getItem('item'):
            document['item'] <= storage.getItem('item')

        def add_item(e):
            item = document['item-input'].value
            storage.setItem('item', item)
            document['item'].textContent = item

        def remove_item(e):
            storage.removeItem('item')
            document['item'].textContent = ''

        document['add-btn'].bind('click', add_item)
        document['remove-btn'].bind('click', remove_item)
    </script>
</body>
</html>
Python in browser - Brython

How to run python code in browser with brython

See Also
