TEST

by Rodwyn Moreno

HTML

<div class="container">
  <div class="question">
    <h3> Question 1: Code lines: 5-19. What the alert message will be shown when you click on the button <h3>
        <button class="button button-1" role="button" onclick="question1()">Question 1</button>
  </div>

  <div class="question">
    <h3> Question 2: Code lines: 25-39. What the alert message will be shown when you click on the buttons <h3>
        <button class="button button-2" role="button" onclick="question21()">Question 2 - Case 1 </button>
        <button class="button button-3" role="button" onclick="question22()">Question 2 - Case 2 </button>
  </div>

  <div class="question">
    <h3> Question 3: Code lines: 44-49. What the alert message will be shown when you click on the buttons <h3>
        <button class="button button-1" role="button" onclick="question3(1)">Question 3 2</button>
  </div>

  <div class="question">
    <h3> Question 4: Code lines: 54-84. In you opinion, what is the issue of the code? </h3>
  </div>
</div>

CSS

.question {
  padding: 10px;
}

/* CSS */
.button {
  border-radius: 8px;
  border-style: none;
  box-sizing: border-box;
  color: #ffffff;
  cursor: pointer;
  display: inline-block;
  font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial,
    sans-serif;
  font-size: 14px;
  font-weight: 500;
  height: 40px;
  line-height: 20px;
  list-style: none;
  margin: 0;
  outline: none;
  padding: 10px 16px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: color 100ms;
  vertical-align: baseline;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-1 {
  background-color: #ea4c89;
}

.button-1:hover,
.button-1:focus {
  background-color: #f082ac;
}

.button-2 {
  background-color: #0095ff;
}

.button-2:hover,
.button-2:focus {
  background-color: #0064bd;
}

.button-2 {
  background-color: #0095ff;
}

.button-2:hover,
.button-2:focus {
  background-color: #0064bd;
}

.button-3 {
  background-color: #2ea44f;
}

.button-3:focus:not(:focus-visible):not(.focus-visible) {
  box-shadow: none;
  outline: none;
}

.button-3:hover {
  background-color: #2c974b;
}

.button-3:focus {
  box-shadow: rgba(46, 164, 79, 0.4) 0 0 0 3px;
  outline: none;
}

.button-3:disabled {
  background-color: #94d3a2;
  border-color: rgba(27, 31, 35, 0.1);
  color: rgba(255, 255, 255, 0.8);
  cursor: default;
}

.button-3:active {
  background-color: #298e46;
  box-shadow: rgba(20, 70, 32, 0.2) 0 1px 0 inset;
}

JavaScript

/*
  Question 1: 
*/

function question1() {
  function bar() {
    return 10;
  }

  alert(bar());

  function bar() {
    return 100;
  }

  var bar = function () {
    return 1000;
  };
}

/*
  Question 2: What will be printed to console
*/

const payfareQuestion2 = {
  interviewQuestion: "Payfare Interview Question 2",
  print: function () {
    alert(this.interviewQuestion);
  }
};

function question21() {
  payfareQuestion2.print();
}

function question22() {
  setTimeout(payfareQuestion2.print, 0);
}

/*
  Question 3: what will be printed to console 
*/

function question3(currentNumber) {
  setTimeout(function () {
    alert(`the question number is: ${currentNumber}`);
  }, 0);
  currentNumber += 1;
}

// question3(1) // the question number is: ???

/*
  Question 4: In you opinion, what is the issue of the following code
*/

const SERVICES = {
  bishop: {
    url: "bishop://"
  },
  gibson: {
    url: "gibson://"
  }
};

function callApi(url) {
  // Calling api success will be randomly
  const mockSuccess = Math.round(Math.random());
  return mockSuccess;
}

function makeRequest(serviceName, maxRetry) {
  const service = SERVICES[serviceName];
  const { url } = service;
  const isSuccess = callApi(url);
  if (isSuccess) return "Success";

  // try apiCall
  if (!service.retried || service.retried < maxRetry) {
    service.retried ||= 0;
    service.retried += 1;
    return makeRequest(serviceName, maxRetry);
  }
}