Skip to content

Commit

Permalink
deploy: 5464282
Browse files Browse the repository at this point in the history
  • Loading branch information
rohitd3 committed Jun 1, 2023
1 parent f276a1a commit 6e0bc90
Show file tree
Hide file tree
Showing 8 changed files with 42 additions and 41 deletions.
10 changes: 5 additions & 5 deletions assets/css/style.css.map

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 4 additions & 4 deletions assets/js/search-data.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@

"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" } }; $.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 . .",
"url": "https://rohitd3.github.io/rohitfastpages/javascript/2023/05/22/_05_21_javascript.html",
"relUrl": "/javascript/2023/05/22/_05_21_javascript.html",
"date": " • May 22, 2023"
"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 . .",
"url": "https://rohitd3.github.io/rohitfastpages/javascript/2023/05/21/javascript.html",
"relUrl": "/javascript/2023/05/21/javascript.html",
"date": " • May 21, 2023"
}


Expand Down
2 changes: 1 addition & 1 deletion categories/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -384,7 +384,7 @@ <h3 id ="javascript"><i class="fas fa-tags category-tags-icon"></i></i> javascri
<a name="javascript"></a>

<article class="archive-item">
<p class="post-meta post-meta-title"><a class="page-meta" href="/rohitfastpages/javascript/2023/05/22/_05_21_javascript.html">JavaScript Practice</a> • May 22, 2023</p>
<p class="post-meta post-meta-title"><a class="page-meta" href="/rohitfastpages/javascript/2023/05/21/javascript.html">JavaScript Practice</a> • May 21, 2023</p>
</article>


Expand Down
Loading

0 comments on commit 6e0bc90

Please sign in to comment.