Weather based styling system

*{
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    box-sizing: border-box;
}

body{
    background: #023047;
}

/*.column1 {
    width: 100%;
    max-width: 470px;
    float: right;
    background: #FFB703;
    color: #fff;
    margin: 100px auto 0;
    border-radius: 5px;
    padding: 40px 35px;
    text-align: left;
}*/

.weatherCard {
    width: 100%;
    max-width: 470px;
    color: #fff;
    background: #8ECAE6;
    text-align: center; 
    font-family: 'Trebuchet MS';
    font-size: 30px;
    margin: 40px 150px !important;
}

.row:after {
    content:"";
    display: table;
    clear: both;
}

 .column {
    float: left;
    margin: 10px auto 20px;
    padding: 30px auto 10px;

}


.row {
    float: left;
} 

.left {
    width: 50%;
}
.right {
    width: 50%;
}

@media screen and (max-width: 600px) {
    .column2 {
        width: 100%;
    }
}

.logo {
    padding: 40px, 10px;
    width: 30%;
}

.forecastTitle {
    margin-top: 45px;
    font-size: 65px;
    text-align: left;
    color:#fff;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.forecast {
    list-style-type: none;
    padding: 0;
}
.forecast-item {
    margin: 10px 0;
}
.button1 {
    background-color: #FB8500; 
    border: none;
    color: white;
    padding: 14px 40px;
    border-radius: 12px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
  }
  
  #container{
    width: 50%;
    height: 600px;
  
    border-radius: 5px;
  
  }
  
  #inner_container{
    width: 100%;
    
    box-shadow: 0px 0px 36px -22px #2B2D42;
    float: center;
    margin-left: 550px;
    margin-bottom: 30px;
  }

  #inner_container1{
    width: 100%;
    
    box-shadow: 0px 0px 36px -22px #2B2D42;
    float: center;
    margin-left: 550px;
    margin-bottom: 30px;
  }
  
  img{
    width: 50%;
    height: 50%;
    border-radius: 10px;
  }
  
  #button_container{
    width: 50%;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 550px;
    margin-bottom: 30px;
  }
  
  #button{
    width: 25%;
    height: 90%;
  
    font-size: 20px;
    color: rgb(94, 33, 33);
    border: none;
    outline: none;
    cursor: pointer;
  
    border-radius: 5px;
    background-color: #16080a;
  }
  
  button:hover{
    transition: 0.05s;
    background-color: #D90429;
    transform: rotateZ(-10deg);
    box-shadow: 0 0 30px -10px #D90429;
  }
  
  button:active{
    transform: translateY(20px);
    transform: rotateZ(10deg);
  
  }

#!/usr/bin/env node

async function getJSON(file) {
    let myObject = await fetch(file);
    let myText = await myObject.text();
    console.log("Response ===> " + myText)
    let myJSON = JSON.parse(myText);
    return myJSON;
}

let temperature;
let humidity;

getJSON('https://api.thingspeak.com/channels/2567027/feeds.json?api_key=NDYQ1LHTX15S9JDG&results=2').then( myJSON => {
  temperature = myJSON.feeds[0].field1;
  console.log(temperature);
  document.getElementById("tempDisplay").innerHTML = document.getElementById("tempDisplay").innerHTML + temperature;

})

getJSON('https://api.thingspeak.com/channels/2567052/feeds.json?api_key=QWC4WXX0WSY2WM43&results=2').then( myJSON => {
  humidity = myJSON.feeds[0].field1;
  console.log(humidity);
  document.getElementById("humidDisplay").innerHTML = document.getElementById("humidDisplay").innerHTML + humidity;

})

const apiKey = '18c824e6f9647832c280a7d581bb2272';
const apiUrl = 'http://api.openweathermap.org/data/2.5/forecast?lat=52.04&lon=-0.75&appid=18c824e6f9647832c280a7d581bb2272';

let tempDayOne;
fetch(apiUrl)
  .then(response => response.json())
  .then(data => {
    // Process data here
    console.log(data);
    tempDayOne = data.list[0].main.temp - 273.15;
    console.log(tempDayOne.toFixed(2));
    document.getElementById("forecastDayOne").innerHTML = document.getElementById("forecastDayOne").innerHTML + tempDayOne.toFixed(2);
  })
  .catch(error => console.log('Error fetching weather data:', error));


let images_arrayBottom = [
    'blackjeans.jpeg',
    'bljeans.jpeg',
    'beige-cargos.png',
    'black-joggers.png',
    'green-cargos.png'
    
]
function get_random_imageBottom(){
    let random_index = Math.floor(Math.random() * images_arrayBottom.length);
    console.log( "random" + random_index);
    let pic = images_arrayBottom[random_index];
    console.log(pic);
    let imgPath = "./images/"+pic;
    console.log(imgPath);
    document.getElementById("image_showerBottom").src = imgPath;
}

let images_arrayTop = [
    '63218 SUN FRONT_0_570.jpg',
    'blueShirt.jpg',
    'image.png',
    'beige-top.png',
    'red-top.png',
    'green-sweatshirt.png'
]
function get_random_imageTop(){
    let random_index = Math.floor(Math.random() * images_arrayTop.length);
    console.log( "random" + random_index);
    let pic = images_arrayTop[random_index];
    console.log(pic);
    let imgPath = "./images/"+pic;
    console.log(imgPath);
    document.getElementById("image_showerTop").src = imgPath;
}