Step 1

Create your project folder.

Start with a simple folder and three files. This keeps the starter app easy to edit, deploy, and understand.

code Terminal

mkdir my-election
cd my-election

touch index.html index.css index.js

code index.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Election</title>
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    <main class="app">
      <section class="card">
        <p class="eyebrow">CrownVote API Voting</p>
        <h1 id="electionTitle">Loading election...</h1>
        <p id="electionDescription" class="muted">
          Please wait while we load the election.
        </p>

        <div id="notice" class="notice hidden"></div>

        <form id="loginForm" class="form hidden">
          <label>
            Voter ID
            <input id="voterId" type="text" placeholder="Enter voter ID" required />
          </label>

          <label>
            Password
            <input id="password" type="password" placeholder="Enter password" required />
          </label>

          <button type="submit">Login to vote</button>
        </form>

        <section id="ballotScreen" class="hidden">
          <div id="voterInfo" class="voter"></div>
          <div id="ballots" class="ballots"></div>
          <button id="submitVote" type="button">Submit vote</button>
        </section>
      </section>
    </main>

    <script src="./index.js"></script>
  </body>
</html>