Submitted 9 months ago

article component slution

Taiwo Sumayyah•150

@Sumta4real

A solution to the Article preview component challenge

Preview Code

Solution retrospective

What are you most proud of, and what would you do differently next time?

Finally getting hang o responsive design

What challenges did you encounter, and how did you overcome them?

I was not able to style the bottom component as required. And I also had chellenge with uing javascript to change the compnents of the bottom div

What specific areas of your project would you like help with?

I would appreciate help with my getting better on Javascript, any recommendations on practical hands on tutorial or useful books. I woul also appreciate corrections on best way to style the bottom div

Code

Please log in to post a comment

Community feedback

P
Michał•290
@miedzygalaktycznygit
Posted 9 months ago
Hello, I’m not sure if my way is the best because I’m also just starting to learn, but I just made another div for socials, and with JS, I made it pop up on the screen when a button is clicked and disappear when clicked again. On the mobile design, I made the div with the photo disappear and replaced it with socials.
```
button.addEventListener('click', () => {
    if (mediaQuery.matches && !landscapeQuery.matches) {
        divPersonalInfo.style.display = 'none';
        divSocials.style.display = 'flex';
    } else {
        if (isToggled) {
            divSocials.style.display = 'none';
        } else {
            divSocials.style.display = 'flex';
        }
        isToggled = !isToggled;
    }
});

button2.addEventListener('click', () => {
    if (mediaQuery.matches && !landscapeQuery.matches) {
        divSocials.style.display = 'none';
        divPersonalInfo.style.display = 'flex';
    }
});
```
- You can look on my code and feel free to use it to try to improve Your website.
- And I think that You have small mistake that's making this bottom div looks weird
```
background: linear-gradient(to bottom, white 90%, hsl(217, 19%, 35%) 100%);
```
You simply write "background-color" and You should udes "background" instead
- I hope that You can find my message helpful and I wish You best in Your future projects.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord