Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bell-kevin/clickcounter
Using React JS, create 2 buttons, one that increments a counter and one that decrements the same counter
https://github.com/bell-kevin/clickcounter
jsx react reactjs
Last synced: about 2 months ago
JSON representation
Using React JS, create 2 buttons, one that increments a counter and one that decrements the same counter
- Host: GitHub
- URL: https://github.com/bell-kevin/clickcounter
- Owner: bell-kevin
- License: agpl-3.0
- Created: 2023-02-07T00:02:47.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-28T21:30:13.000Z (2 months ago)
- Last Synced: 2024-10-28T22:27:52.859Z (2 months ago)
- Topics: jsx, react, reactjs
- Language: HTML
- Homepage:
- Size: 3.47 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# Click Counter
https://piped.hostux.net/watch?v=ABQLwlE8MUA
In the tutorial you just watched, you created a button and counted the clicks on that button. In this project, you will create 2 buttons, one that increments a counter and one that decrements the same counter. The result looks like this:
Use an h1 tag for the heading "Click Counter". Create a component for the buttons and the number between. That component handles the onClick event listeners for the buttons, and uses state to handle the value of the counter. Use an external style sheet for that component to (1) add color to the buttons (you can choose any colors you want, make sure the symbols are visible), (2) make the buttons the same size and with border radius to round the corners, (3) add margin space on the left and right of the counter value.
Submission: Take a screenshot of your running app, similar to the one above, with a value for the counter that is NOT 1. Zip it together with the project folder. Submit a single file.
== We're Using GitHub Under Protest ==
This project is currently hosted on GitHub. This is not ideal; GitHub is a
proprietary, trade-secret system that is not Free and Open Souce Software
(FOSS). We are deeply concerned about using a proprietary system like GitHub
to develop our FOSS project. I have a [website](https://bellKevin.me) where the
project contributors are actively discussing how we can move away from GitHub
in the long term. We urge you to read about the [Give up GitHub](https://GiveUpGitHub.org) campaign
from [the Software Freedom Conservancy](https://sfconservancy.org) to understand some of the reasons why GitHub is not
a good place to host FOSS projects.
If you are a contributor who personally has already quit using GitHub, please
email me at **[email protected]** for how to send us contributions without
using GitHub directly.
Any use of this project's code by GitHub Copilot, past or present, is done
without our permission. We do not consent to GitHub's use of this project's
code in Copilot.
