Your first Sercrod page
In this first step you add a single directive, *let,
and one placeholder, %message%, to a plain HTML file.
Create a plain HTML file
Start with a minimal HTML file and include sercrod.js in the head.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My first Sercrod page</title>
<script src="/sercrod.js"></script>
</head>
<body>
<serc-rod>
<p *let="message = 'Hello Sercrod'">%message%</p>
</serc-rod>
</body>
</html>
Save this file as first-sercrod.html (or any name you prefer)
and open it in your browser.
Check that Sercrod is working
If Sercrod is loaded correctly, you should see Hello Sercrod.
If you still see the literal %message%, check the path to
sercrod.js.
What just happened
-
*letdefines a small piece of data,message, directly on the paragraph element. -
The text
%message%is replaced with the value ofmessagewhen Sercrod runs. - The rest of the HTML stays plain; only one attribute and one placeholder are added.
Next: More data and simple input
On the next page you will move this idea into the
data attribute, bind an input with *input,
and then try a small counter.