Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Coffee Preference Form</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

    <style>
        .bg-strong { background-color: #725038; color: white; }
        .bg-medium { background-color: #936748; color: white; }
        .bg-soft { background-color: #cfb39f; color: black; }
    </style>
    <script>
        document.addEventListener("DOMContentLoaded", function(){

        });
    </script>
</head>
<body>
<div class="container mt-5">
    <h2>Your Favorite Coffee</h2>
    <form id="coffeeForm">
        <div class="form-group">
            <label for="coffeeSelect">Choose your coffee:</label>
            <select class="form-control" id="coffeeSelect">
                <option value="">--Please choose an option--</option>
                <option value="espresso" data-intensity="strong">Espresso</option>
                <option value="latte" data-intensity="medium">Latte</option>
                <option value="americano" data-intensity="soft">Americano</option>
            </select>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
    <div id="result"></div>
</div>
</body>
</html>