https://github.com/patrickalphac/html-fund-me-fcc
https://github.com/patrickalphac/html-fund-me-fcc
Last synced: 2 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/patrickalphac/html-fund-me-fcc
- Owner: PatrickAlphaC
- Created: 2022-02-13T18:32:09.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-05-01T02:12:13.000Z (12 months ago)
- Last Synced: 2024-05-01T03:25:57.579Z (12 months ago)
- Language: JavaScript
- Size: 218 KB
- Stars: 28
- Watchers: 3
- Forks: 87
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# html-fund-me-fcc
*[⌨️ (12:32:57) Lesson 8: HTML / Javascript Fund Me (Full Stack / Front End)](https://www.youtube.com/watch?v=gyMwXuJrbJQ&t=45177s)*
This is a minimalistic example what you can find in the [metamask docs](https://docs.metamask.io/guide/create-dapp.html#basic-action-part-1).
# Requirements
- [git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git)
- You'll know you've installed it right if you can run:
- `git --version`
- [Metamask](https://metamask.io/)
- This is a browser extension that lets you interact with the blockchain.
- [Nodejs](https://nodejs.org/en/)
- You'll know you've installed nodejs right if you can run:
- `node --version` And get an ouput like: `vx.x.x`
- [Yarn](https://classic.yarnpkg.com/lang/en/docs/install/) instead of `npm`
- You'll know you've installed yarn right if you can run:
- `yarn --version` And get an output like: `x.x.x`
- You might need to install it with npm
Confused? You can run `git checkout nodejs-edition` if you'd like to see this with nodejs.
## Typescript
For this demo project, we do not have a typescript edition. Please see the NextJS projects for a professional typescript front end.
### Optional Gitpod
If you can't or don't want to run and install locally, you can work with this repo in Gitpod. If you do this, you can skip the `clone this repo` part.
[](https://gitpod.io/#github.com/PatrickAlphaC/html-fund-me-fcc)
# Quickstart
1. Clone the repo
```
git clone https://github.com/PatrickAlphaC/html-fund-me-fcc
cd html-fund-me-fcc
```
2. Run the file.
You can usually just double click the file to "run it in the browser". Or you can right click the file in your VSCode and run "open with live server".
Optionally:
If you'd like to run with prettier formatting, or don't have a way to run your file in the browser, run:
```
yarn
yarn http-server
```
And you should see a small button that says "connect".
Hit it, and you should see metamask pop up.
# Execute a transaction
If you want to execute a transaction follow this:
Make sure you have the following installed:
1. You'll need to open up a second terminal and run:
```
git clone https://github.com/PatrickAlphaC/hardhat-fund-me-fcc
cd hardhat-fund-me-fcc
yarn
yarn hardhat node
```
This will deploy a sample contract and start a local hardhat blockchain.
2. Update your `constants.js` with the new contract address.
In your `constants.js` file, update the variable `contractAddress` with the address of the deployed "FundMe" contract. You'll see it near the top of the hardhat output.
3. Connect your [metamask](https://metamask.io/) to your local hardhat blockchain.
> **PLEASE USE A METAMASK ACCOUNT THAT ISNT ASSOCIATED WITH ANY REAL MONEY.**
> I usually use a few different browser profiles to separate my metamasks easily.
In the output of the above command, take one of the private key accounts and [import it into your metamask.](https://metamask.zendesk.com/hc/en-us/articles/360015489331-How-to-import-an-Account)
Additionally, add your localhost with chainid 31337 to your metamask.
5. Reserve the front end with `yarn http-server`, input an amount in the text box, and hit `fund` button after connecting
# Thank you!
If you appreciated this, feel free to follow me or donate!
ETH/Polygon/Avalanche/etc Address: 0x9680201d9c93d65a3603d2088d125e955c73BD65
[](https://twitter.com/PatrickAlphaC)
[](https://www.youtube.com/channel/UCn-3f8tw_E1jZvhuHatROwA)
[](https://www.linkedin.com/in/patrickalphac/)
[](https://medium.com/@patrick.collins_58673/)