<!DOCTYPE html>
<html>
<head>
  <title>Road Wallet</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:400,500,600,700&display=swap">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h1><i class="fas fa-route"></i> Road Wallet</h1>
    <h2 class="heading-total">Total Expenses: <span id="total-expenses-amount">$0</span></h2>
    
    <button id="open-modal-button"><i class="fas fa-users"></i> Manage Travelers</button>
    
    <!-- Modal for Travelers section -->
    <div id="travelers-modal" class="modal">
      <div class="modal-content">
        <span class="close-button">&times;</span>
        <form id="travelers-form">
          <h2>Add Traveler</h2>
          <label for="traveler-name">Traveler Name:</label>
          <input type="text" id="traveler-name" required>
          <button type="submit" id="add-traveler"><i class="fas fa-user-plus"></i> Add Traveler</button>
        </form>

        <h3>Travelers</h3>
        <div id="travelers-list">
          <!-- Travelers' names and amounts will be displayed here -->
        </div>
      </div>
    </div>

    <hr>

    <form id="expense-form">
      <h2>Add Expense</h2>
      <label for="expense-category">Category:</label>
      <select id="expense-category">
        <option value="food">Food</option>
        <option value="gas">Gas</option>
        <option value="accommodations">Accommodations</option>
        <option value="sightseeing">Sightseeing</option>
      </select>
      <label for="expense-amount">Amount:</label>
      <input type="number" id="expense-amount" min="0" required>
      <button type="submit"><i class="fas fa-plus"></i> Add Expense</button>
    </form>

    <hr>

    <h2>Expense History</h2>
    <ul id="expense-list"></ul>
  </div>

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

href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

display=swap">

</head>

<body>

<h1><i class="fas fa-route"></i> Road Wallet</h1>

<h2 class="heading-total">Total Expenses: <span id="total-expenses-amount">$0</span></h2>

<button id="open-modal-button"><i class="fas fa-users"></i> Manage Travelers</button>

<h2>Add Traveler</h2>

<label for="traveler-name">Traveler Name:</label>

<button type="submit" id="add-traveler"><i class="fas fa-user-plus"></i> Add

Traveler</button>

</form>

<h3>Travelers</h3>

</div>

<hr>

<h2>Add Expense</h2>

<label for="expense-category">Category:</label>

<option value="accommodations">Accommodations</option>

<option value="sightseeing">Sightseeing</option>

</select>

<label for="expense-amount">Amount:</label>

<button type="submit"><i class="fas fa-plus"></i> Add Expense</button>

</form>

<hr>

<h2>Expense History</h2>

</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>Road Wallet</title>

-10:31