https://github.com/weakish/nes-progress-bar-hello-world
A hello world project with NES.css and Netlify Functions
https://github.com/weakish/nes-progress-bar-hello-world
nes-css netlify-functions
Last synced: about 1 month ago
JSON representation
A hello world project with NES.css and Netlify Functions
- Host: GitHub
- URL: https://github.com/weakish/nes-progress-bar-hello-world
- Owner: weakish
- License: 0bsd
- Created: 2022-01-09T10:58:16.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-01-09T14:20:18.000Z (over 4 years ago)
- Last Synced: 2025-01-12T18:11:57.231Z (over 1 year ago)
- Topics: nes-css, netlify-functions
- Language: Go
- Homepage:
- Size: 7.81 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
A hello world project powered by [NES.css] and [Netlify Functions].
[NES.css]: https://nostalgic-css.github.io/NES.css/
[Netlify Functions]: https://functions.netlify.com/
The frontend part is a simple HTML page showing a progress bar.
The input is received from the hash part of the URL:
```
https://progressbar.mmap.page/#{%22url%22:%20%22https://example.com/api%22,%20%22value_key_name%22:%20%22foo%22,%20%22max_key_name%22:%22bar%22}
```
Here `progressbar.mmap.page` is where this project is hosted.
`https://example.com/api` should be a site that returns something like:
```json
{
"foo": 123,
"bar": 456,
"other_keys": "will be ignored",
}
```
And the value of `foo` and `bar` will be used as the `value` and `max` attributes of the progress bar element (``).
On the frontend part, it uses [NES.css] for styling and a few lines of JavaScript (without any framework or library) to parse user input and invoke the Netlify Function.
The Netlify Function is written in Go, which fetches the data from the requested URL.