Is there a way to position the weather icon beside the weather condition?

My icon is hanging low on the left corner of the screen. I'm looking for a quick way to move it next to the weather condition (right below Your Location).

Access Codepen link 

<div class="container">
  <h1 class=" text-center"> Your Local Current Weather</h1> <br>
  <div>
    <h2 id="location" class="text-center"> </h2>
    <h2 id="condition" class="text-center">
    </h2>

    <h2 class="text-center" style="cursor: pointer">Temperature: <span id="temperature" class="toggle"></span></h2>
    <canvas id="icon" width="100" height="100"></canvas>

  </div>
</div>

javascripthtmlcss

Answer №1

Insert the Canvas tag immediately following the section titled Your Local Current Weather:

<body>
  <div class="container">
  <h1 class= " text-center"> Your Local Current Weather</h1> <br>
    <canvas id="icon" width="100" height="100></canvas>
  <div>
  <h2 id = "location" class = "text-center"> </h2>
  <h2 id= "condition" class="text-center">
     </h2>

  <h2 class="text-center" style="cursor: pointer">Temperature: <span id="temperature" class="toggle"></span></h2> 

    </div>
  </div>

</body>

Also, include this CSS styling:

#icon {
 position: relative;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -10%)
}

You can view the updated version HERE

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 can one properly utilize material-ui CSS?

Just starting out with material-ui and react, I'm currently following this palette customization guide from Material-UI. However, when attempting to replicate the example shown, I encountered the error: Cannot read property 'prepareStyles' ...

javascriptcssreactjsmaterial-ui

Running jQuery in AngularJS partialsHow can I incorporate jQuery into AngularJS partials?

I'm currently leveraging the power of the Angular UI router to divide my web pages into partial views and load them accordingly. However, I've run into an issue where I can't seem to utilize jQuery within these partial views. My approach inv ...

javascriptjqueryangularjsangular-ui-router

Text alignment in the horizontal direction does not function as expected within the `<span>` element in Bootstrap 4

The code snippet below is what I am currently working with: <div class="card" > <div class="card-block"> <h4 class="card-title"> <span class="text-left"> ...

htmlcsstwitter-bootstrapbootstrap-4

NodeJS script for mass downloading videos

I'm looking to create a NodeJS script that can download videos from a CSV list. I've successfully managed to download images through HTTP, but I'm struggling to find a solution for downloading video files and handling HTTPS URLs. Any advice ...

javascriptnode.js

AngularJS Material Design sticky header MD table container

I am looking to create a table container to display records with a unique requirement - when the table reaches the top of the screen, its header should stick in place. Can you provide guidance on how to implement this feature? For reference, please check ...

javascriptcssangularjsmaterial-designangular-material

Could someone recommend a Python function that can encode output specifically for use in JavaScript environments?

Looking to securely encode output for JavaScript contexts in Python 3.6+? This means ensuring that any input string is properly encoded so that replacing VALUE with it will prevent all XSS attacks on the webpage, containing the input within the boundaries ...

pythonhtmlpython-3.xpython-3.6

Issues with incorrect source path in Typescript, Gulp, and Sourcemaps configuration

In my nodejs app, the folder structure is as follows: project |-- src/ | |-- controllers/ | | |`-- authorize-controller.ts | |`-- index.ts |--dist/ | |--controllers/ | | |`-- authorize-controller.js | | |`-- authorize-controller.js.map | ...

javascriptnode.jstypescriptgulpgulp-sourcemaps

A function that handles HTTP request and response

In order to decrypt data, I need to retrieve the encrypted response by hitting a specific URL and then use that encrypted data along with a key to decrypt it. Initially, I attempted to fetch the data response using POSTMAN, but all I got back was a series ...

javascriptjqueryhtmlhttpxmlhttprequest

ng-repeat does not display the final piece of text

Is it possible to utilize ng-repeat and !$last in order to list answers separated by commas without displaying the last comma? Below is the current HTML code that I have been working with: <h3 ng-repeat="answer in correctAnswers" ng-show="!$last"> ...

javascriptangularjs

Connect a responsive div to a main div

I'm relatively new to the world of Javascript, CSS, and HTML. Currently, I'm attempting to anchor a div to the center and bottom of its parent div. The parent div contains a responsive background image and my fa fa-arrow icon is correctly positi ...

javascripthtmlcss

Can firebase and express be integrated seamlessly?

I'm a newcomer to Express and I want to create a REST API with express.js that utilizes Firebase as its database. Can these two technologies actually work together? Here is the code snippet I tried: cons ...

javascriptnode.jsfirebaseexpressfirebase-realtime-database

Displaying an array with no elements assigned to it

I am facing an issue with React. I have been using the fetch API as per a tutorial to retrieve data from my API and display it in React. Here is the JSON data I am working with: { "Configuration": [ { "id_configuration": 1, "language": "E ...

javascriptreactjsreact-hooks

Issues with Django Site Search Functionality

Currently working on a Django project, I have encountered an issue with the search bar on my localhost site. Despite adding the search bar, it fails to return any results when provided input. Upon inspecting the page source, I discovered some unfamiliar li ...

javascriptpythonajaxdjangodjango-urls

Ensure to first close the existing global connection before attempting to establish a new one in your Node.js Post WebApi application

Currently, I am in the process of creating a small post WebAPI using node.js to collect user data such as names and numbers. However, when I have an excessive number of users accessing this web API, I encounter the following error message: "node.js Global ...

javascriptnode.js

Guide to aligning elements to the left within a container-fluid in bootstrap 4

Is it possible to align the text in Line 1 and Line 2 to the left without any gap appearing on the left side of line 2, regardless of the device size? I have attempted to use various methods such as m-1, p-1, text-left, and even negative padding, but none ...

csshtmlbootstrap-4

Limit the user to entering a maximum of (40) characters in the textarea

To enforce a character limit of 40 characters in a text area, I have implemented the following JavaScript function to trigger on the textarea's onKeyUp event: However, a problem arises when pasting content exceeding 40 characters into the textarea - ...

javascriptasp.nethtmlasp.net-mvc

Ways to halt the repetition of clicking the like button on my social media posts

I've been working on a new post system that allows users to like posts. Everything seems to be in order except for one issue - when iterating through the likes table from the post-like relation, the like button is being duplicated even with added cond ...

javascriptphplaravelvue.jsv-for

Obtain the properties of a sphere in three.js when it is hovered over with the mouse

In my current project, I am creating a series of spherical objects using three.js by utilizing an array and a for loop. The initial array structure is as follows: atoms = [ ['Na', [0, 0, 0]], ['Na', [0.5, 0.5, 0]], ['Na', ...

javascripthtmlthree.js

Utilizing recorder.js to incorporate audio recording functionality into web2py

I am currently working on a web application where I need to integrate the recorder.js file for audio recording functionality. However, I am facing issues in implementing it within the web2py framework. Can you provide detailed guidance on how to utilize th ...

javascripthtmljsonweb2pybower

Customize the appearance of the "Collapse" component in the antd react library by overriding the default styles

Incorporating JSX syntax with *.css for my react component. Displayed below is the jsx code for the antd collapse section. <Collapse defaultActiveKey={["1"]} expandIconPosition="right" > <Panel header="This is p ...

javascripthtmlcssreactjsantd