Skip to content

Commit 97c0093

Browse files
le-huy-jhle-huy-jh
committedMar 22, 2022
update
1 parent b43863a commit 97c0093

17 files changed

+1849
-140
lines changed
 

‎Exercise 3/index.html

+24-16
Original file line numberDiff line numberDiff line change
@@ -34,27 +34,35 @@
3434
};
3535

3636
const solutionEx2 = {
37-
resolve: (inputArr) => {
38-
let countMax = 1;
39-
const result = []
40-
const frequentArr = new Map();
41-
for (let index = 0; index < inputArr.length; index++) {
42-
if (frequentArr.has(inputArr[index])) {
43-
frequentArr.get(inputArr[index]).count++;
44-
if (frequentArr.get(inputArr[index]).count > countMax)
45-
countMax = frequentArr.get(inputArr[index]).count;
37+
finalResult: (inputArr) => {
38+
const finalObj = inputArr.reduce((accumulator, currValue, index, arr) => {
39+
if(!accumulator.countObj[currValue]) {
40+
accumulator.countObj[currValue] = 1
4641
} else {
47-
frequentArr.set(inputArr[index], { count: 1 });
42+
accumulator.countObj[currValue]++
4843
}
49-
}
50-
frequentArr.forEach((value, key) => {
51-
if(value.count === countMax) {
52-
result.push(key)
44+
45+
if (accumulator.countObj[currValue] === accumulator.countMax) {
46+
accumulator.result.push(currValue);
47+
}
48+
if (accumulator.countObj[currValue] > accumulator.countMax) {
49+
accumulator.result = [];
50+
accumulator.result.push(currValue);
51+
accumulator.countMax = accumulator.countObj[currValue];
5352
}
53+
54+
return accumulator
55+
}, {
56+
countMax: 1,
57+
result: [],
58+
countObj: {}
5459
})
55-
return result
56-
},
60+
return finalObj.result
61+
}
5762
};
5863

64+
65+
66+
console.log(solutionEx2.finalResult(inputEx2));
5967
</script>
6068
</html>

‎Exercise 4/index.html

+90-87
Original file line numberDiff line numberDiff line change
@@ -10,104 +10,107 @@
1010
<body>
1111
<h1>Carousel</h1>
1212
<div class="carousel-container">
13-
<div class="slides">
14-
<div class="slide">
15-
<img src="https://jes.edu.vn/wp-content/uploads/2017/10/h%C3%ACnh-%E1%BA%A3nh.jpg" alt="">
16-
</div>
17-
<div class="slide">
18-
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/640px-Image_created_with_a_mobile_phone.png" alt="">
19-
</div>
20-
<div class="slide">
21-
<img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="">
22-
</div>
23-
<div class="slide">
24-
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8dmlld3xlbnwwfHwwfHw%3D&w=1000&q=80" alt="">
25-
</div>
26-
<div class="slide">
27-
<img src="https://www.w3schools.com/howto/img_forest.jpg" alt="">
28-
</div>
29-
<div class="slide">
30-
<img src="https://images.unsplash.com/photo-1612151855475-877969f4a6cc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8aGQlMjBpbWFnZXxlbnwwfHwwfHw%3D&w=1000&q=80" alt="">
31-
</div>
32-
<div class="slide">
33-
<img src="https://png.pngtree.com/illustrations/20190327/ourmid/pngtree-cure-starry-sky-night-sky-star-png-image_38228.jpg" alt="">
34-
</div>
35-
<div class="slide">
36-
<img src="https://media.istockphoto.com/photos/colorful-background-of-pastel-powder-explosionrainbow-color-dust-on-picture-id1180542165?k=20&m=1180542165&s=612x612&w=0&h=43hlhk8qdGYP4V-u3AAxD3kPDRIzHjMNWpr-VdBQ2Js=" alt="">
37-
</div>
38-
<div class="slide">
39-
<img src="https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg" alt="">
40-
</div>
41-
<div class="slide">
42-
<img src="https://h5p.org/sites/default/files/h5p/content/1209180/images/file-6113d5f8845dc.jpeg" alt="">
43-
</div>
44-
</div>
13+
<div class="slides"></div>
4514
</div>
4615
<button class="left"><</button>
4716
<button class="right">></button>
48-
<div class="dots">
49-
<div class="dot"></div>
50-
<div class="dot"></div>
51-
<div class="dot"></div>
52-
<div class="dot"></div>
53-
<div class="dot"></div>
54-
<div class="dot"></div>
55-
<div class="dot"></div>
56-
<div class="dot"></div>
57-
<div class="dot"></div>
58-
<div class="dot"></div>
59-
</div>
17+
<div class="dots"></div>
6018
</body>
6119
<script>
62-
window.addEventListener("DOMContentLoaded", (event) => {
63-
const slides = document.querySelector(".slides");
64-
const slide = document.querySelectorAll(".slide");
65-
const dots = document.querySelectorAll('.dot')
66-
const container = document.querySelector(".carousel-container");
67-
const rightButton = document.querySelector(".right");
68-
const leftButton = document.querySelector(".left");
69-
const numOfSlide = slide.length;
70-
let currSlide = 0;
71-
const slidePerScreen = 1;
72-
73-
dots.forEach((dot, index) => {
74-
dot.onclick = () => {
75-
currSlide = index
76-
moveSlide()
77-
}
78-
})
79-
80-
const makeSlide = () => {
81-
// tính width của mỗi mainSlide, smallSlide
82-
const slideWidth = Math.ceil(container.offsetWidth / slidePerScreen);
83-
// xác định vùng chứa của mainSlide, smallSlide
84-
slides.style.width = slideWidth * numOfSlide + "px";
85-
86-
// gán width cho mỗi mainSlide, smallSlide
87-
slide.forEach((ele) => (ele.style.width = slideWidth + "px"));
88-
};
20+
const imageArr = [
21+
"https://jes.edu.vn/wp-content/uploads/2017/10/h%C3%ACnh-%E1%BA%A3nh.jpg",
22+
"https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/640px-Image_created_with_a_mobile_phone.png",
23+
"https://www.w3schools.com/w3css/img_lights.jpg",
24+
"https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8dmlld3xlbnwwfHwwfHw%3D&w=1000&q=80",
25+
"https://www.w3schools.com/howto/img_forest.jpg",
26+
"https://images.unsplash.com/photo-1612151855475-877969f4a6cc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8aGQlMjBpbWFnZXxlbnwwfHwwfHw%3D&w=1000&q=80",
27+
"https://h5p.org/sites/default/files/h5p/content/1209180/images/file-6113d5f8845dc.jpeg",
28+
"https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg",
29+
"https://media.istockphoto.com/photos/colorful-background-of-pastel-powder-explosionrainbow-color-dust-on-picture-id1180542165?k=20&m=1180542165&s=612x612&w=0&h=43hlhk8qdGYP4V-u3AAxD3kPDRIzHjMNWpr-VdBQ2Js=",
30+
"https://png.pngtree.com/illustrations/20190327/ourmid/pngtree-cure-starry-sky-night-sky-star-png-image_38228.jpg",
31+
];
8932

90-
const moveSlide = () => {
91-
slides.style.marginLeft = slide[0].offsetWidth * -currSlide + "px";
92-
};
33+
const slideContainer = document.querySelector(".slides");
34+
const dotConainer = document.querySelector(".dots");
9335

94-
rightButton.onclick = () => {
95-
if (slidePerScreen + currSlide > numOfSlide - 1) return;
36+
const createElements = () => {
37+
imageArr.forEach((src) => {
38+
//create dot
39+
const dotElement = document.createElement("div");
40+
dotElement.classList.add("dot");
41+
dotConainer.appendChild(dotElement);
9642

97-
currSlide++;
98-
// chuyển mainSlide
99-
moveSlide()
100-
};
43+
//create slide
44+
const slideElement = document.createElement("div");
45+
slideElement.classList.add("slide");
10146

102-
leftButton.onclick = () => {
103-
if (currSlide === 0) return;
47+
const imageElement = document.createElement("img");
48+
imageElement.src = src;
10449

105-
currSlide--;
106-
// chuyển mainSlide
107-
moveSlide()
108-
};
50+
slideElement.appendChild(imageElement);
51+
slideContainer.appendChild(slideElement);
52+
});
53+
};
10954

110-
makeSlide();
55+
createElements();
56+
57+
const slide = document.querySelectorAll(".slide");
58+
const dots = document.querySelectorAll(".dot");
59+
const container = document.querySelector(".carousel-container");
60+
const rightButton = document.querySelector(".right");
61+
const leftButton = document.querySelector(".left");
62+
const numOfSlide = slide.length;
63+
let currSlide = 0;
64+
const slidePerScreen = 1;
65+
66+
dots.forEach((dot, index) => {
67+
dot.onclick = () => {
68+
dots.forEach((dot) => {
69+
dot.classList.remove("active");
70+
});
71+
dot.classList.add("active");
72+
currSlide = index;
73+
moveSlide();
74+
};
11175
});
76+
77+
const makeSlide = () => {
78+
// tính width của mỗi mainSlide, smallSlide
79+
const slideWidth = Math.ceil(container.offsetWidth / slidePerScreen);
80+
// xác định vùng chứa của mainSlide, smallSlide
81+
slideContainer.style.width = slideWidth * numOfSlide + "px";
82+
83+
// gán width cho mỗi mainSlide, smallSlide
84+
slide.forEach((ele) => (ele.style.width = slideWidth + "px"));
85+
86+
dots[currSlide].classList.add("active");
87+
};
88+
89+
const moveSlide = () => {
90+
slideContainer.style.marginLeft =
91+
slide[0].offsetWidth * -currSlide + "px";
92+
dots.forEach((dot) => {
93+
dot.classList.remove("active");
94+
});
95+
dots[currSlide].classList.add("active");
96+
};
97+
98+
rightButton.onclick = () => {
99+
if (slidePerScreen + currSlide > numOfSlide - 1) return;
100+
101+
currSlide++;
102+
// chuyển mainSlide
103+
moveSlide();
104+
};
105+
106+
leftButton.onclick = () => {
107+
if (currSlide === 0) return;
108+
109+
currSlide--;
110+
// chuyển mainSlide
111+
moveSlide();
112+
};
113+
114+
makeSlide();
112115
</script>
113116
</html>

‎Exercise 4/main.css

+5-1
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,10 @@ button {
2727
cursor: pointer;
2828
}
2929

30+
.dot.active {
31+
background-color: #000000;
32+
}
33+
3034
.right {
3135
right: 0;
3236
}
@@ -56,7 +60,7 @@ button {
5660
}
5761

5862
.content {
59-
height: 300px;
63+
height: 400px;
6064
background-color: aqua;
6165
display: flex;
6266
justify-content: center;

‎Exercise 7/style.css

+59-12
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,12 @@ body {
88
bottom: 0;
99
width: 100%;
1010
}
11-
#toggle,
11+
#direction,
1212
#home,
1313
input,
14-
#dropdown {
14+
#dropdown,
15+
#toDropdown,
16+
#fromDropdown {
1517
position: fixed;
1618
padding: 8px 20px;
1719
font-size: 16px;
@@ -24,15 +26,35 @@ input,
2426

2527
#dropdown {
2628
padding: 0;
27-
bottom: 60px;
28-
right: 10px;
29-
max-height: 50vh;
29+
top: 90px;
30+
left: 10px;
3031
overflow: scroll;
31-
max-width: 30vh;
32+
width: 38vh;
33+
z-index: 1;
34+
overflow: auto;
35+
}
36+
37+
#toDropdown {
38+
right: 10px;
39+
top: 130px;
40+
width: 38vh;
3241
z-index: 1;
42+
overflow: auto;
43+
padding: 0;
44+
}
45+
46+
#fromDropdown {
47+
right: 10px;
48+
top: 90px;
49+
width: 38vh;
50+
z-index: 1;
51+
overflow: auto;
52+
padding: 0;
3353
}
3454

35-
#dropdown p {
55+
#dropdown p,
56+
#toDropdown p,
57+
#fromDropdown p {
3658
margin-left: 0px;
3759
padding: 8px 8px;
3860
}
@@ -46,9 +68,10 @@ input,
4668
left: 10px;
4769
}
4870

49-
#toggle {
50-
left: 10px;
51-
top: 60px;
71+
#direction {
72+
right: 10px;
73+
top: 10px;
74+
left: auto;
5275
}
5376
#customPopup {
5477
position: fixed;
@@ -57,7 +80,31 @@ input,
5780
padding: 10px;
5881
border-radius: 5px;
5982
}
60-
#customGeocoder {
61-
bottom: 10px;
83+
#searchInput {
84+
top: 50px;
85+
left: 10px;
86+
}
87+
88+
#fromInput {
89+
right: 10px;
90+
top: 50px;
91+
display: none;
92+
}
93+
94+
#toInput {
6295
right: 10px;
96+
top: 90px;
97+
display: none;
6398
}
99+
100+
#instructions {
101+
position: absolute;
102+
margin: 20px;
103+
width: 25%;
104+
top: 0;
105+
bottom: 20%;
106+
padding: 20px;
107+
background-color: #fff;
108+
overflow-y: scroll;
109+
font-family: sans-serif;
110+
}

