winniffy Posts - Answer Overflow

winniffy

•Created by winniffy on 12/18/2023 in #front-end

mapping array of objects in react

my goal is to create an accordion using useState hook and the array map method. I have mapped through my objects and they display correctly, but my issue is the useState hook toggles all the accordion items. how do i select a specific one toggle on click? my code:

{faqsData.map(({ title, details, index }) => (
        // faq item
        <div className="faq">
          {/* faq title */}
          <div className="faq_title" onClick={() => setFaq(!isFaq)}>
            {title}
            {isFaq ? (
              <RemoveIcon className="faq_icon" />
            ) : (
              <AddIcon className="faq_icon" />
            )}
          </div>
          {/* faq details */}
          {isFaq && <p className="faq_details">{details}</p>}
        </div>
      ))}

{faqsData.map(({ title, details, index }) => (
        // faq item
        <div className="faq">
          {/* faq title */}
          <div className="faq_title" onClick={() => setFaq(!isFaq)}>
            {title}
            {isFaq ? (
              <RemoveIcon className="faq_icon" />
            ) : (
              <AddIcon className="faq_icon" />
            )}
          </div>
          {/* faq details */}
          {isFaq && <p className="faq_details">{details}</p>}
        </div>
      ))}

6 replies

KPCKevin Powell - Community

•Created by winniffy on 11/23/2023 in #front-end

API not fetching data on deployment

on my local host, everything works well, but after I deploy on vercel, the web app fails to fetch data from the API as required. what could be the problem, please?

function init() {
  randomBtnWord();
  fetch("https://animechan.xyz/api/random")
    .then((response) => response.json())
    .then((quote) => {
      console.log(quote);
      quoteText.textContent = quote.quote;
      character.textContent = `~ ${quote.character} [ ${quote.anime} ]`;
    });
}

function init() {
  randomBtnWord();
  fetch("https://animechan.xyz/api/random")
    .then((response) => response.json())
    .then((quote) => {
      console.log(quote);
      quoteText.textContent = quote.quote;
      character.textContent = `~ ${quote.character} [ ${quote.anime} ]`;
    });
}

12 replies

KPCKevin Powell - Community

•Created by winniffy on 9/26/2023 in #front-end

error message during watch in sass file

44 replies

KPCKevin Powell - Community

•Created by winniffy on 3/20/2023 in #front-end

javascript function not executing

please, can anyone help check this code snippets linked below? i have two functions in particular not executing:

1. displayCurTime()

1. displayCurTime()

2. displayMin()

2. displayMin()

https://codepen.io/winniffy/pen/YzOOYdY

5 replies

KPCKevin Powell - Community

•Created by winniffy on 3/14/2023 in #front-end

how to format date & time in javascript

7 replies

KPCKevin Powell - Community

•Created by winniffy on 3/12/2023 in #front-end

easiest way to add custom font to html/css

what's the easiest way to add a non-google font to your html/css files? i've got the font family files downloaded to my computer already. the font squirrel font kit generator method seems confusing to me, is there an easier way?

9 replies

KPCKevin Powell - Community

•Created by winniffy on 1/31/2023 in #front-end

my code doesn't work on live server

i'm seriously so confused, i can't review my javascript code through live server. it's frustrating cos when i deployed to vercel to test, some functions work and others don't in my javascript. i have no idea if this is a me problem or somn. is anyone kind enough to help review my codebase, please? github: https://github.com/winniffy/tip-calculator-app-main live website: https://tip-calculator-app-main-flame.vercel.app/

22 replies

KPCKevin Powell - Community

•Created by winniffy on 12/23/2022 in #front-end

how do i get input values inputted into input field 'in real-time' and use the input values?

13 replies

KPCKevin Powell - Community

•Created by winniffy on 12/20/2022 in #front-end

why does innerHTML return number as NaN?

here's my code:

const bill = document.getElementById('bill');
const billAmount = parseFloat(bill.value);
const numOfPeople = document.getElementById('numberOfPeople');
const numberOfPeople = parseFloat(numOfPeople.value);

let tipAmount = document.querySelector('.tip_amount');

tipButtons.forEach(tipButton => {
    tipButton.addEventListener('click', (e) => {
        if(e.target.innerText === "5%") {
            console.log("calculate 5% tip")
        
            tipAmount.innerHTML = (billAmount * 0.05) / numberOfPeople;
        }       
    })
});

const bill = document.getElementById('bill');
const billAmount = parseFloat(bill.value);
const numOfPeople = document.getElementById('numberOfPeople');
const numberOfPeople = parseFloat(numOfPeople.value);

let tipAmount = document.querySelector('.tip_amount');

tipButtons.forEach(tipButton => {
    tipButton.addEventListener('click', (e) => {
        if(e.target.innerText === "5%") {
            console.log("calculate 5% tip")
        
            tipAmount.innerHTML = (billAmount * 0.05) / numberOfPeople;
        }       
    })
});

17 replies

KPCKevin Powell - Community

•Created by winniffy on 12/20/2022 in #front-end

how do i loop over buttons that have the same class but are to do different things?

4 replies

KPCKevin Powell - Community

•Created by winniffy on 12/16/2022 in #front-end

is there a way to toggle multiple CSS classes in one statement?

i have a class called active that i would like to add to all my side-bar_menu-text classes on the click of a button, but it only adds this class to the first element. my code: const collapseMenuBtn = document.getElementById('collapse-menu'); const sideBarMenuText = document.querySelectorAll('.side-bar_menu-text'); collapseMenu.addEventListener('click', () => { console.log('collapse menu') sideBarMenuText.classList.toggle('active'); });

7 replies

KPCKevin Powell - Community

•Created by winniffy on 11/25/2022 in #front-end

best way to achieve this in css

9 replies

KPCKevin Powell - Community

•Created by winniffy on 11/8/2022 in #front-end

forEach method

7 replies

Gaming

Programming