0
169
VistasHow to wrap text in box + more
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!
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
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');
·
Juan Pablo Isaza
Denunciar
0
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.
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: 14px 1rem;
text-align: center;
font-size: 1.4rem; /* 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: 0 6px 0 0; /* vary space around the coin - top right bottom left */
}
.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>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta