OmIsCool
KPCKevin Powell - Community
•Created by OmIsCool on 10/13/2023 in #os-and-tools
Hosting js file in git hub pages
I am developing a custom template for Canvas LMS and Canvas allows to upload .js and .css file. To test any changes in .js I have to re-upload .js and refresh which is time consuming. So to get around this situation I thought about hosting one js file in Git and upload another js script in Canvas with some code to facilitate link between .js (Canvas and Git).
It works but, when I commit new changes then it stops working. In brief it fails to read latest commit and keeps loading previous commit.
Codes that I am testing with are provided below:
Canvas.js is the script that I upload in Canvas LMS:
var path = 'https://cdn.jsdelivr.net/gh/G0dS0n/Scaffold@main/script.js';
(function() { var script = document.createElement('script'); script.src = path; script.async = true; script.charset = "UTF-8"; script.onload = function() { console.log("Script from GitHub loaded successfully!"); }; script.onerror = function() { console.error("Failed to load the script from GitHub."); }; document.body.appendChild(script); })(); Index.html <body> <p><a class="customAlertLink" href="#">Click Me!</a></p> </body> myScript.js (Uploaded in git) document.addEventListener("DOMContentLoaded", function() { var link = document.querySelector(".customAlertLink");
if (link) { link.addEventListener("click", function(event) { event.preventDefault(); alert("This alert is from the script hosted on GitHub!"); }); } });
(function() { var script = document.createElement('script'); script.src = path; script.async = true; script.charset = "UTF-8"; script.onload = function() { console.log("Script from GitHub loaded successfully!"); }; script.onerror = function() { console.error("Failed to load the script from GitHub."); }; document.body.appendChild(script); })(); Index.html <body> <p><a class="customAlertLink" href="#">Click Me!</a></p> </body> myScript.js (Uploaded in git) document.addEventListener("DOMContentLoaded", function() { var link = document.querySelector(".customAlertLink");
if (link) { link.addEventListener("click", function(event) { event.preventDefault(); alert("This alert is from the script hosted on GitHub!"); }); } });
6 replies
KPCKevin Powell - Community
•Created by OmIsCool on 4/7/2023 in #front-end
Responsive carousel
I've created this carousel, with the help of js, html and css. Functionality seems to work. But when I try to adjust the code so that when there is no more cards on left or right respective arrow should disappear. Right now it just loops.
Another q: Is it possible to update this to a responsive carousel? Normal page load is 3 * 3 tile. But the screen size is small then maybe 2 * 2 or something like that to adapt the changes.
Codepen: https://codepen.io/Abhi1234567890/pen/yLxLGXV
3 replies
KPCKevin Powell - Community
•Created by OmIsCool on 3/23/2023 in #front-end
CSS solution for this
28 replies
KPCKevin Powell - Community
•Created by OmIsCool on 2/15/2023 in #front-end
Hey folks, I wrote this code to create 2 * 2 grid layout for cards with dot navigation.
It seems to be working but card has to be multiple of 4. If there are 9 cards (which is in the example code) the last dot in the navigation renders wrong card. I've concatenated js/css/html in one page for ease.
Codepen:
https://codepen.io/Abhi1234567890/pen/yLxLGXV
5 replies
KPCKevin Powell - Community
•Created by OmIsCool on 11/30/2022 in #front-end
Background using as an image ?
4 replies