All solutions

This is my solution for the Age Calculator App.

It was overall easy and enjoyable building this project, however I faced a difficulty regarding functionality:

• I would basically like to find out how to validate the form based on day and month input. You can type in #day-input every number from 1 to 31 nevertheless there is no validation regarding month restrictions (for example you can type 31 February and it will generate an output). Is there any regex available or do I need to set specific limitations in the JS script?

I would appreciate your feedback and would like to receive your comments and perspectives regarding the project. Thanks a lot!

This is my solution for the Time Tracking Dashboard.

While I initially thought it would be easy and enjoyable to build this project, I was eventually stuck designing the Grid (I prefer Flexbox and Bootstrap Grid classes didn't help me a lot) so I asked a friend to help me for that part.

I would appreciate your feedback and would like to receive your comments and perspectives regarding the project. Thanks a lot!

This is my solution for the Advice Generator App.

It was overall easy and enjoyable building this project.

I would appreciate your feedback and would like to receive your comments and perspectives regarding the project. Thanks a lot!

This is my solution for the Intro Section with Dropdown Navigation.

It was overall easy and enjoyable building this project.

I would appreciate your feedback and would like to receive your comments and perspectives regarding the project. Thanks a lot!

This is my solution for the Expenses Chart Component.

It was overall easy and enjoyable building this project.

I would appreciate your feedback and would like to receive your comments and perspectives regarding the project. Thanks a lot!

This is my solution for the Interactive Card Details Form Component.

It was overall easy and enjoyable building this project, however I faced some difficulties regarding appearance and functionality:

• First of all, I would be open to suggestions regarding how to address mobile responsiveness as I can't fix the height of .card-section (it remains the same). Bear in mind this is an <aside> element.
• Secondly, I want to figure out how to add form validation. I mainly use React and Formik however they occupy a lot of space for a simple app inside a website so I would like to achieve it using vanilla JS. I have already inserted some starting code for the #cardNumber <input> however it's not efficient. I have also interacted with other solutions such as adding an .error-message <div> inside every <input> but still without luck.
• I would also like to learn how to change border color (I use Bootstrap for default styling). While I have defined a class, specified a value and marked it as !important it doesn't produce any fruitful result.
• Lastly, tell me how to fix the bug regarding .exp-date-yy-front span, as when I insert a value on it (f.e. 23) it returns 2300 instead of 23.

I would appreciate your feedback and would like to receive your comments and perspectives regarding the project. Thanks a lot!

This is my solution for the Notifications Page.

It was overall easy and enjoyable building this project.

I would appreciate your feedback and would like to receive your comments and perspectives regarding the project. Thanks a lot!

This is my solution for the News Homepage.

It was overall easy and enjoyable building this project.

I would appreciate your feedback and would like to receive your comments and perspectives regarding the project. Thanks a lot!

This is my solution for the FAQ Accordion Card Component.

It was overall easy and enjoyable building this project, however I faced a difficulty regarding the accordion:

• I would like to figure out how to change font-weight to 400 for the .acc-header class when I exit a selected question. I have tried out this line:

content.style.display =
        content.style.display === "block" ? "none" : "block";
header.style.display =
        content.style.fontWeight === 700 ? 400 : 700;

However, it simply reverts every header to 400 and thus changes nothing. Meanwhile, other solutions simply bring about the same result as with the current situation

I would appreciate your feedback and would like to receive your comments and perspectives regarding the project. Thanks a lot!

This is my solution for the Social Proof Section.

It was overall easy and enjoyable building this project.

I would appreciate your feedback and would like to receive your comments and perspectives regarding the project. Thanks a lot!

This is my solution for the Article Preview Component.

It was overall easy and enjoyable building this project, however I faced some difficulties regarding the toolbar:

• First of all, I would be open to suggestions regarding how to add a triangle below toolbar (I know it might look easy to you but I was also busy with another crucial project so any support would be helpful to save time).
• Secondly, let me know if there is any way to add .share-btn to the mobile responsive toolbar to match the exact pattern. It might be easy to exit the toolbar in any case, however it would be even better to match the exact pattern.

I would appreciate your feedback and would like to receive your comments and perspectives regarding the project. Thanks a lot!

This is my solution for the Profile Card Component.

It was overall easy and enjoyable building this project.

I would appreciate your feedback and would like to receive your comments and perspectives regarding the project. Thanks a lot!

This is my solution for the 3-Column Preview Card Component.

It was overall easy and enjoyable building this project.

I would appreciate your feedback and would like to receive your comments and perspectives regarding the project. Thanks a lot!

This is my solution for the Stats Preview Card Component.

It was overall easy and enjoyable building this project.

I would appreciate your feedback and would like to receive your comments and perspectives regarding the project. Thanks a lot!

This is my solution for the Order Summary Component.

It was overall easy and enjoyable building this project.

I would appreciate your feedback and would like to receive your comments and perspectives regarding the project. Thanks a lot!

This is my solution for the NFT Preview Card Component.

It was overall easy and enjoyable building this project, however I faced a difficulty regarding view-icon:

• I have tried out various solutions on how to make the icon appear in the .view-icon class when we hover on the .nft-image <div>. The main one was adjusting the z-index to a higher value than the one of .nft-image when the latter one is hovered upon. I have also made the icon visible via visibility: visible;. However, the image remains hidden every time, even if I change the position of z-index to the :hover selector. I would really appreciate any suggestions for solving this issue as it has bugged me for a while.

I would appreciate your feedback and would like to receive your comments and perspectives regarding the project. Thanks a lot!

This is my solution for the Interactive Rating Component.

It was overall easy and enjoyable building this project, however I faced a difficulty regarding functionality:

• I would like to learn how can I disable the button defined in the .submit-btn class when no value is selected. I tried adding the following snippet: if(finalRating.innerHTML === '') { submitBtn.disabled = true; } However, it blocked my button even after I had chosen a rating value between the available ones. With the current code you can see that rating values display perfectly in the .thank-you state.

I would appreciate your feedback and would like to receive your comments and perspectives regarding the project. Thanks a lot!

This is my solution for the Product Preview Card Component.

It was overall easy and enjoyable building this project, however I faced some difficulties regarding mobile responsiveness:

• The main issue is adjusting text so that it fits the image appearing in the Mobile Design section. While I tried adding <br /> elements to meet the standards of Desktop Design, this solution is not feasible for responsive sizes and at the same time I am not sure what to do with the .product-title class so that it restructures automatically.
• Secondly, I would like to learn about how to resize the component for mobile devices in general. The flex-wrap property doesn't seem to work as some settings get overriden by Bootstrap, therefore it's difficult to think of something else other than defining the size manually. You may also submit proposals on how to change classes in Bootstrap in order to achieve the most desirable result.
• As for other things, it would be appreciated if you could suggest alternative solutions to fit the icon and text inside the <button> element as well as alternative font-sizes.

I would appreciate your feedback and would like to receive your comments and perspectives regarding the project. Thanks a lot!

This is my solution for the Results Summary Component.

It was overall easy and enjoyable building this project, however I faced some difficulties regarding mobile responsiveness:

• I would like some feedback on how to synchronise icons and text in the Summary tables as well as how to lower font-weight on the percentage span.

I would appreciate your feedback and would like to receive your comments and perspectives regarding the project. Thanks a lot!

This is my solution for the QR Code Component.

It was overall easy and enjoyable building this project.

I would appreciate your feedback and would like to receive your comments and perspectives regarding the project. Thanks a lot!