All solutions

Currently learning react so i rebuilt this with react

I am constantly seeking ways to improve so I invite you to inspect my code and provide me with feedback. I am also looking to get a mentor so if you will be gracious to let me in I will truly appreciate it.

I found it difficult to separate the tip percent handlers from the calculations. I also found it quite confusing if I should use a derived state or create new states

** To be honest I am not really sure of the tip button part of the code and i would really appreciate a cod review on that **

I have a general question which is areas where i need improvements to make my code better and more beautiful to read

I found the layout a bit challenging because i had to use a lot of positioning to get the layout which made responsiveness a bit of a hustle.

But i am happy with the end result.

I will happily welcome any advise that can solve the positioning issue so that i will use less of position:absolute in the future

I added a background color to the nav because i felt it made it a bit more visible

This project took me longer than expected but I am glad with the result. Kindly test the live set and review the code and provide me with feedbacks that can help me improve

Kindly provide suggestions on how to implement the calculation function without using eval

Kindly go through my Javascript code and give me any advise

I added a few tweaks to the project

• i changed the items left to the total items
• i change clear completed to clear all
• I added a warning modal that is triggered when the clear all button is clicked
• The modal allows the user to either proceed with clearing the todo list or canceling the request
• I also added local storage

But i know that my Javascript code does not look good i tried to refactor it as best as i could so kindly give me tips

The js has too many repetitions because i basically wrote the html in the js

• kindly give me any suggestion on how to achieve the same result with less code

I will like any tips or advice on how to write a better, cleaner, and more understandable Javascript code

I will also appreciate any tips on how to avoid code repetition and general Javascript best practices

Thanks

I could not get the URL stored in the local storage to load I kept getting errors

Any advice of how to solve this problem will be greatly welcome

• Also I think my Javascript code is very disorganized and a bit difficult to read

• I will appreciate tips for refactoring and best practices for writing clean Javascript code

• Lastly, i added a delete button in form of an icon so the user can delete a url without having to refresh the page

I had trouble making the slider buttons work

• I wanted the slide to change when the corresponding button is clicked

• i also want the button colour to change as the slider moves to indicate which number of slides is currently on display

• I will appear any suggestions on how to solve this

• Any suggestions about my Javascript code and how to improve it is highly welcome

Is there any way i can make a faq to close when another is opened.

I tried this

openFaq();

function openFaq(e) {
  for (let i = 0; i < showAnswer.length; i++) {
    showAnswer[i].addEventListener("click", (e) => {
      hideFaqs();
      answers[i].classList.toggle("open");
      closeFaq[i].classList.toggle("active");
      e.preventDefault();
    });
  }
}

function hideFaqs() {
  answers.forEach((ans) => {
    ans.classList.remove("open");
  });
}

which worked except for the fact that i could no longer close an faq without leaving another one open.

I had to refactor my Javascript twice but even with the end result I still have a lot of code repetition

• is there any beginner-friendly way I can access and add the JSON data to my HTML without repeating the same code multiple times

I Used position: absolute, opacity: 0 and opacity:1 to remove one of the slides then i used the prev and next button to toggle the classes with opacity to change the slides

section{
position:absolute;
}
.john {
  opacity: 0;
}
.john.move {
  opacity: 1;
}
.tanya.hide {
  opacity: 0;
}

JS

function controlBtns() {
  nextBtn.addEventListener("click", () => {
    tanya.classList.toggle("hide");
    john.classList.toggle("move");
  });
  prevBtn.addEventListener("click", () => {
    tanya.classList.toggle("hide");
    john.classList.toggle("move");
  });
}

• I feel like this only worked because there were two slides and may not if there are multiple slides

My question is what is a better way of creating slides like this one

Kindly go through my Javascript code and give me advice on better and cleaner ways to solve this challenge

I found it difficult to calculate the value of the input amount separately so each time a user picks an amount to donate the values in the two inputs are added to the total amount

here is what i did

function incrementAllStats() {
  // update total stats
  donatedMoney.forEach((dm) => {
    amountRaised.textContent =
      parseInt(amountRaised.textContent) + parseInt(dm.value);
  });
}
````
- I will appreciate any solution to this
- also on the live site the bookmark button and the back to project button reload the entire page instead of displaying a modal i tried fixing it but i could not find the bug 

- any solution to this is welcome

- finally, my Javascript code is a bit dirty and  i feel like i have too many lines of code i will appreciate tips on refactoring it

I found it a bit hard to apply the right Javascript logic to get the checkbox working

• Though the checkbox functionality works the UX is not particularly friendly

• i also feel like i wrote too many lines of code for something that should have less code and advice on how i can refactor my javascript code is welcome

Kindly go through the code and view live site and give me feedbacks.

I still find it hard to position background images and svgs any help or resources will help a lot

Please checkout my Javascript code and give me feedbacks, Thanks

• I changed the background color to light blue and instead of imitating the background design in the challenge, i used a blob shape image with a linear gradient colour

-I will appreciate any feedback

• I added a hamburger menu for screen sizes <= 768px

• Any feedback especially Javascript feedback will be highly appreciated

I will appreciate any feedback especially. feedbacks about my Javascript code