Wynn

I agree with the above, it's pretty confusing to have all the links swapped around.
Plus the code wont persist between pages so I take it you're planning on using AJAX to load content?

Anyway, to answer your question about the nth-child.

The selector you pass into jQuery is a String and Strings (prior to ES6) don't take variables.

jQuery has a $.eq method http://api.jquery.com/eq/

This selects an element at a specific index and you can pass in a variable;
eg.
var index = 2; $("li").eq(index);

I would argue that menubar would be better constructed as an array of objects so:
var menuBar = [["Home", "index.html"], ["Calendar", "calendar.html"], ["Music Filter", "musicfilter.html"], ["Facebook Filter", "facebookfilter.html"], ["Stopwatch", "stopwatch.html"], ["Checklist", "checklist.html"], ["Alarm Clock", "alarmclock.html"], ["Email Alerts", "emailalerts.html"], ["Add Ons", "addons.html"]]; would become
var menuBar = [ { text: "Home", url: "index.html" }, { text: "Calendar", url: "calendar.html" }, { text: "Music Filter", url: "musicfilter.html" }, { text: "Facebook Filter", url: "facebookfilter.html" } ]; That will make things easier to work with. But as for your question I don't think you've made it clear exactly what you are trying to achieve here.

To add onto @@Wynn post you want to use .text() or .html() depending what your adding

To stop a setInterval you need to use clearInterval, but you need to name the setInterval so you can reference it.
for example:
var timer = setInterval(callback, 1000) $('button').on('click', function() { clearInterval(timer) }); In your setInterval you're creating a new date object every second, converting it to a number and then subtracting a start time. That's a whole lot of code when all it's really doing is starting from 0 and increasing by 1000 every second.
 
var elapsedTime = 0; setInterval(function() { elapsedTime += 1000; console.log(elapsedTime) }, 1000) does the same thing but more accurate
 
Converting this into minutes and seconds just takes a little Math (the number 60 comes in useful), have a search on stackoverflow for some examples.

I'm a senior front-end dev. I know little beyond the basics about PHP and SQL.
 
I also know senior NodeJS devs who don't know PHP, granted they do know SQL though.
 
 
PHP is only one of a wide range of backend languages, and SQL is only one type of Database, there are others! (NoSQL PostgreSQL) So saying knowing PHP and SQL as bare minimums for any web-dev even a backend developer is far fetched.

It's been removed from the specs, no one used it, only one browser ever implemented it. No longer a thing.

There are plenty of developers who have or do suffer from mental health issues, bipolar disorder, alcohol / drug addiction, homelessness etc.
 
These things are treatable or least manageable and in no way mean that the person with the illness is unemployable.

I grabbed some stats regarding jQuery.

downloads from NPM:
26,079 in the last day
463,725 in the last week
1,986,544 in the last month

Sites using jQuery (taken from Libscore and Builtwith)
Builtwith knows of 59,985,868 sites using jQuery
7,221 of the top 10K
74,397 of the top 100K
766,312 of the top 1M

A handful of these sites:
Netflix, airbnb, NYTimes, linkedin, Amazon, Baidu, Twitter, pinterest, Live.com, MSN, instagram, yandex, ebay, tumblr, imgur, stackoverflow, github, whatsapp, dropbox, CNN, Adobe, quora, PayPal, craigslist, ask, walmart, nbcnews, vimeo, apple, reddit, imdb, mozilla, ehow, Huffingtonpost, AOL, forbes, Foxnews, American Express, Samsung, mailchimp, telegraph, Bloomberg.

I only checked the first four before posting and they do use jQuery or a custom build of it.

I think it's fair to say that jQuery is still relevant and will be for some time.

I learn by doing. I think of a project that will use the technologies I want to learn and get stuck in, using the web as a reference along the way.

matchLettersToWineName('nanan naan na | anan') // nanan naan na I think names / strings should include all the letters including duplicates.
 
 
Since CodeEval doesn't support ES6 here's a working ES5 solution (you can place it inside the boilerplate CodeEval provides).
// line = 'Chardonnay Sauvignon | ann' var namesIncludeLetters = function(input) { var names = input.split(" | ")[0].split(" "); var letters = input.split(" | ")[1].split(""); var includesEveryLetter = function(str) { return letters.every(function(char) { var index = str.indexOf(char); str = str.replace(char, "_"); return index > -1; }); } return names.filter(includesEveryLetter).join(" ") || 'False'; } console.log(namesIncludeLetters(line)); The difference is it's checking that every letter is included in the string and removes it from the string to make sure it's not matched against recurring letters.
 
...in ES2016
const namesIncludeLetters = input => { const [names, letters] = input.split(" | "); const includesEveryLetter = str => [...letters].every(char => str.includes(char) && (str = str.replace(char, '_'))); return names.split(" ").filter(includesEveryLetter).join(" ") || 'False'; } console.log(namesIncludeLetters(line));

If you don't know ES6 - the syntax I've used here you can convert it to older JavaScript by pasting in the examples here: http://babeljs.io/repl/

