Is there a way to highlight today's working hours with a different color using Vue.js?

Here is the script I have created to display the working hours:

const workHour = "Monday :9:00AM to 5:00PM,Thursday :9:00AM to 5:00PM,Wednesday :9:00AM to 5:00PM,Tuesday : 9:00AM to 5:00PM,Friday :9:00AM to 5:00PM,Saturday :9:00AM to 5:00PM,Sunday :9:00AM to 5:00PM".split(',').map((val) => { 
  const obj = val.split(':');
  const time = val.replace(`${obj[0]}:`, '');
  return {
    day: obj[0],
    time,
  }
});
console.log(workHour);

To display the values on an HTML page, use the following code:

   <table class="table">
  <thead>
    <tr>
      <th v-for="(item,key) in data.workHr" :key="key">{{item.day}}</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td v-for="(item,key) in data.workHr" :key="key">{{item.time}}</td>
    </tr>
  </tbody>
</table>

I successfully displayed the dates and working hours using this code. Now, I am looking for a way to change the color of today's working hours and automatically update it for tomorrow. Can anyone provide assistance with solving this issue?

javascriptvue.jsvue-component

Answer №1

Here are some sample codes you can try:

Using if condition 

 <td v-for="(item,key) in workHr" :key="key">
    <span v-if="new Date().getDay()-1==key" class="today">{{item.time}}</span>
    <span v-else-if="new Date().getDay()==key" class="tomorrow">{{item.time}}</span>
    <span v-else >{{item.time}}</span>
 </td>

Using class object

<span :class="{'tomorrow':new Date().getDay()==key,'today':new Date().getDay()-1==key}">{{item.time}}</span>

For a demo of the if condition, you can visit: https://jsfiddle.net/50wL7mdz/76096/

To see the class object in action, check out this demo: https://jsfiddle.net/50wL7mdz/77860/

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

Display all elements on a webpage using Javascript without the need for scrolling

I'm looking for a way to ensure all items on a webpage load immediately, without having to scroll down multiple times before running a script to find a specific item. Is there a method to have all items load at once without the need to manually scroll ...

javascripthtmlcss

Tips for creating a mock for a function that yields a JSX Element

