1.3.2 • Published 2 years ago
hdoc-ribbon v1.3.2
hdoc-ribbon (100-days-of-code-ribbon)
hdoc-ribbon is a custom HTML element I worked on as part of my #100DaysOfCode journey to learn
new stuffs and re-learn many things
Usage
Include this script in your HTML
<script src="https://unpkg.com/hdoc-ribbon@latest/index.js"></script>
<!-- Or use specific tag -->
<script src="https://unpkg.com/hdoc-ribbon@1.2.0/index.js"></script>And start using <hdoc-ribbon> element in your document:
<!-- put the ribbon on the top right corner -->
<hdoc-ribbon
data-day="11"
position="right"
href="https://github.com/attomos/100-days-of-code"
></hdoc-ribbon>
<!-- put the ribbon on the top left corner -->
<hdoc-ribbon
data-day="100"
position="left"
href="https://github.com/attomos/100-days-of-code"
></hdoc-ribbon>| Attribute | Data Type | Description | Observed Attribute* |
|---|---|---|---|
| data-day | string | The day you're on the challenge, e.g. 1-100 | false |
| position | string | Where to put the ribbon either left or right | true |
| href | string | The URL that points to your repo or whatever | false |
| Observed Attribute can be modified from JavaScript.
Customization
<hdoc-ribbon
data-day="11"
position="right"
href="https://github.com/attomos/100-days-of-code"
></hdoc-ribbon>const ribbon = document.querySelector("hdoc-ribbon");
ribbon.theme = {
backgroundColor: "#c8e8de",
borderHoverColor: "#4e635c",
backgroundHoverColor: "#8ebdae",
};Customizable Properties
| Property | Data Type | Description |
|---|---|---|
| theme.borderColor | string | Border color of the ribbon in normal state |
| theme.backgroundColor | string | Background color of the ribbon in normal state |
| theme.borderHoverColor | string | Border color when the ribbon is hovered |
| theme.backgroundHoverColor | string | Background color when the ribbon is hovered |
Inspirations
I got this idea by looking at what @narze did in his day 5 and day 6 of #100DaysOfCode challenge.
He created #100DaysOfCode CSS ribbon and published it to npm.
Please check out his work from the links below.
- https://100daysofcode-narze.vercel.app/days/5/
- https://100daysofcode-narze.vercel.app/days/6/
- https://github.com/narze/100-days-of-code-ribbon
Things I learned from @narze ribbon as well as creating my own
- Learn about https://unpkg.com/ which is CDN to serve files from npm packages
- Some CSS transforms to make the ribbon on the corner
- My ribbon is a bit different from @narze's. I create custom HTML element, while his ribbon is CSS magic (use the ribbon class and pass data to attr() function).