Frontend Mentor - Social media dashboard with theme switcher solution

This is a solution to the Social media dashboard with theme switcher challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development

Overview

The challenge

Users should be able to:

• View the optimal layout for the site depending on their device's screen size
• See hover states for all interactive elements on the page
• Toggle color theme to their preference

Screenshot

Links

• Live Site URL: https://aidenm99.github.io/Social-Media-Dashboard/

My process

Built with

• Semantic HTML5 markup
• CSS
• Flexbox
• CSS Grid
• JavaScript ES6

What I learned

• Reinforced my knowledge of CSS Grid:

.top-card-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 38px;
}

• Learned how to add smooth transitions using CSS:

.inner-circle {
  width:21px;
  height:20px;
  border-radius: 50%;
  transition:300ms;
}

• Learned how to lighten or darken an element on hover

.bottom-card-dark:hover {
  box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.05);
}
.bottom-card-light:hover {
  box-shadow: inset 0 0 100px 100px rgba(0, 0, 0, 0.05);
}

• Furthered my skills on responsive design and practiced changing the order of items using flexbox to achieve my desired layout

@media (max-width:890px) {
  .header {
    display:flex;
    flex-direction:column;
  }

  .top-card-container {
    margin-top:50px;
  }

  .main-heading {
    order:1;
  }

  .total-followers {
    order:2;
  }

  .toggle-btn {
    order:4;
    margin-left:auto;
    transform: translateY(50px);
  }

  .theme {
    order:4;
  }
}

• Using togglers

body.classList.toggle("background-light");

• Selecting every element using vanilla JS

var textOne = document.querySelectorAll(".text-dark-one").length;
for(i=0; i<textOne; i++){
    document.querySelectorAll(".text-dark-one")[i].classList.toggle("text-light-one");
  };

Continued Development

I plan to continue practicing JavaScript in every aspect and also CSS Grid and Flexbox, particularly focussing on how to implement these to achieve a design that's fully responsive.