From 649c690fd48a373f55483cb74ba42e8387d25e8f Mon Sep 17 00:00:00 2001 From: Mark Ferolino Date: Sun, 7 Jan 2024 03:43:48 +0800 Subject: [PATCH 1/5] Adding submodules for the assessments --- exercise-one | 1 + 1 file changed, 1 insertion(+) create mode 160000 exercise-one diff --git a/exercise-one b/exercise-one new file mode 160000 index 000000000..89877a78d --- /dev/null +++ b/exercise-one @@ -0,0 +1 @@ +Subproject commit 89877a78dfc40e8df76f8dadb27a397b73230402 From 5d2480f5ec5b785e99c5a88d0951f0a9e1f44d42 Mon Sep 17 00:00:00 2001 From: Mark Ferolino Date: Sun, 7 Jan 2024 04:40:42 +0800 Subject: [PATCH 2/5] Added Exercise 2 with readme updates --- exercise-two | 1 + readme.md | 110 ++++++++++++++++++++++++++++++++------------------- 2 files changed, 71 insertions(+), 40 deletions(-) create mode 160000 exercise-two diff --git a/exercise-two b/exercise-two new file mode 160000 index 000000000..05c347cb5 --- /dev/null +++ b/exercise-two @@ -0,0 +1 @@ +Subproject commit 05c347cb5322043f1a04a7a402a79219224a92e4 diff --git a/readme.md b/readme.md index 72b342846..028e43674 100644 --- a/readme.md +++ b/readme.md @@ -1,40 +1,70 @@ -Introduction ---- -Thanks for taking the time to complete this frontend technical assessment. We will be focusing on software quality (scalability, readability, maintainability, etc.) and your eye for detail. You may include any libraries, but Vue.js is preferred and jQuery is not recommended. Along with following best practices, bonus points for following our [coding guidelines](https://github.com/mindarc/frontend-assessment/wiki/Coding-guidelines). - -Exercise 1 ---- -Build a responsive page based on the designs. - -##### Requirements -1. Match the designs exactly. -2. Needs to be responsive. - -##### Designs -* exercise1-desktop.png -* exercise1-mobile.png - -##### Assets -* Desktop banner - https://via.placeholder.com/1920x650 -* Mobile banner - https://via.placeholder.com/600x600 -* Content images - https://via.placeholder.com/400x300 - -Exercise 2 ---- -Read the `data.json` file and display the data as tabs on desktop and an accordion on mobile. - -##### Requirements -1. Display data in tabs on desktop. -2. Display data in an accordion on mobile. -3. Only 1 accordion/tab should be open at a time. -4. Open the first accordion/tab on load. -5. If the open accordion is selected, close it. - -###### Bonus points -* Improve the user experience with meaningful animations/transitions. -* Design and styling. -* Explain why the result of `('b' + 'a' + + 'a' + 'a').toLowerCase()` is `banana`. - -Submission ---- -We recommend submitting your completed assessment as a forked repository. Please replace README content with instructions and relevant documentation. +Mark Adolf Ferolino Frontend Assessment +# Vue.js Bootstrap 5 + +## Description +This project is an assessment for demonstrating proficiency in Vue.js and Bootstrap 5. + +## Table of Contents +- [Exercise 1 Installation] +- [Exercise 2 Installation] +- [Usage] + +## Features +- [List the main features or functionalities implemented in the assessment] + + +## Exercise 1 Installation +1. Clone the repository: + + ```bash + git clone https://github.com/kramferolino/frontend-assessment + ``` + +2. Navigate to the project directory: + + ```bash + cd /frontend-assessment/exercise-one + ``` + +3. Install dependencies: + + ```bash + npm install + ``` + +## Usage +Run the project using: + + ```bash + npm run serve + ``` + +## Exercise 2 Installation +1. Clone the repository: + + ```bash + git clone https://github.com/kramferolino/frontend-assessment + ``` + +2. Navigate to the project directory: + + ```bash + cd /frontend-assessment/exercise-two + ``` + +3. Install dependencies: + + ```bash + npm install + ``` + +## Usage +Run the Json Server first before running npm run serve + + ```bash + json-server --watch data/data.json + ``` + + ```bash + npm run serve + ``` \ No newline at end of file From 64c89593d1ed761840735b7b716f8e34432b1f12 Mon Sep 17 00:00:00 2001 From: Mark Ferolino Date: Sun, 7 Jan 2024 04:58:33 +0800 Subject: [PATCH 3/5] Added the answer to the Question --- readme.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/readme.md b/readme.md index 028e43674..0798b6d3c 100644 --- a/readme.md +++ b/readme.md @@ -67,4 +67,7 @@ Run the Json Server first before running npm run serve ```bash npm run serve - ``` \ No newline at end of file + ``` + +## Answer to Bonus Question +The expression ('b' + 'a' + + 'a' + 'a').toLowerCase() when evaluated follows a sequence: first, concatenating the strings 'b' and 'a' that results in 'ba'. Then, converting the string 'a' to a number by using the unary plus (+) resulting to a NaN (Not-a-Number). This NaN value is changed into a string when concatenated with 'ba', leading to 'baNaN'. Finally, adding 'a' to 'baNaN' resulting to 'baNaNa'. Calling .toLowerCase() on this string converts all characters to lowercase, showing the value as 'banana'. From adb4574ca44c1f9049d699243697d38dbb393dd9 Mon Sep 17 00:00:00 2001 From: Mark Ferolino Date: Sun, 7 Jan 2024 05:25:09 +0800 Subject: [PATCH 4/5] Final Commit --- exercise-two | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercise-two b/exercise-two index 05c347cb5..d66e28ab4 160000 --- a/exercise-two +++ b/exercise-two @@ -1 +1 @@ -Subproject commit 05c347cb5322043f1a04a7a402a79219224a92e4 +Subproject commit d66e28ab4a825bf831217f22c9d10b5d296eb725 From e089dec17765521d3a820b4be7521cb5bc84e420 Mon Sep 17 00:00:00 2001 From: Mark Ferolino <32918256+kramferolino@users.noreply.github.com> Date: Sun, 7 Jan 2024 11:00:17 +0800 Subject: [PATCH 5/5] Update readme.md --- readme.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/readme.md b/readme.md index 0798b6d3c..e4ace05a7 100644 --- a/readme.md +++ b/readme.md @@ -9,10 +9,6 @@ This project is an assessment for demonstrating proficiency in Vue.js and Bootst - [Exercise 2 Installation] - [Usage] -## Features -- [List the main features or functionalities implemented in the assessment] - - ## Exercise 1 Installation 1. Clone the repository: