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 JavaScript Loops, Arrays and Objects Tracking Multiple Items with Arrays Build a Quiz Challenge, Part 2

Kyle Vassella
Kyle Vassella
9,033 Points
Posted by Kyle Vassella
Kyle Vassella
9,033 Points

Why is my <h2> spacing off?

var response;
var correctCounter = 0;
var wrongCounter = 0;
var questions = [
  ["How many states are in the USA?", 50],
  ["How many legs do insects have?", 6],
  ["How many continents are there?", 7]
];
var questionsCorrect = [ ];
var questionsWrong = [ ];
var html;

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

function buildList(array) {
  var htmlList = "<ol>";
  for (var i = 0; i < array.length; i += 1) {
    htmlList += "<li>" + array[i] + "</li>";
  }
  htmlList += "</ol>";
  return htmlList;
}

for (var i = 0; i < questions.length; i += 1) {
  response = parseInt(prompt(questions[i][0]));
  if (response === questions[i][1]) {
  correctCounter += 1
  questionsCorrect.push(questions[i][0]);
  } else {
  wrongCounter +=1 
  questionsWrong.push(questions[i][0]);
  }
}

html = "You got " + correctCounter + " answers correct!";
html += "<h2>You answered the following questions correctly:</h2>";
html += buildList(questionsCorrect);
html += "<h2> You answered the following questions wrong:</h2>";
html += buildList(questionsWrong);
print(html);

For some reason I'm getting extra spacing after my <h2> lines (You answered the following questions correctly:, etc)

Can anyone spot what in my .js file might be causing this? It's driving me crazy.

2 Answers

Cindy Lea
PLUS
Cindy Lea
Courses Plus Student 6,497 Points
Cindy Lea
Cindy Lea
Courses Plus Student 6,497 Points

<h1> is affected by your css pr index.html file. I believe youre showing us your .js file so I cant tell from this code whats wrong.

Kyle Vassella
Kyle Vassella
9,033 Points
Kyle Vassella
Kyle Vassella
9,033 Points

On further inspection it seems that you're correct. I'm accidentally using a workspace that was designed for a different challenge. Even though I copied and pasted the index.html and .css code from the proper quiz workspace into this new workspace, for some reason this new workspace is still formatting it differently .

When I throw this JavaScript into the workspace which was designed for this quiz, it runs properly and the spacing is not off. Weird. Can anyone spot what might be causing this spacing in my index.html or my .css file?

Kyle Vassella
Kyle Vassella
9,033 Points
Kyle Vassella
Kyle Vassella
9,033 Points

Sorry for the typo earlier, I meant that my <h2> is messing up, not my <h1>. My index.html and css files are the same as the solution file, but just in case, here they are:

index.html:

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

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

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;
}