socila media via SCSS + JS

Community feedback

• 

  Ahmed Mahmoud Abdalwahab•410

  @Ahmed96MahPosted over 2 years ago

  Hello Alexei,

  These steps could generally improve your JavaScript code:

  1- You could use arrow functions instead of regular ones. For Example you could say:

  const toDark = () => {
     toggle.classList.remove('white-theme-toggle')
     ....
  }
  

  2 - You could use const instead of let for the first 5 lines, as it is always best practice to use it when possible

  3- You could use a callback function instead of a function expression for the event listener. for example:

  const toggleMode = () => {
    if (toggle_ball.classList.contains('toggle__ball_dark')) {
       ....
    }else {
       ....
    }
  };
  
  toggle.addEventListener("click", toggleMode);
  

  4- You could use foreach loop or 'for of' loop instead of regular for loops .

  card.foreach((item) => {
   item.classList.toggle('white-theme-card-bg');
  item.classList.toggle('dark-theme-card-bg');
  });
  

  And generally, I think that you could merge both "toDark" & "toWhite" functions into one function and use 'toggle' instead of "add & remove" since the website will always have an initial style and all what you want is to flip or "toggle" the classes.

  Have a nice day ;)

  Marked as helpful

  1

  ---

  

  Alexei•831

  @Batareika007Posted over 2 years ago

  @Ahmed96Mah

  Wow Thank for that! It's very useful information.

  I will check all of it.

  Have a great day !

  0

  

  Ahmed Mahmoud Abdalwahab•410

  @Ahmed96MahPosted over 2 years ago

  @Batareika007

  Thank You ;)

  By the way, nice job on making the page take the initial theme (dark-mode or light-mode) of the browser. I really liked that idea :)

  1