https://github.com/attomos/hdoc-ribbon
A custom HTML element to put in my #100DaysOfCode projects.
https://github.com/attomos/hdoc-ribbon
100daysofcode web-componenets
Last synced: 8 months ago
JSON representation
A custom HTML element to put in my #100DaysOfCode projects.
- Host: GitHub
- URL: https://github.com/attomos/hdoc-ribbon
- Owner: attomos
- Created: 2022-01-18T16:30:21.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-04-03T10:44:31.000Z (about 4 years ago)
- Last Synced: 2025-05-28T02:43:22.829Z (about 1 year ago)
- Topics: 100daysofcode, web-componenets
- Language: JavaScript
- Homepage:
- Size: 149 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# 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
```html
```
And start using `` element in your document:
```html
```
| 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
```html
```
```js
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](https://www.npmjs.com/package/hundred-days-of-code-css-ribbon).
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
1. Learn about https://unpkg.com/ which is CDN to serve files from npm packages
2. Some CSS transforms to make the ribbon on the corner
3. My ribbon is a bit different from [@narze's](https://github.com/narze/100-days-of-code-ribbon). I
create custom HTML element, while his ribbon is CSS magic (use the ribbon class and pass data to
attr() function).