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

• 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

• 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 - https://stackoverflow.com/questions/58071475/losing-hover-and-active-styles-in-html-when-change-button-background-in-javascri

3. Vertically positioning elements

After a lot of struggle, I finally figured how to do that. Please check my CSS notes