test/index.html at master · danatinxeption/test · GitHub

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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html>

<head>
	<title>Exercises</title>
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
		rel="stylesheet">
	<link
		href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Sarabun:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
		rel="stylesheet">
	<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
	<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
	<h1>The problems</h1>
	<p class="warning-message">
		<span class="material-symbols-outlined">warning</span>
		<strong>For the HTML/CSS exercises in this project, please make sure to not use any CSS frameworks like Boostrap, Tailwind, Foundation, etc. For the javascript test, please don't use any component libraries.</strong>
	</p>
	<h2>Project Setup</h2>
	<ol>
		<li>Create a NextJS app with TypeScript.</li>
		<li>Set up SASS project in the app.</li>
		<li>Create four routes:
			<ol type="a">
				<li><strong>/</strong> - Application homepage.</li>
				<li><strong>/center-a-div</strong> - Page for exercise one.</li>
				<li><strong>/table</strong> - Page for exercise two.</li>
				<li><strong>/javascript</strong> - Page for exercise three.</li>
			</ol>
		</li>
		<li>Bonus point for using dynamic routing to handle some or all four pages above.</li>
	</ol>
	<h2>Exercises One - Center a DIV</h2>
	<ol>
		<li>Create a div that takes up the entire viewport width and height.</li>
		<li>Give it a solid background color.</li>
		<li>Add a child element with <strong>"Center This"</strong> text.</li>
		<li>Center the element above in the middle of the page, both horizontal and vertically.</li>
		<li>Use as little html/css as possible.</li>
		<li>Bonus point for completing this exercise with multiple methods.</li>
	</ol>
	<h4>Example</h4>
	<img src="center-div.jpg" alt="Center a Div" />
	<h2>Exercise Two - Table layout</h2>
	<ol>
		<li>Create a three by four layout.
			<ol type="a">
				<li>On viewport > 1280px, the layout is 3 x 4.</li>
				<li>On viewport > 650px and < 1279px, the layout changes to 2 x 6.</li>
				<li>On viewport < 650px, the layout changes to 1 x 12.</li>
			</ol>
		</li>
		<li>Around the layout, there should be a 50px gap to the edge of the screen.</li>
		<li>The cell width in all the viewport sizes. The cell height be at least 100px.</li>
		<li>The space between the cells should be 50px, both horizontal and vertical.</li>
		<li>Add a tooltip at the top right corner of each element.
			<ol type="a">
				<li>The tooltips should only be visible on hover of the cell it attaches to.</li>
			</ol>
		</li>
	</ol>
	<h4>Example</h4>
	<img src="table.jpg" alt="Table and tooltips" />
	<h2>Exercise Three - Javascript</h2>
	<h3>Getting the data</h3>
	<ol>
		<li>Use this free data api endpoint documentation: https://docs.irail.be/</li>
		<li>Get all the train stations from Belgium Public Transport api endpoint.</li>
	</ol>
	<h3>Using the data</h3>
	<ol>
		<li>Create a table.</li>
		<li>The table columns should be dynamically generated using the train stations data.</li>
		<li>The columns should be Name, Latitude, Longitude.</li>
		<li>Add a note column as the last column in the table.</li>
		<li>In the table row, display the train station data in the table cell. For the note column, add an input field and ability to type notes for each row.</li>
		<li>Bonus points:
			<ol type="a">
				<li>Creating a link to google maps using the latitude and longitude information and make the name a link, also open the link in a new tab.</li>
				<li>Add search functionality.</li>
				<li>Add sort functionality.</li>
			</ol>
		</li>

	</ol>
</body>

</html>