diff --git a/assets/css/style.css.map b/assets/css/style.css.map
index 9a29f7e..2e8318e 100755
--- a/assets/css/style.css.map
+++ b/assets/css/style.css.map
@@ -3,12 +3,12 @@
"file": "style.css",
"sources": [
"style.scss",
- "../../tmp/jekyll-remote-theme-20230601-1-17tzlkw/_sass/minima/skins/classic.scss",
- "../../tmp/jekyll-remote-theme-20230601-1-17tzlkw/_sass/minima/skins/auto.scss",
- "../../tmp/jekyll-remote-theme-20230601-1-17tzlkw/_sass/minima/initialize.scss",
+ "../../tmp/jekyll-remote-theme-20230605-1-76w17i/_sass/minima/skins/classic.scss",
+ "../../tmp/jekyll-remote-theme-20230605-1-76w17i/_sass/minima/skins/auto.scss",
+ "../../tmp/jekyll-remote-theme-20230605-1-76w17i/_sass/minima/initialize.scss",
"_sass/minima/custom-variables.scss",
- "../../tmp/jekyll-remote-theme-20230601-1-17tzlkw/_sass/minima/_base.scss",
- "../../tmp/jekyll-remote-theme-20230601-1-17tzlkw/_sass/minima/_layout.scss",
+ "../../tmp/jekyll-remote-theme-20230605-1-76w17i/_sass/minima/_base.scss",
+ "../../tmp/jekyll-remote-theme-20230605-1-76w17i/_sass/minima/_layout.scss",
"_sass/minima/custom-styles.scss",
"_sass/minima/fastpages-styles.scss",
"_sass/minima/dark-mode.scss",
diff --git a/assets/js/search-data.json b/assets/js/search-data.json
index d885d36..7b3020b 100755
--- a/assets/js/search-data.json
+++ b/assets/js/search-data.json
@@ -3,7 +3,7 @@
"post0": {
"title": "JavaScript Practice",
- "content": "%%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! . %%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> . . Name Planet Species . . . . . . . . %%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" } }; # STAR WARS API $.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> . . Name Planet Species . .",
+ "content": "%%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! . %%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 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> </div> .",
"url": "https://rohitd3.github.io/rohitfastpages/javascript/2023/05/21/javascript.html",
"relUrl": "/javascript/2023/05/21/javascript.html",
"date": " • May 21, 2023"
diff --git a/feed.xml b/feed.xml
index 4b9425e..a860211 100755
--- a/feed.xml
+++ b/feed.xml
@@ -1 +1 @@
-
%%html
-<html>
- <head>
- <style>
- #output {
- background-color: #f86ddf;
- padding: 50px;
- border: 40px solid #1a334f;
+%%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>
+ </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>
+ <!-- DataTables CSS -->
+ <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.3/css/jquery.dataTables.min.css">
-
-
-
-
-
-%%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;
+ <!-- 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;
+ th {
+ background-color: black;
+ color: white;
+ padding: 10px;
}
- td {
- padding: 10px;
- color: white;
-
+ td {
+ padding: 10px;
+ color: white;
}
- td:nth-child(odd) {
- background-color: black;
+ td:nth-child(odd) {
+ background-color: black;
}
- td:nth-child(even) {
- background-color: black;
+ td:nth-child(even) {
+ background-color: black;
}
- tr:nth-child(odd) {
- background-color: black !important;
+ tr:nth-child(odd) {
+ background-color: black !important;
}
- tr:nth-child(even) {
- 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"
+ </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"
}
};
- # STAR WARS API
- $.ajax(starWarsAPI).done(function (response) {
- console.log(response);
- var table = $('#starWarsTable').DataTable({
- data: response,
- columns: [
- { data: 'name' },
- { data: 'homeworld' },
- { data: 'species' }
+ # send request to the Star Wars API
+ $.ajax(starWarsAPI).done(function (response) {
+ console.log(response);
+
+ # DataTable using the response data
+ var table = $('#starWarsTable').DataTable({
+ data: response,
+ columns: [
+ { data: 'name' }, // Column 1: Name
+ { data: 'homeworld' }, // Column 2: Planet
+ { data: 'species' } // Column 3: Species
]
});
-
- $('#starWarsTable thead th').each(function () {
- var title = $(this).text();
- $(this).html('<input type="text" placeholder="Search ' + title + '" />');
+ # 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 + '" />');
});
- table.columns().every(function () {
- var that = this;
-
- $('input', this.header()).on('keyup change', function () {
- if (that.search() !== this.value) {
- that.search(this.value).draw();
+ # 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>
-</body>
-</html>
+ </script>
@@ -526,9 +326,16 @@ JavaScript Practice
<
+</div>
+</div>
-
+</div>
+
+
+</div>
+
-