def Gallery():
return html.section(
html.h1("Photo Gallery"),
Photo("Landscape", image_id=830),
Photo("City", image_id=274),
Photo("Puppy", image_id=237),
)
def App():
is_sent, set_is_sent = use_state(False)
message, set_message = use_state("")
if is_sent:
return html.div(
html.h1("Message sent!"),
html.button(
{"onClick": lambda event: set_is_sent(False)}, "Send new message?"
),
)
@event(prevent_default=True)
def handle_submit(event):
set_message("")
set_is_sent(True)
return html.form(
{"onSubmit": handle_submit, "style": {"display": "inline-grid"}},
html.textarea(
{
"placeholder": "Your message here...",
"value": message,
"onChange": lambda event: set_message(event["target"]["value"]),
}
),
html.button({"type": "submit"}, "Send"),
)
def Gallery():
return html.section(
html.h1("Famous Musicians"),
Photo(),
Photo(),
Photo(),
)
def ArtistList():
artist_to_add, set_artist_to_add = use_state("")
artists, set_artists = use_state(
["Marta Colvin Andrade", "Lamidi Olonade Fakeye", "Louise Nevelson"])
def handle_change(event):
set_artist_to_add(event["target"]["value"])
def handle_add_click(event):
if artist_to_add not in artists:
set_artists([*artists, artist_to_add])
set_artist_to_add("")
def make_handle_delete_click(index):
def handle_click(event):
set_artists(artists[:index] + artists[index + 1:])
return handle_click
return html.div(
html.h1("Inspiring sculptors:"),
html.input({
"value": artist_to_add,
"onChange": handle_change
}),
html.button({"onClick": handle_add_click}, "add"),
html.ul([
html.li(
name,
html.button({"onClick": make_handle_delete_click(index)},
"delete"),
key=name,
) for index, name in enumerate(artists)
]),
)
def TodoList():
return html.section(
html.h1("My Todo List"),
html.ul(
Item("Find a cool problem to solve", done=True),
Item("Build an app to solve it", done=True),
Item("Share that app with the world!", done=False),
),
)
def Counter():
number, set_number = use_state(0)
def handle_click(event):
set_number(number + 5)
print(number)
return html.div(
html.h1(number),
html.button({"onClick": handle_click}, "Increment"),
)
def Counter():
number, set_number = use_state(0)
async def handle_click(event):
await asyncio.sleep(3)
set_number(lambda old_number: old_number + 1)
return html.div(
html.h1(number),
html.button({"onClick": handle_click}, "Increment"),
)
def Counter():
number, set_number = use_state(0)
async def handle_click(event):
set_number(number + 5)
print("about to print...")
await asyncio.sleep(3)
print(number)
return html.div(
html.h1(number),
html.button({"onClick": handle_click}, "Increment"),
)
def TodoList():
tasks = [
"Make breakfast (important)",
"Feed the dog (important)",
"Do laundry",
"Go on a run (important)",
"Clean the house",
"Go to the grocery store",
"Do some coding",
"Read a book (important)",
]
return html.section(
html.h1("My Todo List"),
DataList(tasks),
)
def TodoList():
tasks = [
{"id": 0, "text": "Make breakfast", "priority": 0},
{"id": 1, "text": "Feed the dog", "priority": 0},
{"id": 2, "text": "Do laundry", "priority": 2},
{"id": 3, "text": "Go on a run", "priority": 1},
{"id": 4, "text": "Clean the house", "priority": 2},
{"id": 5, "text": "Go to the grocery store", "priority": 2},
{"id": 6, "text": "Do some coding", "priority": 1},
{"id": 7, "text": "Read a book", "priority": 1},
]
return html.section(
html.h1("My Todo List"),
DataList(tasks, filter_by_priority=1, sort_by_priority=True),
)
def ArtistList():
artists, set_artists = use_state(
["Marta Colvin Andrade", "Lamidi Olonade Fakeye", "Louise Nevelson"])
def handle_sort_click(event):
set_artists(list(sorted(artists)))
def handle_reverse_click(event):
set_artists(list(reversed(artists)))
return html.div(
html.h1("Inspiring sculptors:"),
html.button({"onClick": handle_sort_click}, "sort"),
html.button({"onClick": handle_reverse_click}, "reverse"),
html.ul([html.li(name, key=name) for name in artists]),
)
def ArtistList():
artist_to_add, set_artist_to_add = use_state("")
artists, set_artists = use_state([])
def handle_change(event):
set_artist_to_add(event["target"]["value"])
def handle_click(event):
if artist_to_add and artist_to_add not in artists:
set_artists([*artists, artist_to_add])
set_artist_to_add("")
return html.div(
html.h1("Inspiring sculptors:"),
html.input({
"value": artist_to_add,
"onChange": handle_change
}),
html.button({"onClick": handle_click}, "add"),
html.ul([html.li(name, key=name) for name in artists]),
)
def MyTodoList():
return html.div(
html.h1("My Todo List"),
html.img({"src": "https://picsum.photos/id/0/500/300"}),
html.ul(html.li("The first thing I need to do is...")),
)
def HelloWorld():
return html.h1("Hello, world!")
def App():
return html.h1("Hello, world!")
