Show the output of a JavaScript script in a styled color box using Bootstrap

Is there a way to incorporate JS calculation into a CSS Bootstrap colored box to display random numbers? The code below shows how the structure can be set up.

Here is an example of code for a colored box in Bootstrap:

<div class="row align-items-center number-row">
  <div class="col-5"> </div>
  <div class="col-2 p-3 mb-2 bg-secondary text-white">327</div>
  <div class="col-5"> </div>
</div>

This is the JavaScript code:

<h2>JavaScript Math</h2>

<p id="demo"></p>

<script>
    function maths 
    let x = Math.floor((Math.random() * 1000) + 1);
    document.getElementById("demo").innerHTML = x;
</script>

Click here for CSS color box

Answer №1

If you want to change the color box instead of setting the value of a p tag, modify the following code snippet:

<h2>JavaScript Numbers</h2>

<div class="row align-items-center number-row">
  <div class="col-5"> </div>
  <div id="demo" class="col-2 p-3 mb-2 bg-primary text-white"></div>
  <div class="col-5"> </div>
</div>

Use the same JavaScript logic with this updated code:

let y = Math.floor((Math.random() * 1000) + 1);
document.getElementById("demo").innerHTML = y;

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

How to automatically open JQuery Accordion panels when the page loads

My Accordion loads with the 1st panel open upon page load, but I am looking for a way to have the entire Accordion closed by default. Any help or suggestions on how to achieve this would be highly appreciated. Thank you for your assistance. FIDDLE http:// ...

What is the name of this JavaScript function declaration syntax? (var) => {}

While perusing the most recent NodeJS documentation, I stumbled upon a novel approach to defining a function: fs.unlink('/tmp/hello', (err) => { if (err) throw err; console.log('successfully deleted /tmp/hello'); }); Source: ht ...

Is it possible for web browsers to accommodate various HTML5 pattern regexp functionalities?

A basic regular expression pattern was implemented in a payment form on our website for customers: <input type="text" pattern="(|\$)[0-9]*(|\.[0-9]{2})" title="Please enter a valid number in the amount field" required> This pattern ...

Tips for reducing the minimum height and weight of a GridStack grid component

Currently, I am utilizing the GridStack.js library and facing an issue with implementing keyboard functionality. When I decrease the screen width (using Chrome DevTools) to less than 800-1000px, all the grid elements automatically adjust their width to 100 ...

Unable to retrieve data from mysql using javascript and ajax

I am having trouble retrieving data from a MySQL database using AJAX. I have tried adapting my old AJAX code that worked fine in another project, but it doesn't seem to be working here. Here is the JavaScript function I am using: var text1 = documen ...

A guide to activating automatic filling of usernames and passwords in web browsers

On my login page, I aim to make the user experience seamless by automatically filling in the username and password fields once a user has logged in for the first time. This way, when they return to the login page, all they have to do is click the login but ...

Prevent anchor tags from halting click propagation

After some experimentation, I discovered that a tags can interrupt event propagation in the DOM. For example, clicking on the red button should log text, but if you click where they overlap, only the link behavior occurs. Is there a way to ensure the event ...

Activate a monitoring pixel with a click of your mouse

I have a tracking pixel that is typically placed in the body of a "installation success" page: <img src="http://domain.com/adclick.php" width="1" height="1" border="0" /> However, I want to trigger this pixel when someone clicks on a download butto ...

Apply the active class to only one element at a time

Presented here is a table showcasing available dates and times. Users can select a specific time by clicking on the "Choose" link. Currently, when a user selects a time, the class "active" is applied. However, the desired behavior is to remove the previous ...

Angular does not seem to be identifying the project name as a valid property

After installing Angular materials using the CLI, I decided to check my angular.json file and encountered an error in the console stating that "Property MEAN-APP is not allowed". [The name of my Angular project is MEAN-APP] Here's a screenshot of the ...

How can I stop a child node from inheriting any css styles from its parent node?

Imagine a body element with a nested child element (like a div). The body element may have unique CSS styles that are not predetermined (they depend on the specific webpage accessed on the internet). The child element (e.g. div) has a set of fixed CSS s ...

What are some ways to customize the appearance of the file input element?

I am currently working with MVC 5 and bootstrap. Can someone assist me in customizing the input type file element to match the design shown in the image below? .file-uploader .input-group input, .file-uploader .input-group-btn .button { height: 35px; ...

Error: BrowserSync command line reports a "Cannot GET /" message

I am in the process of setting up a basic Browser Sync server specifically for HTML and CSS. After reviewing the materials on Browser Sync documentation, I have created this package.json file with the following start script: { "name": "test", "versio ...

Error: The function sendFile does not exist in the method res.status(...)

As a newcomer to this field, I must apologize if my issue has an obvious solution. However, I am encountering the following error: TypeError: res.status(...).sendFile is not a function at app.get (/root/discordtest/server.js:10:19) at callbacks (/ ...

Encountering an issue with TS / yarn where an exported const object cannot be utilized in a consuming

I am currently working on a private project using TypeScript and Yarn. In this project, I have developed a package that is meant to be utilized by one or more other applications. However, as I started to work on the consumer application, I encountered an ...

Switch the URL back to its original form after decoding

Here is a URL that I need to decode in order to remove the %3AF%2, etc. http%3AF%2Fmo-d6fa3.ao.tzp.corp%3A3000%2Flogin%2Fcallback&client_id=x2.node"; To decode it, I use var decodedUrl = decodeURIComponent(url). After making some changes, I am now t ...

The Typescript compiler is functioning correctly, but the output when running the JavaScript code

Let me start by showcasing my directory tree: \__ root \__ node_modules \__src \__ dir1 \__ index.ts \__ package.json \__ deploy.config //irrelevant here ...

Tips for utilizing Bootstrap 4 exclusively within a designated Bootstrap Modal

Currently, I am working on an application that utilizes Bootstrap 3. Unfortunately, the Bootstrap 3 files (.css/js) have undergone extensive modifications. My task involves integrating the SummerNote Text editor, and although everything is functioning corr ...

The AJAX request seems to be concealing the text instead of displaying the partial

I'm currently working on implementing a feature where users can reply to comments, and when they click "reply", a partial should appear beneath the original comment. In my reply.js.erb file, I have this code: $("<%= j render(:partial => ' ...

There was a lack of dynamic content on the webpage when using the view/template engine (Handlebars)

I'm currently using the Handlebars template engine in my project. Despite not encountering any errors in the console, I'm facing an issue with displaying dynamic content in the index.hbs file that is rendered from app.js. app.js const express = ...