Skip to content
BranchesTags

Repository files navigation

Babylon Web technical recruitment test

Thanks for taking the time to complete our frontend coding test! You can start with forking this repository and off you go.

Good luck!

What we are looking for

We'd like you to build an application that:

  • has a sensible and maintainable structure
  • is well tested
  • is accessible
  • looks like the designs provided (it doesn't have to be "pixel perfect")
  • mobile first and responsive
  • clean and understandable Git history

It's helpful for us if you include some notes to explain the decisions you make.

Instructions

We'd like you to use React. We have provided a skeleton for the React application and included SASS for styling. We have also provided some useful constants in constants.scss. Feel free to add any additional libraries which you think are needed for the task.

We included some initial code in App.js that we would like you to refactor.

We have also included a mock API which is documented below.

We'd like you to build one page. We've provided the design. On this page the user can:

  • Filter appointments by their type (GP, therapist, specialist)
  • Select date and time
  • Select appointment type (audio, video)
  • Book an appointment

New appointment page

Design

New Appointment Design

Data

You will need to use 3 API's for this page.

GET /users/1

Returns a user object with the following info:

  • firstName: String of the user's first name.
  • lastName: String of the user's last name.
  • avatar: String Base64 representation of the user's avatar image.
  • dateOfBirth: Date The user's Date of Birth.

GET /availableSlots

Returns:

  • Array of available appointments

Each available appointment is an object which contains

  • id: Int the appointment id
  • consultantType: Array of String with the available consultant types
  • appointmentType: Array of String with the available appointment types
  • time: Date ISO 8601 the time of the appointment

POST /appointments

Expects an object in the request's body with the following information:

  • userId: Int The user's ID that this appointment is for.
  • dateTime: The user's selected time slot as a Date ISO 8601.
  • notes: String Any notes the user added when booking. note: not required, can be null.
  • type: String The type of the appointment like GP appointment or Physio appointment.

The endpoint responds with a 200 status on success.

Getting Started

We recommend using NVM for managing node versions on your machine.

brew install nvm

...and installing the required node version with the following command:

nvm install

This repo is using Yarn as it's package manager.

brew install yarn

Installing packages:

yarn install

yarn start

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
GitHub - alex321/web-interview · GitHub
Skip to content
BranchesTags
Repository files navigation
Babylon Web technical recruitment test
Thanks for taking the time to complete our frontend coding test! You can start with forking this repository and off you go.
Good luck!
What we are looking for
We'd like you to build an application that:
  • has a sensible and maintainable structure
  • is well tested
  • is accessible
  • looks like the designs provided (it doesn't have to be "pixel perfect")
  • mobile first and responsive
  • clean and understandable Git history
It's helpful for us if you include some notes to explain the decisions you make.
Instructions
We'd like you to use React. We have provided a skeleton for the React application and included SASS for styling. We have also provided some useful constants in constants.scss. Feel free to add any additional libraries which you think are needed for the task.
We included some initial code in App.js that we would like you to refactor.
We have also included a mock API which is documented below.
We'd like you to build one page. We've provided the design. On this page the user can:
  • Filter appointments by their type (GP, therapist, specialist)
  • Select date and time
  • Select appointment type (audio, video)
  • Book an appointment
New appointment page
Design
New Appointment Design
Data
You will need to use 3 API's for this page.
GET /users/1
Returns a user object with the following info:
  • firstName: String of the user's first name.
  • lastName: String of the user's last name.
  • avatar: String Base64 representation of the user's avatar image.
  • dateOfBirth: Date The user's Date of Birth.
GET /availableSlots
Returns:
  • Array of available appointments
Each available appointment is an object which contains
  • id: Int the appointment id
  • consultantType: Array of String with the available consultant types
  • appointmentType: Array of String with the available appointment types
  • time: Date ISO 8601 the time of the appointment
POST /appointments
Expects an object in the request's body with the following information:
  • userId: Int The user's ID that this appointment is for.
  • dateTime: The user's selected time slot as a Date ISO 8601.
  • notes: String Any notes the user added when booking. note: not required, can be null.
  • type: String The type of the appointment like GP appointment or Physio appointment.
The endpoint responds with a 200 status on success.
Getting Started
We recommend using NVM for managing node versions on your machine.
brew install nvm

...and installing the required node version with the following command:
nvm install

This repo is using Yarn as it's package manager.
brew install yarn

Installing packages:
yarn install

yarn start

About
No description, website, or topics provided.
Resources
Readme
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - alex321/web-interview · GitHub
Skip to content
BranchesTags
Repository files navigation
Babylon Web technical recruitment test
Thanks for taking the time to complete our frontend coding test! You can start with forking this repository and off you go.
Good luck!
What we are looking for
We'd like you to build an application that:
  • has a sensible and maintainable structure
  • is well tested
  • is accessible
  • looks like the designs provided (it doesn't have to be "pixel perfect")
  • mobile first and responsive
  • clean and understandable Git history
It's helpful for us if you include some notes to explain the decisions you make.
Instructions
We'd like you to use React. We have provided a skeleton for the React application and included SASS for styling. We have also provided some useful constants in constants.scss. Feel free to add any additional libraries which you think are needed for the task.
We included some initial code in App.js that we would like you to refactor.
We have also included a mock API which is documented below.
We'd like you to build one page. We've provided the design. On this page the user can:
  • Filter appointments by their type (GP, therapist, specialist)
  • Select date and time
  • Select appointment type (audio, video)
  • Book an appointment
New appointment page
Design
New Appointment Design
Data
You will need to use 3 API's for this page.
GET /users/1
Returns a user object with the following info:
  • firstName: String of the user's first name.
  • lastName: String of the user's last name.
  • avatar: String Base64 representation of the user's avatar image.
  • dateOfBirth: Date The user's Date of Birth.
GET /availableSlots
Returns:
  • Array of available appointments
Each available appointment is an object which contains
  • id: Int the appointment id
  • consultantType: Array of String with the available consultant types
  • appointmentType: Array of String with the available appointment types
  • time: Date ISO 8601 the time of the appointment
POST /appointments
Expects an object in the request's body with the following information:
  • userId: Int The user's ID that this appointment is for.
  • dateTime: The user's selected time slot as a Date ISO 8601.
  • notes: String Any notes the user added when booking. note: not required, can be null.
  • type: String The type of the appointment like GP appointment or Physio appointment.
The endpoint responds with a 200 status on success.
Getting Started
We recommend using NVM for managing node versions on your machine.
brew install nvm

...and installing the required node version with the following command:
nvm install

This repo is using Yarn as it's package manager.
brew install yarn

Installing packages:
yarn install

yarn start

About
No description, website, or topics provided.
Resources
Readme
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - alex321/web-interview · GitHub
Skip to content
BranchesTags
Repository files navigation
Babylon Web technical recruitment test
Thanks for taking the time to complete our frontend coding test! You can start with forking this repository and off you go.
Good luck!
What we are looking for
We'd like you to build an application that:
  • has a sensible and maintainable structure
  • is well tested
  • is accessible
  • looks like the designs provided (it doesn't have to be "pixel perfect")
  • mobile first and responsive
  • clean and understandable Git history
It's helpful for us if you include some notes to explain the decisions you make.
Instructions
We'd like you to use React. We have provided a skeleton for the React application and included SASS for styling. We have also provided some useful constants in constants.scss. Feel free to add any additional libraries which you think are needed for the task.
We included some initial code in App.js that we would like you to refactor.
We have also included a mock API which is documented below.
We'd like you to build one page. We've provided the design. On this page the user can:
  • Filter appointments by their type (GP, therapist, specialist)
  • Select date and time
  • Select appointment type (audio, video)
  • Book an appointment
New appointment page
Design
New Appointment Design
Data
You will need to use 3 API's for this page.
GET /users/1
Returns a user object with the following info:
  • firstName: String of the user's first name.
  • lastName: String of the user's last name.
  • avatar: String Base64 representation of the user's avatar image.
  • dateOfBirth: Date The user's Date of Birth.
GET /availableSlots
Returns:
  • Array of available appointments
Each available appointment is an object which contains
  • id: Int the appointment id
  • consultantType: Array of String with the available consultant types
  • appointmentType: Array of String with the available appointment types
  • time: Date ISO 8601 the time of the appointment
POST /appointments
Expects an object in the request's body with the following information:
  • userId: Int The user's ID that this appointment is for.
  • dateTime: The user's selected time slot as a Date ISO 8601.
  • notes: String Any notes the user added when booking. note: not required, can be null.
  • type: String The type of the appointment like GP appointment or Physio appointment.
The endpoint responds with a 200 status on success.
Getting Started
We recommend using NVM for managing node versions on your machine.
brew install nvm

...and installing the required node version with the following command:
nvm install

This repo is using Yarn as it's package manager.
brew install yarn

Installing packages:
yarn install

yarn start

About
No description, website, or topics provided.
Resources
Readme
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
GitHub - alex321/web-interview · GitHub
Skip to content
BranchesTags
Repository files navigation
Babylon Web technical recruitment test
Thanks for taking the time to complete our frontend coding test! You can start with forking this repository and off you go.
Good luck!
What we are looking for
We'd like you to build an application that:
  • has a sensible and maintainable structure
  • is well tested
  • is accessible
  • looks like the designs provided (it doesn't have to be "pixel perfect")
  • mobile first and responsive
  • clean and understandable Git history
It's helpful for us if you include some notes to explain the decisions you make.
Instructions
We'd like you to use React. We have provided a skeleton for the React application and included SASS for styling. We have also provided some useful constants in constants.scss. Feel free to add any additional libraries which you think are needed for the task.
We included some initial code in App.js that we would like you to refactor.
We have also included a mock API which is documented below.
We'd like you to build one page. We've provided the design. On this page the user can:
  • Filter appointments by their type (GP, therapist, specialist)
  • Select date and time
  • Select appointment type (audio, video)
  • Book an appointment
New appointment page
Design
New Appointment Design
Data
You will need to use 3 API's for this page.
GET /users/1
Returns a user object with the following info:
  • firstName: String of the user's first name.
  • lastName: String of the user's last name.
  • avatar: String Base64 representation of the user's avatar image.
  • dateOfBirth: Date The user's Date of Birth.
GET /availableSlots
Returns:
  • Array of available appointments
Each available appointment is an object which contains
  • id: Int the appointment id
  • consultantType: Array of String with the available consultant types
  • appointmentType: Array of String with the available appointment types
  • time: Date ISO 8601 the time of the appointment
POST /appointments
Expects an object in the request's body with the following information:
  • userId: Int The user's ID that this appointment is for.
  • dateTime: The user's selected time slot as a Date ISO 8601.
  • notes: String Any notes the user added when booking. note: not required, can be null.
  • type: String The type of the appointment like GP appointment or Physio appointment.
The endpoint responds with a 200 status on success.
Getting Started
We recommend using NVM for managing node versions on your machine.
brew install nvm

...and installing the required node version with the following command:
nvm install

This repo is using Yarn as it's package manager.
brew install yarn

Installing packages:
yarn install

yarn start

About
No description, website, or topics provided.
Resources
Readme
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - alex321/web-interview · GitHub
Skip to content
BranchesTags
Repository files navigation
Babylon Web technical recruitment test
Thanks for taking the time to complete our frontend coding test! You can start with forking this repository and off you go.
Good luck!
What we are looking for
We'd like you to build an application that:
  • has a sensible and maintainable structure
  • is well tested
  • is accessible
  • looks like the designs provided (it doesn't have to be "pixel perfect")
  • mobile first and responsive
  • clean and understandable Git history
It's helpful for us if you include some notes to explain the decisions you make.
Instructions
We'd like you to use React. We have provided a skeleton for the React application and included SASS for styling. We have also provided some useful constants in constants.scss. Feel free to add any additional libraries which you think are needed for the task.
We included some initial code in App.js that we would like you to refactor.
We have also included a mock API which is documented below.
We'd like you to build one page. We've provided the design. On this page the user can:
  • Filter appointments by their type (GP, therapist, specialist)
  • Select date and time
  • Select appointment type (audio, video)
  • Book an appointment
New appointment page
Design
New Appointment Design
Data
You will need to use 3 API's for this page.
GET /users/1
Returns a user object with the following info:
  • firstName: String of the user's first name.
  • lastName: String of the user's last name.
  • avatar: String Base64 representation of the user's avatar image.
  • dateOfBirth: Date The user's Date of Birth.
GET /availableSlots
Returns:
  • Array of available appointments
Each available appointment is an object which contains
  • id: Int the appointment id
  • consultantType: Array of String with the available consultant types
  • appointmentType: Array of String with the available appointment types
  • time: Date ISO 8601 the time of the appointment
POST /appointments
Expects an object in the request's body with the following information:
  • userId: Int The user's ID that this appointment is for.
  • dateTime: The user's selected time slot as a Date ISO 8601.
  • notes: String Any notes the user added when booking. note: not required, can be null.
  • type: String The type of the appointment like GP appointment or Physio appointment.
The endpoint responds with a 200 status on success.
Getting Started
We recommend using NVM for managing node versions on your machine.
brew install nvm

...and installing the required node version with the following command:
nvm install

This repo is using Yarn as it's package manager.
brew install yarn

Installing packages:
yarn install

yarn start

About
No description, website, or topics provided.
Resources
Readme
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - alex321/web-interview · GitHub
Skip to content
BranchesTags
Repository files navigation
Babylon Web technical recruitment test
Thanks for taking the time to complete our frontend coding test! You can start with forking this repository and off you go.
Good luck!
What we are looking for
We'd like you to build an application that:
  • has a sensible and maintainable structure
  • is well tested
  • is accessible
  • looks like the designs provided (it doesn't have to be "pixel perfect")
  • mobile first and responsive
  • clean and understandable Git history
It's helpful for us if you include some notes to explain the decisions you make.
Instructions
We'd like you to use React. We have provided a skeleton for the React application and included SASS for styling. We have also provided some useful constants in constants.scss. Feel free to add any additional libraries which you think are needed for the task.
We included some initial code in App.js that we would like you to refactor.
We have also included a mock API which is documented below.
We'd like you to build one page. We've provided the design. On this page the user can:
  • Filter appointments by their type (GP, therapist, specialist)
  • Select date and time
  • Select appointment type (audio, video)
  • Book an appointment
New appointment page
Design
New Appointment Design
Data
You will need to use 3 API's for this page.
GET /users/1
Returns a user object with the following info:
  • firstName: String of the user's first name.
  • lastName: String of the user's last name.
  • avatar: String Base64 representation of the user's avatar image.
  • dateOfBirth: Date The user's Date of Birth.
GET /availableSlots
Returns:
  • Array of available appointments
Each available appointment is an object which contains
  • id: Int the appointment id
  • consultantType: Array of String with the available consultant types
  • appointmentType: Array of String with the available appointment types
  • time: Date ISO 8601 the time of the appointment
POST /appointments
Expects an object in the request's body with the following information:
  • userId: Int The user's ID that this appointment is for.
  • dateTime: The user's selected time slot as a Date ISO 8601.
  • notes: String Any notes the user added when booking. note: not required, can be null.
  • type: String The type of the appointment like GP appointment or Physio appointment.
The endpoint responds with a 200 status on success.
Getting Started
We recommend using NVM for managing node versions on your machine.
brew install nvm

...and installing the required node version with the following command:
nvm install

This repo is using Yarn as it's package manager.
brew install yarn

Installing packages:
yarn install

yarn start

About
No description, website, or topics provided.
Resources
Readme
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
GitHub - alex321/web-interview · GitHub
Skip to content
BranchesTags
Repository files navigation
Babylon Web technical recruitment test
Thanks for taking the time to complete our frontend coding test! You can start with forking this repository and off you go.
Good luck!
What we are looking for
We'd like you to build an application that:
  • has a sensible and maintainable structure
  • is well tested
  • is accessible
  • looks like the designs provided (it doesn't have to be "pixel perfect")
  • mobile first and responsive
  • clean and understandable Git history
It's helpful for us if you include some notes to explain the decisions you make.
Instructions
We'd like you to use React. We have provided a skeleton for the React application and included SASS for styling. We have also provided some useful constants in constants.scss. Feel free to add any additional libraries which you think are needed for the task.
We included some initial code in App.js that we would like you to refactor.
We have also included a mock API which is documented below.
We'd like you to build one page. We've provided the design. On this page the user can:
  • Filter appointments by their type (GP, therapist, specialist)
  • Select date and time
  • Select appointment type (audio, video)
  • Book an appointment
New appointment page
Design
New Appointment Design
Data
You will need to use 3 API's for this page.
GET /users/1
Returns a user object with the following info:
  • firstName: String of the user's first name.
  • lastName: String of the user's last name.
  • avatar: String Base64 representation of the user's avatar image.
  • dateOfBirth: Date The user's Date of Birth.
GET /availableSlots
Returns:
  • Array of available appointments
Each available appointment is an object which contains
  • id: Int the appointment id
  • consultantType: Array of String with the available consultant types
  • appointmentType: Array of String with the available appointment types
  • time: Date ISO 8601 the time of the appointment
POST /appointments
Expects an object in the request's body with the following information:
  • userId: Int The user's ID that this appointment is for.
  • dateTime: The user's selected time slot as a Date ISO 8601.
  • notes: String Any notes the user added when booking. note: not required, can be null.
  • type: String The type of the appointment like GP appointment or Physio appointment.
The endpoint responds with a 200 status on success.
Getting Started
We recommend using NVM for managing node versions on your machine.
brew install nvm

...and installing the required node version with the following command:
nvm install

This repo is using Yarn as it's package manager.
brew install yarn

Installing packages:
yarn install

yarn start

About
No description, website, or topics provided.
Resources
Readme
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages