+ 
+
+
+
+
diff --git a/exercise1/src/components/CardList.vue b/exercise1/src/components/CardList.vue
new file mode 100644
index 000000000..d846d540e
--- /dev/null
+++ b/exercise1/src/components/CardList.vue
@@ -0,0 +1,49 @@
+
+
+
+
+ {{ details }}
+ +
+
+
+
+
diff --git a/exercise1/src/components/HeaderHero.vue b/exercise1/src/components/HeaderHero.vue
new file mode 100644
index 000000000..7100f127e
--- /dev/null
+++ b/exercise1/src/components/HeaderHero.vue
@@ -0,0 +1,53 @@
+
+
+
+
+
+
diff --git a/exercise1/src/main.js b/exercise1/src/main.js
new file mode 100644
index 000000000..53919d046
--- /dev/null
+++ b/exercise1/src/main.js
@@ -0,0 +1,6 @@
+import { createApp } from "vue";
+import App from "./App.vue";
+
+import "./assets/main.css";
+
+createApp(App).mount("#app");
diff --git a/exercise1/vite.config.js b/exercise1/vite.config.js
new file mode 100644
index 000000000..b20d94849
--- /dev/null
+++ b/exercise1/vite.config.js
@@ -0,0 +1,15 @@
+import { fileURLToPath, URL } from "node:url";
+
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import vueJsx from "@vitejs/plugin-vue-jsx";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [vue(), vueJsx()],
+ resolve: {
+ alias: {
+ "@": fileURLToPath(new URL("./src", import.meta.url)),
+ },
+ },
+});
diff --git a/exercise2/.eslintrc.cjs b/exercise2/.eslintrc.cjs
new file mode 100644
index 000000000..76fd0e48a
--- /dev/null
+++ b/exercise2/.eslintrc.cjs
@@ -0,0 +1,11 @@
+/* eslint-env node */
+require("@rushstack/eslint-patch/modern-module-resolution");
+
+module.exports = {
+ "root": true,
+ "extends": [
+ "plugin:vue/vue3-essential",
+ "eslint:recommended",
+ "@vue/eslint-config-prettier"
+ ]
+}
diff --git a/exercise2/.gitignore b/exercise2/.gitignore
new file mode 100644
index 000000000..38adffa64
--- /dev/null
+++ b/exercise2/.gitignore
@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/exercise2/.prettierignore b/exercise2/.prettierignore
new file mode 100644
index 000000000..58d06c368
--- /dev/null
+++ b/exercise2/.prettierignore
@@ -0,0 +1,4 @@
+.cache
+package.json
+package-lock.json
+public
diff --git a/exercise2/.prettierrc b/exercise2/.prettierrc
new file mode 100644
index 000000000..29fd18b7e
--- /dev/null
+++ b/exercise2/.prettierrc
@@ -0,0 +1,7 @@
+{
+ "endOfLine": "lf",
+ "semi": true,
+ "singleQuote": false,
+ "tabWidth": 2,
+ "trailingComma": "es5"
+}
diff --git a/exercise2/.vscode/extensions.json b/exercise2/.vscode/extensions.json
new file mode 100644
index 000000000..c0a6e5a48
--- /dev/null
+++ b/exercise2/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+ "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+}
diff --git a/exercise2/README.md b/exercise2/README.md
new file mode 100644
index 000000000..9224ed485
--- /dev/null
+++ b/exercise2/README.md
@@ -0,0 +1,35 @@
+# exercise2
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Compile and Minify for Production
+
+```sh
+npm run build
+```
+
+### Lint with [ESLint](https://eslint.org/)
+
+```sh
+npm run lint
+```
diff --git a/exercise2/index.html b/exercise2/index.html
new file mode 100644
index 000000000..030a6ff51
--- /dev/null
+++ b/exercise2/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+ Hello Developer!
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit +
+
+
+
+
+
diff --git a/exercise2/src/assets/base.css b/exercise2/src/assets/base.css
new file mode 100644
index 000000000..a29b1c33b
--- /dev/null
+++ b/exercise2/src/assets/base.css
@@ -0,0 +1,74 @@
+/* color palette from
+
+
+
+
diff --git a/exercise2/src/main.js b/exercise2/src/main.js
new file mode 100644
index 000000000..90e6400b4
--- /dev/null
+++ b/exercise2/src/main.js
@@ -0,0 +1,6 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+import './assets/main.css'
+
+createApp(App).mount('#app')
diff --git a/exercise2/vite.config.js b/exercise2/vite.config.js
new file mode 100644
index 000000000..2fb21e917
--- /dev/null
+++ b/exercise2/vite.config.js
@@ -0,0 +1,15 @@
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [vue(), vueJsx()],
+ resolve: {
+ alias: {
+ '@': fileURLToPath(new URL('./src', import.meta.url))
+ }
+ }
+})
diff --git a/readme.md b/readme.md
index 6dd3ffb7c..e4dbc3e4f 100644
--- a/readme.md
+++ b/readme.md
@@ -1,40 +1,54 @@
-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).
+Thank you for this exercises, I really had fun doing this, I don't really have background in VueJS but I decided to use the
+library as I wanted to learn about it anyway. So here's my answer for the exercises 1 and 2. Had a bit of trouble and realization when I was building it and a lot of wow moments as well. Anyway had a fun doing this.
-Exercise 1
----
-Build a responsive page based on the designs.
+## Exercise 1
-##### Requirements
-1. Match the designs exactly.
-2. Needs to be responsive.
+In the root of `/exercise1` run
-##### Designs
-* exercise1-desktop.png
-* exercise1-mobile.png
+```
+npm install
+```
+
+to install Vue dependencies and other library
+
+To run application locally run
+
+```
+npm run dev
+```
+
+then go to http://127.0.0.1:5173/
##### Assets
-* Desktop banner - http://via.placeholder.com/1920x650
-* Mobile banner - http://via.placeholder.com/600x600
-* Content images - http://via.placeholder.com/400x300
-Exercise 2
----
-Read the `data.json` file and display the data as tabs on desktop and an accordion on mobile.
+- provided links for the assests are not working anymore, and I'm having an error page when visiting the url, so I decided to get in around that internet for similar image / placeholder. Hope that's okay.
+
+## Exercise 2
+
+In the root of `/exercise2` run
+
+```
+npm install
+```
-##### 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.
+to install Vue dependencies and other library
+
+To run application locally run
+
+```
+npm run dev
+```
+
+then go to http://127.0.0.1:5173/
###### 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
----
+- Improve the user experience with meaningful animations/transitions.
+- Design and styling.
+- Explain why the result of `('b' + 'a' + + 'a' + 'a').toLowerCase()` is `banana`.
+
+Upon checking this here `'a' + + 'a'` it results to `Nan` and that's why end result is `banana` 🍌
+
+## Submission
+
We recommend submitting your completed assessment as a forked repository. Please replace README content with instructions and relevant documentation.
+
+
+
+
+ {{ data.title }}
+
+
+
+
+
+
+
+