If you’ve successfully pasted the links, the next step is to notify mavo which element you want it to handle.
This is similar to react unique id html-attribute passed to ReactDOM but we will have to replace id with mv-app.
The mv-app html-attribute notifies mavo it should be responsible for the element. I mean this, mv-app tells mavoscript that the element is concerned with her and she, mavo, should take note and start treating it differently.
See how to tell mavoscript about an element below.
<!-- mv-app is passed like a regular html-attribute --><div mv-app="mavopractice"></div>
Deep Dive into mavo basics
To practice the basic concepts we will create a calculator project.
Along the way, I will be discussing the most basic concepts in mavo.
You can use the markup below as a template for your calculator.
<div mv-app="mavopractice"><h1>Hey mavos,</h1><p>Let’s do some calculations…</p><form><input type="text"/><select ><option value="+">+</option><option value="-">-</option><option value="*">*</option><option value="/">/</option></select><input type="text"/></form><!--container where answer will be displayed --><div class="answerContainer"></div></div>
The concept you will be learning first is property.
Howbeit, property is not as complicated as variable can be.
It is just an attribute that is passed to an element inorder to collect its values.
Check out how I added three properties and named them.
Now that we added property attribute to some of our elements we can watch changes to the element.
input1: This will be used to collect the first inputed number.
sign: This is needed to keep watch of changes to our calculator signs
input2: The third element we want to keep track is the second inputed number
ALERT!!!: SPOILER AHEAD
To confirm, let’s make a quick script to see our changes in the console.
To actually handle things, we can only see changes through the html. Do this now.
<!--container where answer will be displayed --><div class="answerContainer"><!-- Here is the real way of handling things-->[input1]</div>
Start typing numbers into the first input and see the changes live in the div with class answerContainer. This is more than enough evidence property really keep watches for changes to element.
Pasting our values to see is not enough. It does not make enough sense of what calculators can do. Calculators take input and transform them. We want the same. This is where expression comes in. You want input1 + input2 to give an answer.
Re-edit the immediate changes above to [input1 + input2] and tell me what you saw when you started adding numbers to both inputs.
If you are a little bit conversant, you should have noticed a strange bracket `" [ " input1 + input2 " ] ". I have been using it for quite a while in this article.
Expressions need a place to stay, and mavo created that with the brackets. You can't just put the property's name into the html value and expect it to do something.
"By default, mavo expressions are delineated with brackets", according to the mavo docs. However, you can change the syntax but we will not be covering that here.
You wouldn’t want to place properties in the middle of elements without brackets. It won't work. You want mavo to be aware that the name is a property right? Then do not ever forget to add the brackets.
Well we can move on now.
With mavo, there are two ways to make conditionals : if() and mv-if
According to https://mavo.io, "you can use the if(condition, ifyes, ifno) function to print out different text depending on a condition". On the other hand, the mv-if is an attribute that hides or shows an element considering that the condition is true.
The if() amd mv-if works very similar. Only that the former, if() , is a function and can be used for more complex logic, and the latter, mv-if , is an attribute and simplifies logic to a simpler yes or no.
In this tutorial, I have decided to stick to mv-if for two reasons
since you must have been familiar with special attributes like property and mv-app,
mv-if is simpler if().
BACK TO CODING: enough of the talking
In our case, we would hide some element based on the user chosen option.
note: ##Please read the code below carefully It might first look confusing, but re-read. It is not as difficult like you think. If you re-read, it should be very clear.
<div class="answerContainer"><!--if the sign property is '+', show thiselse hide it--><div mv-if="sign = '+'"><p>[input1]+[input2]=</p><p>[input1 + input2]</p></div><!--if the sign property is '-', show thiselse hide it--><div mv-if="sign = '-'"><p>[input1]-[input2]=</p><p>[input1 - input2]</p></div><!--if the sign property is '*', show thiselse hide it--><div mv-if="sign = '*'"><p>[input1]*[input2]=</p><p>[input1 * input2]</p></div><!--if the sign property is '/', show thiselse hide it--><div mv-if="sign = '/'"><p>[input1]/[input2]=</p><p>[input1 / input2]</p></div></div>
You now have an amazing calculator. Reload your browser to see the changes.