‎Exercise 7/update.html

+325
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,325 @@
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+
9+
<link rel="stylesheet" href="./style.css" />
10+
<script src="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js"></script>
11+
<link
12+
href="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css"
13+
rel="stylesheet"
14+
/>
15+
16+
<!-- Import Mapbox GL Draw -->
17+
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.0.9/mapbox-gl-draw.js"></script>
18+
<link
19+
rel="stylesheet"
20+
href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.0.9/mapbox-gl-draw.css"
21+
type="text/css"
22+
/>
23+
<!-- Load the `mapbox-gl-geocoder` plugin. -->
24+
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.2/mapbox-gl-geocoder.min.js"></script>
25+
<link
26+
rel="stylesheet"
27+
href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.2/mapbox-gl-geocoder.css"
28+
type="text/css"
29+
/>
30+
</head>
31+
<body>
32+
<div id="map"></div>
33+
<button id="home">Home</button>
34+
<button id="direction">Direction</button>
35+
<form onsubmit="event.preventDefault();submitHandler()">
36+
<input autocomplete="off" id="searchInput" type="text" placeholder="Search here" />
37+
</form>
38+
<form onsubmit="event.preventDefault();fromSubmitHandler()">
39+
<input autocomplete="off" id="fromInput" type="text" placeholder="From" />
40+
</form>
41+
<form onsubmit="event.preventDefault();toSubmitHandler()">
42+
<input autocomplete="off" id="toInput" type="text" placeholder="To" />
43+
</form>
44+
<div id="dropdown"></div>
45+
<div id="fromDropdown"></div>
46+
<div id="toDropdown"></div>
47+
<!-- <div id="instructions"></div> -->
48+
</body>
49+
<script>
50+
mapboxgl.accessToken =
51+
"pk.eyJ1Ijoic2VubmluZSIsImEiOiJjbDB0aHljY2UwNnE5M2lwZXA3dG02amRoIn0.OReYhfaCWigJ7ae-eGqogg";
52+
const position = {
53+
lng: 106.758144,
54+
lat: 10.862592,
55+
};
56+
const homeBtn = document.querySelector("#home");
57+
const searchInput = document.querySelector("#searchInput");
58+
const dropdown = document.querySelector("#dropdown");
59+
const fromDropdown = document.querySelector("#fromDropdown");
60+
const toDropdown = document.querySelector("#toDropdown");
61+
const directionBtn = document.querySelector("#direction");
62+
const fromInput = document.querySelector("#fromInput");
63+
const toInput = document.querySelector("#toInput");
64+
65+
let marker,
66+
popup,
67+
map,
68+
markerFrom,
69+
markerTo,
70+
toggle = true;
71+
72+
const direct = () => {
73+
if (fromInput.value.trim() === "" || toInput.value.trim() === "") return;
74+
getRoute();
75+
};
76+
77+
const getRoute = async () => {
78+
console.log("get route");
79+
const fromLngLat = await markerFrom.getLngLat();
80+
const toLngLat = await markerTo.getLngLat();
81+
const res = await fetch(
82+
`https://api.mapbox.com/directions/v5/mapbox/driving/${fromLngLat.lng},${fromLngLat.lat};${toLngLat.lng},${toLngLat.lat}?alternatives=true&geometries=geojson&language=en&overview=simplified&steps=true&access_token=${mapboxgl.accessToken}`
83+
);
84+
const json = await res.json();
85+
const data = json.routes[0];
86+
const route = data.geometry.coordinates;
87+
const geojson = {
88+
type: "Feature",
89+
properties: {},
90+
geometry: {
91+
type: "LineString",
92+
coordinates: route,
93+
},
94+
};
95+
96+
// if the route already exists on the map, we'll reset it using setData
97+
if (map.getSource("route")) {
98+
console.log("upate draw");
99+
map.getSource("route").setData(geojson);
100+
} else {
101+
console.log("draw new");
102+
map.addLayer({
103+
id: "route",
104+
type: "line",
105+
source: {
106+
type: "geojson",
107+
data: geojson,
108+
},
109+
layout: {
110+
"line-join": "round",
111+
"line-cap": "round",
112+
},
113+
paint: {
114+
"line-color": "#3887be",
115+
"line-width": 5,
116+
"line-opacity": 0.75,
117+
},
118+
});
119+
}
120+
121+
// get the sidebar and add the instructions
122+
// const instructions = document.getElementById("instructions");
123+
// const steps = data.legs[0].steps;
124+
125+
// let tripInstructions = "";
126+
// for (const step of steps) {
127+
// tripInstructions += `<li>${step.maneuver.instruction}</li>`;
128+
// }
129+
// instructions.innerHTML = `<p><strong>Trip duration: ${Math.floor(
130+
// data.duration / 60
131+
// )} min 🚴 </strong></p><ol>${tripInstructions}</ol>`;
132+
};
133+
134+
directionBtn.onclick = () => {
135+
if (toggle) {
136+
marker.remove();
137+
popup.remove();
138+
fromInput.style.display = "block";
139+
toInput.style.display = "block";
140+
toggle = false;
141+
} else {
142+
marker = new mapboxgl.Marker({ color: "red" })
143+
.setLngLat([position.lng, position.lat])
144+
.addTo(map);
145+
fromInput.style.display = "none";
146+
toInput.style.display = "none";
147+
fromInput.value = "";
148+
toInput.value = "";
149+
if (map.getLayer("route")) map.removeLayer("route");
150+
if (map.getSource("route")) map.removeSource("route");
151+
try {
152+
markerFrom.remove();
153+
markerTo.remove();
154+
} catch {}
155+
toggle = true;
156+
}
157+
};
158+
159+
homeBtn.onclick = () => {
160+
toggle && getUserLocation();
161+
};
162+
163+
const submitHandler = () => {
164+
const inputValue = searchInput.value;
165+
searchHandler(inputValue).then((data) => {
166+
data.map((ele) => {
167+
// add node list to dropdown box
168+
const node = document.createElement("p");
169+
const textNode = document.createTextNode(ele.place_name);
170+
node.appendChild(textNode);
171+
dropdown.appendChild(node);
172+
173+
// click event of location in dropdown box
174+
node.addEventListener("click", (e) => {
175+
map.setCenter(ele.center);
176+
marker.setLngLat(ele.center);
177+
searchInput.value = e.target.innerText;
178+
dropdown.innerHTML = "";
179+
180+
position.lng = ele.center[0];
181+
position.lat = ele.center[1];
182+
marker.setLngLat([position.lng, position.lat]);
183+
setPopup();
184+
});
185+
});
186+
});
187+
};
188+
189+
const fromSubmitHandler = () => {
190+
const inputValue = fromInput.value;
191+
fromDropdown.innerHTML = "";
192+
searchHandler(inputValue).then((data) => {
193+
data.map((ele) => {
194+
// add node list to dropdown box
195+
const node = document.createElement("p");
196+
const textNode = document.createTextNode(ele.place_name);
197+
node.appendChild(textNode);
198+
fromDropdown.appendChild(node);
199+
200+
// click event of location in dropdown box
201+
node.addEventListener("click", (e) => {
202+
map.setCenter(ele.center);
203+
try {
204+
markerFrom.remove();
205+
} catch {}
206+
markerFrom = new mapboxgl.Marker({ color: "blue" })
207+
.setLngLat(ele.center)
208+
.addTo(map);
209+
fromInput.value = e.target.innerText;
210+
fromDropdown.innerHTML = "";
211+
direct();
212+
});
213+
});
214+
});
215+
};
216+
217+
const toSubmitHandler = () => {
218+
const inputValue = toInput.value;
219+
toDropdown.innerHTML = "";
220+
searchHandler(inputValue).then((data) => {
221+
data.map((ele) => {
222+
// add node list to dropdown box
223+
const node = document.createElement("p");
224+
const textNode = document.createTextNode(ele.place_name);
225+
node.appendChild(textNode);
226+
toDropdown.appendChild(node);
227+
228+
// click event of location in dropdown box
229+
node.addEventListener("click", (e) => {
230+
map.setCenter(ele.center);
231+
try {
232+
markerTo.remove();
233+
} catch {}
234+
markerTo = new mapboxgl.Marker({ color: "yellow" })
235+
.setLngLat(ele.center)
236+
.addTo(map);
237+
toInput.value = e.target.innerText;
238+
toDropdown.innerHTML = "";
239+
direct();
240+
});
241+
});
242+
});
243+
};
244+
245+
const searchHandler = async (inputValue) => {
246+
try {
247+
const res = await fetch(
248+
`https://api.mapbox.com/geocoding/v5/mapbox.places/${inputValue}.json?autocomplete=true&access_token=${mapboxgl.accessToken}`
249+
);
250+
const data = await res.json();
251+
return data.features;
252+
} catch {
253+
console.log("something went wrong");
254+
}
255+
};
256+
257+
const getUserLocation = () => {
258+
navigator.geolocation.getCurrentPosition(success, error, {
259+
maximumAge: 60000,
260+
timeout: 10000,
261+
enableHighAccuracy: true,
262+
});
263+
};
264+
265+
const getLocationInfo = async (lng, lat) => {
266+
try {
267+
const res = await fetch(
268+
`https://api.mapbox.com/geocoding/v5/mapbox.places/${lng},${lat}.json?types=poi&access_token=${mapboxgl.accessToken}`
269+
);
270+
const data = await res.json();
271+
return data.features[0].place_name;
272+
} catch {
273+
return "No information";
274+
}
275+
};
276+
277+
const renderMap = () => {
278+
map = new mapboxgl.Map({
279+
container: "map",
280+
style: "mapbox://styles/mapbox/streets-v11",
281+
center: [position.lng, position.lat],
282+
zoom: 15,
283+
});
284+
285+
// add marker
286+
marker = new mapboxgl.Marker({ color: "red" })
287+
.setLngLat([position.lng, position.lat])
288+
.addTo(map);
289+
290+
setPopup(position.lng, position.lat);
291+
292+
map.on("click", (event) => {
293+
position.lng = event.lngLat.lng;
294+
position.lat = event.lngLat.lat;
295+
marker.setLngLat([position.lng, position.lat]);
296+
if (toggle) {
297+
setPopup(position.lng, position.lat);
298+
}
299+
});
300+
};
301+
302+
const setPopup = (lng, lat) => {
303+
getLocationInfo(lng, lat).then((location) => {
304+
popup = new mapboxgl.Popup({ anchor: "top" })
305+
.setLngLat([lng, lat])
306+
.setText(location)
307+
.addTo(map);
308+
});
309+
};
310+
311+
const success = (userPos) => {
312+
position.lng = userPos.coords.longitude;
313+
position.lat = userPos.coords.latitude;
314+
315+
renderMap();
316+
};
317+
318+
const error = () => {
319+
console.log("can not get location");
320+
renderMap();
321+
};
322+
323+
getUserLocation();
324+
</script>
325+
</html>

