69-Byte Black Pixel Clone

Phase 1: Scaffold the project

Create a folder and three files: index.html, styles.css, and script.js. This gives us a clean place to store the static assets we’ll need for the clone.

mkdir black-pixel-clone && cd black-pixel-clone
touch index.html styles.css script.js

Phase 2: Core feature – display pixel & info

The HTML defines a container for the pixel and a div for the price/token info. CSS will later force the pixel to be exactly 1×1 px and black, while JavaScript will fill in the dynamic text.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>69‑Byte Black Pixel</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <div class="pixel"></div>
  <div class="info">
    <span id="price">Price: 0.01 ETH</span>
    <button id="copyToken">Copy Token</button>
  </div>
  <script src="script.js"></script>
</body>
</html>

Phase 3: Core feature – interactive UI

In this step we bring the page to life with a tiny script. The JavaScript injects a hard‑coded price and a mock token address right under the black pixel, then wires a click handler that copies the token to the clipboard and shows a friendly alert. This mimics the original site's behaviour without any external dependencies, keeping the clone ultra‑light.

We keep everything in plain vanilla JS so the file can be dropped into any folder and run instantly. The script runs after the DOM loads, finds the placeholder elements, fills them, and registers the click event on the pixel element.

script.js

document.addEventListener('DOMContentLoaded',function(){
  // static mock data – adjust if you like
  const priceEth = 413;
  const tokenAddr = '0x1234567890abcdef1234567890abcdef12345678';

  // populate the info line
  const infoEl = document.getElementById('info');
  infoEl.textContent = `Price: ${priceEth} ETH – Token: ${tokenAddr}`;

  // click handler for the black pixel
  const pixel = document.getElementById('pixel');
  pixel.style.cursor = 'pointer';
  pixel.addEventListener('click',function(){
    // copy token address to clipboard
    navigator.clipboard.writeText(tokenAddr).then(()=>{
      alert('Token address copied to clipboard!');
    }).catch(()=>{
      alert('Clipboard copy failed.');
    });
  });
});

Phase 4: Run locally

Now that the files are ready, you can view the clone directly in any modern browser. Simply double‑click index.html or, for a more realistic server environment, spin up a tiny static server with Node’s serve package. Using a server avoids any CORS quirks and mirrors how the original site is hosted.

Both approaches require no build step – the HTML, CSS, and JavaScript are ready to go out of the box.

# optional: install a one‑off static server if you don't have it
npm install -g serve
# start the server in the current folder (port 5000 by default)
serve .

Phase 5: Verify & extend

Open the page and confirm three things: the 1×1 black pixel appears, the info line shows the mock price and token, and clicking the pixel triggers an alert and copies the address. Once verified, you can experiment by adding a fake "Buy" button, pulling live ETH prices from a free API, or deploying to GitHub Pages.

These extensions keep the spirit of the original while letting you practice DOM manipulation, fetch calls, and simple UI enhancements.

# macOS example – open the page in the default browser
open index.html
# Linux example – use xdg-open
# xdg-open index.html
# Windows example – use start
# start index.html