All solutions

Firstly A big BIG Thank you once again to FrontEndMentor.io for this Challenge, and a hello to all the passionate developers out there. Well it has been a long journey for me on this one where i have been trying to find the right APIs which have not been easy but i have at last managed to work around the issues. With being eager to get to know NodeJS i have setup a backend NodeJS "serverless" server on glitch.com to... 1: Hide\Protect API Keys, 2: Serve Maps, 3:Provide IP addresss via dns.resolve. On the 3rd point i did try and find what APIs were out there but all of them required a payment or a very limited number of clicks for testing etc.. So i decided to do this bit in the end via the nodeJs Server itself using dns.resolve . For APIs i used 1: "ipgeolocation.io" - for IP address Details. 2:"https://api.bigdatacloud.net" - retrieving public ip address. 3: "https://developer.here.com/documentation/examples/rest/map-image" - for retrieving and serving the map on nodeJS via the coordinates sent from "ipgeolocation.io". I hope that makes sense 😅. One thing i did wonder about was deciding what to do when a list of more than one ip addresses was provided from a domain like Yahoo.com. Here i decided to use the notification to list all the ips provided that the user can copy and advise the user that will use the first ip in the list. I am more than happy to walk through with anyone interested on how i put it all together to help others learn, with me on this learning journey as well in the world of Web Development. All the Best, M.

Hello to all you wonderful Developers out there and A Big THANK YOU to FrontEndMentor for this challenge! This App has been tested on Browsers -: Brave, Chrome and Edge.. I have added animating buttons and a configuration where you can just update maxRows "param\var" to the number desired of links needed. When the number of links has exceeded it will notify the user of the oldest link that will be overwritten to be saved if needed. I have left a few comments in the code to help others and myself along the way if ever needed. The things i learned and solved about this challenge.

1. Ensuring there is consistency between element Id`s and localStorage Keys.
2. The ability to be able to clone elements without the need of writing out repetitive code where prepping the template before it is cloned is needed.
3. Using the clipboard unfortunately i bumped into issues using the "pointerdown" event where i was receiving the message "Must be handling a user gesture to use custom clipboard". Here i found out after 3 or 4 days of investigating that simply changing this to the "click" event has resolved this issue. I hope this helps someone.
4. Lastly, I presume when working with localStorage in the future it would be recommended to have just 1 local storage Key and have all the data\objects in it instead of separate keys. Please do have a go and let me know what you think, your feedback will be much appreciated. All the Best, M.

Thank you FrontEndMentor yet again for this challenge! It was great to put together and learn about JSON API which is my FIRST API project now completed. Muchly appreciated and i was surprised how easy it was to implement. Due to the interface being quite simple in design i could not resist but give it some life with Animations. Please do have a whirl and let me know what you think. One question i do have in regards to the animations, is there a way of doing it via CSS instead of via JS to replay the animation? I managed to get it as far as playing on the first push of the button, but on the second press onwards, there was no joy in the animation playing... I suspect it might have something to do with the name of the KeyFrame and using it in conjuction with the "animation-name" attribute. One last comment and bit of great advice for those who are using "ontouch" And "onclick" to handle their events in JS, just to say there is another event called "pointerdown" that will handle BOTH so no need to duplicate your code. BR, Mark.

Firstly a big thank you to FrontEndMentor for this challenge! I found it quite fun to put together using vanilla html,css(flexbox) and js. The most difficult part of this particular design i found was the logic on hiding various elements like when to hide the label etc when using the mobile touch events where the click events were allot more straight forward. I added "console.log("....") at various stages to track the progress and looks like i have managed ok though.. I would greatly appreciate any feedback you might have.

Not sure if i have gone a little overboard here adding a sliding bar for mobile users to easily select the date but thought it logical considering it is much easier than manually entering in the digits. To top it off i also added have add animations where i found the UI to be quite simple, so making it as engaging as possible.

I hope you enjoy this little app, and have a good day!

First of all, a big Thank You to Frontend mentor for providing this Challenge! Please feel free to dig into my code copy and share and provide the good, bad and ugly side, constructive criticism is always welcome. :)

Below Challenges and issues with some resolutions i found are..:

1. Hamburger Menu: I know i could have used the image but i wanted some cool animation effects going on, so i used a Pure CSS approach using 3 span elements.

2. Radio Buttons.: A: Styling them, I found challenging when styling them to put an outer border around them but managed to find a way round using the "outline" property in CSS, a solution provided from https://tinyurl.com/StyleRadioButtons3Ways . So all thanks to Joakim Lindberg for providing this.. 👍 and managed to show a nice animation when selecting the radio buttons. B: Using the "click "events from the EventListener gave a strange behaviour and got them working correctly using the ''change" events attaching the eventlistener to the radio button Id specifically, for example-: "radioBtn.addEventListener('change', showChanged);" where "showChanged" is a function i implemented that receives the events. This way i managed to get the radio buttons working ok.

3. Page tearing for the Mask occurred when scrolling when the Modal/Dialogue cards were displayed when testing on my sgs8+ mobile. Here removing 'height:100vh' and putting in the full length in px resolved it initially.

Last but not least i have also added some nice animation to the progress bar loading which was much easier that expected.

Thanks again and looking forward to your feedback. Best regards,

At first this looked straight forward however there were issues with ordering the elements (testimonial cards) using flexbox. So resorted to dividing the Cards up into separate groups into their respective classes to get them into the right position. Due the nature of how flexbox works where it just uses "Row""Column".. No JS on this one unfortunately. :(

The hover effect on mobile devices was not so straight forward and improvised using JS to change the button background and colour when events ("touchstart","touchend") were sent for the button when pushed on a mobile device.