‎Exercise 8/assets/fonts/museo-sans-rounded/MuseoSansRounded-700.ttf

72.1 KB
Binary file not shown.

‎Exercise 8/assets/images/Clip.png

3.27 MB
Loading

‎Exercise 8/assets/images/Layer 13.png

759 KB
Loading

‎Exercise 8/assets/images/Mask Group 1.png

48.5 KB
Loading

‎Exercise 8/assets/images/Mask Group 2.png

1.52 MB
Loading

‎Exercise 8/assets/images/Rectangle 6.jpg

62.1 KB
Loading

‎Exercise 8/assets/images/comment.svg

+3
Loading

‎Exercise 8/assets/images/heart.svg

+14
Loading

‎Exercise 8/assets/images/right arrow.png

372 Bytes
Loading

‎Exercise 8/index.html

+176-2
Original file line numberDiff line numberDiff line change
@@ -20,15 +20,189 @@
2020
<div class="text">BLAZ ROBAR</div>
2121
</div>
2222
<div class="right">
23-
<div class="hero-box">
24-
<h1>PAINT YOUR PIXTURE</h1>
23+
<div class="hero-box-first">
24+
<h3>PAINT <span>YOUR</span> PIXTURE</h3>
25+
</div>
26+
<div class="hero-box-second">
2527
<h4>Humble Beginings</h4>
2628
<div>
2729
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
2830
eiusmod tempor incididunt ut labore et dolore magna aliqua.
2931
</div>
3032
</div>
33+
<div class="date">April 19th 2016</div>
34+
<div class="dots">
35+
<div></div>
36+
</div>
37+
</div>
38+
</section>
39+
<section class="first-carousel">
40+
<div class="carousel-header">PICTURES WORTH SEEING</div>
41+
<div class="carousel-container">
42+
<div class="slides"></div>
43+
<img src="./assets/images/right arrow.png" alt="" class="previous" />
44+
<img src="./assets/images/right arrow.png" alt="" class="next" />
45+
</div>
46+
<img src="./assets/images/Layer 13.png" alt="" class="background" />
47+
</section>
48+
<section class="second-hero">
49+
<div class="left">
50+
<img src="./assets/images/down-arrow1.png" alt="" />
51+
<div class="text">PAIN TTHE POWER</div>
52+
<div class="text">BLAZ ROBAR</div>
53+
<img src="./assets/images/Mask Group 1.png" class="background" alt="" />
54+
</div>
55+
<div class="right">
56+
<div class="hero-box-first">
57+
<h3>IT'S YOUR <span>only</span> PASSION</h3>
58+
</div>
59+
<div class="hero-box-second">
60+
<div class="wrapper">
61+
<h4>Texture makes art</h4>
62+
<div>
63+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
64+
eiusmod tempor incididunt ut labore et dolore magna aliqua.
65+
</div>
66+
</div>
67+
</div>
68+
<div class="date">April 19th 2016</div>
69+
<img src="./assets/images/right arrow.png" alt="" />
70+
<div class="dots">
71+
<div></div>
72+
</div>
73+
</div>
74+
</section>
75+
<section class="main-content">
76+
<div class="left">
77+
<div>
78+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
79+
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
80+
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
81+
aliquip ex ea commodo consequat. Duis aute irure dolor in
82+
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
83+
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
84+
culpa qui officia deserunt mollit anim id est laborum.
85+
</div>
86+
<div>
87+
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
88+
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
89+
ab illo inventore veritatis et quasi architecto beatae vitae dicta
90+
sunt explicabo. homes →
91+
</div>
92+
</div>
93+
<div class="right">
94+
<div>
95+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
96+
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
97+
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
98+
aliquip ex ea commodo consequat. Duis aute irure dolor in
99+
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
100+
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
101+
culpa qui officia deserunt mollit anim id est laborum.
102+
</div>
103+
</div>
104+
<div class="date">JANUARY 2016</div>
105+
<img src="./assets/images/Layer 13.png" alt="" />
106+
</section>
107+
<section class="first-carousel second-carousel">
108+
<div class="carousel-header">ARTICLES WORTH READING</div>
109+
<div class="carousel-container">
110+
<div class="slides"></div>
111+
<img src="./assets/images/right arrow.png" alt="" class="previous" />
112+
<img src="./assets/images/right arrow.png" alt="" class="next" />
113+
</div>
114+
</section>
115+
<section class="features">
116+
<div class="feature-item">
117+
<div class="title">Start-Up Resources</div>
118+
<div class="text">
119+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
120+
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
121+
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
122+
</div>
123+
</div>
124+
<div class="feature-item">
125+
<div class="title">Training & Funding</div>
126+
<div class="text">
127+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
128+
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
129+
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
130+
</div>
131+
</div>
132+
<div class="feature-item">
133+
<div class="title">Connect</div>
134+
<div class="text">
135+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
136+
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
137+
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
138+
aliquip ex ea commodo consequat. Duis
139+
</div>
140+
</div>
141+
<div class="feature-item">
142+
<div class="title">Communicate</div>
143+
<div class="text">
144+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
145+
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
146+
minim veniam, quis
147+
</div>
148+
</div>
149+
<div class="date"><span>24TH</span> JANUARY 2016</div>
150+
</section>
151+
<section class="third-hero">
152+
<div class="wrapper">
153+
<div class="subtitle">TEXTURES BY</div>
154+
<div class="title">Jordan Hetzer</div>
155+
<div class="text">
156+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
157+
eiusmod tempor incididunt ut labore.
158+
</div>
159+
</div>
160+
</section>
161+
162+
<section class="footer">
163+
<div class="wrapper">
164+
<div class="footer-item">
165+
<div class="title">ABOUT</div>
166+
<ul>
167+
<li>
168+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
169+
eiusmod tempor incididunt ut labore et dolore
170+
</li>
171+
</ul>
172+
</div>
173+
<div class="footer-item">
174+
<div class="title">HISTORY</div>
175+
<ul>
176+
<li>Resources</li>
177+
<li>Downloads & Updates</li>
178+
<li>Manuals</li>
179+
<li>Tech Specs</li>
180+
<li>System Status</li>
181+
</ul>
182+
</div>
183+
<div class="footer-item contact">
184+
<div class="title">CONTACT</div>
185+
<ul>
186+
<li>Apple Store (Education Institutions)</li>
187+
<li>1300-551-927</li>
188+
<li>Apple Store (Small Business)</li>
189+
<li>1300-369-095</li>
190+
</ul>
191+
</div>
192+
<div class="footer-item">
193+
<div class="text">
194+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
195+
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
196+
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
197+
aliquip ex ea commodo consequat. Duis aute irure dolor in
198+
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
199+
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
200+
culpa qui officia deserunt mollit anim id est laborum. Sed ut
201+
perspiciatis unde omnis iste natus error sit voluptatem accusantium
202+
</div>
203+
</div>
31204
</div>
32205
</section>
33206
</body>
207+
<script src="./main.js"></script>
34208
</html>

