> For the complete documentation index, see [llms.txt](https://sandeepamaranath.gitbook.io/notes/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sandeepamaranath.gitbook.io/notes/interview/technical-challenges-faced.md). # Technical Challenges faced 😎 Tells all the problems faced and how I managed to overcome them ### 1. Mapty project * I was building a user interface for displaying the map. * I was using leaflet API for displaying the map and it has functionalities like getting the position on the map using lats and longs * Suddenly map stopped displaying after sometime * This happened when I moved from hall to room and was not sure why * Tried to google a lot but couldn't find the answer * Then I tried to fetch only the lats and longs to display on the console and it didn't work as well * Then I found it was not related to leaflet but the navigator API which is inbuilt in JS * This's where the geolocation API was and it was not working for some reason and couldn't get lats and longs. The function which wasn't working was `navigator.geolocation.getCurrentPosition` * Then I tried different options and after moving to hall it started working. It was due to location coordinates not catching. ### 2. Modern progress bar app ![Built with HTML, CSS and JS](https://1944679227-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVEiPUp08kYt33g51v7%2F-MYhX3sN2GmmlfMyhSK5%2F-MYhXmPDvFxJQc73aNIZ%2Fimage.png?alt=media\&token=48c9f15d-849c-4830-b572-4f579a48327e) * Was working on a simple HTML, CSS, and JS app * Had set the hover property on the button with a transition in CSS to change the bg color which was working fine * I added JS functionality where there was a need to check the counter value and if the counter was set to 0 then I had to update the bg color. In this process in the else statement, I wanted the normal bg color of the button if the counter was not 0 ![](https://1944679227-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVEiPUp08kYt33g51v7%2F-MYhX3sN2GmmlfMyhSK5%2F-MYhYm7HXfdA-wtPoGXU%2Fimage.png?alt=media\&token=25b3cd41-42a5-4f5b-a855-3d843225ac7e) * Since I had set to the color in else, my hover stopped working. * I had to think a lot and google a bit but couldn't figure it out. * After some trial and error, I figured out that I need to set the property to an empty string so that it works again. * **The thing I learned here is, if you set a style to an empty string in JS then the CSS value will get applied and CSS will not be overridden.** * **Note that, I tried to set the bg color to 'transparent' but that doen't work.** * Resource helped - ## 3. Vertically positioning elements After a lot of struggle, I finally figured how to do that. Please check my CSS notes