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 @@ -Jekyll2023-06-01T12:33:06-05:00https://rohitd3.github.io/rohitfastpages/feed.xmlrohitd3’s fastpagesmy fastpages lets goooJavaScript Practice2023-05-21T00:00:00-05:002023-05-21T00:00:00-05:00https://rohitd3.github.io/rohitfastpages/javascript/2023/05/21/javascriptjavascript stuff2023-05-19T00:00:00-05:002023-05-19T00:00:00-05:00https://rohitd3.github.io/rohitfastpages/collegeboard/2023/05/19/adiJSJavaScript Tutorial2023-05-11T00:00:00-05:002023-05-11T00:00:00-05:00https://rohitd3.github.io/rohitfastpages/techtalk/javascripttutorialFRQ 2017 Running Code2023-04-27T00:00:00-05:002023-04-27T00:00:00-05:00https://rohitd3.github.io/rohitfastpages/java/2023/04/27/frqpractice2017Hacks Unit 5,9,10 - Rohit, Nathan, Jun2023-04-26T00:00:00-05:002023-04-26T00:00:00-05:00https://rohitd3.github.io/rohitfastpages/java/2023/04/26/labhacks \ No newline at end of file +Jekyll2023-06-05T04:52:32-05:00https://rohitd3.github.io/rohitfastpages/feed.xmlrohitd3’s fastpagesmy fastpages lets goooJavaScript Practice2023-05-21T00:00:00-05:002023-05-21T00:00:00-05:00https://rohitd3.github.io/rohitfastpages/javascript/2023/05/21/javascriptjavascript stuff2023-05-19T00:00:00-05:002023-05-19T00:00:00-05:00https://rohitd3.github.io/rohitfastpages/collegeboard/2023/05/19/adiJSJavaScript Tutorial2023-05-11T00:00:00-05:002023-05-11T00:00:00-05:00https://rohitd3.github.io/rohitfastpages/techtalk/javascripttutorialFRQ 2017 Running Code2023-04-27T00:00:00-05:002023-04-27T00:00:00-05:00https://rohitd3.github.io/rohitfastpages/java/2023/04/27/frqpractice2017Hacks Unit 5,9,10 - Rohit, Nathan, Jun2023-04-26T00:00:00-05:002023-04-26T00:00:00-05:00https://rohitd3.github.io/rohitfastpages/java/2023/04/26/labhacks \ No newline at end of file diff --git a/javascript/2023/05/21/javascript.html b/javascript/2023/05/21/javascript.html index 0ac9c32..6324b67 100755 --- a/javascript/2023/05/21/javascript.html +++ b/javascript/2023/05/21/javascript.html @@ -79,7 +79,7 @@

JavaScript Practice

< • - 2 min read + 1 min read

@@ -141,23 +141,23 @@

JavaScript Practice

<
-
%%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>
@@ -205,312 +205,112 @@

JavaScript Practice

<
-
%%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>
-
- -
-
-
- -
-
- -
- - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NamePlanetSpecies
- - - - -
- -
- -
-
- -
- +
%%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
<
 

 
 
+    
     
+    
+    
     
+    
+    
     
+    
+    
     
 
 
+    
     
+            
@@ -570,8 +378,11 @@ 
JavaScript Practice
<
         

         
             

                 Name
                 Planet

         
     

+    
+    
     
 
+</div>
 
+</div>
 
-

+</div>
+</div>
 
-

+</div>
+    
+
+</div>
+ 
 
 

 

-
- - - + + diff --git a/techtalk/javascript.html b/techtalk/javascript.html index 9003130..b4b5fd0 100755 --- a/techtalk/javascript.html +++ b/techtalk/javascript.html @@ -266,10 +266,10 @@

output explored +