Frontend Mentor | Afolarin Oyeleke's profile

@Neljohn-CereraSubmitted over 2 years ago

How can I modify the circular button's clicking background? I divided the buttons into various components and mapped the buttons in the parent component using a map function.

Interactive Rating Component Using Next JS & Tailwind CSS

1

Afolarin Oyeleke•130

@Fola-rinPosted over 2 years ago

Hello there, great work on the design. If what you mean is changing the background-color of the button with an onClick event, you can easily do so by adding a condition as you map through the data array. So you can have a new prop called active and this will toggle the background color. {data.map((val: any) => ( <ButtonCirle key={val.id} text={val.text as string} handleCLick={() => handleRating(val.id)} active={val.id === rating} /> ))}

Hope that solves your problem? If it did, please let me know and kindly mark this reply as helpful> Well done and happy coding!

0

Rawley•160

@EbotRawleySubmitted over 2 years ago

The footer logo should be white, it wasn't included in the image s folder.

Responsive manage landing page with HTML, CSS and JS

1

Afolarin Oyeleke•130

@Fola-rinPosted over 2 years ago

Hello there, great work on your design. Looks. really clean and nice. You can easily change the color of the logo. Just follow this 3 steps:

Make a copy of the logo.svg file and rename it as you wish. I'll assume the new logo file is named "logo-white.svg"
Open the logo-white.svg(a copy of the logo.svg file) file
Once opened, you can easily change the color by replacing the value of the fill property of the path to #fff. for example <svg><g><path fill="#fff"></g></svg> or just copy the exact file below

logo-white.svg

Hope I have been able to help? Good luck on future projects

1

KerimGurbaz•100

@KerimGurbazSubmitted over 2 years ago

Unfortunately, I can't create responsive designs and I can't use javascript effectively enough, I need help on this. Thank you for your interest and feedback.

Enlighten me with your feedback, please...

1

Afolarin Oyeleke•130

@Fola-rinPosted over 2 years ago

Hello there, I went through your solution and it seems you got all the javascript right since the click event on each dropdown works nicely. Where can be improved is the styling, you can maybe add the font used in the design( your starter file). Also if you're just learning responsive design, W3Schools is nice place to start.

Good luck, looking forward to how your updated design looks.

1

RabbitMaid•1,020

@AgbortokoSubmitted over 2 years ago

This project was quite difficult for me! I had problems making up the dropdown menu! What is the best way to go about this? Also with the header section, i had difficulties aligning the images and content as shown in the design image.

Responsive Intro section with dropdown navigation

2

Afolarin Oyeleke•130

@Fola-rinPosted over 2 years ago

Hello there, I checked your solution and it was really nice. I'd say how you went about the dropdown menu works unless you mean making it animated. If so you can easily set this to your dropdown .hide { height: 0; transition: 200ms ease; overflow: hidden; } .show { height: $dropdown-height transition: 200ms ease; } This solution works best when you have a defined height, which in your case you can easily get the height by inspecting your dropdown. I also noticed you do not have an overlay background when one opens the mobile menu. I feel having an overlay improves the user experience and also you can make it clickable as well. This can be done by having a .bg class.

<div class="bg" onclick={closeModal}></div> .bg { position: fixed; height: 100%; width: 100%; top: 0; left: 0; z-index: 1; } and then you can easily add this to your mobile-menu .mobile-menu{ z-index: 2; // all your other styles }

Any ways I really liked your work. Well done. Hope I was able to help?

Marked as helpful

1

Afolarin Oyeleke

All comments

Interactive Rating Component Using Next JS & Tailwind CSS

Responsive manage landing page with HTML, CSS and JS

Enlighten me with your feedback, please...

Responsive Intro section with dropdown navigation