I have looked through many similar questions and tried several different solutions, but I do not understand what I am doing wrong. Examining the console did not help me either.
I am new, and am attempting to use Github pages, but cannot get my page to work. I created this in codepen, and it looked fine and functional there. I assume the issue is in how I am linking my CSS and JS to the HTML.
I tried changing my CSS and JS links several times to no avail. I have no idea what I am doing wrong. Any suggestions are greatly appreciated.
Here is my HTML code:
<!DOCTYPE html>
<html lang= "en">
<head>
<meta charset= "UTF-8">
<meta name= "viewport" content="width=device-width, initial"
<title>Digital Clock:</title>
<link rel="stylesheet" type="text/css" href="/master/style.css">
</head>
<body style="background-color:#f28500;">
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<div class="clock">
<h2><strong>XENA's sundial says:</strong></h1>
<span class="clock-time"></span>
<span class="clock-ampm"></span>
</div>
<script src="/master/digitalClock.js"></script>
</body>
</html>
Here is the link to my actual repo.
******************************************************////
******************************************************////\
UPDATE: I deleted all the above code and link. Please see my answer below for an explanation as to what happened as I somewhat solved the issue.
Urls starting with / mean start at the root folder, so you need to change it to be /YOURPROJECTNAMEHERE/restofurl where YOURPROJECTNAMEHERE is your project name and restofurl is the rest of the url
should be test your project on server by tools like live server
this package related to vscode ide
after install live server
then after run head over to browser in here test address as manual
explain address
example : where address file talk.ppt
./work/project/talk.ppt
and final step deploy in github
I have figured it out. For some reason, with the code being from codepen, you must export the code to use it, not just copy/paste it (as I had done). I am still unsure as to why I could not get it to work before, however, I deleted everything, and started with a fresh repo and freshly exported code straight from codepen. I did not alter any code. It worked. Previously I copy/pasted it. Further, I uploaded the files from the "src" folder from codepen. I hope this helps somebody in the future.
Related
I'm a beginner, learning js. I was doing a course and the task provided was that to pop an alert when the button is clicked. Pretty Ez but everytime somehow the code just doesn't works even when I typed the code seeing the solution. Checked pretty much everything within my knowledge but couldn't figure it out. while trying the same thing in another computer, it worked without any problem :/Here's the code
Window.alert is not native JS. It is a Web API method, meaning your browser source code implements it.
If you're running, say, a Node.js environment in VSCode's console, then it shouldn't really work. Node doesn't implement it either.
I have made an example here on a code pen: https://codesandbox.io/s/buttontoalert-fs1kz3
What you need to do is create an index.html that is importing the script you want to run.
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<button>Click Me</button>
<script src="src/index.js"></script>
</body>
</html>
Then in your index.js file which is the script you are importing in the html file the code is:
const button = document.querySelector("button");
button.addEventListener("click", () => alert("I was clicked"));
These two file need to be in the same directory or you need to update the file path to where the js file is located relative to your html file.
The commands you are using a relative to a browser so need to be run with a browser or will not work.
I am making a static site in Github, but when I try to load the site, the CSS page is not loading up. I looked up many solutions like these -
CSS not loading for GitHub pages
&
How to link my CSS to my HTML in a github hosted site
And found out that here CSS is not implicitly linked with HTML, rather CSS is stored in Github as HTML type copy, and to get CSS correct, we need to get CSS implemented correctly. That is why we can use {{site.github.url}}, or maybe give <link rel="stylesheet" href="https://iamdeb28.github.io/node_modules/todomvc-common/base.css">, things like that. But my question is how I can implement it and do my work done?
Here are my code and link to the Github site -
<head>
<meta charset="utf-8">
<title>To-do list app</title>
<link rel="stylesheet" href="https://iamdeb28.github.io/node_modules/todomvc-common/base.css">
<link rel="stylesheet" href="https://iamdeb28.github.io/node_modules/todomvc-app-css/index.css">
</head>
link - https://github.com/iamdeb28/OpenClassRoom_Project_8
Github Static Site - https://iamdeb28.github.io/OpenClassRoom_Project_8/
Well, one thing that I want to mention is that when I loaded chrome dev tools and inspected the sources tab, I found index.css and base.css file totally empty, and when I inputted the code, it just works fine. But when I refresh, same thing happens. I am pretty new to JS and Git, if you can please help.
Can anyone please help???
Edit: Here is a screenshot that proves that internally, the CSS is empty and contains nothing.
As #Senatrius said, the main problem was the node_modules folder, and also the .gitignore file. Previously I was not looking at this .gitignore, but as name suggests, it is just ignoring the files, I want to show (it has the files names and paths with a '!' sign). Also, don't know why node_modules folder name is just not working out, so I copied my files to the root directory and everything seems okay. Thanks #Senatrius.
You have to link the stylesheets from the directory where your HTML file is. THis is your solution. Thanks.
<link rel="stylesheet" href="./node_modules/todomvc-common/base.css">
<link rel="stylesheet" href="./node_modules/todomvc-app-css/index.css">
Where should I add CDN Link in my Project? I have made a Project in Codepen, and over there It’s added in the Javascript column. But in my local machine do I have to add it in .html or .js? I have tried adding it in my <head> of .html but it’s not working.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
I have tried without "https:" and "//" as well. But still no luck.
Please let me know if I need to do anything else besides this.
If you are running the code locally, your HTML file should look like this:
<!DOCYTPE html>
<html>
<head>
<script src="url here"></script>
</head>
<body>
</body>
</html>
If that still does not work, you should put your code through the W3 Validator. You can view the errors with your HTML there.
In Codepen you need to go to settings.
Then choose JS and there you can add external libraries.
Thank you for the answers, Actually, I got the solution, I mistakenly added js/main.js instead of <script src="main.js"></script> .
And next thing I checked, I had added jQuery CDN Link in my .js file as well. I removed it from there and It worked.
I'm learning Angular on Plural Sight and the first lesson gives an example of how to use the ng-app directive.
Here's a link to the Plunker editor
http://plnkr.co/edit/HIDCS8A9CR1jnAIDR0Zb?p=preview
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="2.0.0"
src="https://code.angularjs.org/2.0.0-snapshot/angular2.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app>
<h1>Hello Plunker!</h1>
{{ 843 /42 }}
</body>
</html>
The example that was given uses the expression {{ 843 / 42 }} to demonstrate how angular would render the quotient on a webpage.
I've copied the lesson script several times over and can't figure out what I'm doing wrong and why its rendering as text.
This is my first post on stackoverflow, and I'm happy to join the community!
Thanks Again.
Shamus
Your Angular is throwing an error when its running.
You need to import the system library.
See in the dev console.
Checkout this link to get yourself setup
Thanks so much for your answers! I was able to figure out that when plunker adds the angular package, the default url is pointing to Angular 2.x. instead of 1.x as mentioned by "developer033" I went to the angular site and directly borrowed the CDN link from their setup page:
https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js
And now it seems to work just fine. When you're getting started its always a bit frustrating when you spend the most time on the tiniest issues, but I'm glad I found stackoverflow to eliminate most of that guess work.
Thanks again!
Shamus
Hello I'm trying to learn Angular.js and IntelliJ IDEA. I was wondering can someone tell me what I'm doing wrong. I'm trying to do a simple hello world example from a book, but it's not working for me in the IDE. I'm not sure whats really sure why it's not working, but to start the project I downloaded the AngularJS plugin. I went to the project location using the command line and did bower install angular, and copy and pasted the example from the ng-book for hello world, but it's not working for me. I tried to add the path to the html and it still didn't work. Can someone help me out?
you can see the working version of your work:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.15/angular.min.js"></script>
</head>
<body ng-app="exampleModule">
<input ng-model="dynamicName" type="text" placeholder="write your name here">
<p>Hello {{dynamicName}} !</p>
<script>
angular.module('exampleModule', []);
</script>
</body>
</html>
I dont know is you address angular correctly or not, but you need a module for your code, even an empty one like what I've just put in the script tag.
Option 1 - Move the ng-app directive to body tag of the page.
Option 2 - It could be possible that browser is rendering a cached page which had errors. Can you force refresh to GET the latest files? In most modern browsers user CTRL+F5.
Option 3 - Use the developer panel of the browser and force reload the page and notice any error.
The problem is with the file read/write permissions on your localhost file.Go to the bower_components file in your finder, right-click ->get info. Scroll down in the info window to the permissions section and change sharing and permissions to Everyone - Read/Write.
Then click the Cog drop down and select the option Apply to enclosed items
Hope this helps.
You are trying to invoke the angular file from wrong path
replace with following
<script src="../bower_components/angular/angular.js"></script>