Блог

Я получаю данные для профиля компании, и я хотел бы отобразить изменение цены в процентах и красным цветом, если оно отрицательное, или зеленым, если положительное, до 2 знаков после запятой.

 // fetch for company profile
const companyTitle = document.getElementById("company-title");
const companyLogo = document.getElementById("company-logo");
const price = document.getElementById("price");
const companyDescription = document.getElementById("company-description");
const changesPercentage = document.getElementById("changesPercentage");

const symbol = window.location.search.replace("?symbol=", "");
// console.log(titleText);

if (symbol) {
  getCompanyProfile(symbol);
} else {
  alert("nothing is passed");
}

function getCompanyProfile(symbol) {
  const url = `https://appspot.com/api/v3/company/profile/${symbol}`;
  fetch(url)
    .then((response) => response.json())
    .then((data) => {
      const profile = data.profile;
      companyTitle.textContent = profile.companyName;
      companyDescription.textContent = profile.description;
      price.textContent = "Stock Price: $"   profile.price;
      changesPercentage.textContent = profile.changesPercentage;

      // set logo
      let img = document.createElement("img");
      img.src = profile.image;
      companyLogo.appendChild(img);
      console.log(data);
    })
    .catch((err) => {
      console.warn("Something went wrong.", err.message);
    });
}
 

мне пришлось добавить оператор if в функцию, которая сначала изменила конкретную точку данных на число, а затем посмотрела, больше ли она и равна или меньше 0. В первом он добавил класс (зеленый), а во втором-класс (красный). функция toFixed(2) сокращает число до двух десятичных знаков.

 let profileChangesPercent = Number(profile.changesPercentage);

if (profileChangesPercent >= 0) {
    changesPercentage.classList.add("green");
} else if (profileChangesPercent < 0) {
    changesPercentage.classList.add("red");
}
changesPercentage.textContent = profileChangesPercent.toFixed(2)   "%";