I am facing a problem where I have a function that returns a JSX Element. Here is a snippet of the code: myFunction.jsx const myFunction = (props) => { // ... do something with props return <MyElement {...newProps} /> } // MyElement.j ...

javascriptreactjsjestjs

Modify the innerHTML to adjust font size when a button is clicked in Ionic 5, or eliminate any unnecessary spaces

I have been experimenting with changing the font size of a variable in .html when the variable contains whitespace. In my .ts page, I use the following code to remove the whitespace: this.contents = this.sanitizer.bypassSecurityTrustHtml(this.product[&apos ...

javascripthtmlcsstypescriptionic-framework

The webpage fails to return to its original position after the script has been executed

My website has a sticky div that stays at the top when scrolling down, but does not return to its original position when scrolling back up. Check out this example function fixDiv() { var $div = $("#navwrap"); if ($(window).scrollTop() > $div.data("top ...

javascriptjquerycss

Tips for incorporating the ternary operator in JSX of a React component while utilizing TypeScript?

I am looking to implement a conditional rendering logic in React and TypeScript, where I need to return null if a specific condition is met, otherwise render a component using a ternary operator. Here is the code snippet I currently have: {condition1 && ...

javascriptreactjstypescript

I encountered an error from DataTables when trying to set the width of the header cells using the original width of the columns

                 Help! I keep getting an error message: DataTable Uncaught TypeError: Cannot read property 'style' of undefined Does anyone have any ideas on how to fix this?   I keep seeing the following error message: Uncaught Typ ...

javascriptjquerydatatables

Is there a way to differentiate between a preflight request and the actual request?

Currently, I am utilizing CORS to transmit data to a server located on a different domain. Initially, the browser dispatches the preflight request to verify the server, followed by the main request. My goal is to identify when the request is in the "prefl ...

javascriptphpcorscross-domain

Verify the image aspect ratio using ngModel

Incorporating Angular 5 and Bootstrap, I've crafted a form that enables users to associate an image with a URL. My aim is to constrain this image to adhere to a specific aspect ratio. The smallimagelink input signifies the ngModel I'm utilizing. ...

javascriptangular

Display a container using Fancybox

With just a click of a button, I want to reveal a hidden div in an elegant box. Here's the code snippet that actually works: $("#btnForm").fancybox({ content: $("#divForm").html() }); However, after doing some research, it appears that this may not ...

javascriptjqueryfancybox

The interconnected nature of multiple asynchronous tasks can lead to a render loop when relying on each other, especially when

My asynchronous function fetches data in JSON format from an API, with each subsequent call dependent on the previously returned data. However, there are instances where I receive null values when trying to access data pulled from the API due to the async ...

javascriptreactjsasync-await

Terminate a targeted recipient following the completion of the on event

I am currently running a node service with socket.io and utilizing an event emitter to send updates based on user context. For example, context A may have users 1, 2, and 3 while context B has users 4 and 5. Once a successful connection is established wit ...

javascriptnode.jssocket.iodom-events

Erase Photo from Server by Simply Clicking on the Remove Button NodeJS (And Removing the Image Title from the Database)

I have a button that successfully deletes an image name from a mySQL table. However, I also want it to delete the actual image from the server. Below is the code snippet from my index.js: document.querySelector('table tbody').addEventListener(&a ...

javascriptnode.jsexpress

Refining/searching with selectors in AJAX response

As someone who is new to javascript and coding in general, I am facing a challenge with filtering and manipulating data received through an AJAX request. Unfortunately, I do not have access to the server-side code. The server responds with rota information ...

javascriptajaxfilterjquery-selectors.post

Convert the existing JavaScript code to TypeScript in order to resolve the implicit error

I'm currently working on my initial React project using Typescript, but I've hit a snag with the code snippet below. An error message is popping up - Parameter 'name' implicitly has an 'any' type.ts(7006) Here is the complet ...

javascriptnode.jsreactjstypescript

Steps for eliminating double quotes from the start and end of a numbered value within a list

I currently have the following data: let str = "1,2,3,4" My goal is to convert it into an array like this: arr = [1,2,3,4] ...

javascriptnode.jsreactjs

Ways to present a Nuxt page as a reply from an express route

How can I achieve a similar functionality to res.render on a Nuxt page? The project is using the nuxt-express template, which combines Nuxt and Expressjs. Although Nuxt provides nuxt.render(req, res) and nuxt.renderRoute, I am having trouble making it wo ...

javascriptnode.jsexpressvue.jsnuxt.js

Is there a way to input the Sno data into the database in ascending order?

function table_insert(lease_ids){ var lease_id=lease_ids+1; var table = document.getElementById('table_data123'), rows = table.getElementsByTagName('tr'), i, j, cells, customerId; for (i = 0, j = rows.le ...

javascriptphpjqueryajax

Text field value dynamically changes on key press update

I am currently working on the following code snippet: {% for item in app.session.get('aBasket') %} <input id="product_quantity_{{ item['product_id'] }}" class="form-control quantity" type="text" value="{{ item['product_quan ...

javascriptjqueryhtmlajaxonkeyup

The module named "jquery" has not been loaded in this context: _. Please use require() to load it

As I work on migrating my Javascript files to Typescript, I encountered an issue when trying to use the transpiled javascript file in an HTML page. The error message I received is as follows: https://requirejs.org/docs/errors.html#notloaded at makeError (r ...

javascripttypescriptrequirejs

Is there a method to obtain specific props for focused tabBar badges to customize the background color accordingly?

Is there a way to specify focused props in tabBarBadgeStyle to customize the background color? options={{ tabBarLabel: "Teams", tabBarBadge: '3', tabBarBadgeStyle: { backgroundColor: ORANGE ...

javascriptreactjsreact-nativereact-navigationreact-navigation-bottom-tab