Help writing my first bric!

Custom Brics
1

Hey everyone, I am bit confused with the syntax on the bric builder. Maybe I am over thinking it.

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
         #remaining-text {
         font-size: 24px;
         font-weight: bold;
         color: red;
         }
         .counter{
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         }
      </style>
   </head>
   <body>
      <div class="counter">
         <p>ONLY</p>
         <p id="remaining-text"> 25 </p>
         <p>LEFT</p>
      </div>
      <script>let remaining = 25;
         function decrementRemaining() {
           remaining--;
           document.getElementById("remaining-text").innerHTML = `Only ${remaining} left`;
           if (remaining <= 0) {
             console.log("All gone!");
           }
         }
         
         setInterval(decrementRemaining, 600000); // 600000 milliseconds = 10 minutes
      </script>
   </body>
</html>

I want to be able to turn this into a bric. and have the user be able to set the timing. as well as maybe the styling.

2

Hi @teamallnighter

Docs for the Bric Builder are here

https://help.blocsapp.com/article-categories/developers/

You really needs to know at least some basics of HTMl, CSS, JQuery and ideally javascript to use the bric builder.

For example you won’t need a chunk of that code you posted in the HTML section. You need to write all the functions for the styling options in the custom.js file that’s in the bric.

So it’s not so straight forward as copy paste.

The Bric builder includes some starter brics that help you get familiar with it.

1 Like
3

ok gotcha, I know vanilla js. I think I was putting too much into the builder thats built in. If I can just write everything in the js thats great. ill check the docs. thanks

4

If you know javascript, you shouldn’t have much issues, because you likely already know your way around HTML, since they go together. :smile:

eg. You dont need the html, head, body tags. Just the related markup for your bric.