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"
# 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