All solutions

Hello, I have completed this course

This was hard to tackle, yet made it all the more satisfying to complete it in its entirety. The "Select Reward" buttons on the .about element also opens the .modal-project pop up, even though it was not stated in the requirements. But I did it regardless since I wasn't sure what else I can have these buttons do.

Thank you for reading, any feedback is appreciated!

Hello, I have completed this exercise!

Can someone tell me why the slider does not work on Chrome? I have included the appropriate code for it, but it's not appearing as intended.

Thank you for reading, feedback is appreciated!

Hello, I have completed this exercise!

I decided to go the Fetch JSON route to learn more about fetching data by using async and await. map and filter arrays were also used to sort out JSON data.

I had a bit of a trouble setting the width of the cards on mobile. I had to manually set width onto the cards to match the report element. If there is a better way, let me know.

Thank you for reading, any feedback is appreciated!

Hello, I have completed this exercise!

The logo is slightly off centre when I give it left: 50% relative to the calculator container for some reason. I had to change it to 48% to be as centre as possible. If anyone can point out the reason why, it would be very nice!

On Javascript, I used isValid as a boolean array with 2 values to activate the reset button if both input values are valid, and if the tip is chosen. If there is a better way to do it, please let me know.

Thank you for reading, any feedback is appreciated!

Hello, I have completed this exercise!

Styling with SASS wasn't too hard, though I haven't been able to center the spent__amount siblings at baseline properly, as in they're not in the same line. How can I achieve that?

I used Chart JS API to create bar chart for this exercise. I have 2 design problems I haven't solved:

1. How to get the tooltip to appear above the bars instead of being on the side?

2. How to remove the horizontal line below the bars?

Thank you for reading, any feedback is appreciated!

Hello, I have finished this exercise!

I've had to add justify-content: flex-start; for @media(max-width: 40rem) so that the container is centred properly. Without it, the container nudges above and some part of it can't be seen. Is there a better practice around it?

I've used forEach on Javascript to mark every notification as read, though I wonder if there's a better way to do it.

Thank you for reading, any feedback is appreciated!

Hello, I have finished this exercise

Nothing too difficult, except placing the alert icon for failed attempts was a bit challenging, but managed it regardless. Getting used to doing these form validation Javascript challenges!

Thank you for reading, any feedback is appreciated!

Hello, I have finished this course

Having the description overlap with the image was challenging, but I had to play around with the grid to achieve this result. I have also added some smooth animations for changing the profile

Thank you for reading, any feedback is appreciated!

Hello, I have completed this exercise!

By far the most challenging exercise I have came across. Positioning the cards with text on them, making them responsive on mobile by having them overlap, making the validation form for credit card details work was all new to me. It definitely was overwhelming but taking this exercise did teach me a lot. Please let me know if there is a better way to do all these.

I attempted to use the ES6 class constructor for the credit card details, but it didn't prove useful as I need to declare them regardless to use them for addEventListener for validation.

if (isValid["number", "name", "month", "year", "cvc"] === true){
        ui.addDetailsToCard(card)
        ui.clearFields ()
        ui.displayThankYou()
    }

I made this code to check if every field has a valid text, but whenever you type on every field correct and then invalidate of the form, the submit button will still work. Is there a reason why?

Thank you for reading, any feedback is appreciated!

Hello, I have finished this exercise

My first attempt at doing JavaScript for form validation. Generates a different message depending on the input being blank, invalid format or correct format which has a green color for both the message and the border-color.

Looking forward to how I can get with Javascript!

Thank you for reading, any feedback is appreciated!

Hello, I have finished this exercise!

Getting the rating selection down was a huge challenge. Part of it is because I group the ratings as ul instead of radio buttons. If someone can elaborote on which method to use (ul or radio buttons) that would be helpful!

Thank you for reading! Feedback would be appreciated!

Hello, this is my solution

I am a noob at Javascript, so it took me a while to get the .share pop up to work. It doesn't work on the first click, but then it functions normally from the second clock onwards. Don't know why this happens. Please comment if you have any idea why this happens.

Furthermore, I used customized colours for this project, let me know whether it looks good or not!

Thank you for reading, any feedback is appreciated!

Hello! This is my solution!

I managed to implement Hamburger Menu for mobile view without any JS through CSS. A challenging exercise overall, with knowledge of Grid and Flexbox required to style the page properly.

Thank you for reading this, any feedback is appreciated!

Hello!

Another challenge with added Dark Mode JS! Straightforward challenge, but aligning images to the bottom right corner was a bit of a challenge. I used position: absolute with bottom: 30px and top: 30px to be properly aligned with the padding: 30px given to the .card. Let me know if there's a better way to do this!

Thank you for reading, feedback is appreciated!

My name is Hussain and I just solved this challenge!

I have added a Dark Mode toggle via Javascript. This works by adding .darkmode to the body that replaces the colours with the ones intended for dark mode.

Feedback is appreciated. Thank you for reading this!

My name is Hussain and I just solved this challenge!

I have 3 @media queries added that change at different max-width. Somehow, I feel like I could've done a better job of coding the mockup image at the .showcase segment. Would love it someone can point out what can be done better.

Feedback is appreciated. Thank you for reading this!

My name is Hussain and I just solved this challenge!

Added animations and some nice hover effects for the Register button and social links. Let me know if there's something I can improve on!

Took a while but learnt a lot building this! Need to use more Mixins on SASS which I've included a few in this project.Would be worth it to learn how to utilize it more.

Originally, I set a Flexbox on the "container" code to align the main component center on the page. I wasn't able to put box-shadow on the main component for some reason, but after looking through codes on similarly centred websites, I decided to create its parent "card" and put Flex there. Then I put box-shadow on the container and it worked.

If someone can elaborate on why this is the case (box shadow not working on the div that has "Display: flex") I would appreciate it!

Also feedback on my codes would be apprectiated if there's anything I can improve on.

Designing the "185 GB LEFT" message pop-up was pretty challenging, but fun! I had to make two separate pseudo elements (::before and ::after) for the message, one for the bolded "185" text and other for the non bolded "GB LEFT". Apparently you cannot have different font weights on a single content in a pseudo element, you would need both before and after. Is there any (better) way to create this message in the code?

1. Writing the code for the stars was the hardest part of the challenge. I did it by using the ":before:" code. Is it practical to just put 5 images of the star instead? (Which I initially planned to do so) Is there a code that can clone the image you put instead of writing the code 5 times?

2. I separated the review cards by using margin. Would it have been more practical to just flex/grid them with gap? (Especially in the mobile view where the margin bottom is also applied to the 3rd card, making more gap between the review cards and testimonials session.)

The gap property wouldn't work on the grid container, like if I put it on the code, it wouldn't leave any gaps no what what px I put. Can anyone elaborate on why is that?

Question 1: What is the best way to apply padding inside the menu text (Right of the image)? I did it by giving padding to the menu text container and margin to the "Gabrielle Essence Eau De Parfum" so I am not sure if it is an effective way of aligning my text inside.

Question 2: Increasing the image of the Cart Icon inside the button would un-center the "Add to Cart" text. Is there a way to bypass this?