URGENT TASK

Task 1: National Blue Trail tracks (1-tracks, 8 pts)

With high inflation such nowadays, we think twice about what we spend our money on. Expensive vacations can be replaced by excursions and the discovery of the natural wonders of Hungary. The National Blue Trail, which runs through the mountains from the western end of Hungary to the eastern end, is perfectly suitable for this. In order to select a section of this long trail, it would be good to know what parameters they have and how difficult they are. The $tracks array in the index.php file contains some of the most important data of all the 27 sections of the National Blue Trail (the number, the name of one and the other end of the section, the length of the track in km, the elevation in m, and the time in minutes). Display it as follows:

• a. (2 pts) Display the data as a table. Look for an example in index.php! The time must be shown in hours; steepness is the elevation per kilometer (level/distance); and the velocity is the distance traveled during the unit of time (distance/time, km/h)!
• b. (2 pts) Mark the length of the roads on a green-red color scale as the background colour of the distances! To do this, find the largest distance value, then for each section, calculate the percentage of the given section compared to the longest! (E.g. if the longest section is 72km, and the actual is 36km, then the percentage value is 50%.) This % value must be projected onto the 0-120 interval of the Hue value of the HSL color scale, so that 0% corresponds to the hue value 120, and 100% to the hue value 0. In CSS, an HSL value including transparency can be specified as follows: hsla(0, 100%, 60%, 0.5). The current Hue value must be specified as the first parameter!
• c. (1 pt) Apply the same coloring to the elevation and steepness columns, as well!
• d. (1 pt) We also color the background color of the cells of the velocity column, but here in such a way that we first find the largest and smallest value, then the value of each section is given as a percentage compared to this interval (e.g. slowest 2km/h, fastest 8km/h, actual 5km/h is 50%), and this is colored so that the red (hue=0) should be at the smallest value, and green (hue=120) at the largest!
• e. (2 pts) Sum up the distance, elevation and time columns in the last row of the table!

Help: feel free to look around PHP's array functions to see if you can find efficient solutions, such as the array_column (Links to an external site.) function!

INDEX.PHP

$tracks = [

[ "id" => 1, "from" => "rottk", "to" => "Srvr", "length" => 70.2, "elevation" => 430, "time" => 1097 ],

[ "id" => 2, "from" => "Srvr", "to" => "Smeg", "length" => 71.9, "elevation" => 280, "time" => 1106 ],

[ "id" => 3, "from" => "Smeg", "to" => "Keszthely", "length" => 47.5, "elevation" => 810, "time" => 794 ],

[ "id" => 4, "from" => "Keszthely", "to" => "Tapolca", "length" => 25.7, "elevation" => 470, "time" => 433 ],

[ "id" => 5, "from" => "Tapolca", "to" => "Badacsonytrdemic", "length" => 15.7, "elevation" => 330, "time" => 269 ],

[ "id" => 6, "from" => "Badacsonytrdemic", "to" => "Nagyvzsony", "length" => 41, "elevation" => 1260, "time" => 741 ],

[ "id" => 7, "from" => "Nagyvzsony", "to" => "Vrosld", "length" => 22.1, "elevation" => 400, "time" => 372 ],

[ "id" => 8, "from" => "Vrosld", "to" => "Zirc", "length" => 38.7, "elevation" => 1020, "time" => 683 ],

[ "id" => 9, "from" => "Zirc", "to" => "Bodajk", "length" => 44.8, "elevation" => 890, "time" => 760 ],

[ "id" => 10, "from" => "Bodajk", "to" => "Szrliget", "length" => 48.5, "elevation" => 1160, "time" => 843 ],

[ "id" => 11, "from" => "Szrliget", "to" => "Dorog", "length" => 67.2, "elevation" => 1950, "time" => 1204 ],

[ "id" => 12, "from" => "Dorog", "to" => "Piliscsaba", "length" => 18.6, "elevation" => 440, "time" => 322 ],

[ "id" => 13, "from" => "Piliscsaba", "to" => "Hvsvlgy", "length" => 21.7, "elevation" => 480, "time" => 373 ],

[ "id" => 14, "from" => "Hvsvlgy", "to" => "Rozlia tglagyr", "length" => 13.9, "elevation" => 450, "time" => 253 ],

[ "id" => 15, "from" => "Rozlia tglagyr", "to" => "Dobogk", "length" => 22.3, "elevation" => 1000, "time" => 434 ],

[ "id" => 16, "from" => "Dobogk", "to" => "Visegrd", "length" => 24.2, "elevation" => 510, "time" => 414 ],

[ "id" => 17, "from" => "Nagymaros", "to" => "Ngrd", "length" => 38.1, "elevation" => 1610, "time" => 732 ],

[ "id" => 18, "from" => "Ngrd", "to" => "Becske", "length" => 51.7, "elevation" => 1560, "time" => 931 ],

[ "id" => 19, "from" => "Becske", "to" => "Mtraverebly", "length" => 67.3, "elevation" => 1720, "time" => 1181 ],

[ "id" => 20, "from" => "Mtraverebly", "to" => "Mtrahza", "length" => 25.9, "elevation" => 1170, "time" => 505 ],

[ "id" => 21, "from" => "Mtrahza", "to" => "Sirok", "length" => 21.7, "elevation" => 970, "time" => 422 ],

[ "id" => 22, "from" => "Sirok", "to" => "Szarvask", "length" => 17.5, "elevation" => 340, "time" => 297 ],

[ "id" => 23, "from" => "Szarvask", "to" => "Putnok", "length" => 54.9, "elevation" => 1880, "time" => 1012 ],

[ "id" => 24, "from" => "Putnok", "to" => "Bdvaszilas", "length" => 63.9, "elevation" => 1755, "time" => 1740 ],

[ "id" => 25, "from" => "Bdvaszilas", "to" => "Boldogkvralja", "length" => 65, "elevation" => 850, "time" => 1059 ],

[ "id" => 26, "from" => "Boldogkvralja", "to" => "Storaljajhely", "length" => 52.7, "elevation" => 1680, "time" => 959 ],

[ "id" => 27, "from" => "Storaljajhely", "to" => "Hollhza", "length" => 46.4, "elevation" => 1280, "time" => 825 ],

];

?>

DOCTYPE html>

html lang="en">

head>

meta charset="UTF-8">

meta http-equiv="X-UA-Compatible" content="IE=edge">

meta name="viewport" content="width=device-width, initial-scale=1.0">

link rel="stylesheet" href="index.css">

title>Task 1title>

head>

body>

h1>Task 1: Tracksh1>

table>

thead>

tr>

th>Idth>

th>From - toth>

th>Length (km)th>

th>Elevation (m)th>

th>Time (h)th>

th>Steepness (m/km)th>

th>Velocity (km/h)th>

tr>

thead>

tbody>

tr>

td>#1td>

td>From - Totd>

td>35.6td>

td>723td>

td>7.2td>

td>20.3td>

td>4.9td>

tr>

tbody>

tfoot>

tr>

td colspan="2">Sumtd>

td>td>

td>td>

td>td>

td>td>

td>td>

tr>

tfoot>

table>

body>

html>

TASK 1: TRACKS TASK 1: TRACKS