I just created a quick fiddle to see how I'd solve this... Although these quizzes aren't really going to help you to learn what you need to know to build projects that will land you a job. It's very rare that I build anything like these quizzes in my day to day work and all they serve is for a bit of fun.
 
Anywhoo..
First you want to take your input e.g: 'Cabernet Merlot Noir | ot'
and split it into two arrays, one containing the Wine name and the other, the memorised letters. Then you want to split the memorised letters into an array also along with the wine name (to an array of words). This will allow us to use the Array.filter() method to filter out words that have no matching letters.

The split function would take two arguments: input and char (which has a default value). We split the input string into an array denoted by the char value and then map over the array trimming any trailing or proceeding whitespace and return the result. This function will be used as a utility in the final function.
const splitString = (input, char = '') => input.split(char).map(i => i.trim()); Example useage: splitString('Cabernet Merlot Noir | ot', '|') // ['Cabernet Merlot Noir', 'ot'] splitString('Cabernet Merlot Noir', '|') // ['Cabernet', 'Merlot', 'Noir'] splitString('ot') // ['o', 't'] I have also created a utility that will test if a given letter is present in a string,

const isLetterInWord = (word, letter) => word.indexOf(letter) !== -1; which returns true or false
e.g:
isLetterInWord('hello', 'b') // false isLetterInWord('hello', 'l') // true Below we have the main function that does the actual filtering, it takes a single input string e.g. 'Cabernet Merlot Noir | ot'
Note the first three declarations are using the splitInput() function described above to separate out the wineName, memorised letters and put them into arrays that can be iterated over via the filter() function.
We take the wineName array and filter out words that don't contain all of the memorised letters. We do this via nested filter functions where we take each word in the wineName array and then take each letter of the memorisedLetters array and check if it exists in the current word string using indexOf, removing individual memorisedLetters if they are not found in the current word. We then check that the remaining length of the filtered MemorisedLetters and see if it matches the original length, if it does that word returns true in the wineName filter and then it moves onto the next word. We then use the join() method to stringify the filteredWineName array and then return the stringified version or false if it is an empty string.
const matchLettersToWineName = input => { const splitInput = splitString(input, '|'); const wineName = splitString(splitInput[0], ' '); const memorisedLetters = splitString(splitInput[1]); const filteredWineName = wineName.filter(word => memorisedLetters.filter(letter => isLetterInWord(word, letter) ).length === memorisedLetters.length) .join(' '); return filteredWineName.length ? filteredWineName : false; };  
Example useage:
matchLettersToWineName('Cabernet Merlot Noir | ot') //'Merlot' matchLettersToWineName('Chardonnay Sauvignon | ann') //'Chardonnay Sauvignon' matchLettersToWineName('Shiraz Grenache | o') //false This is all kind of hard to explain if you do not know the filter method well:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

You can find my example here along with passing unit tests
http://jsbin.com/saticaluni/edit?js,console
 
This may not work directly in codeEval as I have not checked the variable input names and so on, but the principle is proven to work via the unit tests I wrote, it would just be a matter of getting the input codeEval provides into the right format.
 
As it stands matchLettersToWineName() is still probably doing too many things and if I were to refactor futher I would abstract out some of the inner workings of the filters into their own functions and try to follow the single responsibility principle a little better. It's generally advisable to make as many as your functions just focus on a single small task.

It's a computed property.
By using square brackets we're no longer limited to using strings as object keys, we can use variables and expressions etc.

A lot of literature on the web was following the spec, but there are currently rewrites of the spec taking place to avoid author confusion.

The page linked to in the comments of the article Robert posted demonstrates things clearly. Using multiple H1's essentially flattens the document.
https://www.w3.org/wiki/HTML/Usage/Headings/h1only

If you read through some of the related links at the bottom of the above page:

https://github.com/w3c/html/issues/110
Steve Faulkner states:
 
The same issue links to a rewrite of the Article section of the spec, which states:
 
So apparently we're now advised to have only one H1 tag in the root of the document and subsequent H2 - 6 depending on the nesting of content.

A lot of literature on the web was following the spec, but there are currently rewrites of the spec taking place to avoid author confusion.

The page linked to in the comments of the article Robert posted demonstrates things clearly. Using multiple H1's essentially flattens the document.
https://www.w3.org/wiki/HTML/Usage/Headings/h1only

If you read through some of the related links at the bottom of the above page:

https://github.com/w3c/html/issues/110
Steve Faulkner states:
 
The same issue links to a rewrite of the Article section of the spec, which states:
 
So apparently we're now advised to have only one H1 tag in the root of the document and subsequent H2 - 6 depending on the nesting of content.

Interestingly I was discussing this very thing with Harry Roberts a few months back, I've always been of the opinion that you can use as many H1s as you like as long as your HTML5 is properly structured and he pointed me to this... http://adrianroselli.com/2013/12/the-truth-about-truth-about-multiple-h1.html

let's discus

