Skip to content

Commit 202e146

Browse files
le-huy-jhle-huy-jh
committedMar 16, 2022
update
1 parent 2f51c7d commit 202e146

File tree

4 files changed

+345
-27
lines changed

4 files changed

+345
-27
lines changed
 

‎Exercise 3/index.html

+4-27
Original file line numberDiff line numberDiff line change
@@ -26,17 +26,15 @@
2626
},
2727
resolve3: (input) => {
2828
const obj = {};
29-
const createObj = (value) => {
30-
obj[value] = value;
31-
};
3229

33-
input.forEach((element) => createObj(element));
30+
input.forEach((element) => obj[value] = value);
3431
return Object.values(obj);
3532
},
3633
};
3734

3835
const solutionEx2 = {
39-
resolve: (input) => {
36+
resolve: (inputArr) => {
37+
const input = [...inputArr]
4038
input.sort();
4139
let maxCount = 1,
4240
currCount = 1;
@@ -59,27 +57,6 @@
5957
},
6058
};
6159

62-
const isPositive = (x) => x > 0;
63-
const isNegative = (x) => x < 0;
64-
const isZero = (x) => x === 0;
65-
66-
const decision = (conditionFunc, trueOutCome, falseOutCome) => (context) =>
67-
conditionFunc(context) ? trueOutCome : falseOutCome;
68-
69-
const decide = (context, binaryDecisionTree) => {
70-
const result = binaryDecisionTree(context)
71-
72-
return typeof result === 'function' ? decide(context, result) : result
73-
}
74-
75-
const binaryDecisionTree = decision(
76-
isPositive,
77-
"+",
78-
decision(isNegative, "-", decision(isZero, 0, "?"))
79-
);
80-
81-
const contextValues = [ "number", 1, 0, -1, Number.NaN ]
82-
83-
contextValues.forEach(element => console.log(decide(element, binaryDecisionTree)))
60+
8461
</script>
8562
</html>

‎Exercise 5/index.html

+100
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Document</title>
8+
</head>
9+
<body></body>
10+
<script>
11+
function ask(question) {
12+
if (!question) return;
13+
var answer = prompt(
14+
question.question +
15+
"\n" +
16+
question.answers.map(({ answer }, i) => "\n" + i + " " + answer)
17+
);
18+
19+
if (answer in question.answers) {
20+
if (question.answers[answer].comment) {
21+
alert(question.answers[answer].comment);
22+
return;
23+
}
24+
ask(question.answers[answer]);
25+
}
26+
}
27+
28+
var tree = {
29+
question:
30+
"First of all, are you aged between 18 and 39 and a UK resident?",
31+
answers: [
32+
{
33+
answer: "Yes",
34+
question:
35+
"Great! Next, how are you planning to use your Lifetime ISA?",
36+
answers: [
37+
{
38+
answer: "I'm buying my first (house)",
39+
question:
40+
"Is your first home going to cost less than £450,000?",
41+
answers: [
42+
{
43+
answer: "Yes",
44+
question:
45+
"And lastly, are you planning on buying your first home within the next five years?",
46+
answers: [
47+
{
48+
answer: "Yes",
49+
comment:
50+
"It looks like you could be eligible for a Lifetime ISA.",
51+
},
52+
{
53+
answer: "No",
54+
comment:
55+
"It looks like you could be eligible for a Lifetime ISA.",
56+
},
57+
],
58+
},
59+
{
60+
answer: "No",
61+
comment:
62+
"Based on the current government rules, Lifetime ISAs can be used to purchase homes costing £450,000 or less.",
63+
},
64+
],
65+
},
66+
{
67+
answer: "I'm saving for my (...)",
68+
question: "What is your employment status?",
69+
answers: [
70+
{
71+
answer: "Employed",
72+
comment:
73+
"It looks like you could be eligible for a Lifetime ISA.",
74+
},
75+
{
76+
answer: "Self Employed",
77+
comment:
78+
"It looks like you could be eligible for a Lifetime ISA.",
79+
},
80+
{
81+
answer: "Not Employed",
82+
comment:
83+
"It looks like you could be eligible for a Lifetime ISA.",
84+
},
85+
],
86+
},
87+
],
88+
},
89+
{
90+
answer: "No",
91+
comment:
92+
"Our Lifetime ISAs are only available to UK residents aged between 18 and 39.",
93+
},
94+
],
95+
},
96+
question = tree;
97+
98+
ask(question);
99+
</script>
100+
</html>

‎Exercise 6/index.html

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Document</title>
8+
</head>
9+
<body>
10+
11+
</body>
12+
<script>
13+
const emailRegex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
14+
const passwordRegex = /^(?=.*?[A-Z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$/
15+
const email = "huyle@journey.io"
16+
const password = "1212@@AA111"
17+
console.log(emailRegex.test(email))
18+
console.log(passwordRegex.test(password))
19+
</script>
20+
</html>

‎Exercise 7/index.html

+221
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,221 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Document</title>
8+
<script src="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js"></script>
9+
<link
10+
href="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css"
11+
rel="stylesheet"
12+
/>
13+
<style>
14+
body {
15+
margin: 0;
16+
padding: 0;
17+
}
18+
#map {
19+
position: absolute;
20+
top: 0;
21+
bottom: 0;
22+
width: 100%;
23+
}
24+
button,
25+
input,
26+
#dropdown {
27+
position: fixed;
28+
padding: 8px 20px;
29+
font-size: 16px;
30+
background: white;
31+
outline: none;
32+
border: none;
33+
border-radius: 5px;
34+
cursor: pointer;
35+
}
36+
37+
#dropdown {
38+
padding: 0;
39+
bottom: 60px;
40+
right: 10px;
41+
max-height: 50vh;
42+
overflow: scroll;
43+
max-width: 30vh;
44+
z-index: 1;
45+
}
46+
47+
#dropdown p {
48+
margin-left: 5px;
49+
}
50+
51+
button:nth-last-of-type(2) {
52+
top: 10px;
53+
left: 10px;
54+
}
55+
56+
button:nth-last-of-type(1) {
57+
right: 10px;
58+
top: 10px;
59+
}
60+
#customPopup {
61+
position: fixed;
62+
width: 300px;
63+
background-color: #ffffff;
64+
padding: 10px;
65+
border-radius: 5px;
66+
}
67+
#customGeocoder {
68+
bottom: 10px;
69+
right: 10px;
70+
}
71+
</style>
72+
</head>
73+
<body>
74+
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.1.0/mapbox-gl-directions.js"></script>
75+
<link
76+
rel="stylesheet"
77+
href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.1.0/mapbox-gl-directions.css"
78+
type="text/css"
79+
/>
80+
<!-- Load the `mapbox-gl-geocoder` plugin. -->
81+
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.2/mapbox-gl-geocoder.min.js"></script>
82+
<link
83+
rel="stylesheet"
84+
href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.2/mapbox-gl-geocoder.css"
85+
type="text/css"
86+
/>
87+
<div id="map"></div>
88+
<div id="customPopup"></div>
89+
<button id="toggle">Toggle</button>
90+
<button id="home">Home</button>
91+
<input id="customGeocoder" type="text" />
92+
<div id="dropdown"></div>
93+
</body>
94+
<script>
95+
const myPosition = {};
96+
const position = {};
97+
const toggleBtn = document.querySelector("#toggle");
98+
const homeBtn = document.querySelector("#home");
99+
const customPopup = document.querySelector("#customPopup");
100+
const customGeocoder = document.querySelector("#customGeocoder");
101+
const dropdown = document.querySelector("#dropdown");
102+
let map, marker;
103+
mapboxgl.accessToken =
104+
"pk.eyJ1Ijoic2VubmluZSIsImEiOiJjbDB0aHljY2UwNnE5M2lwZXA3dG02amRoIn0.OReYhfaCWigJ7ae-eGqogg";
105+
const directionControl = new MapboxDirections({
106+
accessToken: mapboxgl.accessToken,
107+
});
108+
const geocoder = new MapboxGeocoder({
109+
// Initialize the geocoder
110+
accessToken: mapboxgl.accessToken, // Set the access token
111+
mapboxgl: mapboxgl,
112+
});
113+
114+
customGeocoder.oninput = (e) => {
115+
dropdown.innerHTML = "";
116+
fetch(
117+
`https://api.mapbox.com/geocoding/v5/mapbox.places/${e.target.value}.json?autocomplete=true&access_token=pk.eyJ1Ijoic2VubmluZSIsImEiOiJjbDB0aHljY2UwNnE5M2lwZXA3dG02amRoIn0.OReYhfaCWigJ7ae-eGqogg`
118+
)
119+
.then((res) => res.json())
120+
.then((data) => {
121+
data.features.map((ele) => {
122+
console.log(ele.place_name);
123+
const node = document.createElement("p");
124+
const textNode = document.createTextNode(ele.place_name);
125+
node.addEventListener("click", (e) => {
126+
map.setCenter(ele.center);
127+
marker.setLngLat(ele.center);
128+
position["longitude"] = ele.center[0];
129+
position["latitude"] = ele.center[1];
130+
createPopup();
131+
});
132+
node.appendChild(textNode);
133+
dropdown.appendChild(node);
134+
});
135+
})
136+
.catch(() => console.log("not found"));
137+
};
138+
139+
toggleBtn.onclick = () => {
140+
if (map) {
141+
if (map.hasControl(directionControl)) {
142+
map.removeControl(directionControl);
143+
} else {
144+
map.addControl(directionControl, "bottom-left");
145+
}
146+
}
147+
};
148+
149+
homeBtn.onclick = () => {
150+
getLocation();
151+
};
152+
153+
const calcPosCustomPopup = (content) => {
154+
let markerEle = document.querySelector('[aria-label="Map marker"]');
155+
let markerPos = markerEle.getBoundingClientRect();
156+
if (content) {
157+
customPopup.innerHTML = content;
158+
}
159+
customPopup.style.left = markerPos.x + 30 + "px";
160+
customPopup.style.top = markerPos.y + 30 + "px";
161+
};
162+
163+
const createPopup = () => {
164+
fetch(
165+
`https://api.mapbox.com/geocoding/v5/mapbox.places/${position["longitude"]},${position["latitude"]}.json?types=poi&access_token=pk.eyJ1Ijoic2VubmluZSIsImEiOiJjbDB0aHljY2UwNnE5M2lwZXA3dG02amRoIn0.OReYhfaCWigJ7ae-eGqogg`
166+
)
167+
.then((res) => res.json())
168+
.then((data) => {
169+
calcPosCustomPopup(data.features[0].place_name);
170+
});
171+
};
172+
173+
const renderMap = () => {
174+
map = new mapboxgl.Map({
175+
container: "map", // container ID
176+
style: "mapbox://styles/mapbox/streets-v11", // style URL
177+
center: [position.longitude, position.latitude], // starting position [lng, lat]
178+
zoom: 15, // starting zoom
179+
});
180+
181+
map.on("click", (e) => {
182+
position["latitude"] = e.lngLat.lat;
183+
position["longitude"] = e.lngLat.lng;
184+
createPopup();
185+
marker.setLngLat([position["longitude"], position["latitude"]]);
186+
});
187+
188+
map.on("drag", () => {
189+
calcPosCustomPopup();
190+
});
191+
192+
marker = new mapboxgl.Marker({ color: "red" })
193+
.setLngLat([position["longitude"], position["latitude"]])
194+
.addTo(map);
195+
// map.addControl(geocoder, "bottom-right");
196+
createPopup();
197+
};
198+
199+
const success = (pos) => {
200+
position["latitude"] = pos.coords.latitude;
201+
position["longitude"] = pos.coords.longitude;
202+
renderMap();
203+
};
204+
205+
const error = () => {
206+
alert("ERROR");
207+
};
208+
209+
const getLocation = () => {
210+
if (navigator.geolocation) {
211+
navigator.geolocation.getCurrentPosition(success, error, {
212+
maximumAge: 60000,
213+
timeout: 10000,
214+
enableHighAccuracy: true,
215+
});
216+
}
217+
};
218+
219+
getLocation();
220+
</script>
221+
</html>

0 commit comments

Comments
 (0)
Please sign in to comment.