Video: HTML TS Buy Me A Coffee - JavaScript In HTML - Full-Stack Web3 Development Crash Course

Support

## Linking External JavaScript to Your HTML This lesson demonstrates the foundational process of incorporating JavaScript into an HTML document by linking to an external JavaScript file. This separation of concerns is a best practice in web development, keeping your structure (HTML) distinct from your behaviour (JavaScript). We'll use a simple HTML page containing a button as our starting point. Our initial HTML file, `index.html`, looks like this: ```html <!DOCTYPE html> <html> <head> <title>Buy me a coffee</title> </head> <body> <button id="connectButton">Connect</button> </body> </html> ``` Our goal is to eventually add interactive logic to the `connectButton` element using JavaScript. While you *can* embed JavaScript directly within `<script>` tags inside your HTML, managing behaviour in separate files is generally preferred for organization and maintainability. **Creating the External JavaScript File** First, we need to create the file that will hold our JavaScript code. 1. Create a new file in the same directory as your `index.html` file. 2. Name this file `index-js.js`. *Note on Naming:* The name `index-js.js` might seem slightly redundant. This specific naming convention is used here because we anticipate transitioning to TypeScript (`.ts` files) later. This naming helps distinguish the plain JavaScript version during that transition. **Linking the JavaScript File to HTML** Now, we need to tell the `index.html` file to load and execute the code contained within `index-js.js`. We do this using the `<script>` tag within the HTML's `<body>`. It's common practice to place this tag just before the closing `</body>` tag. This ensures that the HTML elements are loaded and available in the Document Object Model (DOM) before the script attempts to interact with them. Add the following line inside the `<body>` of your `index.html` file, right before the `</body>` tag: ```html <script src="./index-js.js" type="module"></script> </body> </html> ``` Let's break down this tag: * **`<script>`:** The standard HTML element for embedding or referencing executable scripts. * **`src="./index-js.js"`:** The `src` (source) attribute specifies the path to the external script file. The `./` indicates that the file (`index-js.js`) is located in the same directory as the current HTML file (`index.html`). * **`type="module"`:** This attribute indicates that the script should be treated as a modern JavaScript module. The specific implications of this aren't critical for this initial step, so don't worry about the details for now; just include it as shown. When the browser parses the HTML and encounters this `<script src="...">` line, it fetches the content of `index-js.js` and executes the JavaScript code found within it, effectively injecting that code's behaviour into the context of the HTML page. **Verifying the Connection** To confirm that our external JavaScript file is correctly linked and being executed, we can add a simple command to it that logs a message to the browser's developer console. 1. Open the `index-js.js` file. 2. Add the following line of code: ```javascript console.log("hi"); ``` 3. Save the `index-js.js` file. 4. Open the `index.html` file in your web browser. 5. Open your browser's developer tools (often by right-clicking on the page and selecting "Inspect" or "Inspect Element") and navigate to the "Console" tab. 6. Refresh the page if necessary. You should see the text "hi" printed in the console, likely followed by a reference to the file and line number where the command originated (e.g., `index-js.js:1`). This output confirms that the browser successfully loaded and executed the code from your external JavaScript file. If you add more `console.log("hi");` lines to `index-js.js`, save, and refresh the browser, you will see multiple "hi" messages logged, further demonstrating the execution flow. **Conclusion** You have successfully linked an external JavaScript file (`index-js.js`) to your HTML document (`index.html`). This setup establishes the connection needed to start adding dynamic behaviour and interactivity to your web page elements, such as making the `connectButton` perform an action when clicked, which will be covered in subsequent steps. Using external files helps keep your project organized and makes your code easier to manage as it grows.

JavaScript In HTML

A foundational guide to linking external JavaScript to Your HTML. Learn the best practice of separating JavaScript from HTML by creating and linking external `.js` files. Follow the steps using the `<script>` tag and verify the connection in the browser console.

Course Overview

About the course

What you'll learn

How to build full-stack web3 applications on ZKsync

JavaScript/TypeScript: viem, wagmi, synpress

Nodejs and pnpm

rindexer

Circle Compliance Engine and USDC

Fleek site hosting and CLI

How to build a static and dynamic React/Next.js site

How to leverage AI to code faster and more securely

Course Description

Who is this course for?

Software engineers
Frontend developers
Backend developers
web3 developers
Smart contract security researchers

Potential Careers

Smart Contract Auditor

$100,000 - $200,000 (avg. salary)

DeFi Developer

$75,000 - $200,000 (avg. salary)

Smart Contract Engineer

$100,000 - $150,000 (avg. salary)

Web3 developer

$60,000 - $150,000 (avg. salary)

Web3 Developer Relations

$85,000 - $125,000 (avg. salary)

Security researcher

$49,999 - $120,000 (avg. salary)

Meet your instructors

Patrick Collins

Founder at Cyfrin

Web3 engineer, educator, and Cyfrin co-founder. Patrick's smart contract development and security courses have helped hundreds of thousands of engineers kickstarting their careers into web3.

