0
166
ViewsCómo envolver texto en cuadro y más
Me pregunto cómo pondría esto en una caja redondeada de color para que se destaque un poco del fondo. Proporcionaré una imagen de lo que busco a continuación + color: #23272a o rgb (35, 39, 42)
He pegado mi app.js aquí:
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 };He pegado mi index.html aquí:
<!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>También estoy buscando agregar un signo estático "£" alineado con el número (dentro del cuadro con él) en la misma fuente pero en el color: blanco
¡Gracias y saludos cordiales!
·
Juan Pablo Isaza
2 answers
Answer question0
Use clases css en lugar de propiedades de estilo, luego investigue border-radius. Para su £, considere usar un pseudoelemento CSS con eso como contenido.
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>Luego actualice su js a (borrando todo su código de estilo):
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
Report
0
Tal como lo mencionó @JonP, puede crear clases CSS y eliminar los usos de stockPriceElement.style.* en su código JavaScript. Simplemente agregue las clases que necesita a ese elemento DOM con stockPriceElement.classList.add() .
Para incluir el icono "£" al principio del precio de cada acción, cree un pseudoelemento ::before y agregue el icono como su propiedad de content .
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
Report
Answer question