Question 213764 in Html Question posted in
Some basic documentation can be found here.

Html – Wanting to make weather app glow different colors depending on time

I’ve been trying to make my weather app glow "yellow" between the hours of 6 to 16 and "purple" outside of those hours. I have given the element classes of am and pm, and added the styling in CSS for each class. The problem I encounter is in JavaScript. I created a function called "glow" and when I use .classList.add, it is only recognizing one of the classes (the last class name I add in html-which is pm) and not the other one(am). I provided a snippet of my HTML and JS below.
(Ps. I am using bootstrap)

HTML

 <body>
    <div id="weather-app-wrapper">
      <div class="container-lg mt-5 mb-2 am pm" id="weather-app">
        <div class="row">
          <div class="col-12 mt-3">
            <form id="city-search-form">
              <input
                type="text"
                placeholder="Enter city name"
                id="search-field"
              />
              <input type="submit" value="search" class="btn btn-primary" />
            </form>
          </div>
        </div>

JAVASCRIPT

let now = new Date();
let currentDate = document.getElementById("date-element");

let date = now.getDate();
let hours = now.getHours().toString().padStart(2, "0  ");

let minutes = now.getMinutes().toString().padStart(2, "0");

let days = [
  "Sunday",
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday",
];
let day = days[now.getDay()];

let months = [
  "January",
  "Febuary",
  "March",
  "April",
  "May",
  "June",
  "July",
  "August",
  "September",
  "October",
  "November",
  "December",
];
let month = months[now.getMonth()];
currentDate.innerHTML = `${day}, ${month} ${date},  ${hours}:${minutes}`;

function glow() {
  let app = document.getElementById("weather-app");
  if (hours > 6 && hours < 16) {
    app.classList.add("am");
  } else {
    if (hours < 6 && hours >= 16) {
      app.classList.add("pm");
    }
  }
}
glow()

I have tried so many different variations of the above code, but since I’m a complete beginner at coding, I feel that I may not know something that can help me with this deliemma. I would appreciate any guidance and if you could try and keep it basic and simple, I would appreciate it, as I’m still learning.

I apologize in advance if I did not post enough information about my problem, or perhaps I included too much unnecessary information- either way, sorry in advance!

Thanks again!

Tags:

2

Answers


  1. 0

    I think you forgot to call the glow function. Please correct me if I’m wrong

    Login or Signup to reply.
  2. 0

    As Konrad mentioned you will need to remove the am and pm class from the HTML, otherwise you can’t add the correct one, as it will have both.
    Furthermore, there is a small issue in the else part of the if statement of glow where:

    if (hours < 6 && hours >= 16) {
  app.classList.add("pm");
}

    Meaning that it is only pm if hours is under 6, and over 16 at the same time, which is never true. But since the first if statement, you can simply remove the if-statement in the else-clause, which would fix ‘glow’

    function glow() {
  let app = document.getElementById("weather-app");
  if (hours > 6 && hours < 16) {
    app.classList.remove("pm");
    app.classList.add("am");
  } else {
    app.classList.remove("am");
    app.classList.add("pm");
  }
}

    sidenote, is am not hours < 12 ?

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search