+
+
+
+
+
+
+
+
+ JavaScript Practice
+ + + + + + + + +
+ 
+ 
+ 
+
+
+
+-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+%%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>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+%%html
+<html>
+ <head>
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+ </head>
+ <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>
+ <body>
+ <table>
+ <tr>
+ <th>Name</th>
+ <th>Planet</th>
+ <th>Species</th>
+ </tr>
+ <tr class = "data-row"></tr><tr class = "data-row"></tr><tr class = "data-row"></tr><tr class = "data-row"></tr><tr class = "data-row"></tr><tr class = "data-row"></tr><tr class = "data-row"></tr><tr class = "data-row"></tr><tr class = "data-row"></tr><tr class = "data-row"></tr><tr class = "data-row"></tr><tr class = "data-row"></tr><tr class = "data-row"></tr>
+ <tr class = "data-row"></tr><tr class = "data-row"></tr><tr class = "data-row"></tr><tr class = "data-row"></tr><tr class = "data-row"></tr><tr class = "data-row"></tr><tr class = "data-row"></tr><tr class = "data-row"></tr><tr class = "data-row"></tr><tr class = "data-row"></tr><tr class = "data-row"></tr><tr class = "data-row"></tr><tr class = "data-row"></tr>
+ </table>
+ <script>
+
+ const starwars = {
+ "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"
+ }
+ }; // object is being intialized and contains
+ //the url, rapid api key and host, method: GET
+
+ // ajax lets us to load the data without needing to reload the page
+ $.ajax(starwars).done(function (response) {
+ console.log(response); // main method that requests the data from the server
+ for (var i = 0; i < response.length; i++) { // having i < response.length lets me display all
+ // the data but it depends on how much table space I have
+
+ var newDataName = document.createElement("td"); // where the data will be shown in the data
+ newDataName.innerHTML = response[i].name;
+ var newDataHomeworld = document.createElement("td");
+ newDataHomeworld.innerHTML = response[i].homeworld;
+ var newDataSpecies = document.createElement("td");
+ newDataSpecies.innerHTML = response[i].species;
+
+ $(".data-row").eq(i).append(newDataName)
+ $(".data-row").eq(i).append(newDataHomeworld)
+ $(".data-row").eq(i).append(newDataSpecies)
+ }
+ }
+ );
+ </script>
+ </body>
+</html>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+%%html
+<html>
+<head>
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+ <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.3/css/jquery.dataTables.min.css">
+ <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>
+ <table id="starWarsTable">
+ <thead>
+ <tr>
+ <th>Name</th>
+ <th>Planet</th>
+ <th>Species</th>
+ </tr>
+ </thead>
+ <tbody></tbody>
+ </table>
+ <script>
+ $(document).ready(function() {
+ 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"
+ }
+ };
+
+ $.ajax(starWarsAPI).done(function (response) {
+ console.log(response);
+ var table = $('#starWarsTable').DataTable({
+ data: response,
+ columns: [
+ { data: 'name' },
+ { data: 'homeworld' },
+ { data: 'species' }
+ ]
+ });
+
+
+ $('#starWarsTable thead th').each(function () {
+ var title = $(this).text();
+ $(this).html('<input type="text" placeholder="Search ' + title + '" />');
+ });
+
+ table.columns().every(function () {
+ var that = this;
+
+ $('input', this.header()).on('keyup change', function () {
+ if (that.search() !== this.value) {
+ that.search(this.value).draw();
+ }
+ });
+ });
+ });
+ });
+ </script>
+</body>
+</html>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- 
+ 