前言

介绍下freecodecamp组织,以”帮助人们免费学习编程”为使命,创建了大量免费的编程教程,包括交互式课程、视频课程、文章等。看完HTML、CSS、JS理论知识后,我已经等不及想在freecodecamp实战啦!每次课题挑战成功,我会截图保存下来,总结自己遇到难题

如果题目太难或不理解,抄作业总会吧?

第一篇 响应式网页设计认证

1.Tribute Page

这是一个链接,点我查看致敬页
致敬页

2.Survey Form

这是一个链接,点我查看调查表单
调查表单

3.Product Landing Page

这是一个链接,点我查看产品登入页
产品登入页

4.Technical Documentation Page

这是一个链接,点我查看技术文档页
技术文档页

5.Personal Portfolio

这是一个链接,点我查看个人作品集展示页
个人作品集展示页

第二篇 JavaScript算法和数据结构

1. 回文检查器

1
2
3
4
5
6
7
8
9
10
11
12
function palindrome(str) {
// 除了英文数字,过滤其他符号
let a = str.match(/[a-zA-Z0-9]/g).join('').toLowerCase();

// 字符串取反
let b = a.split('').reverse().join('');

// 判断回文字符串
return a === b;
}

palindrome("eye");

2. 罗马数字转换器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function convertToRoman(num) {
const map = new Map([['M',1000],['CM',900],['D',500],['CD',400],['C',100],['XC',90],['L',50],['XL',40],['X',10],['IX',9],['V',5],['IV',4],['I',1]]);
let result = '';
for (let v of map) {
const temp = parseInt(num/v[1],0);
if (temp > 0) {
for (let i = 0; i < temp; ++i) {
result += v[0]
}
}
num = num % v[1]
}
return result
}

convertToRoman(36);

3. 凯撒密码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
function rot13(str) {
// 翻译表
let ObjRot13 = {
A: 'N',
B: 'O',
C: 'P',
D: 'Q',
E: 'R',
F: 'S',
G: 'T',
H: 'U',
I: 'V',
J: 'W',
K: 'X',
L: 'Y',
M: 'Z',
N: 'A',
O: 'B',
P: 'C',
Q: 'D',
R: 'E',
S: 'F',
T: 'G',
U: 'H',
V: 'I',
W: 'J',
X: 'K',
Y: 'L',
Z: 'M',
};
// 用数组接收翻译内容
let translate = [];
for (let i = 0; i < str.length; i++) {
if (/[A-Z]/g.test(str[i])) {
translate.push(ObjRot13[str[i]]);
} else {
translate.push(str[i]);
}
}
// 返回翻译数组转成字符串
return translate.join('');
}


rot13("SERR PBQR PNZC");

4. 电话号码检查器

1
2
3
4
5
6
7
function telephoneCheck(str) {
let reg = /^1\s?\(\d{3}\).?\d{3}.?\d{4}|^1\s\d{3}[\(|-]\d{3}[-]\d{4}|^\d{10}$|\d{3}\s\d{3}\s\d{4}|^\(\d{3}\)\d{3}-\d{4}|^\d{3}-\d{3}-\d{4}$/
const bol = reg.test(str);
return bol
}

telephoneCheck("555-555-5555");

5. 计算找零

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
function checkCashRegister(price, cash, cid) {
let change = [];

let unit = {
"ONE HUNDRED": 100,
TWENTY: 20,
TEN: 10,
FIVE: 5,
ONE: 1,
QUARTER: 0.25,
DIME: 0.1,
NICKEL: 0.05,
PENNY: 0.01,
}

let cidUnitCount = getUnitCount(cid, unit);
let remain = cash - price, isSuit = true;
for (let key in unit) {
if (unit[key] <= remain) {
const unitPrice = unit[key];
const unitTotalCount = cidUnitCount[key];
let curTotalPrice = 0, curCount = 0;
while (curTotalPrice < remain && curCount < unitTotalCount) {
curCount++;
curTotalPrice = curCount * unitPrice;
}
if (curTotalPrice > remain) {
curCount--;
curTotalPrice = curCount * unitPrice;
}
if (curCount !== 0) {
change.push([key,curTotalPrice ]);
remain = (remain - curTotalPrice).toFixed(2);
}
if (curCount !== unitTotalCount) {
isSuit = false;
}
}
}
let result;
if (remain == 0) {
if (isSuit) {
result = { status: "CLOSED", change: cid };
} else {
result = { status: "OPEN", change: change };
}
} else {
result = { status: "INSUFFICIENT_FUNDS", change: [] };
}
return result;
}

function getUnitCount(arr, unit) {
let result = {};
arr.forEach(item => {
const [key, value] = item;
result[key] = Math.round(value / unit[key]);
})
return result;
}

checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]]);

checkCashRegister(3.26, 100, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])

checkCashRegister(19.5, 20, [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])

checkCashRegister(19.5, 20, [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 1], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])

checkCashRegister(19.5, 20, [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])