Last updated on May 15, 2025

Thanks for checking us out

Start learning for free

Start for free

Solidity Developer

Full-Stack Web3 Development Crash Course

Section 1: Welcome To The Course

Duration: 1h 12min

Section 2: HTML TS Buy Me A Coffee

Duration: 1h 39min

1. Introduction

A foundational project to Introduction to the HTML/JS Buy Me A Coffee dApp. Discover how plain HTML and JavaScript can interact with a Solidity smart contract to create a simple dApp. Practice connecting wallets, sending test Ether, reading contract state, and triggering withdrawals on a local blockchain. Duration: 4min

2. Setup

A step-by-step walkthrough to setting up your web3 frontend project. Create the project directory, define application goals with a README.md, and build the basic HTML file structure. Add essential tags like head, body, title, and the first interactive element – a connect button with a unique ID. Duration: 4min

3. Connecting Your Wallet To Your Site

An introductory guide to connecting your wallet to a website. Discover the process websites use to detect browser wallets via the injected `window.ethereum` object. Explore how wallets like MetaMask mediate communication between dApps and the blockchain using RPC URLs. Duration: 8min

4. JavaScript In HTML

5. Adding Connect Functionality

A practical guide to connecting your dApp: Adding a web3 wallet button with JavaScript and Viem. Learn to implement a 'Connect Wallet' feature using vanilla JavaScript, detect browser wallets, and leverage the `viem` library. Master asynchronous connection requests with `async`/`await` for robust dApp interactions. Duration: 13min

6. Connecting To Different Chains

A foundational walkthrough to connecting your web app to MetaMask. Walk through the process of linking a web app to the MetaMask wallet and enabling blockchain interactions. Explore the connection flow, user confirmations, and implement a basic connection using JavaScript and `viem`. Duration: 1min

7. Sending Contract Transactions Setup

A practical guide to setting up the fund function. Add HTML elements and initial JavaScript logic to interact with a smart contract's fund function. Learn to read user input, ensure wallet connectivity, and prepare for transaction simulation using Viem's Public Client. Duration: 11min

8. Sending Contract Transactions Constants

A crucial pattern for managing smart contract details: The constants file. Explore the necessity of a dedicated constants file for handling smart contract addresses and ABIs in web applications. See how this centralizes configuration, aiding multi-chain support and code organization. Duration: 2min

9. Simulations

A detailed lesson to simulating contract interactions with `viem`. Discover how to use `viem`'s `simulateContract` for pre-flight checks on your blockchain transactions, ensuring they'll likely succeed. Learn to configure all necessary parameters from ABI and account to chain and value conversion. Duration: 6min

10. Local Node

An essential walkthrough to local dApps testing with Anvil. Discover the advantages of local blockchain environments over live networks for front-end development. Learn to install Anvil, connect MetaMask, and utilize saved states for efficient, zero-cost testing. Duration: 7min

11. Sending The Tx

A practical guide to sending a state-changing transaction with viem. Learn how to use `viem` with MetaMask to send transactions that alter smart contract state from a frontend. Master the vital "simulate-then-write" pattern for safer and more reliable user interactions on a local Anvil node. Duration: 4min

12. Getbalance

A practical guide to how to fetch smart contract balances using viem. Learn to query smart contract ETH balances from a web frontend using viem's PublicClient. Understand read operations, balance formatting, and handling block confirmations in local Anvil setups. Duration: 5min

13. Mid Point Review

A consolidating review to mid-point review: Building your web3 frontend. Revisit connecting wallets, reading balances (`publicClient`), and sending transactions (`walletClient`, simulate/write). Solidify understanding of `window.ethereum`, `viem` usage, and local testing with `anvil`. Duration: 4min

14. Withdrawing AI

A guided walkthrough to adding withdraw functionality to your dApp frontend. Implement the crucial `withdraw` function on a dApp frontend, enabling fund retrieval from a smart contract. Learn to leverage AI assistance for code generation while understanding the critical importance of manual review in web3. Duration: 7min

15. Typescript

A guided transition to from JavaScript to TypeScript. Explore the benefits of TypeScript and follow the steps to convert a JavaScript dApp frontend. Learn about compilation, type safety, configuration, and using Vite for an efficient development workflow. Duration: 14min

16. Review

An essential review to reviewing your first dApp frontend: Connecting, reading, and writing with Viem. Recap key Viem concepts like WalletClient, PublicClient, and the simulate-then-write pattern used in a basic dApp frontend. Learn how connect, read balances, and execute fund/withdraw transactions. Duration: 5min

17. Challenges

A practical challenge to querying smart contract data from the frontend. Apply your frontend skills to read data directly from a deployed smart contract by adding a query button. Learn the crucial distinction between gasless read operations (`view` functions) and state-changing write operations. Duration: 2min

Section 3: TS TSender UI

Duration: 3h 08min

Section 4: Ts NFT Marketplace

Duration: 1h 44min