%%html
<html>
    <head>
        <style>
            #output {
                background-color: #f86ddf;
                padding: 50px;
                border: 40px solid #1a334f;
            }
        </style>
    </head>
    <body>
        <div id="output">
            Hello world!
        </div>
    </body>
</html>
Hello world! 
%%js
console.log("Variable Definition");

var msg = "Hello, World!";

// Use msg to output code to Console and Jupyter Notebook
console.log(msg);  //right click browser select Inspect, then select Console to view
element.text(msg);
alert(msg);

%%html
<html>
<head>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    
    <!-- DataTables CSS -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.3/css/jquery.dataTables.min.css">
    
    <!-- DataTables JavaScript -->
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>

    <style>
        table {
            border-collapse: collapse;
            margin: auto;
            background-color: black;    
        }
        th {
            background-color: black;
            color: white;
            padding: 10px;
        }
        td {
            padding: 10px;
            color: white;
        }
        td:nth-child(odd) {
            background-color: black;
        }
        td:nth-child(even) {
            background-color: black;
        }
        tr:nth-child(odd) {
            background-color: black !important;
        }
        tr:nth-child(even) {
            background-color: black !important;
        }
    </style>
</head>
<body>
    # Create an empty table with the id "starWarsTable"
    <table id="starWarsTable">
        <thead>
            <tr>
                <th>Name</th>
                <th>Planet</th>
                <th>Species</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    
    <script>
        $(document).ready(function() {
            # Create an object for the Star Wars API request configuration
            var starWarsAPI = {
                "async": true,
                "crossDomain": true,
                "url": "https://star-wars-characters.p.rapidapi.com/46DYBV/star_wars_characters",
                "method": "GET",
                "headers": {
                    "X-RapidAPI-Key": "bf09b94566msh22c602dfe97bd97p19c2fajsn1d42e34f8724",
                    "X-RapidAPI-Host": "star-wars-characters.p.rapidapi.com"
                }
            };

            # send request to the Star Wars API
            $.ajax(starWarsAPI).done(function (response) {
                console.log(response);
                
                # datatable using the response data
                # datatable allows me to sort in each column
                var table = $('#starWarsTable').DataTable({
                    data: response,
                    columns: [
                        { data: 'name' },       # Column 1: Name
                        { data: 'homeworld' },  # Column 2: Planet
                        { data: 'species' }     # Column 3: Species
                    ]
                });

                #  Add search inputs to each table column header
                $('#starWarsTable thead th').each(function () {
                    var title = $(this).text();
                    $(this).html('<input type="text" placeholder="Search ' + title + '" />');
                });
                
                #  Apply the search functionality for each column
                table.columns().every(function () {
                    var that = this;

                    $('input', this.header()).on('keyup change', function () {
                        if (that.search() !== this.value) {
                            that.search(this.value).draw();

# event listeners to the search inputs using the .on('keyup change') function. 
# user types or changes the input, it triggers a search on the corresponding table column 
# using DataTables' search() function the search is performed dynamically as the user types, and the table is 
# redrawn to display the filtered results.
                        }
                    });
                });
            });
        });
    </script>
Name Planet Species
</div> </div> </div> </div> </div> 
%%javascript
$(document).ready(function() {
    // Create an object for the Star Wars API request configuration
    var starWarsAPI = {
        "async": true,
        "crossDomain": true,
        "url": "https://star-wars-characters.p.rapidapi.com/46DYBV/star_wars_characters",
        "method": "GET",
        "headers": {
            "X-RapidAPI-Key": "bf09b94566msh22c602dfe97bd97p19c2fajsn1d42e34f8724",
            "X-RapidAPI-Host": "star-wars-characters.p.rapidapi.com"
        }
    };

    // Send request to the Star Wars API
    $.ajax(starWarsAPI).done(function (response) {
        element.text(JSON.stringify(response, null, 10)); // Print API information in JSON format

        var table = $('#starWarsTable').DataTable({
            data: response,
            columns: [
                { data: 'name' },   
                { data: 'homeworld' },  
                { data: 'species' } 
            ]
        });
    });
});
</div>