How to wrap text in box more-CodePudding

I'm wondering how i'd put this into a coloured rounded box to make it pop from the background a bit. I will provide a picture of what i'm aiming for below colour: #23272a or rgb(35, 39, 42)

I have pasted my app.js here:

let stockPriceElement = document.getElementById('shib-worth');
let lastPrice = null;

ws.onmessage = (event) => {
    let stockObject = JSON.parse(event.data);
    let price = parseFloat(stockObject.p).toFixed(8);
    let shib_start_price = 0.00003442;
    let shib_balance = 7263219;
    let shib_start_worth = shib_start_price * shib_balance;
    let shib_worth_now = price * shib_balance;
    let convert_shib_worth_to_gbp = shib_worth_now / 100 * 73
    stockPriceElement.innerText = parseFloat(convert_shib_worth_to_gbp).toFixed(2);
    stockPriceElement.style.textAlign = "center";
    stockPriceElement.style.color = convert_shib_worth_to_gbp === shib_start_worth ? '#9e9e9e' : convert_shib_worth_to_gbp > shib_start_worth ? '#4caf50' : '#f44336';
    stockPriceElement.style.fontFamily = 'Sora', sans-serif;
    lastPrice = convert_shib_worth_to_gbp
};

I have pasted my index.html here:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Sora:wght@800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css"> 
</head>
<body style="background-color:rgb(44, 47, 51);">
<h1 id="shib-worth"></h1>
<script src="app.js"></script>
</body>
</html>

I'm also looking to add a static "£" sign aligned to the number(inside the box with it) in the same font but in the colour: white

thanks and kind regards!

CodePudding user response：

Use css classes instead of style properties, then investigate border-radius. For your £ consider using a CSS Pseudo element with that as the content.

body {
  background-color: #333;
}

.stock-price {
  /*Rounded corners*/
  border-radius: 5px;
  /*The following is basic styling adjust as needed*/
  padding: 10px;
  font-size: 16px;
  font-family: 'Sora', sans-serif;
  text-align: center;
  background-color: #666;  
  margin: 6px;
  width: 100px;
}

/*Pseudo element for pound sign*/
.stock-price::before {
  content: '£';
  color: white;
}

/*Classes to indicate price movement*/
.stock-price.no-change {
  color: #9e9e9e;
}

.stock-price.loss {
  color: #f44336;
}

.stock-price.gain {
  color: #4caf50;
}

<div class="stock-price no-change">123</div>
<div class="stock-price loss">456</div>
<div class="stock-price gain">123</div>

Then update your js to (deleteing all your style code):

stockPriceElement.innerText = parseFloat(convert_shib_worth_to_gbp).toFixed(2);
/*Add base class*/
stockPriceElement.classList.add('stock-price');
/*Add appropriate price movement class*/
stockPriceElement.classList.add(convert_shib_worth_to_gbp === shib_start_worth ? 'no-change' : convert_shib_worth_to_gbp > shib_start_worth ? 'gain' : 'loss');

CodePudding user response：

Just as @JonP mentioned, you can create CSS classes and remove the stockPriceElement.style.* uses in your JavaScript code. Simply add the classes you need to that DOM element with stockPriceElement.classList.add(). To include the "£" icon at the beginning of each stock price, create a ::before pseudo element and add the icon as the its content property.

Show code snippet

let stockPriceElement = document.getElementById('shib-worth');
let lastPrice = null;

// `ws` wasn't defined in your code
ws.onmessage = (event) => {
    let stockObject = JSON.parse(event.data);
    let price = parseFloat(stockObject.p).toFixed(8);
    let shib_start_price = 0.00003442;
    let shib_balance = 7263219;
    let shib_start_worth = shib_start_price * shib_balance;
    let shib_worth_now = price * shib_balance;
    let convert_shib_worth_to_gbp = shib_worth_now / 100 * 73
    stockPriceElement.innerText = parseFloat(convert_shib_worth_to_gbp).toFixed(2);
    // Add the text-align and font-family declaration 
    // to a CSS class
    stockPriceElement.classList.add("stock-price");
    // This could also be broken into separate color
    // classes to add/toggle based on the conditional logic
    stockPriceElement.style.color = convert_shib_worth_to_gbp === shib_start_worth ? '#9e9e9e' : convert_shib_worth_to_gbp > shib_start_worth ? '#4caf50' : '#f44336';
    lastPrice = convert_shib_worth_to_gbp
};

:root {
  --grey: #9e9e9e;
  --green: #4caf50;
  --red: #f44336;
}

body {
  background-color: rgb(44, 47, 51);
}

.stock-price {
  padding: 10px 12px;
  text-align: center;
  font-size: 1.5rem; /* Vary this how you would like */
  font-family: 'Sora', sans-serif;
  border-radius: 3px;
  color: var(--green);
  background: rgb(35, 38, 41);
  width: fit-content;
  -moz-width: fit-content; /* For Firefox */
}

/* Create a Pseudo element to represent the icon */
.stock-price::before {
  content: "£";
  color: #fff;
  margin-right: 4px;
}

.red {
 color: var(--red);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Sora:wght@800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css"> 
</head>
<body>
<h1 id="shib-worth" class="stock-price">377.41</h1>
<h1 id="shib-worth" class="stock-price red">377.41</h1>
</body>
</html>