bradtraversy/brython.html

## brython.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;
      }

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