Issue Description

in the switch-case it checks "dizzle", but should be "drizzle"

Challenge Name

Show the Local Weather
https://www.freecodecamp.com/challenges/show-the-local-weather

Your Code / Link to Your Pen

http://codepen.io/freeCodeCamp/pen/bELRjV?editors=1010

  function IconGen(city) {
    var city = city.toLowerCase()
    switch (city) {
      case 'dizzle':
        addIcon(city)
        break;

The testing for this doesn't allow for flexbox configuration, since the contents of the flexbox need to be wrapped in a div with position set to fixed for it to work, and this causes the following conditions to fail:

CONTENT
9. The first element within the navbar should be a

LAYOUT

1. On regular sized devices (laptops, desktops), the element with id="navbar" should be shown on the left side of the screen and should always be visible to the user.
   failed with "AssertionError: expected -1000 to be close to 0 +/- 10"

If your intention is to get people to use another approach, like fixed and absolute positioning for the two main sections - kindly ignore this issue!

Browser Information

Using iMac w/Chrome browser Version 56.0.2924.87 (64-bit)

Your Code / Link to Your Pen

http://codepen.io/sue888/pen/OpRoqB

thanks to @rmdawson71 for reporting this issue!

For some reason, bootstrap effects the width calculation made in layout test 2. Adds an extra 10px. Even though image is centered within parent, test fails. Forked @rmdawson71's pen to preserve this issue: http://codepen.io/no_stack_dub_sack/pen/dNmZrd (test should pass once issue is fixed though).

I confirmed bootstrap being the cause by taking the example project, which passes all the tests by default (and does not use bootstrap at all) and added bootstrap as a dependency without changing anything else in the CSS or HTML, and it caused the same test to fail, with the same exact error message - showing that bootstrap is somewhere adding an extra 10px

Issue Description

Tests are failing randomly with the message:
Error: timeout of 4000ms exceeded. Ensure the done() callback is being called in this test.

8. When the #new-quote button is clicked, my quote machine should fetch a new quote and display it in the #text element.
Error: timeout of 4000ms exceeded. Ensure the done() callback is being called in this test.
at n (https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:7724)
at https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:8538
at https://rawgit.com/no-stack-dub-sack/testable-projects-fcc/master/build/bundle.js:40238:26

9. My quote machine should fetch the new quote's author when the #new-quote button is clicked and display it in the #author element.
Error: timeout of 4000ms exceeded. Ensure the done() callback is being called in this test.
at n (https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:7724)
at https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:8538
at https://rawgit.com/no-stack-dub-sack/testable-projects-fcc/master/build/bundle.js:40252:26

Just before submitting the issue, I ran the tests again and test 7 failed (see screenshot):

7. On first load, my quote machine displays the random quote's author in the element with id="author". ‣
Error: timeout of 4000ms exceeded. Ensure the done() callback is being called in this test.
    at n (https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:7724)
    at https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:7934this.timeout(requestTimeout + 1000);
                return new Promise(function (resolve, reject) {
                    setTimeout(function (_) {
                        var author = document.getElementById("author");
                        if (author.innerText.length > 0) resolve();else reject("There is no initial author displayed ");
                    }, requestTimeout);
                });

Browser Information

• Browser Name, Version: Chrome, 55.0.2883.87 m (64-bit)
• Operating System: Win10
• Mobile, Desktop, or Tablet: Laptop

Your Code

http://codepen.io/c-herr/pen/dNWjby

Screenshot

http://prntscr.com/e1yfjr

Issue Description

When running the test in codepen I get the message "The

Browser Information

• Browser Name, Version: Google Chrome 56.0.2924.87 (64-bit)
• Operating System: macOS Sierra 10.12.3 (16D32)
• Mobile, Desktop, or Tablet:

Your Code / Link to Your Pen

https://codepen.io/albertomarin/pen/BWmvgE

Screenshot

The project's CSS could use a bit of a refactor to prevent CSS pollution in both directions, both the project's CSS affecting the test suite, and the test suites CSS affecting projects, will need to take a look and see what other improvements can be made like in #22

@QuincyLarson I wanted to run this by you - I had a thought about adding a comment to the FCC proper issue template about the testable projects since there have been a couple of issues opened in the wrong repo regarding the test suites.

I've added a "report bug" link to the project, so hopefully people will use that, but in case they go straight to FCC main repo - I thought maybe a comment near the top that says "If you are opening an issue regarding a codepen test suite / project please open it at URL instead..." that way issues are opened in the right repo and are easier to track.

Thoughts?

Issue Description

For the Build a Product Landing Page project, it states "use whichever libraries you need". I decided to use Bootstrap and gave my navbar a class of "navbar-fixed-top". When I was finished with the project and ran the tests, the "The header element with id='header' should always be at the top of the viewport" step kept failing even though I had the fixed navbar nested within the header element.

I decided to try adding CSS for id="header" and set the position = fixed and set top = 0.

header {
  position: fixed;
  top: 0;
}

Doing this allowed the test case to pass, but I don't think this should be required if you're using a Bootstrap navbar with the class "navbar-fixed-top". Would it be possible for the test case to look for a navbar within the header element that has a "fixed-top" class, just in case other students decide to use a library that provides pre-defined classes for different navbar states like SemanticUI or Bootstrap?

Browser Information

• Browser Name, Version: Google Chrome v 56.0.2924.87 (64-bit)
• Operating System: Windows 10 Pro 64-bit
• Mobile, Desktop, or Tablet: Desktop

Your Code / Link to Your Pen

https://codepen.io/kev0587/pen/yMpPdQ

I commented out the header css @ near the top of the file - if you run the test, it will fail. If you uncomment the header css and run the test, it will pass.

Screenshot

Issue Description

When I run the JS Tribute Page Test, I get a failure for #2 of the Layout (The element should be centered within its parent element.).

Browser Information

• Browser Name, Version: Google Chrome, Version 56.0.2924.87 (64-bit)
• Operating System: Chrome OS
• Mobile, Desktop, or Tablet: Desktop

Your Code

...

Screenshot

@Christian-Paul, @paycoguy Hey guys, so... we finally got the test suite running in browsers other than Chrome - but now, we're discovering that individual projects not seem to have little eccentricities of their own.

Tree map is one - (most) tests fail and visualization does not show up at all in Safari. Haven't yet tested in FireFox and don't have a PC for IE or Edge. Can either of you investigate this on other browsers and let me know? And possibly look into why this is?

Thanks! Going to be opening up some other issues for other projects as well, feel free to jump in if you have any ideas. I'll tag you guys on D3 issues.

EDIT: Oh yeah, also, clicking the "Tests" button, does not bring up the modal for some reason, so you can't see what the issues are

for @no-stack-dub-sack

Issue Description

original ticket here: freeCodeCamp/freeCodeCamp#13065

pen here: http://codepen.io/DarrenfJ/pen/jAxadd

Fails last 3 tests. Seems to not recognize that the id's img-caption and image are inside the div with id img-div. This was confirmed when I commented out 2 lines that linked to a youtube vid between the div img-div and the other 2

Browser Information

see original ticket, it captured that information

• Browser Name, Version:
• Operating System:
• Mobile, Desktop, or Tablet:

Your Code

commented out the following and it passed all 9 tests (line 17 and 18 and corresponding closing div line 21

<!-- <div class="text-center">
            <a href="https://youtu.be/lLvsnkQtZLI" target="_blank"> --> 

between id="img-div" and id="image" and id="img-caption"

Issue Description

I raised a similar issue yesterday with the scatter plot project, but the same problem appears to be happening with the heat map project I built today, too. It's failing a test because apparently the cells don't line up with the appropriate y-axis values, when they clearly do just by looking at the graph, or by checking out the attributes of the relevant svg elements using Chrome's dev tools. Might be worth having a look at that test and maybe seeing if there is a more flexible way of checking if a project has satisfied the particular user story. The current test logic is a bit too restrictive IMO!

Your Code / Link to Your Pen

Codepen: http://codepen.io/tom-p-uk/pen/ZeQEaE?editors=1010

Failing test code:

 it('9. My heat map should have cells that align with the corresponding month on the y-axis.', function () {
	                var cellsCollection = document.querySelectorAll('.cell');
	                FCC_Global.assert.isAbove(cellsCollection.length, 0, "Could not find any elements with a class=\"cell\" ");

	                //convert to array
	                var cells = [].slice.call(cellsCollection);
	                var sortedCells = cells.sort(function (a, b) {
	                    return a.getAttribute("data-month") - b.getAttribute("data-month");
	                });

	                //check to see if the y locations of the new sorted array are in ascending order
	                for (var i = 0; i < sortedCells.length - 1; ++i) {
	                    FCC_Global.assert.isAtMost(+sortedCells[i].getAttribute("y"), +sortedCells[i + 1].getAttribute("y"), "month values don't line up with y locations ");
	                }
	            });

Safari Version 9.1.2 (11601.7.7)

2 tests failing, but as of yet unknown as to which ones, as test modal will not open in Safari (see #63) - once this is resolved, we should be better able to troubleshoot this issue.

EDIT: was able to coerce the modal into opening, so it seems this is the same issue as #62 & #65, cannot use forEach() method to iterate over NodeLists. Tests 7 & 8 failing

Safari Version 9.1.2 (11601.7.7)

@paycoguy, @Christian-Paul Passing 11/15 tests, no errors being thrown, cannot troubleshoot issue because test modal won't open (see #63)

Information wasn't previously filled in, i've tried this on Chromium and Firefox. Using Fedora.

The following error happens on my treemap project:
Error: Tooltip should be hidden when mouse is not on an area

However the project is behaving correctly, i don't have enough information to debug it. I tried removing the animation time to fade and show the tooltip, it didn't work.
Here is the codepen: http://codepen.io/Selhar/full/eWKjbL/

this was one of our first projects, and we were not being as thorough at the time. Explicit error messages are needed

Issue Description

The description of the test says

the inner text of the .display element

The period in front of display makes it look like it is a class, but display is an id.
(And the test expects it to be an id, too)
I guess the period could just be removed.

Safari Version 9.1.2 (11601.7.7)

This is an issue across several (most) test suites - some of the suites that it affects have other problems, and some pass all tests, except for this: the test modal that displays the individual unit tests and their statuses DOES NOT open.

This is definitely the case in pre-10 Safari, but not sure about FF or IE or Edge.

Occasionally, it will work, but most times, the modal just won't open, no errors in console, and works fine in Chrome. Here are the suites that I have found this to affect so far:

• Pomodoro Clock (all tests pass, only issue is this)
• Scatter Plot (other issues, see #64)
• Choropleth (all tests passing, only issue is this)
• Tree Map (other issues, see #61)
• Survey Form (no other issues)
• Random Quote Machine (no other issues)
• Tribute Page (no other issues)
• Drum Machine (other issues, see #65)
• Markdown Previewer (other issues, see #66)
• Calculator (no other issues & sometimes modal opens fine)

Luckily, this does not affect the boilerplate empty test pen, so somehow the projects built around them is causing this.

CC'ing @Christian-Paul && @paycoguy here in case this is somehow related to D3 in those projects, but I doubt this is the case because oddly enough, the Heat Map and Bar Chart pass all tests and the modal opens as intended - very strange, not sure yet what is causing this.

EDIT: For all suites where the modal does not open, if you click the Tests button, then close the test suite interface by pressing the "X" in the top left, the modal will open! I'm still stumped as to why this is, but at least now other errors can be troubleshot

Issue Description

Working through the unit test in sequence, I only got test 1 & 2 to pass but test 4 shows as passing as well.
Not having read test 3, I added <div>s right after the <section>s.
It could be that it just came up because I don't work through all the user stories before testing but use the tests to find out the next user story...
Maybe the test should explicitly check for <header> to pass or, in other words, not pass without test 3 having passed?

Browser Information

• Browser Name, Version: Chrome, 56.0.2924.87 (64-bit)
• Operating System: Windows 10
• Mobile, Desktop, or Tablet: Laptop

Your Code

I created a separate pen:  http://codepen.io/c-herr/pen/PWXQmE 

Screenshot

Issue Description

Tests pass on CodePen, but do not pass with the same code in local environment. CSS stylesheet is linked and working, same code in both places, and those two tests are the only tests not passing. GitHub repo of page is here

Browser Information

• Browser Name, Version: Chrome Version 56.0.2924.87 (64-bit), Firefox 52.0 (32-bit)
• Operating System: Windows 10, 10.0.14393
• Mobile, Desktop, or Tablet: Desktop

Your Code / Link to Your Pen

 @media (min-width: 600px) {
    .mobile-stack {
        flex-direction: row;
    }
}

.flex {
    display: flex;
}

Relevant tests

 it('2. My product landing page should have at least one media query.', function() {
                let queryRules = [];
                // loop through all associated stylesheets and look for media query
                for (var i = 0; i < document.styleSheets.length; i++) {
                    if (document.styleSheets[i].cssRules !== null) {
                        for (var j = 0; j < document.styleSheets[i].cssRules.length; j++) {
                            if (document.styleSheets[i].cssRules[j].type === 4) {
                                // push query rules to empty array
                                queryRules.push(document.styleSheets[i].cssRules[j]);
                            }
                        }
                    }
                }
                // there is one media query in Mocha.css, so must detect more than 1 query
                FCC_Global.assert.isAbove(queryRules.length, 1, 'No media queries detected ');
            });

            it('3. My product landing page should utilize CSS flexbox at least once.', function() {
                // loop through all associated stylesheets and look for display of flex
                const flexCount = [];
                for (var i = 0; i < document.styleSheets.length; i++) {
                    if (document.styleSheets[i].cssRules !== null) {
                        for (var j = 0; j < document.styleSheets[i].cssRules.length; j++) {
                            if (document.styleSheets[i].cssRules[j].style !== undefined &&
                                document.styleSheets[i].cssRules[j].style.display === 'flex' ||
                                document.styleSheets[i].cssRules[j].style !== undefined &&
                                document.styleSheets[i].cssRules[j].style.display === 'inline-flex') {
                                flexCount.push(1);
                            }
                        }
                    }
                }
                // our test suite uses a display of flex, so we need to count how many times its used
                // and confirm that its more than once. If we just detect one instance, its ours.
                FCC_Global.assert.isAbove(flexCount.length, 1, 'We do not detect a display property set to flex or inline-flex anywhere in your CSS ')
            });

Screenshot

Issue Description

As mentioned on the Forum and in issue #31, tests are failing when using Vue.js.
The issue is that Vue updates the DOM asynchronously.
https://vuejs.org/v2/guide/reactivity.html#Async-Update-Queue

Here is an example test from the official docs:
https://vuejs.org/v2/guide/unit-testing.html#Asserting-Asynchronous-Updates
Assertions on DOM updates resulting from state change will have to be made in a Vue.nextTick callback:

it('updates the rendered message when vm.message updates', done => {
  const vm = new Vue(MyComponent).$mount()
  vm.message = 'foo'
  // wait a "tick" after state change before asserting DOM updates
  Vue.nextTick(() => {
    expect(vm.$el.textContent).toBe('foo')
    done()
  })
})

I haven't looked at it in depth but there doesn't seem to be an easy way to just add some "Vue compatibility" to the existing tests.
The Vue page on unit tests mentions that it is planned to work on a collection of common test helpers that might make this easier.

It might be best, for now, to add a notice to the User stories and/or test suite that tests will fail with Vue.js.

Issue Description

I somehow broke the Pomodoro test suite. I ran it on a nearly finished project, it gave me 21/25 passed tests, I change one symbol in my code ( wrote "<" instead of "<=") and ran it again, and it gave me '"before each" hook' and '"after all" hook' errors (screenshot below). I changed the code back just to be sure, but it still gave me this errors. I reloaded the page, closed it and opened again - nothing helped. Other test suites on other projects work fine.

Browser Information

• Browser Name, Version: Chrome, 56.0.2924.87
• Operating System: Windows 10
• Mobile, Desktop, or Tablet: Desktop

Your Code

Here's my pen: http://codepen.io/enk/pen/YNjGGr

Screenshot

Issue Description

After clicking on the link for the Random Quote Machine example (https://codepen.io/FreeCodeCamp/full/ONjoLe/), you arrive at a broken app. The "New Quote" and Twitter buttons do nothing. You can reproduce it by either going directly to the link I provided for the CodePen app or by clicking on the link from the FCC page https://www.freecodecamp.com/challenges/build-a-random-quote-machine

Browser Information

• Browser Name, Version: Chrome Version 57.0.2987.133
• Operating System: Windows 10
• Mobile, Desktop, or Tablet: Laptop

Your Code / Link to Your Pen

I pasted the line of code that it causing the problem in the example pen. The link to my forked pen with the fix is https://codepen.io/Wjhurley/pen/NjBEod

 var r = JSON.parse(response);
 
 

Screenshot

Issue Description

Test Nr. 6 includes the HINT from Test Nr. 7

Screenshot

These projects have not been super thoroughly QAd and I anticipate a decent amount of issues - I think there should be a link somewhere so that people can report bugs in the right place, otherwise I fear they will likely get reported on the main repo and tracking will be a bit more difficult

Issue Description

The last 3 error-messages all say write some markdown representing an <h1> instead of the correct messages:
write some markdown representing an <blockquote>
write some markdown representing an <img> and
write some markdown representing bolded text, <strong>...</strong>

This is quite confusing, I forgot the space between the > and the actual blockquote text.
The error I received always said I need to represent an <h1>, which I already had.

Screenshot

Issue Description:

Bootstrap add-in from CodePen will not give the same results as the tribute page example provided by Free Code Camp

In the Codepen tribute page example of Dr. Norman Borlaug, the Bootstrap add-in you have is:

• https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css

Which is not the default bootstrap add-in that Codepen provides, which is:

• https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css

The video shown in: https://www.freecodecamp.com/challenges/build-a-tribute-page did not specify this difference, which led me to waste a couple of hours to troubleshoot why certain elements were not being responsive - even with the bootstrap add-in that was provided by codepen.

The minute I added the same bootstrap url found in the Dr. Norman Borlaug tribute page, my tribute page became responsive.

Environment Info

Browser: Chrome
OS: Windows 10

Link to My Pen

https://www.freecodecamp.com/challenges/build-a-tribute-page

FYI - I shared the link with the Bootstrap URL that is provided with Codepen.

Issue Description

Content tests 1 and 2 test for document.getElementById(), could test for document.getElementByTagName(). This would match the syntax of using <main> and <title> tags as taught in the course work.

Safari Version 9.1.2 (11601.7.7)

See below image - test number 5 failing. This seems to be because the NodeList.forEach() method is not supported in Safari versions pre-10.X.X, so... will need to either go about this test another way, or add a quick alert as a stop gap using the global alertOnce utility function.

Issue Description

It appears that the testing code isn't taking left and right padding of the wrapping div (#img-div) into account when checking for a centered image. The test code allows for +/- 10 px in it's test for centering, so if #img-div is padded by 5px or less, the image position falls within the allowed variance. However, when the image is padded by more than 5 px, then while the image is still correctly centered, it fails the test.

Browser Information

• Browser Name, Version: Chrome 55.0.2883.87 (Official Build) (32-bit)
• Operating System: Windows 7 Professional, Service Pack 1
• Mobile, Desktop, or Tablet: Desktop

Your Code

CSS Stylesheet

#img-div {
  background-color: #fff;
  box-sizing: border-box;
  padding: 10px 20px;
  width: 100%;
}

#img-div #image {
  display: block;
  height: auto;
  margin: 0 auto;
  max-width: 100%;
}

#img-div #img-caption {
  font-size: 0.8em;
}

HTML Code

 
     <div id="img-div">
      <img id="image" src="http://s33.postimg.org/v1na5y41b/John_Stewart_USO.jpg" alt="">
      <p id="img-caption">Former Daily Show host Jon Stewart tells jokes behind the president’s lectern as President Barack Obama and First Lady Michelle Obama look on during the comedy show in celebration of the 75th anniversary of the USO and the 5th anniversary of Joining Forces at Joint Base Andrews in Washington, D.C. May 5, 2016. By DoD News Features (160505-D-DB155-002) [Public domain], <a href="https://commons.wikimedia.org/wiki/File%3AJon_Stewart_tells_jokes_behind_the_president%E2%80%99s_lectern_as_President_Obama_and_the_First_Lady_look_on_during_the_comedy_show_in_celebration_of_the_75th_anniversary_of_the_USO_and_the_5th_anniversary_of_Joining_Forces_(26240098743).jpg" target="_blank">via Wikimedia Commons</a></p>
    </div>

 

Screenshot

Screenshot 1: Test fails with left and right padding of 20px.

Screenshot2: Test passes with left and right padding of 5px.

(for some reason the pre-filled information report had no data filled in, so i deleted it, i'm using linux, chromium and desktop, if you need specific versions just ask)

Adapting the calculator project to fit the tests gave me the following problem: http://imgur.com/a/PvmhE

The test suite is able to successfully clear the screen and do operations, but it still doesn't pass the test. I tried rendering the display value in a different way (inside a div, like the official FCC solution does) but nothing changed. I'm using React + Redux.

A major issue right now with this project is that the test suite only runs in Chrome. This is not cool. If any visitors have any ideas on how to fix this, please feel free to check out the repo and comment here.

Thanks!!!

Issue Description

I am not quite sure at what point the issue occurred, but for some reason the "the height of the welcome section should be equal to the height of the viewport" test will not pass for me on the Personal Portfolio project. When I hide the navbar (visibility: none), I can see that there is space above the welcome section when there should not be (I had originally done nothing to change the positioning of this section when I first noticed the failure, though I did try translating the welcome section to pass the test to no avail). I believe this issue is being caused by the test suite, as I encountered it in at least one test before and it seemed to have sorted itself out. I cannot recall what fixed the issue last time.

Browser Information

• Browser Name, Version: Google Chrome, Version 56.0.2924.87 (64-bit)
• Operating System: Windows 10 Home, 64-bit
• Mobile, Desktop, or Tablet: Desktop

Your Code

Error:
AssertionError: The height of #welcome-section is not equal to the height of the viewport : expected 495 to equal 478 at n.<anonymous> (https://gitcdn.link/cdn/freeCodeCamp/testable-projects-fcc/b9a6558063e5349870a4123cceeb72f27d6fd9b9/build/bundle.js:20104:36) at r (https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:7852) at r.run (https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:8853) at i.runTest (https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:13553) at https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:14192 at r (https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:13024) at https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:13000 at n (https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:12791) at https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:12855 at i (https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:1:559)

Relevant HTML:

 <html>
  <link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">
  <body>
    <nav id="navbar">
      <h1>Jake Steele</h1>
      <a href="#welcome-section">Top</a>
      <a href="#projects">Projects</a>
      <a href="#contact">Contact</a>
    </nav>
    <main>
      <div id="welcome-section">
        <h1 class="intro-text">Hi. My name is Jake Steele.</h1>
        <h3 class="intro-text">I dabble in web design.</h3>
      </div>
    </main>
  </body>
</html>

Relevant CSS:

@media (maxheight: 640) {
  font-size: 12px;
}

*, *:before, *:after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  font-family: 'Rubik', sans-serif;
  background-color: #3C657F;
}

break {
  flex-basis: 100%;
  width: 0px;
  height:0px;
  overflow: hidden;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

nav {
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 1;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  height: 10vh;
  width: 100vw;
  background-color: #60A2CC;
  border-bottom: solid #3A617A 1px;
  padding: 0vh 10vw;
}

nav > a {
  color: #FFF;
  line-height: 10vh;
  font-weight: 700;
  margin: 0vh 1vw 0vh 0vw;
}

nav > h1 {
  padding-right: 72vw;
}

#welcome-section {
  top: 0px;
  left: 0px;
  height: 100vh;
  width: 100vw;
  background-color: #78CAFF;
  text-align: center;
  border-radius: 10px;
}

.intro-text {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

If this is just an error with my code, I'm sorry for wasting your time and I'll close the issue! Thank you!

Issue Description

When using Materialize as the CSS framework on Codepen, I am unable to select what test suite to run. Works fine when I remove Materialize.

Browser Information

• Browser Name, Version: Chrome 56.0 or Safari
• Operating System: MacOS Sierra
• Mobile, Desktop, or Tablet: Desktop

Your Code / Link to Your Pen

 http://codepen.io/msecrist/full/VPXMjw/
 
Also able to reproduce with the "Fork this pen!" example and adding https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css as external CSS.
 

Screenshot

copying the issue that was raised on the forum by @leonfeng here so it can be addressed:

Original issue

This one made my head hurt 😵 https://codepen.io/leonfeng/pen/xgdqGR7

Personally I felt it was quite a leap from the D3 challenges to this treemap project. The D3 docs only helped a little. In the end I had to "borrow" code from a (GPL-licensed) tutorial, and to be honest I still don't understand half of the code.

In addition, I used a 3rd-party library to render the legend. And it fails the legend colours test (#9) even though each legend item has a unique colour. Are we expected to manually code the legend items? The user stories aren't clear on that 😕

@Christian-Paul's response:

@leonfeng Thanks for the feedback!

Test #9 states: "The legend items should use at least 2 different fill colors"

It expects the elements that have the different fill colors to have the class "legend-item"

In your project, only one element has the class of legend-item; if you made the path elements with class="swatch" also have the class of "legend-item" it should pass. We've tried to make the tests as general as possible so campers can employ whatever strategy they see fit, so using a library is fine, insofar as you can label the classes.

As for how we can improve the tests, @no-stack-dub-sack, @QuincyLarson, @paycoguy, I think making test #8 check for the presence of more than one element with class="legend-item" would make it more clear that there should be multiple elements with this class.

If popular legend libraries do not allow campers to assign class names, we'll need a different solution: perhaps we could iterate through the children of the top level legend element, and collect fill color information that way.

Safari Version 9.1.2 (11601.7.7)

There's 2 issues here - first, the test modal does not open (see #63), second, similar to #62, we have NodeLists returned by querySelectorAll() that we are trying to iterate over with forEach(). This method is not supported on NodeLists in pre version 10.X.X Safari browsers or ANY Internet Explorer browser versions (not sure about Edge).

We will likely have to turn the NodeList into a true Array before iterating, this should solve the second part of this issue.

as pointed out by a camper during QA, the tests for the drum machine are dependent on the drum pads being in the right order. I think a quick change to the user stories will fix this, we need to require the drum pads be in a specific order

Issue Description

There is no technical issue, but the axes if this beta scatterplot are "default", ie time and year. But the data is much better visualized and impressive by sorting the finishing times by place, so that the sheer penetration of doping is seen.

There are other intersting things that can be seen from the date along x axis though, such as the slowing of times as the dopers get out of the sport, but it's not as impressive as using finishign place on the Y axis.

I spent a lot of time trying to determine the best way to present the data I collected...it would be nice to see it still in it's original format .

Browser Information

• Browser Name, Version:
• Operating System:
• Mobile, Desktop, or Tablet:

Your Code / Link to Your Pen

Screenshot

Issue Description

3. The first element within each .main-section should be a element which contains text that describes the topic of that section.
   wc3 validation problems section lacks heading. Consider using "h2"-"h6" elements to add identifying headings to all sections.

Browser Information

• Browser Name, Version:
• Operating System:
• Mobile, Desktop, or Tablet:

Your Code / Link to Your Pen

 http://codepen.io/bobbidigi34/pen/PmYgmx
 
 

Screenshot

Issue Description

Layout test 1 - The #quote-box wrapper element should be horizontally centered
seems to be failing when a scroll bar is visible.

On my 13.3" display, there is always a scroll bar in editor view. The test never passes when run in editor view.
In Full Page view, the test passes as long as there is no scroll bar.

clientWidth does not take a scroll bar into account and might be throwing off the calculations in testHorizontallyCentered.
Would offsetWidth be a viable alternative to clientWidth?

Browser Information

• Browser Name, Version: Chrome, 55.0.2883.87 m (64-bit)
• Operating System: Win 10
• Mobile, Desktop, or Tablet: Laptop

Your Code

http://codepen.io/c-herr/pen/dNWjby

Screenshot

http://prntscr.com/e1yoqe

Issue Description

The test suite does not run on the forked pen for the Pomodoro Clock. I tried forking it several different times and it never runs, no matter what is written into the editor. Testing other projects works fine for me and the tests on the example pomodoro also work fine.

Browser Information

• Browser Name, Version: Chrome 56.0
• Operating System: Windows 7
• Mobile, Desktop, or Tablet: Desktop

Issue Description

Built this graph today but it's failing one test when it shouldn't be.

It's failing test number 8 of 15. I checked out the criteria for the test by visiting the test JS file here and then did a little bit of debugging.

It turns out that my scatter plot fails the test because the sort function in the test page sorts my array of dots in descending order rather than ascending, which means it fails at the very first assertion. If you look at the code and the chart itself, though, it's clearly all in working order.

Your Code / Link to Your Pen

Codepen link

Code for the appropriate failing test:

it('8. The data-yvalue and its corresponding dot should align with the corresponding point/value on the y-axis.', function () {
	                var dotsCollection = document.getElementsByClassName('dot');
	                //convert to array
	                var dots = [].slice.call(dotsCollection);
	                FCC_Global.assert.isAbove(dots.length, 0, 'there are no elements with the class of "dot" ');
	                //sort the dots based on yvalue in ascending order
	                var sortedDots = dots.sort(function (a, b) {
	                    return new Date(a.getAttribute("data-yvalue")) - new Date(b.getAttribute("data-yvalue"));
	                });

	                //check to see if the y locations of the new sorted array are in ascending order
	                for (var i = 0; i < sortedDots.length - 1; ++i) {
	                    FCC_Global.assert.isAtMost(+sortedDots[i].cy.baseVal.value, +sortedDots[i + 1].cy.baseVal.value, "y values don't line up with y locations ");
	                }
	            });

Issue Description

My Pomodoro Clock project is failing all of the async tests at the moment. I'm sure there are problems with my code, as it's in very rough shape at the moment. However, it's odd that it's failing all and only the async tests (11, 19-26).

I'll focus on tests 11 and 19.

11. This test gives the following error:

Error: timeout of 5000ms exceeded. Ensure the done() callback is being called in this test.
    at https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:7197

I'm not sure what to say about that. Looking at the test source, it seems like there are plenty of helpful errors in the promise. I'm just not seeing any of them.

19. This test gives the following error:

TypeError: Cannot read property '1' of null
    at getSeconds (https://rawgit.com/freeCodeCamp/testable-projects-fcc/master/build/bundle.js:19461:24)
    at n.<anonymous> (https://rawgit.com/freeCodeCamp/testable-projects-fcc/master/build/bundle.js:19675:38)
    at r (https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:7852)
    at r.run (https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:8853)
    at i.runTest (https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:13553)
    at https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:14192
    at r (https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:13024)
    at https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:13000
    at n (https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:12791)
    at https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:12855

That indicates that when getSeconds tries to return matches[1], it's getting null instead of an array. However, when I play with things in the console, matches are returned.

// suppose "time-left" displays "24:44"
var time = document.getElementById("time-left").innerHTML
var matches = /^\d{1,4}\s?:\s?(\d{2})/g.exec(time)
matches[1] // returns "44"

Can anyone point me in the right direction?

Browser Information

• Browser Name, Version: Chrome 58.0.3029.96 (64-bit)
• Operating System: macOS 10.12.4 (sierra)
• Mobile, Desktop, or Tablet: Desktop

Your Code / Link to Your Pen

Github link
And a link to a live version.

Issue Description

Ok so this is not exactly a bug report, just a suggestion to add another test to the JS Calculator Test.
Here is the mistake my code produced that was not caught:

1. enter 5-9, press equal
2. -4 is displayed
3. proceed to add +5 so -4+5 is displayed in the formula window, press equal
4. result is -9 due to the way the evaluation works in my code (will fix this :) ). this mistake is not caught by the tests.

Your Code / Link to Your Pen

code is still messy but i will leave it like this for a while in case you want to check it

http://codepen.io/felixmuecke/pen/JNpyvp

Issue Description

The test fails if the letters are inside p tags.
span tags work.
A bit unexpected (even though the text mentions "inner text").

Also wanted to mention that Test 3 pretty much expects a qwerty keyboard layout.
Doesn't make much sense on my qwertz keyboard to use z,x,c for the bottom row.

Browser Information

• Browser Name, Version: Chrome 56.0.2924.87 (64-bit)
• Operating System: Windows 10
• Mobile, Desktop, or Tablet: Laytop

Your Code

 This fails:
<div class="drum-pad" id="heater-4">
     <p class="drum-key">A</p>
 
 This passes: 
<div class="drum-pad" id="heater-4">
     <span class="drum-key">A</span>

Screenshot

Issue Description

The survey form test suite will indicate a project passes all tests even if they do not include a submit button for their survey.

Browser Information

• Browser Name, Version: Google Chrome version 55.0.2883.87 (64-bit)
• Operating System: Ubuntu Linux 16.04 LTS
• Mobile, Desktop, or Tablet: Laptop

Your Code

<body>
  <h1 id="title">Survey Form</h1>
  <p id="description">This is a short description of the survey.</p>
  <form>
    <fieldset>
      <div class="input-group">
        <label for="name" id="name-label">Name:</label>
        <input type="text" id="name" placeholder="John Doe" required>
      </div>
      <div class="input-group">
        <label for="email" id="email-label">Email:</label>
        <input type="email" id="email" placeholder="[email protected]" required>
      </div>
      <div class="input-group">
        <label for="number" id="number-label">Choose a number:</label>
        <input type="number" id="number" min="1" max="100" placeholder="10">
      </div>
      <div class="input-group">
        <label for="select">Choose from the list:</label>
        <select>
          <option value="option-1">Option 1</option>
          <option value="option-2">Option 2</option>
          <option value="option-3">Option 3</option>
        </select>
      </div>
      <div class="input-group">
        <label>Choose a button:</label>
        <input type="radio" value="left">Left
        <input type="radio" value="right">Right
      </div>
      <div class="input-group">
        <label>Choose some boxes:</label>
        <input type="checkbox" name="one" value="one">One
        <input type="checkbox" name="two" value="two">Two
        <input type="checkbox" name="three" value="three">Three
      </div>
      <div class="input-group">
        <label for="text-area">Write some text:</label>
        <textarea rows="5" wrap="soft"></textarea>
      </div>
    </fieldset>
  </form>
</body> 

Screenshot

This issue (#12837) was originally opened on FCC main, see it here

Issue Description

These buttons take the user to a blank page within codepen. To go back you'd have to right click within the preview window, rather than use the browsers nav buttons, because then you'd be going back not in the preview but for the whole page:

When implemented with vue.js, the markdown editor does not pass all tests even though it functions according to specs.

Thanks @christophherr for reporting this! I've forked your pen to preserve this issue in case you change or delete it.

Pen:

http://codepen.io/no_stack_dub_sack/pen/bgvoMa

Issue Description

The test suite overrides the project's <body>'s margin and sets it to 0. Example.

Screenshot