Skip to content
OverviewSolutions
14
Comments
14

Paradox

@Taresta350 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Password Generator App

    #sass/scss
    Paradox•350
    Submitted 3 months ago

    I would welcome any suggestions. I am still working on code refactoring and would love to know how can I improve my code, feel free to point out any mistakes. I know I must have made a lot.

    1 comment

  • Tip Calculator App

    #sass/scss
    Paradox•350
    Submitted 4 months ago

    Please check my javascript and my poor attempt at trying to refactor my code. I would welcome any advice. Thank you.

    1 comment

  • Time-tracking-dashboard

    #sass/scss
    Paradox•350
    Submitted 4 months ago

    My desktop design is nearly identical. However, I did have trouble making the name "Jeremy Robson" appear in two lines instead of one. What would be the simplest way to do this? Also, please let me know if there are any areas of improvement in my SASS and Javascript.

    1 comment

  • Newsletter sign up with success message

    Paradox•350
    Submitted 5 months ago

    I am still learning JavaScript and hence still very much a beginner, so I would appreciate any feedback. Thank you.

    1 comment

  • Article preview Component

    #sass/scss
    Paradox•350
    Submitted 5 months ago

    Please check out my JavaScript, as this little elf is still new on this journey to learn his JavaScript magic!

    1 comment

  • Meet Landing Page with SASS

    #sass/scss
    Paradox•350
    Submitted 7 months ago

    Maybe with the sass part. I think I included way too much code. Can I make it simple?

    1 comment
View more solutions

Latest comments

  • Paradox•350
    @Taresta

    👍

  • Paradox•350
    @Taresta

    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
  • Paradox•350
    @Taresta

    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
  • Paradox•350
    @Taresta

    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!

  • Paradox•350
    @Taresta

    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.

  • Paradox•350
    @Taresta

    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
View more comments