Responsive Ping coming soon page using semantic HTML, SCSS, and JS

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hi Venus! 👋

  Good to see you again completing another challenge! 🎉

  Regarding variables, it's best to limit the global variables. For example, you can move the inputField, errorMessage, and validFormat variables inside the validateForm() function. You might not be able to see the benefit in this case. But, on a larger project where you might have a lot of variables, having local or function scope variables will make the JavaScript easier to maintain.

  Global variables can be used everywhere. So, when there are many global variables, it can be harder to track each variable. That's why it's best to have as few global variables as possible.

  Some suggestions:

  • I tried to input an invalid email, a@a and it was valid. So, I would recommend improving the RegEx or trying to find a better one.
  • Always specify the type of the button. In this case, set the type of them as type="submit". It will prevent the button from behaving unexpectedly.
  • I recommend adjusting the breakpoint of the media query. Currently, 1440px is too late to apply desktop styling.

  I hope this helps! 👍

  Marked as helpful

  1

  ---

  

  Venus•1,640

  @VenusYPosted over 2 years ago

  @vanzasetia Hey Vanza! Thanks for the feedback on yet another challenge. I appreciate the time you've taken to look into my solution.

  I'm grateful that you clarified the variables issue for me. I had actually limited the scope of my variables in a previous project that I completed on here, but I wasn't sure if that went against standard practice because, according to the internet, placing variables inside functions makes them more resource-intensive as the variables are being declared at every function call. Is this true?

  I will take your suggestions into account and make the changes accordingly.

  Thank you once again! :)

  1

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @VenusY You are welcome! 👍

  Could you share the article that says about it? I want to learn more about it. Also, I don't understand "resource-intensive", what is that mean?

  0

  

  Venus•1,640

  @VenusYPosted over 2 years ago

  @vanzasetia 'Resource-intensive' means it has a negative impact on the performance. E.g. in the case of a webpage, it may take longer to load.

  Unfortunately, it wasn't an article, but rather an answer on Stack Overflow.

  Here's the link if you still want to read it (it's the second answer): https://stackoverflow.com/questions/55992747/should-i-declare-a-variable-inside-a-function-or-outside

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @VenusY

  Based on the StackOverflow discussion, they are talking about a specific problem where the Num and Num2 variables should be either outside or inside the function.

  I would say that it depends on the situation. For example, if the function will be called multiple times then I would set two parameters instead.

  var Num = document.querySelector("#Fnumber");
  var Num2 = document.querySelector("#Secnumber");
  
  function Multiply(firstNumber, secondNumber) {
    alert(firstNumber + secondNumber)
  }
  
  // call the function
  Multiply(Num.value, Num2.value);
  

  But if the function is just getting called once like the validateForm() function in your JavaScript then it is okay to have those variables inside the function.

  P.S. I don't know anything about the impact of having variables inside the function as far as the performance of the website. So, I am afraid I can't give any response about that.

  1