Weather App - is my code efficient? I have been building a weather app that changes the background colour depending on the weather temperature and description.
This is the code I have to get it to work.
const body = document.querySelector('body');

const colorList = [
  {weather: 'Clear', color1: '#7AE7C7', color2: '#72C1E1'},
  {weather: 'Clouds', color1: '#F981BB', color2: '#7F7E84'},
  {weather: 'Drizzle', color1: '#b2c9c8', color2: '#698b8b'},
  {weather: 'Fog', color1: '#C5B2A6', color2: '#7F7E84'},
  {weather: 'Rain', color1: '#504AC4', color2: '#59AED1'},
  {weather: 'Snow', color1: '#bfc9cf', color2: '#77BDE0'},
  {weather: 'Thunderstorm', color1: '#314F71', color2: '#4A4176'},
  {weather: 'Tornado', color1: '#939393', color2: '#e47977c5'}


 ]



const colorList2 = [
      {color1: '#C94926', color2: '#BB9F34'},
      {color1: '#89a1dd', color2: '#E4E5E7' }
   ]



if(weather.list[0].main.temp &lt; 5 &amp;&amp; weather.list[0].weather[0].main == 'Clear') {
      body.style.backgroundImage = `linear-gradient(to bottom right, 
      ${colorList2[1].color1}, ${colorList2[1].color2})`;
   } else if(weather.list[0].main.temp &gt; 15 &amp;&amp; weather.list[0].weather[0].main == 'Clear'){
        body.style.backgroundImage = `linear-gradient(to bottom right, 
        ${colorList2[0].color1}, ${colorList2[0].color2})`;
     } else {
          colorList.forEach(color =&gt; {
             if(color.weather == weather.list[0].weather[0].main) {
                body.style.backgroundImage = `linear-gradient(to bottom right, 
                ${color.color1}, ${color.color2})`;
   }

Is there a more efficient way of doing the same thing? Are forEach loops overkills? Should I use if else statements? Should I be doing it at all in JavaScript?
Many thanks in advance.
First, your weather color list is unique by weather key, and you're querying the color based on it. I'd suggest turning this into an object of colors keyed by weather condition. This way, it's easier to locate the colors by condition than using a loop. You also gain one extra advantage: you can add your special cases of Clear in the same object, just keyed with a unique key value.
Next, you'll want to assign those properties into variables. Long property accesses are hard to read.
Now you'll want to split your logic. In your code, you're mixing color selection logic with background setting logic in a conditional. It's always important to figure out what thing is actually conditional from what can be extracted off of it. In this case, only color1 and color2 are conditional, not the setting of the background.
Here's how I'd do it.


const colorsByCondition = {
  Clear: {
    color1: '#7AE7C7',
    color2: '#72C1E1'
  },
  // Special forms of Clear
  Clear5: {
    color1: '#89a1dd',
    color2: '#E4E5E7'
  },
  Clear15: {
    color1: '#C94926',
    color2: '#BB9F34'
  },
  // Other conditions
  Clouds: {
    color1: '#F981BB',
    color2: '#7F7E84'
  },
  // and so on...
}

// Assign to variables
// const weather = weather.list[0]
// const temp = weather.main.temp
// const conditions = weather.weather[0].main

// Assuming these values represent our weather
const temp = 6
const conditions = 'Clear'

// Find the right colors
const { color1, color2 } = temp &lt; 5 &amp;&amp; conditions == 'Clear'
  ? colorsByCondition.Clear5
  : temp &gt; 15 &amp;&amp; conditions == 'Clear'
    ? colorsByCondition.Clear15
    : colorsByCondition[conditions]

// Apply to the body
document.body.style.backgroundImage = `linear-gradient(to bottom right, ${color1}, ${color2})`