diff --git a/.gitignore b/.gitignore index 434da8c..04c01ba 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,2 @@ -solutions - -.DS_Store \ No newline at end of file +node_modules/ +dist/ \ No newline at end of file diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..51bf1a1 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,162 @@ +{ + "name": "frontend-note", + "version": "1.0.0", + "lockfileVersion": 2, + "requires": true, + "packages": { + "": { + "name": "frontend-note", + "version": "1.0.0", + "license": "ISC", + "dependencies": { + "node-fetch": "^3.3.2", + "typescript": "^5.1.6" + } + }, + "node_modules/data-uri-to-buffer": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz", + "integrity": "sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==", + "engines": { + "node": ">= 12" + } + }, + "node_modules/fetch-blob": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.2.0.tgz", + "integrity": "sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/jimmywarting" + }, + { + "type": "paypal", + "url": "https://paypal.me/jimmywarting" + } + ], + "dependencies": { + "node-domexception": "^1.0.0", + "web-streams-polyfill": "^3.0.3" + }, + "engines": { + "node": "^12.20 || >= 14.13" + } + }, + "node_modules/formdata-polyfill": { + "version": "4.0.10", + "resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz", + "integrity": "sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==", + "dependencies": { + "fetch-blob": "^3.1.2" + }, + "engines": { + "node": ">=12.20.0" + } + }, + "node_modules/node-domexception": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz", + "integrity": "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/jimmywarting" + }, + { + "type": "github", + "url": "https://paypal.me/jimmywarting" + } + ], + "engines": { + "node": ">=10.5.0" + } + }, + "node_modules/node-fetch": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.3.2.tgz", + "integrity": "sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==", + "dependencies": { + "data-uri-to-buffer": "^4.0.0", + "fetch-blob": "^3.1.4", + "formdata-polyfill": "^4.0.10" + }, + "engines": { + "node": "^12.20.0 || ^14.13.1 || >=16.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/node-fetch" + } + }, + "node_modules/typescript": { + "version": "5.1.6", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.1.6.tgz", + "integrity": "sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==", + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=14.17" + } + }, + "node_modules/web-streams-polyfill": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.2.1.tgz", + "integrity": "sha512-e0MO3wdXWKrLbL0DgGnUV7WHVuw9OUvL4hjgnPkIeEvESk74gAITi5G606JtZPp39cd8HA9VQzCIvA49LpPN5Q==", + "engines": { + "node": ">= 8" + } + } + }, + "dependencies": { + "data-uri-to-buffer": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz", + "integrity": "sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==" + }, + "fetch-blob": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.2.0.tgz", + "integrity": "sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==", + "requires": { + "node-domexception": "^1.0.0", + "web-streams-polyfill": "^3.0.3" + } + }, + "formdata-polyfill": { + "version": "4.0.10", + "resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz", + "integrity": "sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==", + "requires": { + "fetch-blob": "^3.1.2" + } + }, + "node-domexception": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz", + "integrity": "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==" + }, + "node-fetch": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.3.2.tgz", + "integrity": "sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==", + "requires": { + "data-uri-to-buffer": "^4.0.0", + "fetch-blob": "^3.1.4", + "formdata-polyfill": "^4.0.10" + } + }, + "typescript": { + "version": "5.1.6", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.1.6.tgz", + "integrity": "sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==" + }, + "web-streams-polyfill": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.2.1.tgz", + "integrity": "sha512-e0MO3wdXWKrLbL0DgGnUV7WHVuw9OUvL4hjgnPkIeEvESk74gAITi5G606JtZPp39cd8HA9VQzCIvA49LpPN5Q==" + } + } +} diff --git a/package.json b/package.json index 9306cc6..32337d8 100644 --- a/package.json +++ b/package.json @@ -8,5 +8,9 @@ "exec": "node scripts/exec-script.js" }, "author": "ming", - "license": "ISC" -} + "license": "ISC", + "dependencies": { + "node-fetch": "^3.3.2", + "typescript": "^5.1.6" + } +} \ No newline at end of file diff --git a/problems/p1-data-types/main.js b/problems/p1-data-types/main.js index 801a9b5..30e5d8d 100644 --- a/problems/p1-data-types/main.js +++ b/problems/p1-data-types/main.js @@ -28,12 +28,13 @@ function swap(a, b) { var tmp = a; a = b; b = tmp; + return {a, b} } var x = 10; var y = 20; -swap(x, y); -console.log(x, y); +const vv = swap(x, y); +console.log(vv.a, vv.b); console.log('\n'); diff --git a/problems/p2-build-in-objects/main.js b/problems/p2-build-in-objects/main.js index 9c6c19a..915ee4a 100644 --- a/problems/p2-build-in-objects/main.js +++ b/problems/p2-build-in-objects/main.js @@ -62,6 +62,134 @@ console.log('quiz: '); // { source: 3, target: 4 }, // { source: 4, target: 5 }, // ]; -const array = [0, 1, 2, 3, 4, 5].reduce((result) => result, []); +const array = [0, 1, 2, 3, 4, 5].reduce((result, item, index, arr) => { + console.log(result, item, index); + if (index < arr.length - 1) { + result.push({ source: index, target: index + 1 }); + console.log(result) + } + return result; +}, []); + + + + + +// const array = [0, 1, 2, 3, 4, 5].reduce((result, item, index, arr) => { +// if (index < arr.length - 1) { +// console.log(arr[0]); +// result.push({ source: item, target: arr[item + 1] }); +// } +// return result; +// }, []); console.log('array: ', array); + +// const array2 = [0, 1, 2, 3, 4, 5].filter((item, index, arr) => { + +// return item % 2 == 0 +// }) + +// console.log('array2: ', array2); + +// const arr = [1, 2, 3, 4, 5]; +// const reduceArrNoInitValue = arr.reduce((accumulator, currentValue) => { +// console.log(accumulator, currentValue); +// return accumulator + currentValue +// }); +// console.log('reduceArrNoInitValue: ', reduceArrNoInitValue); + + +// const reduceArrInitValue = arr.reduce((accumulator, currentValue) => { +// console.log(accumulator, currentValue); +// return accumulator + currentValue +// }, 0); +// console.log('redureduceArrInitValueceArr: ', reduceArrInitValue); + +// const arrMerge = [['a', 'b'], ['c', 'd'], ['e', 'f']]; + +// const mergedArr = arrMerge.reduce((accumulator, currentValue) => { +// console.log(accumulator, currentValue); +// return accumulator.concat(currentValue) +// }) + +// console.log('mergedArr: ', mergedArr); + +// const arrCount = ['a', 'a', 'b', 'c', 'c', 'c', 'e']; +// const reduceArr = arrCount.reduce((accumulator, currentValue) => { +// console.log(accumulator, currentValue); +// if (accumulator[currentValue]) { +// console.log('before', accumulator[currentValue]); +// accumulator[currentValue]++; +// console.log('after', accumulator[currentValue]); +// } else { +// accumulator[currentValue] = 1; +// } +// return accumulator; +// }, {}); +// console.log(reduceArr); // { a: 2, b: 1, c: 3, e: 1 } + +// const average = arr => arr.reduce((p, c) => p + c, 0) / arr.length; +// const calArray = [115, 26, 99] +// const calArr = calArray.reduce((accumulator, currentValue, index, arr) => { +// console.log(accumulator, currentValue, index, arr); +// // implement reduce function to calculate min, max, average +// const result = { max: Math.max(...arr), min: Math.min(...arr), average: average(currentValue, arr) } +// console.log(result) +// return result +// }, {}) +// console.log(calArr); + + +const numbers = [1, 2, 3, 4, 5]; + +const result = numbers.reduce((acc, curr, index, array) => { + // Calculate the maximum + acc.max = Math.max(acc.max || curr, curr); + + // Calculate the minimum + acc.min = Math.min(acc.min || curr, curr); + + // Calculate the sum + acc.sum = (acc.sum || 0) + curr; + + + // Calculate the average + // only when last element is reached, then we can calculate the average + if (index === array.length - 1) { + acc.average = acc.sum / array.length; + } + // console.log(acc) + return acc; +}); + +console.log(result); + + + +// const numbers = [1, 2, 3, 4, 5]; + +// const result = numbers.reduce((acc, curr, index, array) => { +// if (index === 0) { +// // set init value +// acc.max = curr; +// acc.min = curr; +// acc.sum = curr; +// } else { +// // Calculate the maximum +// acc.max = Math.max(acc.max, curr); + +// // Calculate the minimum +// acc.min = Math.min(acc.min, curr); + +// // Calculate the sum +// acc.sum += curr; +// } +// // Calculate the average +// if (index === array.length - 1) { +// acc.average = acc.sum / array.length; +// } +// return acc; +// }, {}); + +// console.log(result); \ No newline at end of file diff --git a/problems/p3-function/main.js b/problems/p3-function/main.js index 74be371..5bd34aa 100644 --- a/problems/p3-function/main.js +++ b/problems/p3-function/main.js @@ -36,10 +36,15 @@ const arr = [1, 2, 3].map((item) => item * 2); */ function customMap(array, callback) { const newArray = []; + for (let i = 0; i < array.length; i++) { + newArray.push(callback(array[i])); + } return newArray; } -const newArr = customMap([1, 2, 3], (item) => item * 2); +const newArr = customMap([1, 2, 3], (item) => { + return item * 2 +}); console.log('arr: ', arr); console.log('newArr: ', newArr); @@ -52,17 +57,29 @@ function returnFunction() { }; }; -const curryFunc = (args) => (callback) => { - return callback(args[0], args[1]); +const curryFunc = (args) => { + return (callback) => { + return callback(args[0], args[1]); + } }; const curriedFunc = curryFunc([1, 2]); -let plus; -let minus; -let multiply; -let divide; - -console.log('plus: ', plus); -console.log('minus: ', minus); -console.log('multiply: ', multiply); -console.log('divide: ', divide); +let plus = (a, b) => { + return a+b +}; +let minus = (a,b) => { + return a-b +}; +let multiply = (a, b) => { + return a*b +}; +let divide = (a,b) => { + return a/b +}; + +console.log('plus: ', curryFunc([1,2])(plus)); +console.log('minus: ', curryFunc([1,2])(minus)); +console.log('multiply: ', curryFunc([1,2])(multiply)); +console.log('divide: ', curryFunc([1,2])(divide)); + + diff --git a/problems/p4-sync-and-async/main.js b/problems/p4-sync-and-async/main.js index 18ac9c1..d119120 100644 --- a/problems/p4-sync-and-async/main.js +++ b/problems/p4-sync-and-async/main.js @@ -1,6 +1,6 @@ import fs from 'fs'; import path from 'path'; - +import { promisify } from 'util' const dirname = path.resolve(); // blocking @@ -8,18 +8,18 @@ const file = fs.readFileSync(`${dirname}/reveal-slide.md`); // 在這邊等好 console.log('readFileSync: ', file); +const readFile = promisify(fs.readFile) // non-blocking -fs.readFile(`${dirname}/reveal-slide.md`, (err, data) => { +const result = readFile(`${dirname}/reveal-slide.md`, (err, data) => { if (err) { console.log(err) } else { console.log('readFile: ', data) + fs.readFile(`${dirname}/reveal-slide.md`,) } -}); - -const arr = []; -for (let i = 2; i <= 99999999; i+=2) { - arr.push(i); -} - -console.log(arr); \ No newline at end of file +}).then(data => { + console.log('promisify: ', data) + return data +}).catch(err => { + console.log(err) +}) diff --git a/problems/p6-fetch/main.js b/problems/p6-fetch/main.js index 8c6ce3f..f0693d0 100644 --- a/problems/p6-fetch/main.js +++ b/problems/p6-fetch/main.js @@ -5,7 +5,20 @@ * @url https://reqres.in/api/users * @return {Promise} The fetched data. */ +import fetch from "node-fetch"; + + async function fetchData() { + try{ + const response = await fetch('https://reqres.in/api/users'); + const data = await response.json(); + console.log(data); + return data + } catch (error) { + console.log(error); + } + } fetchData(); + diff --git a/problems/p7-create-table/main.js b/problems/p7-create-table/main.js index 4bd2dd9..dc82118 100644 --- a/problems/p7-create-table/main.js +++ b/problems/p7-create-table/main.js @@ -43,21 +43,48 @@ function createUsersTable(usersData) { }); header.appendChild(row); table.appendChild(header); + /**@description: append body */ const tbody = document.createElement('tbody'); + usersData.data.forEach((user) => { + console.log(user) + const row = document.createElement('tr'); + columns.forEach((column) => { + const cell = document.createElement('td'); + cell.style = 'border: 1px solid black;padding: 10px;'; + if (column.dataIndex === 'avatar') { + const img = column.render(user); + cell.appendChild(img); + } else { + cell.textContent = user[column.dataIndex]; + } + row.appendChild(cell); + }); + tbody.appendChild(row); + }) table.appendChild(tbody); /**@description: append table */ root.appendChild(table); + return } async function fetchUsersData() { + try{ + const response = await fetch('https://reqres.in/api/users'); + return await response.json(); + } catch (error) { + console.log(error); + } return []; } async function main() { + const usersData = await fetchUsersData(); + createUsersTable(usersData); + } main(); diff --git a/problems/p8-new-object-in-ts/main.ts b/problems/p8-new-object-in-ts/main.ts new file mode 100644 index 0000000..8259db1 --- /dev/null +++ b/problems/p8-new-object-in-ts/main.ts @@ -0,0 +1,32 @@ + + +// define person and create person1 +class Person { + name: string; + age: number; + + constructor(name: string, age: number) { + this.name = name; + this.age = age; + } + + sayHello() { + console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`); + } +} + +// 創建 Person 物件實例 +const person1 = new Person('John', 50); +person1.sayHello(); + + +// directly create person2 +const person2 = { + name: 'Jane', + age: 30, + sayHello() { + console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`); + } +}; + +person2.sayHello(); \ No newline at end of file diff --git a/problems/p9-test-compile-ts/main.ts b/problems/p9-test-compile-ts/main.ts new file mode 100644 index 0000000..8a9dab3 --- /dev/null +++ b/problems/p9-test-compile-ts/main.ts @@ -0,0 +1 @@ +console.log(`this is console.log printed by a js file compile from ts`); \ No newline at end of file diff --git a/scripts/exec-script.js b/scripts/exec-script.js index f99da12..5d9101a 100644 --- a/scripts/exec-script.js +++ b/scripts/exec-script.js @@ -2,6 +2,7 @@ import fs from 'fs'; import path, { dirname } from 'path'; import { exec } from 'child_process'; import { fileURLToPath } from 'url'; +import { promisify } from 'util' const __filename = fileURLToPath(import.meta.url); const __dirname = dirname(__filename); @@ -23,9 +24,32 @@ filenames.forEach(function (file) { const filePath = fileMap?.get(key); const targetPath = path.join(problemsPath, filePath); -exec(`node ${targetPath}/main.js`, (err, stdout, stderr) => { - if (err) { - console.log(stderr); +function execPromiseCommand(command) { + return new Promise((resolve, reject) => { + exec(command, (err, stdout, stderr) => { + if (err) { + console.log(stderr); + reject(); + } + console.log(stdout); + resolve(); + }); + }) +} + +async function main() { + try { + + if (filePath.endsWith('-ts')) { + await execPromiseCommand(`npx tsc`); + await execPromiseCommand(`node ./dist/${filePath}/main.js`); + } else { + await execPromiseCommand(`node ${targetPath}/main.js`); + } + + } catch (error) { + console.log(error); } - console.log(stdout); -}); \ No newline at end of file +} + +main(); diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..99d4b64 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,14 @@ +{ + "compilerOptions": { + "target": "esnext", // 或其他你要支援的 ECMAScript 版本 + "module": "esnext", // 或其他模組系統 (如 "es6", "amd" 等) + "outDir": "./dist", // 編譯輸出目錄 + "strict": true // 開啟嚴格模式檢查 (可選) + }, + "include": [ + "problems" + ], // TypeScript 檔案的來源目錄 + "exclude": [ + "node_modules" + ] // 排除編譯的目錄 +} \ No newline at end of file