Angular.js

In this challenge, your task is to create a component called grouper. This component determines how many groups of each element from a given array can be made matching a user-specified size.

Your component will receive @Input data: string[] in the following format (some example strings have been provided):

The array is not in any particular order. For the purposes of the challenge, you can assume each element is a string consisting entirely of alphabetical lowercase characters.

Additionally, the component will offer an input box which enables the user to specify the size of the groups to create from the provided data.

For example, given the above data array and a user input size of 3, the complete groups that can be made are as follows:

1 group of "red" (3 elements, none are left over)

1 group of "yellow" (4 elements, 1 element is left over)

2 groups of "blue" (6 elements, none are left over)

If the user should change their input to size 5, the groupings become

0 groups of "red" (3 elements aren't enough to build a group of 5)

0 groups of "yellow" (4 elements aren't enough to build a group of 5)

1 group of "blue" (5 elements, 1 is left over)

Next, we'll describe the requirements the component should adhere to in displaying this grouping information.

Functional requirements

This section outlines the requirements for this challenge. You'll be evaluated by a test suite which will verify that your grouper component renders certain elements which exhibit the behavior described below.

An which will be used by the test suite to enter data. The element should respond to an input event; any change to the value of the input will re-render the groupings using the new value.

This element should have a two-way bound value which is initially set to "2" when the component is created. This is the default value for the user-specified group size. The component will always start out with a populated result in elements for groups and group-totals(see below) based on this size.

If the user should enter an invalid number for the group size (anything other than one or more digits or 0), your component should leave the previously rendered result untouched.

A

list which will be filled with
• elements representing each of the groupings. These
• elements should be alphabetical and must contain the string value along with how many groups can be made of exactly the size specified by the user in group-size. The list item contents are flexible beyond these two pieces of information. If no groups can be made for a particular element, its corresponding
• should not be rendered.

  A

  element, which will offer a summary of the groupings. The format for this element is the following template pseudocode:

  There {is/are} {number of groups} complete group{s} of size {group-size}. 

  Note that pluralization should be conditional! Specifically, if 1 group is rendered, use "is" and singular "group". Otherwise, use "are" and "groups" (0, 2 or more list items). See the tests in src/app/grouper/grouper.component.spec.ts for precise strings to match against.

  Feel free to modify src/app/app.component.html to adjust the contents of the bound data array as you work (this file won't be tested by the submission suite and only affects your web preview).

  There is no predefined correct way of handling the CSS or design; the goal is to get a sense for your comfort level with both.

  Here's a screen capture of the working component, which uses the example array shown at the top of the instructions, shown again here:

  ['red', 'red', 'red', 'yellow', 'yellow', 'blue', 'blue', 'yellow', 'yellow', 'blue', 'blue', 'blue', 'blue']