What url are you trying?
There's nothing wrong with jQuery, SuperAgent or Fetch, they all work as expected.

The problem lies with the urls you are using:
The first url in this thread is returning JSONP but even if you requested JSON (by using nojsoncallback=1) that Flickr endpoint is not CORS enabled.
The second David Walsh url you've tried is not CORS enabled either.
 
The error you've posted above suggests that the response isn't valid JSON.
 
When making cross-origin JSON requests, unless the response has the header "Access-Control-Allow-Origin: *" you will receive an error.

...also, the data returned is an object not an array, there is no data[0].
console.log(data) // => Object { title: "LS 2008 Pool", link: "https://www.flickr.com/groups/ls200…", description: "Dette er ei gruppe på Flickr, der a…", modified: "2008-07-31T06:31:53Z", generator: "https://www.flickr.com/", items: Array[20] } so either use the data object itself
username: data.title or if you want the first item in data.items
const first = data[0]; // <= change this const [first] = data.items; // <= to this

Why are you using jQuery inside of React? If you are using jQuery just for Ajax then it's totally unnecessary. You should look at something like Super Agent instead as this library specifically abstracts the horrible native XHR. https://github.com/visionmedia/superagent
 
I'd also take out the whole ajax functionality from the component and move it into it's own module, it's better not to mix in so much logic to components.
 
And avoid ES6 Classes whenever possible, if you are not changing any state in the component (State should always live in a store and passed down via props) or component lifecycle hooks (componentWillMount, componentDidMount etc) then you can use a functional component. for example
You have this
class App extends React.Component { render () { return ( <div> <p>Hello React!</p> <TestSource path = "USA" /> <UserGist serverPath = "//api.flickr.com/services/feeds/groups_pool.gne?id=807213@N20&lang=en-us&format=json&jsoncallback=?" /> <AwesomeComponent /> </div> ); } } Can be replaced with
const App = () => ( <div> <p>Hello React!</p> <TestSource path = "USA" /> <UserGist serverPath = "//api.flickr.com/services/feeds/groups_pool.gne?id=807213@N20&lang=en-us&format=json&jsoncallback=?" /> <AwesomeComponent /> </div> ); When you do need lifecycle hooks then favour React.createClass rather than Class. ES6 classes have an array of issues, but specifically for react you get some weird things happening like 'this' not being autobound to the component.
 
Also I just noticed in your 'second way' you are importing the file from 'first way' and your componentDidMount function in the 'second way' is not nested within any component at all?

Robert, that's not what codeeval is asking for.

The output is expected to be a string containing all numbers up to and including the last number in the input.
The first two numbers in the input string are the divisors for fizz and buzz.
eg.

// if line = "3 5 15"
output = "1 2 F 4 B F 7 8 F B 11 F 13 14 FB"

// if line = "2 6 12"
output = "1 F 3 F 5 FB 7 F 9 F 11 FB"

Ok that's different from what I remember.
Then it just needs some alteration
function fb(n, f, { var s = ''; s += n % f === 0 ? 'F' : ''; s += n % b === 0 ? 'B' : ''; return s || n; } // using generated line variable. (function() { var line = '3 5 20'.split(' '); var f = line[0], b = line[1], count = 0, str = ''; while (count < line[2]) { count += 1; str += fb(count, f, + ' '; } console.log(str.trim()); })(); Thanks for clarifying Wynn. I'm sure it can be refactored a bit, I will take a look later and see what I can do

There's also mouseenter which behaves a little differently to mouseover.

The mouseover event bubbles so it will be triggered when entering the element and any descendants (if hovered over) which may lead to unexpected results depending on the function being called.

The mouseenter event will only be triggered once when entering the element no matter what descendants the mouse also enters.

Here's a simple demo, but MDN may explain it better.

jQuery uses mouseenter for it's hover function.

There's also mouseenter which behaves a little differently to mouseover.

The mouseover event bubbles so it will be triggered when entering the element and any descendants (if hovered over) which may lead to unexpected results depending on the function being called.

The mouseenter event will only be triggered once when entering the element no matter what descendants the mouse also enters.

Here's a simple demo, but MDN may explain it better.

jQuery uses mouseenter for it's hover function.

There's also mouseenter which behaves a little differently to mouseover.

The mouseover event bubbles so it will be triggered when entering the element and any descendants (if hovered over) which may lead to unexpected results depending on the function being called.

The mouseenter event will only be triggered once when entering the element no matter what descendants the mouse also enters.

Here's a simple demo, but MDN may explain it better.

jQuery uses mouseenter for it's hover function.

$.val() when applied to a collection will only return the value of the first element.
 
To check all the values you'll have to iterate through each input or filter them.
if ($('input:text').filter(function() { return this.value.trim() === ""; }).length > 0) { alert("empty") } else { alert("Not empty") }

$.val() when applied to a collection will only return the value of the first element.
 
To check all the values you'll have to iterate through each input or filter them.
if ($('input:text').filter(function() { return this.value.trim() === ""; }).length > 0) { alert("empty") } else { alert("Not empty") }