Skip to content
OverviewSolutions
2
Comments
4
Ahmed Melfay
@ahmedmelfay

All comments

  • Chinmay Agarwal•235
    @chinmayagarwal3007Submitted over 3 years ago

    Hello 👋!

    So, this was my first JS challenge. I have so many doubts which I will really appreciate if you can help me find answers

    . I am not able to fix the image at the right position in mobile user interface and how to give that shadow effect under the image.

    . I am unable to figure out how to put all down arrows in one line.

    . Paragraphs are showing orange color on hover only before they are clicked once they are clicked this hover property is disabled please tell me the reason of that.

    . Finally, I think my JavaScript code is too long, so is there any modifications that I can make?

    Please help!!!

    Faq Accordion Card Main Solution(By HTML, CSS, JS)

    3
    Ahmed Melfay•115
    @ahmedmelfayPosted over 3 years ago

    document.getElementById("d2").getElementsByTagName("p")[0].style.color = "black"; document.getElementById("d2").getElementsByTagName("p")[0].style.fontWeight = "700";

    javascript applies the styling inside of your html therefore overwriting your css and giving your p[0] color of black and font weight of 700

    1
  • Chinmay Agarwal•235
    @chinmayagarwal3007Submitted over 3 years ago

    Hello 👋!

    So, this was my first JS challenge. I have so many doubts which I will really appreciate if you can help me find answers

    . I am not able to fix the image at the right position in mobile user interface and how to give that shadow effect under the image.

    . I am unable to figure out how to put all down arrows in one line.

    . Paragraphs are showing orange color on hover only before they are clicked once they are clicked this hover property is disabled please tell me the reason of that.

    . Finally, I think my JavaScript code is too long, so is there any modifications that I can make?

    Please help!!!

    Faq Accordion Card Main Solution(By HTML, CSS, JS)

    3
    Ahmed Melfay•115
    @ahmedmelfayPosted over 3 years ago

    For the arrows issue, you can make a container div which has the 2 divs inside 1 for the question and 1 for the arrow. give the parent container div display:flex; justify-content:space-between;

    and viola.

    As for the click problem, im sure its an issue with your js, try using css instead, for example you can use .p1{ transition: color 0.3s; } .p1:hover{ color: orange; }

    You can also add 'cursor:pointer;' to your p1 class for better UX, to make it look like its actually clickable.

    1
  • Jim•10
    @303jollyrogerSubmitted over 3 years ago

    This is my first attempt at coding up some webby like stuff in 17 years! I spent all that time in the Food and automotive industries. Now I'm trying to get back in to the grove of things. So, I present to you my hot mess to critique and maybe inform me on some ways to better myself. The responsiveness is garbage. I couldn't figure it out. I was attempting to do this in the least amount of code and constraining myself to a deadline of a few hours or less.

    First attempt in HTML and CSS in 17 years!

    1
    Ahmed Melfay•115
    @ahmedmelfayPosted over 3 years ago

    Your main element is not centered to do this you can either use flexbox or grid (You can do a research on those).

    Or you can simply give your div a position of absolute and its parent (in your case the div with the container class) position of relative and use: top:50%; left:50%; transform:translate(-50%,-50%);

    However using grid or flexbox is much cleaner. Also keep in mind grid is much easier than flexbox but flexbox has more browser support.

    Also don't ever use variables in CSS because they are not supported in most of the browsers. If you want to use them id suggest learning SASS, its pretty easy, you can learn it within a day or two. Its also a requirement now a days in most Frontend Developer Jobs.

    Good luck bro, and quite honestly not bad at all for a beginner.

    1
  • Ahmed Melfay•115
    @ahmedmelfayPosted over 3 years ago

    Your website is not fully responsive, here is a preview of what I see https://ibb.co/4mP4NKf

    you need to take care of that.

    Also I haven't tried this challenge but I think you have way too much CSS. Its not a problem, though can be much cleaner.

    Keep up the good work nonetheless.

    0