What is the best way to incorporate the output of an API into a CSS container?

How can I integrate the API field value result into the CSS container? Your guidance on how to proceed would be greatly appreciated.

Hope you have a wonderful day!

head

<style>

.container {
background-color:#fff;
border-radius:20px;
padding:100px 60px;
width:200px;
box-shadow: rgba(50,50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}   

</style>

body

<div class="container">METEO CHAVENAY</div>
<div id='temperature'>"temperature"</div> c° (temperature)
<span id='pressure'>"pressure"</span> hpa (pressure relative to sea level)
<span id='visibility'>"visibility"</span> km (horizontal visibility)
<span id='windspeed'>"windspeed"</span> km/h (wind speed)
<span id='winddire'>"winddire"</span> ° (wind direction)
<span id='clouds'>"clouds"</span> % (cloud cover)
<span id='sunrise'>"sunrise"</span> (Sunrise time)
<span id='sunset'>"sunset"</span> (Sunset time)
<span id='timezone'>"timezone"</span> H GMT Time zone
</div>
htmlcss

Answer №1

Make sure to include the fields WITHIN the div block that has that specific css class:

<div class="container">
    WEATHER IN CHAVENAY
    <div id='temperature'>"temperature"</div> c° (temperature)
    <span id='pressure'>"pressure"</span> hpa (sea level pressure)
    <span id='visibility'>"visibility"</span> km (horizontal visibility)
    <span id='windspeed'>"windspeed"</span> km/h (wind speed)
    <span id='winddire'>"winddire"</span> ° (wind direction)
    <span id='clouds'>"clouds"</span> % (cloud cover)
    <span id='sunrise'>"sunrise"</span> (Sunrise time)
    <span id='sunset'>"sunset"</span> (Sunset time)
    <span id='timezone'>"timezone"</span> GMT Time zone
    </div>
</div>

Why are there so many double quotes?

Also, why not enclose everything WITHIN the div or span tags? Typically, text should not be placed outside of these blocks. However, this is not related to the CSS issue.

In order to make the width property work on the div, you may need to add the following css:

display: inline-block;

It seems like gaining more experience would be beneficial. It's best to master the basics before delving into complex CSS features like box-shadow.

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

Navigating to a parent URL where the Angular configuration is set can be achieved by following these steps

My application revolves around a webpage created with the use of node and angular. On the root URL (/), I have incorporated a signup and login form without the use of Angular. Upon successful login, Angular scripts and configuration files are loaded on the ...

javascripthtmlnode.jsangularjsangular-routing

Is the width set to fill the entire partial screen?

I'm facing a dilemma: I want the darkest-gray bar at the bottom right (visible after running the code below) to stretch as far as the browser window allows without encroaching on the light-gray section on the left. Here's the code snippet: <d ...

csswidth

Run a PHP script on the current page upon choosing an option from a dropdown list with the help of Ajax or JavaScript

I'm currently working on a MySQL query that needs to be executed when a user selects options from multiple dropdown lists. What I am looking for is the ability to automatically run a query related to the selected dropdown list option using AJAX/JavaS ...

phpjavascriptmysqlhtmlajax

Dropping down with Twitter Bootstrap's navbar menu

I’m currently facing some challenges with getting the Twitter Bootstrap drop-down navbar feature to function properly. Despite going through various tutorials, I am unable to make it work by directly copying the code. The console displays the following e ...

javascriptcsstwitter-bootstrap

Identifying dates in pandas index and header: A comprehensive guide

After utilizing the HTML parser to extract a table from a particular website, the current output looks similar to the following: Current Output: 1 Sep 2 Sep 3 Sep 4 Sep 00:00 11 47 54 10 ...

pythonhtmlpython-3.xpandashtml-parsing

Resolve the issue of autofill data overlapping with field labels

My form incorporates the Canada Post AddressComplete tool, which functions similarly to Google Maps Autocomplete. As you type your address, suggestions appear in a drop-down menu. However, after selecting an address, the text in the Postal Code and City f ...

javascriptcssformsautofill

HTML input field template

Is there a way to limit the HTML text box to only allow specific patterns such as: A1+A2*A3 It must consist of alphanumeric characters (A1 to A5) 2) It should be able to recognize and accept arithmetic operators in the specified format above. I am util ...

