JS novice to ninja

JavaScript
1

I am currently reading the book java script novice to ninja, for some reason the code in the book is not working for me. I have it word for word. It has something to do witth the linking of the files the html file “src =” it does not link to other files, can someone explain why?

saved as index.htm

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="description" content="A quiz game for ninjas">
  <meta name="author" content="DAZ">
  <title>Quiz Ninja</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1>Quiz Ninja!</h1>
</header>
</body>
<script src="js/scripts.js"></script>
</html>

saved as stles.css

*{
  margin: 0;
  padding: 0;
}

header {
  font: bold 36px/120% Arial, Helvetica, sans-serif;
  background: #333;
  color: #c00;
  text-transform: uppercase;
}

saved as scripts.js

// welcome the user
alert("welcome to Quiz Ninja!");
1 Like
2

Do you have your css and js files in the subdirectories relative to the index.html file?

  • So if you have index.html in c:\JSNinja (i.e. c:\JSNinja\index.html)
  • Is styles.css in c:\JSNinja\css (i.e.c:\JSNinja\css\styles.css)
  • is scripts.js in c:\JSNinja\js(i.e. c:\JSNinja\js\scripts.js)
1 Like
3

I have them all saved in one folder on my desktop. should i do something different

4

That’s why it’s not working - the files aren’t where you say they are. These two lines are telling the browser that the separate files are in separate directories

<link rel="stylesheet" href="css/style.css">
<script src="js/scripts.js"></script>

You have two choices. The first would be to remove the folder directives for these two files

<link rel="stylesheet" href="style.css">
<script src="scripts.js"></script>

That will get you up and running quickly, but can be detrimental in the long run as your sites get more complex. It’s better to get into the habit of separating your files into common folder structures for maintenance in the future. So (IMHO), the better approach would be to go into your desktop folder and create two folders inside it, one called css, and one called js. Next, move the styles.css folder into the css folder, and the scripts.js folder into the js folder.

1 Like
5

Thank you for the assistance, I mostly understand, I still can not get it to work. I will keep trying.

6

Which bits aren’t you understanding? We can help.

7

Thank you so much for the help, I am understanding now. I didn’t fully understand where to put each file, but now i got it:

I need the HTML file on its own
the CSS files in its own CSS folder
the javaScript file in its own JS folder

right now it is working. once again thank you so mcuh

2 Likes
8

That’s good. I’d just recreated your code and it’s working fine. Here’s a screenshot of what I’m seeing in Atom, so you can compare it with your own.

1116×518 68.8 KB

9

On other thing, you would normally put your script tag just before the closing </body> tag, rather than after it.

1 Like
10

Yeah, I am VERY new at this. I just deleted everything and started from scratch. Now it is working. Looking back on it, I did not have the files saved in the right place.

1 Like
11

one more question, Would this work if I were to use a flashdrive or external hard drive?

12

It should work on any storage so long as the paths are correct and the drive is available.

1 Like
13

thanks a lot

14

Definitely. There’s nothing there that requires any server-side processing, it all just runs in the browser. So long as things are as Sam suggests above, you’ll be fine.

15

Thank you very much for your help i appreciate it.

1 Like
16

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.