All solutions

What are you most proud of, and what would you do differently next time?

Honestly, Implementing the slider functionality was not easy. I had to do loads of research before I could develop the solution. I made it possible for users to navigate the slider using the arrow key on their keyboard, as well as a mouse or trackpad. I am also happy to see the website being very responsive across all devices.

In the future, I might clean up my code and use a library to implement this slider functionality.

What challenges did you encounter, and how did you overcome them?

I encountered a challenge when building the slider. It is essential that sliders or carousels are accessible to all users and that navigating them is easy to implement. With the help of some resources, I was able to do that. I also better understood DOM traversing; I learned about events that I had never used before before this challenge. I also learnt some techniques that can be used when working with certain pseudo-classes and pseudo-elements.

Resources:

• Working with focus states
• Listening for when the window is resized
• Working with debounce and throttle to control the execution rate of events handlers -MouseEvents, its properties and its methods
• KeyboardEvents, its properties and its methods
• TouchEvents, its properties and its methods
• Prevent touch event handler from blocking

What specific areas of your project would you like help with?

I am always open to suggestions on how to improve this challenge and make my code cleaner and more efficient.

Thank You 🙏

What are you most proud of, and what would you do differently next time?

I am delighted I got to work with using the try...catch block. My understanding of the concept has not been great, and I am happy I got to see a perfect use case.

I added a loading spinner to the project. That way, when users submit the form after passing in the correct data, they see the effect of their information getting processed before receiving final feedback.

I learnt how to work with the enterkeyhint attribute when working with input fields.

My understanding of the constraint validation API keeps improving with each project I encounter.

What challenges did you encounter, and how did you overcome them?

I struggled to learn how to implement the try...catch block. Initially, I encountered some weird bugs, and the form validation did not work as intended. However, I eventually figured it out.

What specific areas of your project would you like help with?

I want to get an honest review of my solution and see what I could improve.

What are you most proud of, and what would you do differently next time?

I'm thrilled with the solution I've created - it's a testament to my hard work and dedication. One thing that fills me with pride is the deeper understanding I've gained of JSDOC. I'm overjoyed that I was able to bring my solution to life in a way that closely aligns with the design.

What challenges did you encounter, and how did you overcome them?

Although I encountered no significant obstacles, I always looked for ways to improve my solution. I would be grateful for any feedback or suggestions from the community on enhancing my approach.

Hello everyone 👋🏽,

I’m excited to share my recent project, NewPage, with all of you. This project has been a labour of love, and I’m eager to hear your thoughts and feedback. The goal for this project was to:

• View the optimal layout for the interface depending on their device’s screen size.
• See the hover and focus states for all the interactive elements on the page.
• On mobile devices, when the user clicks the menu button, an overlay darkens the page a bit.

The landing page boasts a responsive design that adapts seamlessly to various screen sizes, providing an optimal user experience across devices.

The technologies used were:

• HTML
• CSS JavaScript

I invite the Fontendmentor community to explore the landing and share valuable feedback. Your insights can contribute to making this project even better. I will be expecting feedback.

Hello friends 👋🏽,

I am happy to announce that I have just completed this challenge. I must say, figuring out how to code the layout was somewhat complex, but I am so glad I could figure it out. The form validation is done using the built-in constraint validation API. This feature is available to all form elements like the HTMLTextAreaElement and the HTMLInputElement. I was able to take advantage of this feature to carry out the validation of the form successfully.

A subtle animation was added to the page using the Intersection Observer API when the user scrolls the page when it is loaded. Smooth scrolling using CSS was implemented, which adds a good user experience to the page.

As always, I am open to any corrections from the community on how my code could be improved.

Thank You 🙏🏽

Hello everyone 👋🏽,

I am happy to announce that I have just completed yet another challenge. This challenge was not as working with dates in JavaScript can be tricky. My solution is responsive across all devices.

I learnt how to work with dates, perform JavaScript validation, and add animations to display the user's age on the UI. I also considered integrating leap years as well. The users should be able to enter dates like 29/02/2020 but cannot enter dates like 29/02/2021 as the latter is not a leap year. However, rare people born in leap years can also get a more accurate calculation of their age 😃.

I am open to suggestions on how I can improve my code.

Thank you 🙏🏽

🔥 Exciting Announcement 🔥

I am happy to share the latest project I have been working on: my brand-new landing page featuring a cutting-edge BMI calculator! 🚀

