lieneil
@NJVSAll comments
- @otizgitSubmitted over 1 year ago@NJVSPosted over 1 year ago
Hi Emmanuel, congrats on completing the challenge!
I just want to ask, where can i download the emoji you're using? Thanks ^_^
0 - @Saga-sangaSubmitted about 2 years ago
Finally finished up this project using CSS grid and flexbox. I used a lot of CSS selectors in this practice project. I also learnt how to use pseudo classes such as
:not()
and practiced mobile first design. My main question:- How do I change the svg color on hover? I tried using
fill
but it doesn't work for this specific SVG file.
@NJVSPosted about 2 years agoHi, about your question. The color of the arrow svg is in the
stroke
, so instead offill
, just use the stroke property to change its color. But I've noticed that you embed your svgs using theimg
tag. As far as I know, the easiest way to alter svg icons' color on hover is to just use inline svg.Marked as helpful0 - How do I change the svg color on hover? I tried using
- @CodeLamp168Submitted about 2 years ago
Been a while since I used javascript, so the script feels needlessly complex for something as simple as a click event.
Would love some tips on how to deal with javascript in this situation.
Had to configure the answers' class in the css to absolute and push them far away from the entire body so I could animate a transition instead of a sloppy display block reveal. If any alternatives to this solution, I would love to know.
@NJVSPosted about 2 years agoHi Caleb, what I've done is initially set a
max-height: 0
to thep.answer
, you can't animate a transition if you just set max-height to auto, so i use javascript propertyscrollHeight
to get it's fully expanded height.//style.css .answer { max-height: 0; } //script.js button.addEventListener('click', function(){ const answer= target.closest('div.faq-container').querySelector('p.answer'); answer.style.maxHeight = `${answer.scrollHeight}px` }
Marked as helpful0 - @GoorezyESTSubmitted about 2 years ago
What you think about it?
@NJVSPosted about 2 years agoGreat work completing this challenge. I have a little suggestion, you can use
<input type="radio">
instead of<button>
on your ratings. By doing this, you will only need one click event, just for the<button class="btn__submit" id="submit">
. ^_^Marked as helpful1 - @abymaniSubmitted about 2 years ago
Setting navigational menu was difficult for me . I think my javascript code is not optimal it does work but there must be a way to do it better. any suggestions will be appreciated.
@NJVSPosted about 2 years agoHi, Abdul. Congrats for completing the challenge.
Regarding your dropdowns, I've notice that the
<li id="features">
and<li id="company">
has the same click event. You can just assign a identical class name for your dropdown like this<li class="dropdown">
then select both of them in javascript then run aforEach()
method then add click event(thats a lot of "then" LOL). Also, instead of toggling class forsub-menu
,<a>
and<i class="fa-solid">
, I suggest to just toggle a class on their parent element.const dropdowns = document.querySelectorAll("li.dropdown"); dropdowns.forEach(dropdown => { dropdown.addEventListener("click", function(event) { event.currentTarget.classList.toggle("active"); }); });
.dropdown.active > a { font-weight: 700; } .dropdown.active > a i.fa-solid { transform: rotate(180deg); } .dropdown.active > .sub-menu { display: block; }
Marked as helpful1 - @lifeaddiktSubmitted over 2 years ago
Any feedbacks would be welcome !
I had some difficulties on the dropdown menu i have used position:fixed.... it would be better to use position : absolute i guess... but i didn't have a parent item to do it properly.
I also add difficulties on the desktop on sharing the main content in 2 sections that are well responsive. I'm steel learning flex-basis, flex-shrink and grow... Im not clear with everything.
Thank's :)
@NJVSPosted over 2 years agoGreat work completing this challenge.
Regarding your dropdown menu, I think you can better position your
<ul class="dropdown">
by moving your dropdown inside the<li class="nav__site-links__dropdown-links">
.<li class="nav__site-links__dropdown-links"> <a href="#">Features</a> <ul class="dropdown features> <li>...</li> <li>...</li> <li>...</li> </ul> </li>
.nav__site-links__dropdown-links { position: relative; .dropdown { position: absolute; top: 120%; &.features { right: 0; } &.company{ left: 0; } } }
Marked as helpful1 - @Olumide2596Submitted over 2 years ago
Had a lot of fun building this, if you know what I mean. feedback is welcomed.
@NJVSPosted over 2 years agoCongrats, your solution looks really good. But there's a small problem, the dropdown menu is still clickable even though its not visible, I suggest to add css property
visibility: hidden
/visibility: visible
on dropdown menus becauseopacity
only makes the element transparent.Marked as helpful0 - @snehamoybagSubmitted over 2 years ago
This is my second time uploading this challenge. I've managed to add some transition effect to the accordion using the
element.style.maxHeight = element.scrollHeight + "px"
, but this effect only works when the accordion opens..but doesn't work when its closing. I'll be super grateful if anybody can teach me how to do it. 🙇🏾♂️Update : made the javascript cleaner and added a little bit of transition effect using the
opacity
property@NJVSPosted over 2 years agoHi, CSS
display
property cannot be animated. You can just setmax-height: 0
on your.faq-acc-answer
and do theelement.scrollHeight
, thenelement.removeAttribute("style")
to remove theelement.style.maxHeight
. I just submit my solution, you can check it if you want <3Marked as helpful0 - @varsanihemalSubmitted over 2 years ago
- would appreciate any feedback i get so that i can look back because i made many mistakes during the process.
@NJVSPosted over 2 years agoI suggest to use CSS Grid, Its easier this way <3. A Complete Guide to Grid
0 - @CodinGitHubSubmitted over 2 years ago
Any feedback is wellcome!
@NJVSPosted over 2 years agoTry to use
<input type="radio">
instead of<button>
. With this you'll only need one event listener, instead of the numberContainer and check which button triggers the click event. GOOD LUCK <30 - @PaulSierraFISISubmitted over 2 years ago
What other attributes do I have to consider to position the images correctly in almost all resolutions and devices?
@NJVSPosted over 2 years agoI suggest to use <picture> element for responsive images, this changed my life LOL
https://web.dev/learn/design/picture-element/
0