PyScript-Demos/index.html at main · AviratGupta/PyScript-Demos · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<html>
<head>
    <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
  <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>

<body>
  <h1>Type a sample input here</h1>
  <input type="text" id="test_input" placeholder="type" >
  <br>
  <button id="count-button" type="button" pys-onClick="count">Count</button>
  <br>
  <button id="add-button" type="button" pys-onClick="add">Add</button>
  <br>
  <button id="reverse-button" type="button" pys-onClick="reverse">Reverse</button>
  <br>
  <button id="clear-button" type="button" pys-onClick="clear">Clear</button>
  <div id="test_output"></div>

<br><br><br><br><br><br><br><br>
<div class="container">
	<div class="row">
			<h1>contact us</h1>
	</div>
	<div class="row">
			<h4 style="text-align:center">We'd love to hear from you!</h4>
	</div>
	<div class="row input-container">
			<div class="col-xs-12">
				<div class="styled-input wide">
					<input type="text" id="name" required />
					<label>Name</label>
				</div>
			</div>
			<div class="col-md-6 col-sm-12">
				<div class="styled-input">
					<input type="text" id="email" required />
					<label>Email</label>
				</div>
			</div>
			<div class="col-md-6 col-sm-12">
				<div class="styled-input" style="float:right;">
					<input type="text" id="ph" required />
					<label>Phone Number</label>
				</div>
			</div>
			<div class="col-xs-12">
				<div class="styled-input wide">
					<textarea required></textarea>
					<label>Message</label>
				</div>
			</div>
			<div class="col-xs-12">
				<div class="btn-lrg submit-btn" pys-onClick = "send_message" id="btn-form">Send Message</div>
			</div>

</div>
	<br>
<h1> OUTPUT</h1>
	<p id ="output"></p>

<py-script>

	inp = Element("test_input")
	op = Element("test_output")

	def clear(*args, **kwargs):
		inp.clear()

	def count(*args, **kwargs):
		num = len(inp.value)
		op.write(num)

	def reverse(*args, **kwargs):
		rev = inp.value[::-1]
		op.write(rev)

	def add(*args, **kwargs):
		arr = []
		arr.append(inp.value)
		return arr


	def send_message(*args,**kwargs):
		result_place = Element("output")
		result_place.write(f" My name is : {Element('name').value} . My email is : {Element('email').value} and my phone number is : {Element('ph').value}.")
		#result_place.write(f" my name is {Element('name').value} . my email is: {Element('email').value} and my phone number is {Element('ph').value}")
</py-script>

  </body>
</html>