Thiết kế website giá rẻ

Question

As a gig artist, I write all my gigs in Google Calendar, and I’m tired of having to read through 40 gigs/month to calculate my monthly income.

I want to create a webpage that will access my calendar, find events that contain “+(income number here)” then calculate and display my monthly income.

While I’m doing this, I figure I might as well make it read “-(expense number here)” events and have it calculate my expenses as well.

I’m not a great programmer tho, only proficient in HTML and CSS, and pretty bad at Javascript, so this is what I got from Chat GPT

(Please note I inserted the API Key and CLIENT ID although I don’t know if I set everything up right on google’s side.)

This first draft isn’t working at all. Can anyone point me in the right direction?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google Calendar Events</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 0;
        }

        .container {
            max-width: 800px;
            margin: 20px auto;
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        h1 {
            text-align: center;
        }

        .numbers {
            display: flex;
            justify-content: space-around;
            margin-top: 20px;
        }

        .numbers div {
            text-align: center;
            padding: 10px;
            border-radius: 8px;
            background-color: #f5f5f5;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        }

        h2 {
            margin-bottom: 10px;
        }

        p {
            font-size: 24px;
            font-weight: bold;
        }

        footer {
            text-align: center;
            margin-top: 20px;
            padding: 10px;
            background-color: #ddd;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Event Statistics</h1>
        <div class="numbers">
            <div>
                <h2>Total Increase</h2>
                <p id="totalIncrease">Loading...</p>
            </div>
            <div>
                <h2>Total Decrease</h2>
                <p id="totalDecrease">Loading...</p>
            </div>
        </div>
    </div>

    <footer id="footer">
        <div id="userStatus">
            <!-- Placeholder for login status -->
        </div>
        <div id="authBtnContainer">
            <!-- Placeholder for login button -->
        </div>
    </footer>

    <script>
        // Replace with your Client ID and API key
        const CLIENT_ID = 'YOUR_CLIENT_ID';
        const API_KEY = 'YOUR_API_KEY';

        // Function to load Google Calendar API
        function loadClient() {
            gapi.client.setApiKey(API_KEY);
            return gapi.client.load('calendar', 'v3');
        }

        // Function to check user authentication status
        function checkAuthStatus() {
            gapi.auth2.getAuthInstance().isSignedIn.listen(updateUserStatus);
            updateUserStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
        }

        // Update user status in the footer
        function updateUserStatus(isSignedIn) {
            const userStatusContainer = document.getElementById('userStatus');
            const authBtnContainer = document.getElementById('authBtnContainer');

            if (isSignedIn) {
                const user = gapi.auth2.getAuthInstance().currentUser.get();
                const userName = user.getBasicProfile().getName();
                userStatusContainer.textContent = `Logged in as: ${userName}`;
                authBtnContainer.innerHTML = '<button onclick="signOut()">Sign Out</button>';
            } else {
                userStatusContainer.textContent = 'Not logged in';
                authBtnContainer.innerHTML = '<button onclick="signIn()">Sign In</button>';
            }
        }

        // Function to handle sign in
        function signIn() {
            gapi.auth2.getAuthInstance().signIn().then(() => {
                console.log('User signed in.');
                loadClient().then(calculateEventTotals).catch(err => console.error('Error loading client:', err));
            }).catch(err => console.error('Sign in error:', err));
        }

        // Function to handle sign out
        function signOut() {
            gapi.auth2.getAuthInstance().signOut().then(() => {
                console.log('User signed out.');
                updateUserStatus(false);
            }).catch(err => console.error('Sign out error:', err));
        }

        // Function to calculate increase and decrease totals
        async function calculateEventTotals() {
            await loadClient();

            // Calculate total increase
            const increaseQuery = await gapi.client.calendar.events.list({
                'calendarId': 'primary',
                'timeMin': new Date().toISOString(),
                'q': '+'
            });

            const totalIncrease = increaseQuery.result.items.reduce((acc, event) => {
                const match = event.summary.match(/+(d+)/);
                if (match) {
                    return acc + parseInt(match[1]);
                }
                return acc;
            }, 0);

            // Calculate total decrease
            const decreaseQuery = await gapi.client.calendar.events.list({
                'calendarId': 'primary',
                'timeMin': new Date().toISOString(),
                'q': '-'
            });

            const totalDecrease = decreaseQuery.result.items.reduce((acc, event) => {
                const match = event.summary.match(/-(d+)/);
                if (match) {
                    return acc + parseInt(match[1]);
                }
                return acc;
            }, 0);

            // Update HTML with calculated totals
            document.getElementById('totalIncrease').textContent = totalIncrease;
            document.getElementById('totalDecrease').textContent = totalDecrease;
        }

        // Initialize Google API client and check auth status on window load
        window.onload = function () {
            gapi.load('client:auth2', function () {
                gapi.auth2.init({
                    client_id: CLIENT_ID
                }).then(() => {
                    console.log('Google API initialized.');
                    checkAuthStatus();
                    calculateEventTotals().catch(err => console.error('Error calculating totals:', err));
                }).catch(err => console.error('Error initializing Google API:', err));
            });
        };
    </script>
    <script async defer src="https://apis.google.com/js/api.js"
            onload="this.onload=function(){};handleClientLoad()"
            onreadystatechange="if (this.readyState === 'complete') this.onload()">
    </script>
</body>
</html>

Thiết kế website giá rẻ

Danh mục

Fetching infromation from Google Calendar API to turn my calendar into a personal income calculator