How to style Javascript display text?

Question

I'm new to JS, and I just need to have a line of text on a client site that displays the delivery date in the header. I currently have this snippet, which displays perfectly, but I just want to style it to be Avenir bold white:

<script>
    // Set the number of days for delivery
    const deliveryDays = 21; // Change this number as needed

    // Calculate delivery date (today + deliveryDays)
    const deliveryDate = new Date();
    deliveryDate.setDate(deliveryDate.getDate() + deliveryDays);

    // Format delivery date as "December 5, 2024"
    const options = { year: 'numeric', month: 'long', day: 'numeric' };
    const formattedDate = deliveryDate.toLocaleDateString('en-US', options);

    // Display message
    document.write(`Order today and have your custom table cover handcrafted by ${formattedDate}!`);
</script>

David · Accepted Answer · 2024-11-14 20:39:37Z

Don't use document.write. Or at least, don't over-use it. It may still have a use, but this is not it.

Create an element in your page and write the text to that element. Then you can use CSS to style that element however you like. For example:

// Set the number of days for delivery
const deliveryDays = 21; // Change this number as needed

// Calculate delivery date (today + deliveryDays)
const deliveryDate = new Date();
deliveryDate.setDate(deliveryDate.getDate() + deliveryDays);

// Format delivery date as "December 5, 2024"
const options = { year: 'numeric', month: 'long', day: 'numeric' };
const formattedDate = deliveryDate.toLocaleDateString('en-US', options);

// Display message
document.querySelector('#output').innerText = `Order today and have your custom table cover handcrafted by ${formattedDate}!`;

#output {
  color: red;
  /* any styling you want */
}

<div id="output"></div>

In the JavaScript code the only change I made was in the // Display message section.

Note that you're not "styling JavaScript display text". You're using CSS to style the content in the HTML document. And you're using JavaScript to modify the content in the HTML document. These are separate concerns.

Collectives™ on Stack Overflow

How to style Javascript display text?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related