This is the exercise made for a web designer role.(What a challenge by the way.)
Since I din't code for a long time and have been working mostly as UI designer(little code involved), it was a great exercise. The code presented here, is probably not great, but it was a great learning experience.
Short Description
- Bootstrap for general page look and feel
- Grid Column for Gantt Chart
Technologies
- Html 5
- Bootstrap 4
- Basic CSS
- Basic Javascript
Specifically speaking about the Gantt chart which was the most dificult part:
- Grid column is great for this since it has the power to align things both horizontally and vertically
- I could not find a way to overlap columns with the bars. For example when a bar has 1 day and a half, I could not make it by using Grid-Column. I would have to use position: absolute, which then makes no sense at this point
- Popover effect is quite simple, maybe adding a hiding effect after 2000ms could be helpful not to flood the screen.