Teen Titans Go To The Movies

Title: Heroic Transactions with Teen Titans Go! To the Movies and Payment Request API

Description:

Inspired by Nicolas Cage’s role as Superman in Teen Titans Go! To the Movies, this project uses the Payment Request API to create a fun and interactive web application that simulates heroic transactions. The application allows users to purchase movie tickets and superhero merchandise, reflecting the vibrant and humorous atmosphere of the film. Users can experience a seamless and secure payment process, demonstrating the practical use of the Payment Request API for e-commerce.

Features:

Seamless Payments: Use the Payment Request API to handle transactions securely and efficiently.
Interactive Shopping: Allow users to purchase movie tickets and superhero merchandise.
Thematic Design: Reflect the vibrant and humorous atmosphere of Teen Titans Go! To the Movies through the application’s design and interactions.

Starting Code:

Beginner Hints:

Create a single index.html file.
Copy the full HTML code block into that file.
Open index.html in your browser. If something doesn’t work, try a local server like python -m http.server.
Open DevTools Console to spot errors and typos quickly.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Heroic Transactions with Teen Titans Go! To the Movies and Payment Request API</title>
<style>
    body {
        font-family: 'Comic Sans MS', sans-serif;
        background-color: #f0f0f0;
        color: #333;
        text-align: center;
        padding: 50px;
    }
    .container {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    h1 {
        margin-bottom: 20px;
        color: #ff6347;
    }
    .product {
        margin: 20px 0;
        padding: 20px;
        background-color: #f9f9f9;
        border: 1px solid #ddd;
        border-radius: 5px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .product img {
        max-width: 100px;
        border-radius: 5px;
    }
    .product-details {
        flex-grow: 1;
        text-align: left;
        margin-left: 20px;
    }
    button {
        padding: 10px 20px;
        margin: 10px;
        border-radius: 5px;
        border: none;
        font-size: 16px;
        background-color: #007bff;
        color: white;
        cursor: pointer;
    }
    button:hover {
        background-color: #0056b3;
    }
</style>
</head>
<body>
    <div class="container">
        <h1>Heroic Transactions</h1>
        <p>Purchase movie tickets and superhero merchandise inspired by Teen Titans Go! To the Movies.</p>

        <div class="product">
            <img src="https://via.placeholder.com/100" alt="Movie Ticket">
            <div class="product-details">
                <h2>Movie Ticket</h2>
                <p>Price: $10.00</p>
            </div>
            <button onclick="buyProduct('Movie Ticket', 10.00)">Buy Now</button>
        </div>

        <div class="product">
            <img src="https://via.placeholder.com/100" alt="Superhero T-Shirt">
            <div class="product-details">
                <h2>Superhero T-Shirt</h2>
                <p>Price: $20.00</p>
            </div>
            <button onclick="buyProduct('Superhero T-Shirt', 20.00)">Buy Now</button>
        </div>
    </div>
<script>
    async function buyProduct(productName, productPrice) {
        if (!window.PaymentRequest) {
            alert('PaymentRequest API not supported');
            return;
        }

        const supportedInstruments = [{
            supportedMethods: 'basic-card',
            data: {
                supportedNetworks: ['visa', 'mastercard'],
                supportedTypes: ['debit', 'credit']
            }
        }];

        const details = {
            displayItems: [
                {
                    label: productName,
                    amount: { currency: 'USD', value: productPrice.toFixed(2) }
                }
            ],
            total: {
                label: 'Total',
                amount: { currency: 'USD', value: productPrice.toFixed(2) }
            }
        };

        try {
            const request = new PaymentRequest(supportedInstruments, details);
            const paymentResponse = await request.show();
            await paymentResponse.complete('success');
            alert('Payment successful!');
        } catch (err) {
            console.error('Payment failed', err);
            alert('Payment failed');
        }
    }
</script>
</body>
</html>

References:

Project Overview:

This project captures the vibrant and humorous atmosphere of Teen Titans Go! To the Movies using the Payment Request API to simulate heroic transactions. Users can purchase movie tickets and superhero merchandise, experiencing a seamless and secure payment process. The application demonstrates the practical use of the Payment Request API for e-commerce, providing an engaging and interactive experience. Embrace the fun and excitement of the Teen Titans to master the use of the Payment Request API in web development. Praise Cage!