Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Codeeval challenge

Featured Replies

https://www.codeeval.com/open_challenges/211/

 

So basically from reading the challenge, I imagine you would have to start by checking the input string for the letters (example: ot) after the | of the input string, then use a conditional to check whether a wine bottle in the first part of the string (example: Cabernet Merlot Noir) contained all these letters, the first wine bottle does contain these letters, even if they're not in order it will work too.

 

The examples would print:

Merlot
Chardonnay Sauvignon
False

 

Now, you will only output the name of the wine bottle if it contains the letters, if no wine bottle has the letters, you print "false".

 

My question is how would you be able to take the letters and check if the string contains those letters in no order? Also, how would you be able take the test case numbers from the string, to use them as something to check the words had these characters?

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.

Edited by rbrtsmith

  • Author

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.

 

i don't understand, how are these not going to help me? Don't they teach me how to think of how I will actually build a program from the get go? Rather than small snippets of codeschool that doesn't really show that you can put a program together to do what you want rather than for demonstration. This to me is the hardest thing about being a web developer, they will ask you make scripts and plan how you will put it all together won't they? Even sometimes I bet they are going to just give you a problem that you have to solve.

 

Good answer by the way.

Edited by NullDrone

While doing quizzes might make you better at solving problems and algorithms you want to be mocking up real projects. So build some websites and make the interactive with JavaScript - that is much, much more representative of the work you would be doing rather than string manipulation like we're doing here. I was not asked to do a quiz for my first job, but occasionally employers ask that of you.

 

For my current job my coding test consisted of being given a UI design that I had to recreate. Second test was to pull in a load of images from the Flickr API and allow the user to favourite images by clicking them with the application remembering it's state if a user leaves and later returns.

These are things more representative of real work, not puzzle solving.

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

Forgot about the [].every() method and String.includes() method also, thanks for reminding me :) Much nicer than messing around with indexOf. Although Codeeval needs to start supporting ES6 now it's an official standard...

 

I like the destructuring you did also on the second line, makes things much more concise!

Edited by rbrtsmith

  • Author

While doing quizzes might make you better at solving problems and algorithms you want to be mocking up real projects. So build some websites and make the interactive with JavaScript - that is much, much more representative of the work you would be doing rather than string manipulation like we're doing here. I was not asked to do a quiz for my first job, but occasionally employers ask that of you.

 

For my current job my coding test consisted of being given a UI design that I had to recreate. Second test was to pull in a load of images from the Flickr API and allow the user to favourite images by clicking them with the application remembering it's state if a user leaves and later returns.

These are things more representative of real work, not puzzle solving.

Isn't it showing that you can create a program? Basically if you were to create an add on you would have to know how to think like a programmer? That's the hard part. Simply adding in some functionality to a website doesn't really show that you can create a program from a blank screen, creating a program is a creative process, simply adding functionality to a website doesn't require much creative process.

Isn't it showing that you can create a program? Basically if you were to create an add on you would have to know how to think like a programmer? That's the hard part. Simply adding in some functionality to a website doesn't really show that you can create a program from a blank screen, creating a program is a creative process, simply adding functionality to a website doesn't require much creative process.

 

How exactly do you think a programmer 'thinks'? All programmers think differently and have different approaches. There are certain procedures and practises that they might all follow for the purposes on convention and portability but they don't all have some sort of common, cloned way of thinking.

 

Indeed just as in any other occupation or trade some programmers might be able to get by without having to have a single thought. I know several engineers and tradesmen who have made a successful career out of not thinking.

 

What exactly do you want to do, be a web designer/developer of be a programmer?

 

As with most things there are no set ways of doing something and almost anything can be done in a variety of ways and methods. Each has its pro's and con's depending on purpose and the application it is to be put. If it is just a basic web site function that isn't going to change on a regular basis then a simple vanilla JS function might suffice. If the web site is intended to grow and functionality is highly likely to be extended it might be as well to start off from the basis of using more complex code that can be extended without having to rewrite the whole shebang each time.

 

I get the feeling you are just trying to jump in too deep from the outset.

 

When I started my apprenticeship the first job was to make a simple little piece from a bit of 2" x 1/4" strip which just involved using files, hacksaws and a pedestal drill. The piece served no practical purpose and simply served to teach you how to use basic hand tools and how to use squares and measuring and marking out tools. You have to ensure you understand the basics before you can move on to the more complex aspects.

Isn't it showing that you can create a program? Basically if you were to create an add on you would have to know how to think like a programmer? That's the hard part. Simply adding in some functionality to a website doesn't really show that you can create a program from a blank screen, creating a program is a creative process, simply adding functionality to a website doesn't require much creative process.

 

At a junior level they don't generally care if you can create puzzle type programs from scratch. Web agencies don't make these kinds of programs they build websites. So focus on learning what adds value to that. Building UI's knowing a little bit of the DOM to manipulate things, knowing how to use a library and jQuery.

 

You are really over-thinking this. I would have failed almost all the codeeval challenges when I got my first job, but I was able to add value because they were not selling complex programs to clients, for the most part they were basic website builds. They couldn't care less if I was a great programmer, they wanted a junior front-end developer who could add value there and was willing to learn from those more senior.

Edited by rbrtsmith

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.