htmlangularjs

Styling Overflow in Coda Slider using CSS

Currently utilizing the Coda Slider for my project. For those unfamiliar with the Coda Slider, it initially hides the overflow-x position until a tab is clicked. This triggers an animation that slides the hidden DIV in either from the right or left side. ...

jquerycsscoda-slider

What is the best way to select the destination folder for output in Webpack?

Whenever I run webpack using "webpack --mode development", it generates a dist folder and places the bundle.js file inside it. My aim is to have it created and placed in the same directory instead. How can I achieve this? module.exports = { entry: " ...

javascripthtmlwebpack

When hovering over nav bar links, shadows are not displayed

When hovering over the navbar links, I am able to change their color but a shadow at the bottom is missing. Is there a way to add a shadow at the bottom like it had before when not hovered? Visit this link for more information ...

htmlcss

Creating a dropdown menu with an initial value fetched from a text file

I'm currently working on a school project that involves adjusting basic wireless parameters in a Linux router using command-line operations through an HTML interface. My experience has mostly been with PHP, and so far, I've been progressing well. ...

phphtmlfiledropdown

The script is malfunctioning on Google Chrome

Below is a script that I have: EXAMPLE : <script> var ul = document.getElementById("foo2"); var items = ul.getElementsByTagName("li"); for (var i = 0; i < items.length; i=i+2) { // perform an action on items[i], which repr ...

javascripthtml

How can I use JavaScript to consistently fetch the CSS-defined percentage setting for padding/margin instead of the pixel size?

How can I retrieve the padding set in CSS for a div with {padding:10% 10px 20% 10px;} using JavaScript, considering that window.getComputedStyle(myelement).getPropertyValue('padding'); returns different results? In Firefox, it shows as "10% 10px ...

javascriptjquerycss

Display Image Automatically Upon Page Opening

Currently, I have an HTML file that includes the following code: <img src="(Image from file)" alt="Raised Image" class="img-raised rounded img-fluid"> I am attempting to retrieve the image from a file when the webpage loads using the server.js file ...

javascripthtmlnode.js

Stopping the <nav> element from displaying as "unlabeled section" on HTML5 webpages

As I work on incorporating proper sectioning in HTML5 with sectioning elements and headlines to meet my customer's design goals (while adhering to certain restrictions), I have encountered a challenge. The basic layout requested is as follows: <b ...

htmlnavigationsemanticsnav

Intersection Observer is functioning properly as elements vanish once they finish appearing

New to this forum and looking forward to receiving assistance and making some fantastic connections! Currently working on my personal portfolio with the goal of getting it online for job hunting purposes, but encountering some challenges along the way. T ...

javascripthtmlcssbootstrap-4

The image hover feature is not functioning as expected in Angular 4

Currently, I am involved in a project using Angular 4. One particular section involves changing images on hover. Although I have implemented the following code, it does not seem to be functioning correctly for me. Interestingly, the same code works perfect ...

jqueryhtmlangular

Having trouble saving text in a textbox?

Is there a way to store text in a text box for future use? Every time I reload the page, the text in the box disappears. I have attempted the following solution: <td align='left' bgcolor='#cfcfcf'><input type="text" name="tx ...

javascriptcsshtml

Can you suggest some unconventional HTML/CSS attributes and tools for arranging a form in a way that results in a unique tab order?

As part of my role, I am tasked with transforming mock specs provided by our clients into custom web forms. Our application comes equipped with tools specifically developed to streamline this process. Recently, I was presented with a particularly intriguin ...

htmlcss

Fixing the bug in the circle text animation

I followed the instructions in this tutorial and implemented the following code: Splitting(); * { margin: 0; padding: 0; box-sizing: border-box; font-family: monospace; } body { display: flex; justify-content: center; align-items: center; ...

csscss-transforms