Skip to content
OverviewSolutions
20
Comments
478

David

@DavidMorgadeSpain7,960 points

Currently studying design and development of web applications, I like to develop apps with React, Node, Mongo - SQL and create templates/landing pages using custom SCSS. You can view my github profile page for more info!

I’m currently learning...

NextJS, Express, Tailwind...

Latest solutions

View more solutions

Latest comments

  • David•7,960
    @DavidMorgadePosted over 2 years ago

    Muy buenas Victor, enorabuena por terminar el challenge!!

    Como ya dices en tus "next steps", como primero tomaría el hacerlo completamente responsive porque como ya sabes en la actualidad la mayoría de los usuarios navegan a traves de un dispositivo móvil, en mucha mayor medida que desde un PC, te recomiendo que pruebes el "Mobile first", que consiste en empezar la web desde el tamaño mobile y después ir adaptandola a tamaño de escritorio, aunque como ya la tienes montada así, puedes ir ahora adaptandola a tablet y después a móvil...

    Sobre el tema del formulario, tendrás que crear un servidor de Backend que reciba la información, ya eso va a tu gusto, puedes hacerlo con múltiples lenguajes de programación (java, c#, PHP, python, Javascript, Typescript...) con alguno de sus frameworks/librerias enfocados para el Backend.

    Te dejo el enlace a como enfoqué yo este proyecto por si te sirve de ayuda para inspirarte, el formulario lo hice con NodeJS y una librería que se llama nodemailer, te dejo el repositorio del servidor por si te interesa.

    Cualquier duda que tengas pregunta, muy buen trabajo!

    Marked as helpful
    0
  • David•7,960
    @DavidMorgadePosted over 2 years ago

    Hello man congrats on finishing the challenge!! great job, the accordition issue is just a bit of logic warm up that will come with time, don't worry much about that.

    Here is my approach to solve the problem (for sure there is a better solution, but this should do the trick):

    1 - Give each of your faq elements an unique id (for example: faq1, faq2, faq3...)

    2 - Now that we have each faq element with an unique identifier, you can improve your removeActiveClasses function so it identifies when the clicked faq is the same that is open:

    function removeActiveClasses(elementId) {
  faqs.forEach((faq) => {
    if (elementId === faq.id) return;
    faq.classList.remove('active');
  });
}

    2.1 - The element Id is the id of the faq div that should be pass to the function, then it compares it to the faq.id in your foreach loop and if its the same it will instantly return (cutting out the bad behaviour of not letting you close a faq by themself.

    3 - Last but not least you have to pass the current faq id from your event using some dom traversing or directly getting it from your forEach method:

    faqs.forEach((faq) => {
  faq.addEventListener('click', (e) => {
    removeActiveClasses(faq.id);
    faq.classList.toggle('active');
  });
});

    3.1 - You could also use dom traversing with the e Event but this would be overkill since you already have your html faq element from the forEach method, just use faq.id in your eventListener and it should work

    Hope it helps, if you have any questions or need a pull request just ask!

    Marked as helpful
    0
  • David•7,960
    @DavidMorgadePosted over 2 years ago

    Hello Daniel, congrats on finishing the challenge!

    You are doing good using display: grid place-items: center on your parent component, the problem is that setting a max-width: 1440px on your body will limit the width of the component, not getting centered, you should remove hardcode widths on your body.

    Apart from that you could also use display: flex justify-content: center align-items: center to center your component from the parent element.

    Marked as helpful
    1
  • David•7,960
    @DavidMorgadePosted over 2 years ago

    Hello Mikhael, congrats on finishing the challenge ! you did a great job.

    To answer you question, you can archieve this with different apporaches, you could add a div with position absolute that wraps the whole document and has shadowy background and some opacity (all of this should be added when the mobile menu is active)

    Other thing that I noticed in your project is that the images are not loading correctly, this is because you are uploading your files to github with a different folder structure than your local project, you should either have the same structure as the live project has, or change the path of your img source atttribute

    Apart from that, great job and keep it going, hope my feedback helped you!

    Marked as helpful
    0
  • David•7,960
    @DavidMorgadePosted over 2 years ago

    Hello Roy! Great job finishing the challenge, for me it looks great on mobile and desktop sizes, nice.

    To answer your question, you can easily archive the same result with grid, you won't need to use flex at mobile sizes, just grid at your 1280px media querie.

    You can try it at your own doing this:

    1. In your .container .card remove the display: flex.
    2. In your 1280px mediaquery, add at your .container .card selector the property display: grid;
    3. Also add to your .container .card grid-template-columns: repeat(3, 1fr);

    With these properties your layout at mobile sizes will stay the same (because those block elements stacks one on the other as they have display: block by default), and with the display: grid at 1280px you will have 3 columns of the same size (grid-template-columns: repeat(3,1fr))

    Hope my answer helps you!

    Marked as helpful
    1
  • David•7,960
    @DavidMorgadePosted over 2 years ago

    Hey man great job with the project!

    The project looks good both in Mobile and Desktop, there is no need to run the project locally to see the styles, you just need to link the relative path to your project like this:

    <link rel="stylesheet" href="./output.css">

    Instead of:

    <link rel="stylesheet" href="/public/output.css">

    This ./output.css will work for you because your CSS file is in the same folder as the html file, then to refer to the same folder you just have to type ./ followed by the name of the file.

    Hope my feedback helps you!

    Marked as helpful
    0
View more comments