Skip to content
OverviewSolutions
10
Comments
5
Wellington Damasio
@wellington-damasio

All comments

  • João Pantaleão•70
    @JoPantaSubmitted over 1 year ago

    This one took me around 7 hours. Struggled a bit with the media queries, but overall very fun! If you have any tips or suggestions, I would appreciate it.

    Summary component solution

    1
    Wellington Damasio•210
    @wellington-damasioPosted over 1 year ago

    Hi there, João! 🙃

    This project is much more complex than it seems. I thought it would take me only 2 hours complete it but it took me 6 hours to do so haha.

    I think you're using a .flex-container to wrap the two parts of the component on the mobile screen sizes and changing it's flex properties to centralize the two parts of the component in desktop views.

    This is causing your component to have unmatched borders in desktop views.

    I recommend you to use that .flex-container class as a component wrapper that becomes a two-column layout on desktop views and using position: absolute to position that card wrapper on the center of the screen in desktop sizes.

    You can center elements by using the following CSS properties:

    .card__wrapper {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

    Overall, you did really good with this challenge! The design was matched, hover effects are on point and mobile view is great.

    Congrats, dude. 🥳

    Marked as helpful
    1
  • Alexandre Coelho•50
    @coelhoalexandreSubmitted almost 2 years ago

    Doubts

    1. For this one, would it be ideal to use Grid instead of Flexbox?
    2. How do you get the icon?
    3. I was also quite doubtful about the stylization of the button, the way it is in the design.

    Dúvidas

    1. Para este, seria ideal usar Grid ao invés de Flexbox?
    2. Como consegue o icon?
    3. Também fiquei bastante dúvida na estilização do botão, a como está no design.

    Mobile First | Responsive product preview card component with Flexbox

    1
    Wellington Damasio•210
    @wellington-damasioPosted almost 2 years ago

    Eaí Alexandre, beleza?

    Grid x Flexbox

    Utilizar grid ou flexbox fica a critério do desenvolvedor. Use o que for mais confortável para você. O que importa neste caso é o resultado.

    Eu, particularmente, gosto de utilizar flexbox em cards, pois o layout não é tão complexo à ponto de utilizar grid, e flexbox é mais rápido de se escrever, na minha opinião.

    Utilizando o icon

    1. Adicione o CDN do FontAwesome na tag head do seu projeto
    2. Vá até o website do FontAwesome e pesquise por 'chart'. Você irá achar o HTML necessário para adicionar o ícone no seu botão. Basta copiar e colar o HTML que estará lá.

    Sobre o design do botão

    Acho que a sua dúvida se deve ao fato de o seu card estar um pouco maior que o do design. Nada demais.

    Além de faltar o ícone do carrinho e a fonte estar um pouco menor comparada ao design, não vejo nada de errado no botão.

    Melhorando o CSS

    Meus parabéns pelo CSS, ficou organizado, responsivo e parecido com o design. Recomendo dar uma olhada no website do BEMCSS, vai te ajudar a dar bons nomes para suas classes e evitar confusão com CSS em projetos grandes.

    Espero ter ajudado

    Vlw, flw!

    Marked as helpful
    1
  • Radek•490
    @RadexmanSubmitted almost 2 years ago

    I struggle with the DOM manipulation in this task. I managed to work out some of this functionality but it not works as intended. I will be gratefull if someone would be able to respond to me with some tips.

    Made with SASS partials, variables and mixins

    1
    Wellington Damasio•210
    @wellington-damasioPosted almost 2 years ago

    Hi Radek,

    First of all, congratulations for the styling. I saw a lot of beginners having overflow problems in their card components because of the use of fixed width.

    Anyway, there's two ways you could complete this challenge:

    1. DOM Manipulation: Updating the HTML of the card when user press the submit button.
    2. Building the 2 cards with HTML + CSS and hiding the "thank you" card behind the first card.

    I used the second approach because updating the DOM would require me to write different styles and HTML structures for the "thank you" card anyway.

    If you want to understand how it works here the code, I hope it's clean enough so that you can understand it: https://github.com/wellington-damasio/interactive-rating-component

    If you want to use DOM Manipulation what I recommend you to do is to write the second card in HTML + CSS, insert the variables of the ratings like you're already doing inside that card and then cut and paste this whole HTML in the JavaScript file.

    What you're going to do next is use the submit event (with the submit button) to replace the whole HTML structure inside the card with the HTML of the "thank you card you wrote".

    If you don't know how to exactly do it, serch for the innerHTML property and submit event on Google.

    You'll basically want to attach the submit event to the form in you're card to replace it's HTML with something like card.innerHTML = 'your html code here'

    For the rating buttons active state you'll just have to include a code that cleans all states before attaching a new active state.

    Something like

    rating.forEach((item) => {
    item.addEventListener('click', (event) => {
        let score = item.textContent;
        let feedback = document.createElement('p');
        item.classList.remove('rating__box--active');
        event.target.classList.add('rating__box--active)
        msg = `You selected ${score} out of 5`;
        feedback.textContent = msg;
        section.appendChild(feedback);
    })

    In the above code I used the event.target to update the selected button with the active state while removing the active state from the other buttons

    Again, congrats for the CSS styling, just trying the give your classes more meaningful names like 'card', 'card-header', and so.

    If you have any questions don't hesitate to ask me. Cheers!

    Marked as helpful
    1
  • Wellington Damasio•210
    @wellington-damasioPosted almost 2 years ago

    Almost perfert. Try switching the fixed width and height of the card for no height and padding. This will fix the content overflow problem.

    From this:

    main{
    width: 320px;
    height:70vh;
    background-color: var(--Very-dark-blue-card-BG);
    border-radius: 20px;
}

    To this:

    main {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.card {
  max-width: 350px;
  padding: 24px;
  background-color: var(--Very-dark-blue-card-BG);
  border-radius: 20px;
}

    The above code should center the card in the screen and fix the content overflow problem in the card. You did awesome for the rest!

    You can reach out to me if you have any questions. Hope it helped you!

    Marked as helpful
    1
  • kIdKib•10
    @kIdKibSubmitted about 2 years ago

    the picture responsive was a bit problematic, please what unit do is best suitable for responsive or do i have to combine different and if yes in which situation

    flexbox, pseudo element, media queries

    1
    Wellington Damasio•210
    @wellington-damasioPosted about 2 years ago

    It's the best practice to not set specific width to images.

    What I did was:

    1. I used flexbox and divided the card 50/50 between the image and the content.
    2. Set the max-width of the image to 100% max-width: 100%;. By doing this, the image will expand when it's needed to fit it's cotainer but will never become distorted.
    3. See in which screen width the mobile image begins to not fit, that's when you switch to the desktop image. You can use the <picture> tag or media queries for that.

    Hope it helped you!

    PS: Don't forget to style the font of the button ;)

    0