With this tool, I have made calculating Body Mass Index (BMI) more accessible in a snap. The BMI calculator considers height and weight to determine a person's BMI, providing a quick and accurate body composition assessment.

Some cool features of this BMI Calculator:

🎯 Precision: The algorithm behind this calculator has been fine-tuned to deliver precise results, ensuring accuracy in every calculation.

⚡️ Speed: In seconds, users can input their information and receive instant feedback, eliminating the hassle of complex calculations or sifting through charts.

🌟 User-Friendly: I've designed the landing page to be sleek, intuitive, and visually appealing. It provides a seamless user experience, making it effortless for anyone to navigate and utilize the BMI calculator effortlessly.

💡 Insightful Analysis: The BMI calculator provides a numerical result and interprets it in a user-friendly way. It offers clear interpretations and actionable information, helping individuals understand their BMI and make informed decisions about their health and wellness.

I will appreciate any feedback from the community on what could be done to improve this BMI calculator, as well as your thoughts about the responsiveness of the design.

I learnt so much when building this. I got to learn about the following:

• IntersectioObserverAPI
• input event
• change event
• How to make your radio button styles.

Thank you 🙏🏽

Hello 👋🏽,

I have just concluded yet another project, making it the last project for the Newbie challenge section for JavaScript. I did not find much of an issue on the one, to be honest, but as always, I would like to hear some suggestions from the community on how my code could be improved.

I got to learn about two HTML attributes to improve accessibility as well, and these are:

• aria-invalid
• aria-errormessage

Thank you!!

Hello friends 👋🏽,

Great to announce that I have just completed yet another challenge, and I am happy with my solution. Client-side validation using JavaScript can be tricky sometimes, and it feels good I was able to come up with something for this one.

I learnt about the title attribute for form inputs, which I have not used before. This attribute helps provide some extra information about the element.

I will welcome any suggestions from the community on improving my solution.

Thank you 🙏🏽 .

Hello friends 👋🏽,

I just completed another challenge. The validation of the form was done use the use of JavaScript as I got to learn about the constraint validation API.

Knowing how to use this API is important as it gets to save you the stress from dealing with Regular Expressions when trying to carry out some form validation techniques. This was you can create your own custom error messages and style the form depending on the state when the users enters a wrong value or doesn't not enter a value at all when the form is submitted.

I also got to work with the picture element to display the different element depending on the screen as I uses the concept of art direction to do this.

As always I am open to correction and also comments to how I solved this challenge and what I can do to improve my solution.

Thank you

Hello friends 👋🏽

Just completed yet another challenge. This was a fun challenge and it was an opportunity to work with some cool properties which are:

• object-fit
• object-position
• aspect-ratio

The process of making it accessible was put into consideration especially when the widget opens and closes. A subtle hover effect was added to the image when it is hovered just to make the component more interesting.

Finally, corrections and possible improvements are very much welcomed as it would be good to know what could be done to make the solution submitted better and more accessible to other users.

Thank you.

Hello 👋🏽,

Just finished this project by frontendmentor. I had great fun building this with HTML, CSS, and JavaScript. I also tried my best to keep it as accessible as possible for everyone. Some subtle animation was added to the illustration to breathe more life into an already excellent design. More variations of this project were done as can be seen in the links below:

• CSS only accordion
• One panel open at a time

As always, I am open to any correction for the community as the goal is to keep improving and I also look forward to some words of encouragement from the community.

Hello, everyone!!! Glad to announce that I have just concluded this challenge using HTML, CSS, and JavaScript. I found this one a bit challenging but I feel I did a decent with what I was able to code up. I learned a bunch of new concepts, especially when doing the form validation using the constraint validation API and how to perform other client-side validation using JavaScript.

I am open to any corrections and improvements provided by the community.

Just started learning some JavaScript and this is my crack at doing some work on my own. I got to learn a whole lot while implementing some of the features of this project. I am open to suggestions on how I could do better.

1. I got to work with ES6 classes.
2. I got to learn about how the DOM works and also some of the methods and properties that can be used on HTML elements.
3. I also to know the difference between a Node and an Element.
4. I know using Parcel might have not been necessary to use but I wanted to learn how it works.

Some questions for the community?

• Are they better ways I could have made this accessible to more users?
• Did I implement some good coding practices during the small project?
• Are the hover and active states done very well?

I just completed this challenge and I would love some feedback from the community on how I could improve my solution.