Green and red values hovering within the keyframe

Currently, I'm facing a dilemma involving keyframes. I have a table populated with values retrieved from a JSON fetch and need to implement a hover effect where values less than 5 show in red, while those equal to or greater than 5 appear in green. Below is the JavaScript code snippet I've been working on ->

Can someone guide me on how to integrate keyframes with CSS for this purpose?

 // Html

 <div id="group3">
    <table class="table">
      <thead>
        <tr class="info">
          <th></th>
          <th>February</th>
          <th>March</th>
          <th>April</th>
          <th>May</th>
          <th>June</th>
          <th>July</th>
          <th>August</th>
        </tr>
      </thead>
      <tbody id='mytable'>
      </tbody>
    </table>
</div>

 //CSS
Keyframe?

 //hover

 let cells = document.querySelectorAll("tbody");
 cells.forEach( el => el.addEventListener('mouseenter', function () {
   if(el.textContent < 5){
     el.classList.add('underfive');
   } else if (el.textContent >=5){
     el.classList.add('abovefive');
   }
 }));

  // reset animationx
  cells.forEach(el => el.addEventListener('mouseleave', function () {
   if(el.textContent < 5){
     el.classList.remove('underfive');
   } else if (el.textContent >=5){
     el.classList.remove('abovefive');
   }
 }));

The desired outcome should resemble the following ->

Initial page layout with white background

Expected end result showcasing values loaded from a JSON file in a table with red text

Representation of the green-colored value when it's equal to or greater than 5

Answer №1

When the mouse hovers over the td, you can display a different background color or style compared to the default setting based on your preferences.

To achieve this effect, you can utilize the :hover selector and incorporate a smooth transition using the transition property.

If you wish to showcase a distinct color depending on whether the value is above or below 5, first establish the default color and then introduce a separate class for the alternate scenario.

let data = [1,4,2,8,12,2,5,7];

const tr = document.querySelector('tr');
data.forEach(elem => {
   let td = document.createElement('td');
   td.textContent = elem;

   td.classList.toggle('belowfive', elem < 5);

   tr.appendChild(td);
});
td {
  transition: background-color 1s;
  background-color: white;
  padding: 1rem;
  border: 1px solid hsl(0 0% 50%);
}

td:hover {
   background-color: green;
}

td.belowfive:hover {
   background-color: red;
}
<table>
  <tbody>
     <tr>
     </tr>
  </tbody>
</table>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjusting the transparency of the background color seamlessly without the need for an image

After creating a div element with a green background color, I am looking to progressively change the opacity of the color from top (darkest green) to bottom (lightest, white). Is there a CSS-based way to achieve this effect without resorting to using an ...

Can I apply a universal babel configuration across all of my personal projects?

It becomes tedious to duplicate the same configuration file for each new project I start. ...

I have developed a website that can calculate the factorial of any given number. The next step is to design a function that will display the step-by-step mathematical process

Could use a hand with this one. The function below is empty and I'm a bit stuck on what to do next. Right now, the webpage displays the factorized number, but I want to show the mathematical equation before it, like so: User inputs: 3 Site outputs: " ...

The compatibility issues with the textarea and text-indent: placeholder feature on EDGE are causing functionality problems

I'm facing a peculiar problem with placeholders when using the Edge browser. In my current project, I need to implement a textarea with a specific text-indent property. However, on Edge, the placeholder text appears displaced more than expected. To h ...

Retrieving a targeted data point from a JSON object

I am working with a json data that contains various properties, but I am only interested in extracting the uniqueIDs. Is there a way to retrieve ONLY the uniqueID values and have them returned to me as a comma separated list, for example: 11111, 22222? (I ...

Using React.js to create a modal that includes ExpansionPanelDetails with a Checkbox feature

I am trying to achieve a specific visual effect with my code. Here is an example of the effect I want: https://i.stack.imgur.com/cJIxS.png However, the result I currently get looks like this: https://i.stack.imgur.com/547ND.png In the image provided, y ...

Enhance information flow within pages using SWR in NextJS

Utilizing SWR in a NextJS project has been a great experience for me. I have successfully fetched a list of data on my index page and added a new entry to the data on my create page. Now, I am looking to take advantage of SWR's mutate feature to updat ...

Methods for automating the clicking of a hyperlink within Bootstrap tabs programmatically

I am attempting to programmatically trigger a click event on a specific href link within Bootstrap tabs. For reference, here is the link to the codepen: linkToCodePen <ul class="nav nav-tabs" id="myNavTabs"> <li class="active">&l ...

Issue displaying updated table data following concatenation in Ionic 3 using Angular 4

In my current implementation, I am utilizing Ionic's events to transfer data between pages. Specifically, I am attempting to pass an array containing two objects to another page. The targeted data that I want to modify is named dataOne. To achieve thi ...

Having trouble adjusting the vertical position of jQuery Spinner buttons

I'm attempting to customize the jQuery spinner with styling applied like this: <span class="ui-spinner ui-widget ui-widget-content ui-corner-all" style="height: 14px;"> <input id="testSpinner" class="ui-spinner-input" name="value" aria-value ...

Arranging various Materialize toasts at various locations on the screen [ v1.0.0 ]

My goal is to have a toast appear on the top-middle of the screen when an image is zoomed in, while all other normal toasts should display at their default position. I've been successful in showing the toast when zoomed in, but I'm having trouble ...

The divide grew wider amongst the components

As I was working on a registration form, I noticed a sudden gap between two elements. To see the issue in action, you can check out my code here: http://jsbin.com/mujixepete/2/. Take a look at the gender and date of birth fields to understand what I ...

Visual Studio debugging: MVC CSS not appearing as expected

There seems to be an issue with the CSS not rendering correctly in my MVC project when I view it on [https://localhost/MyApp]. The buttons and background image are not appearing as they should. It initially worked fine, but then suddenly stopped. I suspect ...

Click on a new tab to enable printing options for the page

I am looking to enhance the print page functionality on my website. Currently, when the print icon in the footer is clicked, it opens the printer dialog box directly. I would like to change this behavior so that when the Print icon is clicked, the contents ...

Issue with Ajax call not displaying the jQuery dialog box

Could you please take a look at this jsFiddle link... The issue lies with a jQuery UI dialog box that uses an ajax request to fetch content. Unfortunately, all I see is a blank dialog and can't seem to pinpoint the problem. A snippet of the HTML cod ...

Saving information to a local file using JavaScript or AngularJS

As a novice in JS development, I am eager to learn how to write data to a file stored in local storage. Within my application, I collect raw data and store it in MongoDB as key-value pairs. Simultaneously, I also wish to save this data to a file in local ...

The Express Validator is unable to send headers to the client once they have already been processed

I recently integrated express-validator in my Express JS project, but encountered a warning when sending invalid fields to my api: UnhandledPromiseRejectionWarning: Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client This ...

Passing data from the front-end of an Angular component (app.component.html) to the back-end of another component (other.component.ts)

Imagine a scenario involving basic crud operations. Within the app.component.html file, there are multiple input fields and buttons. Upon clicking a button in app.component.html, the value of an HTML field is sent to the 'other.component.ts' comp ...

Traverse through nested objects

I am currently working with JSON data containing information like uf, ivp, and others. My goal is to iterate over all the objects in order to access their properties. { "version": "1.5.0", "autor": "mindicador.cl", "fecha": "2018-10-31T13:00:00.000Z", "uf ...

Utilize a function in module.exports that calls for a variable within the module

I am currently working on designing my modules in such a way that they don't need to be required multiple times. In my approach, I am passing arguments from the main app.js file to all of my modules. One of the modules I have is for user login and it ...