How do I make it work externaly?


#1

So I've made a folder with a file "Bubbles.html"

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="http://s3.amazonaws.com/codecademy-content/courses/hour-of-code/js/alphabet.js"></script>
  </head>
  <body>
    <canvas id="myCanvas"></canvas>
    <script type="text/javascript" src="http://s3.amazonaws.com/codecademy-content/courses/hour-of-code/js/bubbles.js"></script>
    <script type="text/javascript" src="main.js"></script>
  </body>
</html>

and "main.js"

var myName = "Maxim";

var red = [0, 100, 63];
var orange = [40, 100, 60];
var green = [75, 100, 40];
var blue = [196, 77, 55];
var purple = [280, 50, 60];
var letterColors = [red, orange, green, blue, purple];

drawName(myName, letterColors);

if(10 < 3)
{
    bubbleShape = 'square';
}
else
{
    bubbleShape = 'circle';
}

bounceBubbles();

But when I open the html file it's all blank and nothing pops up.
The main.js seems to be loaded when I check on the html site but there's nothing visible.
Am I linking it wrong?


#2

Hey Telefonmast,

// is a protocol-relative URL. This means that if you access the page over HTTPS, it will load the resource over HTTPS, and if you load over HTTP, the resource will get loaded over HTTP. These shouldn't be used anymore, but a lot of developers ignore that fact and use them anyway.
The problem is, you're viewing your HTML page using the file protocol. The file protocol is only for viewing local HTML pages, and not for getting external resources.

So, to fix your issue, change the // to https:// and your code will work :slightly_smiling:


#3

I tried it. Still just shows a blank page.
Here's a screenshot of my folder and the HTML file.

I really don't understand where the problem is.


#4

@telefonmast Well, one problem is that it doesn't look like your files are getting saved right, in the folder it's not showing their file extensions for some reason. So try resaving both of your files and making sure they get saved properly.
After you do that, could you please show me a screenshot of what you see in the browser and copy/paste your main.js and index.html code into here so I can test it myself?

Thanks :slightly_smiling:


#5

I saved them again and it still doesn't add the extension, but it's just the file name, right? it normally doesn't contain it and it loads the main.js perfectly fine when I check in the sourcecode on the page.

Here's what I see:
Imgur

and here is the index.html

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="http://s3.amazonaws.com/codecademy-content/courses/hour-of-code/js/alphabet.js"></script>
  </head>
  <body>
    <canvas id="myCanvas"></canvas>
    <script type="text/javascript" src="http://s3.amazonaws.com/codecademy-content/courses/hour-of-code/js/bubbles.js"></script>
    <script type="text/javascript" src="main.js"></script>
  </body>
</html>

and the main.js

var red = [0, 100, 63];
var orange = [40, 100, 60];
var green = [75, 100, 40];
var blue = [196, 77, 55];
var purple = [280, 50, 60];

var myName = "Maxim";
var letterColors = [red,orange,green];

if(10 > 3) {
    bubbleShape = "circle";
} else {
    bubbleShape = "square";
}

drawName(myName, letterColors);
bounceBubbles();

This should be all.


#6

@telefonmast That code works fine for me in a Pen:

Since you say main.js is loading fine, I'm not sure what's wrong, sorry :confused:
Do you get any errors in your browser console when you load the page?


#7

Hello again,
so i tried it today on a different computer and there the extensions were shown in my folder and it also worked completely fine there.
But it doesn't on mine.

So I'd guess it is the missing extension that causes this error for me.

It's strange though, my PC is working fine.


#8

@telefonmast That is really weird... they're the same files :confused:.
I'm glad you were (kind of) able to get it to work, though!