test/playground/scratch.html - master - kopython/_hyperscript

test/playground/scratch.html
101 строка2 KB
Viktor Szépe
Fix typos (#450)
08 окт 2023, 03:40
08 окт 2023, 03:40189dc55
<html lang="en">
	<head>
		<link
			rel="stylesheet"
			href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"
		/>
			<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
	</head>
	<body style="padding: 20px; font-family: sans-serif">
	<script src="../../src/_hyperscript.js"></script>


		<em>Work Area</em>

		<hr />
	<button _="on click fetch 'https://jsonplaceholder.typicode.com/posts' as Object
	              log it
                  for x in it
                    log x">
		Fetch
	</button>

		<hr />

	<select _="
  on change
    log 'change'
  end
  on load
    log 'trigger'
    trigger change
  end
"
	>
		<option value="1">One</option>
		<option value="2">Two</option>
		<option value="3">Three</option>
	</select>

		<hr />

	<button _="on click add @foo='bar doh' to me">
		Add @foo
	</button>

		<hr />


	<button _='on click
	             set :b to the first <div/>
  				 make a <div/> called :a
  				 log :a, :b
  				 put :a at the end of :b'>Update</button>

	<div id="d1">
		asdfasdf
	</div>

	<input type="checkbox" _="on input halt"/>
	<input type="checkbox" oninput="event.preventDefault()"/>

	<input type="checkbox" _="on click halt"/>
	<input type="checkbox" onclick="event.preventDefault()"/>

	<p>
		<label>Throw<input id="throw" type="checkbox"/></label>
	</p>

	<p>
		<button _="on click
               put '.' at the end of the next <output/>
               log #throw
               log #throw's checked
               if the #throw's checked is true
                 log 'throwing!'
                 throw 'foo'
               end
            catch e
               log e
               put 'x' at the end of the next <output/>
">
			Click Me
		</button>
	</p>
	<p>
		[
		<output>
		</output>
		]
	</p>

	<img style="margin-top: 1000px;margin-bottom: 1000px"
		 _="on intersection[detail.intersecting] 1 having threshold 0.5
	          transition opacity to 1
            on intersection[not detail.intersecting] having threshold 0.5
	          transition opacity to 0
        "
		 src="https://placebear.com/200/300"/>

	</body>
</html>