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
• Author

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

Screenshots

Links

• Solution URL: Solution
• Live Site URL: Social-Media-Dashboard-with-Theme-Switcher

 

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Vanilla JS

What I learned

I really enjoyed this challenge. There were quite a few things to do. The dashboard was quite busy so there was a lot to populate and style. Then there was the theme switching part which was a nice JS addition.

• html
  • Simple html addition but an important one...

    <noscript>JavaScript disabled</noscript>

 

• CSS
  • Seems easy enough but I didn't realise you could use css styling to make the texts uppercase with spacing between letters...

    .mainType{text-transform: uppercase;}
    .mainType{letter-spacing: 0.26vw;}

 

• JS
  • For the Dark/Light mode toggle, I was originally using this...

    function toggleDarkMode() {
      if(banner.classList.contains("bannerLight")) { // if in lightmode then switch to dark mode
          
          // CODE TO SWITCH TO DARK MODE...
    
          // EG. FOR THE CARD COLOURS...
          card.forEach(item => { // change the colour of the cards from grey to dark desaturated blue
              item.classList.remove("cardLight");
              item.classList.add("cardDark");
          })
      }
    
      else if (banner.classList.contains("bannerDark")) { // if in darkmode then switch to light mode
          
          // CODE TO SWITCH TO LIGHT MODE
          // OPPOSITE TO THE ABOVE CODE TO SWITCH TO DARK MODE
      }
    }

  • But then I found out JS had a toggle 'function' so I could condense the code down rather than have one each for dark and light mode specifically...

    function toggleDarkMode() {
      card.forEach(item => { // change the colour of the cards
          item.classList.toggle("cardLight");
          item.classList.toggle("cardDark");
      })
    }

 

Continued development

• Do more Frontend Mentor challenges
  • focus on learning more Vanilla JS in the process
  • hopefully become quicker with the HTML & CSS parts

---

Author

• Website - Man Ting Chan
• Frontend Mentor - @M-Chan