BD Technologies AG - 1st Front-end Assessment

Instructions

The following test will require mostly JavaScript (including jQuery) and CSS experience. You may complete each with your own suitable solutions and note that each layout should include good styling practices. Questions 2 and 3 should be responsive (pay attention to layout).

Coding standards will also be reviewed so please ensure that the code is written in a clean manner with adequate naming conventions. Be as creative as you'd like, but do not make use of any frameworks, plugins, or libraries, except for jQuery, as we would like to review your core skillsets.

Sample code is provided to start you off in the right direction, however, you may change it completely if you wish to do so as long as you follow the specified guidelines of each question.

You may set up an environment and may choose to either keep each question separate or all on one page. Either way, please label accordingly. At the end, how you excecute and submit the code is completely your decision.

Good luck!

Question 1:

The following rating widget needs to consist of 5 stars. Each star is represented by a span element (which may be changed if needed). Below is the widget's HTML sample code:


      <div id='rating'>
        <span>*</span>
        <span>*</span>
        <span>*</span>
        <span>*</span>
        <span>*</span>
      </div>

When a star is clicked, class active should be added to the clicked element and all elements before it. Also, class active should be removed from all elements after it, if there are any. Meaning the user can change the rating accordingly.

For example, after the third span element has been clicked, the HTML code should look like this:


      <div id='rating'>
        <span class="active">*</span>
        <span class="active">*</span>
        <span class="active">*</span>
        <span>*</span>
        <span>*</span>
      </div>

Complete the setup function that registers click event handlers and implements the logic of the HTML widget.

For CSS, we require the following:

The rating system needs to appear in a badge and should be presented in a user-friendly manner.
When hovering, the current and previous stars should change to a different color.
When changing to a different color, the color should fade in (and/or out) quickly.

Lastly, add a solution to clear the active classes if the user decides not to rate the product.

Question 2:

For the form with the id "user-feedback", we want to check the following rules:

Rule 1: "fullname" must be validated accordingly. The validation must cater for both firstname and lastname.
Rule 2: "email" must be validated according to email standards. The validation must cater to the necessary special characters and domain names.
Rule 3: "donate" may be checked only if "delighted" is selected.
Rule 4: If "not delighted" is selected, "reason" must contain a non-empty string.
Rule 5: If validation passes, the form needs to be hidden with a success message presented to the user.
Rule 6: if validation fails, add an error class changing the colour of the input label and border. Add the necessary error messages to the "error-message" container.
Rule 7: All JavaScript-related issues should make use of the jQuery library.

If one or more of these rules fail, an appropriate error message should be displayed in the provided div (class "error-message")e.g.
"Name and Lastname are required", "Please enter a valid email" or "A reason is required". You may use any copy for each possible error.

Implement the validateInput function, which returns true when data is valid or false if data is not valid while updating the error message.


      function validateInput() {
        // Write your code here.
      }

      validateInput();

      console.log($(".error-message").html());


      <div class="error-message">
        
      </div>

      <form id="user-feedback" onsubmit="return validateInput()">
        
        Firstname and Lastname:
        <input type="text" id="fullname" name="fullname" required /> 

        Email:
        <input type="text" id="email" name="email" required /> 

        <input type="radio" id="delighted" name="delighted" checked="checked" required /> 
        Delighted
        <input type="radio" id="not-delighted" name="delighted" required /> 
        Not delighted
        <input type="checkbox" id="donate" name="donate" /> 
        Donate

        Reason:
        <input type="text" id="reason" name="reason" /> 
        
        <input type="submit" value="Submit" />
      </form>

The layout required is the following (HTML and CSS only):

The form should be centered with enough margin and padding that it is appealing to the user and should be made responsive.
The radio buttons should appear a bit larger with the necessary label next to them.
The text fields should be styled with the corners fully rounded (the text fields should resemble a pill).
The submit button should have a hover and click background color that changes linearly from bottom to top (animation starts from the bottom and moves up with the new color till the button is filled, and reverts when the user no longer hovers over it).

Question 3:

A client has a web page with a series of tasks. The client has requested a feature where the tasks can be moved up higher or lower based on the user’s priority.

An example of similar HTML would be the following:


      <div>
        <span>Weekly report</span>
      </div>
      <div>
        <span>Review tickets</span>
        <button type="button">&uarr;</button>
        <button type="button">&darr;</button>
      </div>
      <div>
        <span>Prepare presentation</span>
        <button type="button">&uarr;</button>
        <button type="button">&darr;</button>
      </div>

Implement a function to add the requested functionality. You may create more than one function, however, no JavaScript attribute is allowed on any of the elements. The feature should work with any number of tasks.

The layout required is the following (HTML and CSS only):

Each list item should be made to look like a badge/card.
The top priority badge/card should be a different colour from the rest.