[FE] - NGUYEN NHAT VUONG (Cole - nguyennhatvuongg@gmail.com)

src/problem1/p1.js

@@ -0,0 +1,67 @@
+// ==================== Task ====================
+// Provide 3 unique implementations of the following function in JavaScript.
+// Input: n - any integer
+// Output: return - summation to n, i.e. sum_to_n(5) === 1 + 2 + 3 + 4 + 5 === 15.
+
+
+// Idea: Iterative approach. Uses a loop to add each number from 1 to n to an accumulator.
+// Complexity: Time O(n), Space O(1)
+var sum_to_n_a = function (n) {
+    let sum = 0;
+    for (var i = 1; i <= n; i++) {
+        sum += i;
+    }
+    return sum;
+};
+
+// Idea: Recursive approach. The sum to n is n plus the sum to n-1.
+// Complexity: Time O(n), Space O(n) (due to call stack overhead)
+var sum_to_n_b = function (n) {
+    if (n < 1) {
+        return 0;
+    }
+    return n + sum_to_n_b(n - 1);
+};
+
+// Idea: Mathematical formula (Arithmetic progression sum). Uses the formula n * (n + 1) / 2.
+// Complexity: Time O(1), Space O(1)
+var sum_to_n_c = function (n) {
+    return n * (n + 1) / 2;
+};
+
+function test() {
+    const testCases = [
+        { input: 0, expected: 0 },
+        { input: 1, expected: 1 },
+        { input: 2, expected: 3 },
+        { input: 5, expected: 15 },
+        { input: 10, expected: 55 },
+        { input: 42, expected: 903 },
+        { input: 50, expected: 1275 },
+        { input: 100, expected: 5050 },
+        { input: 500, expected: 125250 },
+        { input: 1000, expected: 500500 }
+    ];
+
+    console.log("Running 10 test cases for all 3 implementations:\n");
+
+    testCases.forEach(({ input: n, expected }, index) => {
+        const resA = sum_to_n_a(n);
+        const resB = sum_to_n_b(n);
+        const resC = sum_to_n_c(n);
+
+        const passedA = resA === expected;
+        const passedB = resB === expected;
+        const passedC = resC === expected;
+        const allPassed = passedA && passedB && passedC;
+
+        console.log(`Test ${index + 1} (input number 'n' = ${n}, expected result = ${expected}):`);
+        console.log(`  sum_to_n_a: ${resA} (${passedA ? "PASS" : "FAIL"})`);
+        console.log(`  sum_to_n_b: ${resB} (${passedB ? "PASS" : "FAIL"})`);
+        console.log(`  sum_to_n_c: ${resC} (${passedC ? "PASS" : "FAIL"})`);
+        console.log(`  Overall result status: ${allPassed ? "PASS" : "FAIL"}`);
+        console.log("-----------------------");
+    });
+}
+
+test();

src/problem2/fancy-form/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

src/problem2/fancy-form/.prettierrc

@@ -0,0 +1,10 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "printWidth": 100,
+  "bracketSpacing": true,
+  "arrowParens": "always",
+  "endOfLine": "auto"
+}

src/problem2/fancy-form/README.md

@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

src/problem2/fancy-form/components.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "base-nova",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "menuColor": "default",
+  "menuAccent": "subtle",
+  "registries": {}
+}

src/problem2/fancy-form/eslint.config.js

@@ -0,0 +1,36 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
+import eslintPluginPrettier from 'eslint-plugin-prettier';
+import eslintConfigPrettier from 'eslint-config-prettier';
+import { defineConfig, globalIgnores } from 'eslint/config';
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      globals: globals.browser,
+    },
+    plugins: {
+      prettier: eslintPluginPrettier,
+    },
+    rules: {
+      ...eslintConfigPrettier.rules,
+      'prettier/prettier': 'warn',
+      '@typescript-eslint/no-unused-vars': [
+        'warn',
+        { argsIgnorePattern: '^_', varsIgnorePattern: '^_' },
+      ],
+      '@typescript-eslint/consistent-type-imports': 'warn',
+    },
+  },
+]);

src/problem2/fancy-form/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Swap tokens easily with the best exchange rates. A premium decentralized exchange interface." />
+    <title>Fancy Form — Token Swap</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>