Random Quote Generator test - codepen link https://codepen.io/Petroman/pen/zYjOqeO

[Petroman]

Random Quote Generator - codepen link https://codepen.io/Petroman/pen/zYjOqeO

I get an error message “The #quote-box wrapper element should be horizontally centered. Please run tests with browser zoom level at 100% and page maximized”.

When I measure it on screen it is horizontally centered but not vertically.
Tests passed 11 of 12.
I would appreciate some guidance here.

[hbar1st]

Hi, I just edited your post to include your link in the text of the post as it was not working (as a link) when it was just in the subject.

[lasjorg]

It is because you have body in the .hide() selector list.

I’d suggest you use animate with the opacity it also takes a callback where you can call getNewQuote.

Example:

$("#new-quote").on("click", function () {
  $("body").animate(
    {
      opacity: 0
    },
    100,
    () => {
      getNewQuote();
    }
  );

  $("body").animate(
    {
      opacity: 1
    },
    1000
  );
});

[hbar1st]

you should probably check the html validity as I saw some issues in the code like here:

<a href="https://twitter.com/intent/tweet" target=" _blank" id="tweet-quote" class="btn btn-sm btn-primary offset-3" lank"><i class="fab fa-twitter text-white"> Tweet quote</i></a>

(there’s a double quote after the word offset-3 then another word then a double quote all in the same tag)

[Petroman]

Thank you for changing the link for me. I am not very familiar with how to use the system to enter the details of my problem. I corrected my code to remove error there you pointed.

[Petroman]

I removed the from the jquery code and it solved the problem. Now passes all 12 tests. I guess it must be the strictness of the tests which causes it to fail because if I physically measure the position in the browser it is fine?
I changed my code to use the animate function as you suggested and so everything works ok now.

thank you for your help

[lasjorg]

It is because hide sets the element to display: none which makes it have no dimensions so the test can’t measure its location in relation to the viewport.