Our editor will allow you to compile code directly in your browser.
You can play with some example components below.
Try to change the value of sales in Thursday, to do that change the following line in the JS Tab
data: [21, 30, 45, 13, 9, 20, 7],
After that try changing the color of the chart, to do that change the following line in the JS Tab code
backgroundColor: [
'rgba(63, 81, 181, 0.5)',
'rgba(77, 182, 172, 0.5)',
'rgba(66, 133, 244, 0.5)',
'rgba(156, 39, 176, 0.5)',
'rgba(233, 30, 99, 0.5)',
'rgba(66, 73, 244, 0.4)',
'rgba(66, 133, 244, 0.2)',
],
Try to change the lightning icon on the first button. To do that choose your favorite icon from this list and change the following line in the HTML code:
class="fab fa-facebook-f"
After that Try to change the color of the fourth button. To do that change the following line in the HTML code
class="btn btn-outline-primary btn-lg my-2 mx-2 btn-rounded"
Try to change the countdown date. To do that change the following line in the HTML code
data-mdb-countdown="31 December 2021 23:59:59"
After that, you should see a new countdown
Try to play with it and add some styling of your own!
Publish your snippet by clicking the button
at the
top.
Now you can boast to friends that you have completed your first snippet adventure!
Tell your friends about your snippet adventure TWEET!
After that, let's try something more challenging
We invite you to one of the Snippet Challenges. Choose the level of difficulty & win different prizes!
Rewards:
Easy challenge - We'll share your work from our Social accounts
Medium challenge - 15% discount on products on all MDB products
Hard challenge - 25% discount on products on all MDB products