Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

carlos .
carlos .
9,703 Points
Posted by carlos .
carlos .
9,703 Points

Failed to load resource. File not found. student_report.js

The student_report.js file is not loading. Can't find the typo....so that means it's probably glaringly obvious.

Link

Console error: Failed to load resource: the server responded with a status of 404 (Not Found) student_report.js

student_report.js file:

student_report.js 
var message = '';
var student; 

function print(message)
{
  var outputDiv = document.getElementById('output');
  outputDiv.innerHTML = message; 
}

for (var i = 0; i < students.length; i += 1)
     {
        student = students[i];
        message += '<h2>Student: ' + student.name + '</h2>';

     }

index.html file:

index.html 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Students</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
<h1>Students</h1>
<div id="output">

</div>
<script src="js/students.js"></script>
<script src="js/student_report.js"></script>
</body>
</html>

student.js file:

student.js 
var students = [ 
  { 
   name: 'Dave',
    track: 'Front End Development',
    achievements: 158,
    points: 14730
  },
  {
    name: 'Jody',
    track: 'iOS Development with Swift',
    achievements: '175',
    points: '16375'
  },
  {
    name: 'Jordan',
    track: 'PHP Development',
    achievements: '55',
    points: '2025'
  },
  {
    name: 'John',
    track: 'Learn WordPress',
    achievements: '40',
    points: '1950'
  },
  {
    name: 'Trish',
    track: 'Rails Development',
    achievements: '5',
    points: '350'
  }
];

var students = [ 
  { 
   name: 'Dave',
    track: 'Front End Development',
    achievements: 158,
    points: 14730
  },
  {
    name: 'Jody',
    track: 'iOS Development with Swift',
    achievements: '175',
    points: '16375'
  },
  {
    name: 'Jordan',
    track: 'PHP Development',
    achievements: '55',
    points: '2025'
  },
  {
    name: 'John',
    track: 'Learn WordPress',
    achievements: '40',
    points: '1950'
  },
  {
    name: 'Trish',
    track: 'Rails Development',
    achievements: '5',
    points: '350'
  }
];

styles.css file:

styles.css 
@import url('http://necolas.github.io/normalize.css/3.0.2/normalize.css');

/*General*/
body {
  background: #fff;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 20px;
  font: Helvetica Neue, Helvectica, Arial, serif;
  font-weight: 300;
  font-size: 1em;
  line-height: 1.5em;
  color: #8d9aa5;
}

a {
  color: #3f8aBf;
  text-decoration: none;
}

a:hover {
  color: #3079ab;
}

a:visited {
  color: #5a6772;
}

h1, h2, h3 {
  font-weight: 500;
  color: #384047;
}

h1 {
  font-size: 1.8em;
  margin: 60px 0 40px;
}

h2 {
    font-size: 1em;
    font-weight: 300;
    margin: 0;
    padding: 30px 0 10px 0;
}

#home h2 {
  margin: -40px 0 0;
}

h3 {
  font-size: .9em;
  font-weight: 300;
  margin: 0;
  padding: 0;
}

h3 em {
  font-style: normal;
  font-weight: 300;
  margin: 0 0 10px 5px;
  padding: 0;
  color: #8d9aa5;
}

ol {
  margin: 0 0 20px 32px;
  padding: 0;
}

#home ol {
  list-style-type: none;
  margin: 0 0 40px 0;
}

li {
  padding: 8px 0;
  display: list-item;
  width: 100%;
  margin: 0;
  counter-increment: step-counter;
}

#home li::before {
    content: counter(step-counter);
    font-size: .65em;
    color: #fff;
    font-weight: 300;
    padding: 2px 6px;
    margin:  0 18px 0 0;
    border-radius: 3px;
    background:#8d9aa5;
    line-height: 1em;
}

.lens {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #8d9aa5;
  border-radius: 5px;
  position: absolute;
  margin: 5px 0 0 -19px;
}

#color div {
  width: 50px;
  height: 50px;
  display: inline-block;
  border-radius: 50%;
  margin: 5px;
}

span {
  color: red;
}

[MOD: edited code blocks - srh]

1 Answer

Steven Parker
Steven Parker
231,110 Points
Steven Parker
Steven Parker
231,110 Points

Are the files in the right folder?

Your script tags are loading your files from a folder named "js". Is that where the files actually are? Or are they in the same folder as index.html?

<script src="js/student_report.js"></script>

For issues like this, it might be better to make a snapshot of your workspace and post the link to it here.

carlos .
carlos .
9,703 Points
carlos .
carlos .
9,703 Points

oops. Just noticed that I failed to drag the student_report.js file into the js folder.

snapshot: https://w.trhou.se/gstbeq6olg

Looked like this: https://www.dropbox.com/s/noe4be5yqoguctg/Screenshot%202017-06-15%2017.04.36.png?dl=0

Steven Parker
Steven Parker
231,110 Points
Steven Parker
Steven Parker
231,110 Points

Since I guessed it, we don't need it now, but remember the snapshot for next time :smile: Happy I could help.