‎Exercise 8/main.js

+213
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,213 @@
1+
const slideArr = [
2+
{
3+
imageSrc: "./assets/images/Rectangle 6.jpg",
4+
favorNum: 382,
5+
title: "BLISS TEXTURE",
6+
content:
7+
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
8+
commentNum: 374,
9+
},
10+
{
11+
imageSrc: "./assets/images/Rectangle 6.jpg",
12+
favorNum: 382,
13+
title: "BLISS TEXTURE",
14+
content:
15+
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
16+
commentNum: 374,
17+
},
18+
{
19+
imageSrc: "./assets/images/Rectangle 6.jpg",
20+
favorNum: 382,
21+
title: "BLISS TEXTURE",
22+
content:
23+
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
24+
commentNum: 374,
25+
},
26+
{
27+
imageSrc: "./assets/images/Rectangle 6.jpg",
28+
favorNum: 382,
29+
title: "BLISS TEXTURE",
30+
content:
31+
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
32+
commentNum: 374,
33+
},
34+
{
35+
imageSrc: "./assets/images/Rectangle 6.jpg",
36+
favorNum: 382,
37+
title: "BLISS TEXTURE",
38+
content:
39+
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
40+
commentNum: 374,
41+
},
42+
];
43+
44+
const secondSlideArr = [
45+
{
46+
imageSrc: "./assets/images/Rectangle 6.jpg",
47+
favorNum: 382,
48+
title: "BLISS TEXTURE",
49+
content:
50+
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
51+
commentNum: 374,
52+
},
53+
{
54+
imageSrc: "./assets/images/Rectangle 6.jpg",
55+
favorNum: 382,
56+
title: "BLISS TEXTURE",
57+
content:
58+
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
59+
commentNum: 374,
60+
},
61+
{
62+
imageSrc: "./assets/images/Rectangle 6.jpg",
63+
favorNum: 382,
64+
title: "BLISS TEXTURE",
65+
content:
66+
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
67+
commentNum: 374,
68+
},
69+
{
70+
imageSrc: "./assets/images/Rectangle 6.jpg",
71+
favorNum: 382,
72+
title: "BLISS TEXTURE",
73+
content:
74+
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
75+
commentNum: 374,
76+
},
77+
{
78+
imageSrc: "./assets/images/Rectangle 6.jpg",
79+
favorNum: 382,
80+
title: "BLISS TEXTURE",
81+
content:
82+
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
83+
commentNum: 374,
84+
},
85+
];
86+
87+
const slideContainer = document.querySelectorAll(".slides");
88+
const container = document.querySelectorAll(".carousel-container");
89+
const nextBtn = document.querySelectorAll(".next");
90+
const previousBtn = document.querySelectorAll(".previous");
91+
92+
console.log(nextBtn)
93+
94+
95+
let currSlide = 0,
96+
slideWidth = 0,
97+
slidePerScreen = 1;
98+
99+
let secondCurrSlide = 0;
100+
101+
const createSlideItems = () => {
102+
slideArr.forEach((slide) => {
103+
const html = `<div class="slide">
104+
<div class="top">
105+
<img src="${slide.imageSrc}" alt="" />
106+
<div class="favor">
107+
<img src="./assets/images/heart.svg" alt="" />
108+
<div>${slide.favorNum}</div>
109+
</div>
110+
</div>
111+
<div class="bottom">
112+
<div class="card-header">
113+
<div>${slide.title}</div>
114+
<p>
115+
${slide.content}
116+
</p>
117+
</div>
118+
<div class="card-footer">
119+
<div class="comment">
120+
<img src="./assets/images/comment.svg" alt="" />
121+
<div>${slide.commentNum} comments</div>
122+
</div>
123+
<div class="dots">
124+
<div></div>
125+
<div></div>
126+
<div></div>
127+
</div>
128+
</div>
129+
</div>
130+
</div>`;
131+
132+
slideContainer[0].innerHTML = slideContainer[0].innerHTML + html;
133+
});
134+
135+
secondSlideArr.forEach((slide) => {
136+
const html = `<div class="slide">
137+
<div class="top">
138+
<img src="${slide.imageSrc}" alt="" />
139+
<div class="favor">
140+
<img src="./assets/images/heart.svg" alt="" />
141+
<div>${slide.favorNum}</div>
142+
</div>
143+
</div>
144+
<div class="bottom">
145+
<div class="card-header">
146+
<div>${slide.title}</div>
147+
<p>
148+
${slide.content}
149+
</p>
150+
</div>
151+
<div class="card-footer">
152+
<div class="comment">
153+
<img src="./assets/images/comment.svg" alt="" />
154+
<div>${slide.commentNum} comments</div>
155+
</div>
156+
<div class="dots">
157+
<div></div>
158+
<div></div>
159+
<div></div>
160+
</div>
161+
</div>
162+
</div>
163+
</div>`;
164+
165+
slideContainer[1].innerHTML = slideContainer[1].innerHTML + html;
166+
});
167+
};
168+
169+
const makeSlide = () => {
170+
// margin: 40, arrow :48
171+
slideWidth = document.querySelector(".slide").offsetWidth + 40;
172+
slideContainer[0].style.width =
173+
Math.ceil(slideWidth * slideArr.length) + "px";
174+
slideContainer[1].style.width =
175+
Math.ceil(slideWidth * slideArr.length) + "px";
176+
177+
slidePerScreen = Math.floor((window.innerWidth - 40) / slideWidth);
178+
};
179+
180+
const moveSlide = () => {
181+
slideContainer[0].style.marginLeft = slideWidth * -currSlide + 40 + "px";
182+
};
183+
184+
nextBtn[0].onclick = () => {
185+
if (slidePerScreen + currSlide > slideArr.length - 1) return;
186+
currSlide++;
187+
moveSlide();
188+
};
189+
190+
previousBtn[0].onclick = () => {
191+
if (currSlide === 0) return;
192+
currSlide--;
193+
moveSlide();
194+
};
195+
196+
const moveSecondSlide = () => {
197+
slideContainer[1].style.marginLeft = slideWidth * -secondCurrSlide + 40 + "px";
198+
}
199+
200+
nextBtn[1].onclick = () => {
201+
if (slidePerScreen + secondCurrSlide > secondSlideArr.length - 1) return;
202+
secondCurrSlide++;
203+
moveSecondSlide();
204+
};
205+
206+
previousBtn[1].onclick = () => {
207+
if (secondCurrSlide === 0) return;
208+
secondCurrSlide--;
209+
moveSecondSlide();
210+
};
211+
212+
createSlideItems();
213+
makeSlide();

‎Exercise 8/style.css

+940-22
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)
Please sign in to comment.