Paradox

Latest comments

• 

  P

  wraith-wall•250

  @wraith-wallSubmitted 11 days ago

  

  Password generator app

  #sass/scss#bem

  2

  20
  

  Paradox•330

  @TarestaPosted 10 days ago

  👍

  0
• 

  P

  wraith-wall•250

  @wraith-wallSubmitted 11 days ago

  

  Password generator app

  #sass/scss#bem

  2

  20
  

  Paradox•330

  @TarestaPosted 10 days ago

  I liked your work. Great job! Learned quite a lot after reading your code. I was just using the length as a criterion for calculating the strength of the password, but your approach to determining the strength by using the character types and the length is much more reasonable. Again, good work and all the best for your future projects.

  Marked as helpful

  0
• 

  Williams Akanni•350

  @shadowbanksSubmitted 27 days ago

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

  I'm open to any other suggestions.

  Thank you for your time :))

  

  Responsive Tip Calculator using Flexbox, grid, SCSS

  #accessibility#sass/scss

  2

  10
  

  Paradox•330

  @TarestaPosted 26 days ago

  Hello, it is a great work that you have done. I learned a lot from your project. As I was testing your webpage, I noticed some logic errors that I can share with you.

  1. When we arrive at the website, and enter 0 for the bill or just select a tip button, the error "Can't be zero" shows up for the people field, which logically does not look right. For bill, the error should be above the bill field, and it should not show up when we have just selected the tip and have done nothing else.
  2. When I have performed the calculations once and hit reset. If I press any of the tip buttons, without entering the bill or number of people, I still get a summary of the total, which should not show up just yet because no bill or people number has been added.

  I guess it would be much better if we refactor the code a bit and the bigger functions into smaller units so that each does just one job.

  const calculateTip = () => {
    if (people === 0) {
      errMsg.classList.add("active");
      return;
    }
    errMsg.classList.remove("active");
  
    const tip = (billAmt * tipPercent) / 100;
    const tipPerPerson = tip / people;
    const totalPerPerson = billAmt / people + tipPerPerson;
    //   console.log(tipPerPerson, totalPerPerson);
  
    tipAmount.textContent = `$${tipPerPerson.toFixed(2)}`;
    totalAmount.textContent = `$${totalPerPerson.toFixed(2)}`;
  };
   
  function manageError() {}
  function calculateTip() {}
  function displayResult() {}
  

  A separate function could be created to deal with just the error message. And, the calculateTip function as its name suggests just deals with the calculation of the tip and a third function could be created to deal with the UI that sets the tipAmount and the totalAmount. This makes testing easier and we can deal better with errors as they are limited to the scope of their function.

  In the reset logic, you can add the logic to make billAmt, people and tipPercent = 0 so that problem number 2 that I mentioned above does not appear.

  const reset = () => {
    removeActiveButton();
    bill.value = "";
    peopleCount.value = "";
    customTip.value = "";
    billAmt = 0;
    people = 0;
    tipPercent = 0;
    tipAmount.textContent = "$0.00";
    totalAmount.textContent = "$0.00";
  };
  

  I apologise if I missed something here. I would be more than happy to clarify any part that might have confused you. It was a great effort on your part and I wish you all the best for your future projects. Happy Coding!

  Marked as helpful

  0
• 

  superOzzy•345

  @superozzySubmitted over 2 years ago

  

  responsive time tracking dashboard using sass

  #sass/scss#fetch

  1

  50
  

  Paradox•330

  @TarestaPosted about 1 month ago

  Hello, great job there. The only thing that I can suggest for json is that maybe we can try to reduce some redundancy that exists in your javascript code. Instead of calling the fetch function for every button click, we can create a use the dailyReport function to handle the data that is displayed and maybe call that whenever the button is clicked. Here is a bit of an idea.

  function dailyReport(timeframe) {
    fetch(url)
      .then(response => response.json())
      .then(data => {
        current.forEach((element, index) => {
          const timeData = data[index].timeframes[timeframe];
          if (timeData) { // Check if data exists
            element.innerHTML = timeData.current + 'hrs';
            prev[index].innerHTML = getPreviousLabel(timeframe) + timeData.previous + 'hrs';
          } else {
            console.error(`Data not found for timeframe: ${timeframe} and index: ${index}`);
            element.innerHTML = "Data Not Available";
            prev[index].innerHTML = "";
          }
        });
      })
      .catch(error => {
        // ... (error handling as before)
      });
  }
  daily.addEventListener('click', () => dailyReport('daily'));
  monthly.addEventListener('click', () => dailyReport('monthly'));
  weekly.addEventListener('click', () => dailyReport('weekly'));
  
  window.addEventListener('load', () => dailyReport('weekly'));
  

  Otherwise, it was all god. Job well done!

  0
• 

  Tonny Blair•270

  @Tonny-Blair-DanielSubmitted about 2 months ago

  

  Newsletter sign up form

  2

  00
  

  Paradox•330

  @TarestaPosted about 2 months ago

  Hi there, it was a great effort. The style for the bigger screens is almost identical to the design. However, the form, currently, does not provide email validation. I input several wrong address types and they were accepted as well. In your javascript, maybe you can add the functions for such types of situations. As I can see you are using browser in-built email validation, so you do not have to do much. Here is what I can suggest.

  form.addEventListener('submit', () => {
    if (email.validity.valid) {
    //Show the thank you message
  }
  else {
  //Show the error message
  //Prevent the toggling of the screen to reveal the thank you message
  }
  });
  

  Another thing is that the design is currently not working for screens smaller than 768px, so this can be another area that you might look into. Other than that it was a good job. All the best wishes for your future projects.

  0
• 

  P

  DocForLoop•410

  @DocForLoopSubmitted 2 months ago

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

  All feedback is welcome!

  

  Article preview component with flexbox (+vite)

  #bem#sass/scss#vite#accessibility

  2

  10
  

  Paradox•330

  @TarestaPosted 2 months ago

  Your code is excellent. I am still learning SASS so I will focus on Javascript here, which by the way was impressive. I learned a lot by reading through your code. When I did this project myself I had unintentionally added a lot of redundancy and someone was kind enough to point that to me. Maybe it could help in making your code a bit simpler too. So, here is how I think you can get rid of some of the extra code.

  //Create a toggle function to toggle classList 
  const toggleClasses = () => {
      shareOptions.classList.toggle("show");
      if (isMobile()) {
          footer.classList.toggle("hide");
      }
  };
  
  //Create a remove function to remove the class List
  const removeClasses = () => {
      shareOptions.classList.remove("show");
      footer.classList.remove("hide");
  };
  
  button.addEventListener("click", toggleClasses);
  activeButton.addEventListener("click", toggleClasses);
  
  window.addEventListener("resize", removeClasses);
  

  Marked as helpful

  0