scrimba
Learn Imba
Sending Data with Events
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

Sending Data with Events
AboutCommentsNotes
Sending Data with Events
Expand for more info
habit-adder.imba
run
preview
console
# Challenge:
# Add a new tag called habit-adder
# - Give it a prop called name, set to "Untitled"
# - Add an html template starting with <self>
# - include a <header> tag with the content "Add Habit"
# - after that make a <section> tag with the following:
# - a text <input> bound to name, wrap the input in a <div>
# - a button tag with the content "Add"

# Here's the css for the habit-adder tag:


tag habit-adder

prop name = "Untitled"

css bgc:cool2 p:10px rd:lg
header fw:500 fs:xs mb:5px mt:-5px c:cool5
section form d:flex g:5px
button bgc:indigo5 @hover:indigo6 c:white rd:sm px:5px
div flex:1
input w:100% px:5px rd:sm

def handleSubmit
console.log('hi')

<self>
<header> "Add Habit"
<section>
<form @submit.prevent=handleSubmit>
<div> <input bind=name>
<button type="submit"> "Add"
Console
/index.html?
-6:25