The use of the <span class="blinking"> element is not functioning properly within the JavaScript

<body class="container-fluid">
  <div class="panel panel-primary">
    <div class="panel-heading">
      <h3>Body Temperature</h3>
    </div>
    <div class="panel-body">
      <p>Your body temperature is higher than normal:
        <span class="blinking">
    <script>
    let tempFahrenheit=99;
    const NORMAL_FAHREN=98.6;
    let tempCelsius;
    const THIRTYTWO=32;
    const TEMP=1.8;
    tempCelsius=(tempFahrenheit-THIRTYTWO)/TEMP;
    let fever=tempFahrenheit>NORMAL_FAHREN;
    document.write(fever);
    document.write("</br>");
    document.write("Temp in celsius");
    </script>
     </span>
      </p>
    </div>
  </div>
</body>

I'm having trouble getting the blinking effect to display on Chrome. Any suggestions for fixing this issue?

javascripthtmlcss

Answer №1

I need assistance with implementing CSS code for a blinking class

.blinking {
        animation: blinker 0.6s linear infinite;
        color: #1c87c9;
      }
      @keyframes blinker {
        50% {
          opacity: 0;
        }
      }
<body class="container-fluid">
          <div class="panel panel-primary">
            <div class="panel-heading">
              <h3>Body Temperature</h3>
            </div>
            <div class="panel-body">
              <p>Your body temperature is higher than normal:
                <span class="blinking">
            <script>
            let tempFahrenheit=99;
            const NORMAL_FAHREN=98.6;
            let tempCelsius;
            const THIRTYTWO=32;
            const TEMP=1.8;
            tempCelsius=(tempFahrenheit-THIRTYTWO)/TEMP;
            let fever=tempFahrenheit>NORMAL_FAHREN;
            document.write(fever);
            document.write("</br>");
            document.write("Temp in celsius");
            </script>
             </span>
              </p>
            </div>
          </div>
        </body>

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

Assistance with organizing date schedules using Javascript

I'm currently assisting a friend with his small project, and we've run into an interesting situation. Imagine a scenario where a doctor informs their patient that starting today, they have X number of consultations scheduled for every Wednesday a ...

javascriptjqueryarrays

Changing a string into a date format with the help of JavaScript AngularJS

My string is as follows: 13-12-2017 05:05 AM I am looking to convert it to the following format: Date 2017-12-13T05:05:00.000Z Attempted Solution: var mydate = '13-12-2017 05:05 AM'; var selectedDate = new Date(mydate); Upon logging the selec ...

javascriptangular

Preventing div elements from being highlighted when double-clicked

I'm working with a div element that has a background image and I need help figuring out how to disable the highlighting effect when double-clicking on it. Is there a CSS property that can achieve this? ...

cssxhtmltagshighlightingdouble-click

aligning an image in the center of a webpage

I have created a simple HTML code to center an image inside the body of an HTML page. It works perfectly on Windows with various browsers, and on phones vertically when rotated. However, the issue arises when I open the site on a Mac as the centering doe ...

jqueryhtmlcsstwitter-bootstrap

Is it possible to solely track the speed of vertical mouse movements with cursormeter?

For the past week, I have been on a quest to find a solution using Jquery to extract only the vertical mouse speed. Although Cursormeter is useful, it does not solely focus on vertical speed: If anyone has any advice, please share! ...

javascriptjqueryanimation

How can I adjust the height of a specific box in a CSS grid without impacting the layout of the surrounding boxes?

I am currently in the process of creating a layout that mirrors the one shown in the attached screenshot. To accomplish this, I have chosen to utilize CSS Grid for its simplicity and adaptability. However, I have come across a difficulty. I desire for eac ...

csscss-grid

Is there a way to access a private table in Google BigQuery using a Python script without needing an authorization token?

Is there a way to submit a query into Google's BigQuery and retrieve results from a python script without needing an authorization code for private tables? The python script is accessed through a user-friendly webpage, so manual authorization code han ...

pythonhtmlsqlgoogle-bigquery

Whenever I attempt to display certain HTML files in Django, I encounter an error message stating: "NoReverseMatch at / Reverse for 'it_languages' not found."

Every time I attempt to display a HTML file in my Django project, an error pops up preventing me from accessing the localhost page. The exact error message I receive is: The error is: NoReverseMatch at / Reverse for 'it_languages' not found. &apo ...

pythonhtmldjango

html2canvas is unable to capture images containing captcha

Below are the HTML codes: <div id="divPage"> div_Page <br/> <img id="captchaimglogin" src="https://www.emirates.com/account/english/login/login.aspx?cptLogin_captcha=86e2a65e-f170-43b6-9c87-41787ff64a35&t=88d296b19e5e8000&mode=ss ...

jqueryhtmlscreenshotcapturehtml2canvas

Discovering the HTML element with a particular attribute using jQuery

Is there a way to select an HTML element with a specific attribute, regardless of whether that attribute has a value or not? I have seen similar questions regarding elements with attribute values, but nothing based solely on the existence of the attribute ...

jqueryhtmlcss

Ways to make React detect a click event triggered by Jquery

I'm currently utilizing dabeng/OrgChart within a React application. The functionality I am looking to achieve is when a user clicks on a node, instead of Jquery populating an input box, I want React to save the selected node in state. I have attempte ...

javascriptjqueryreactjs

The 'X' property is not found in the DefaultRootState type, even though it is declared in the corresponding Interface

Below is the Interface being used in conjunction with mapStateToProps: export interface IStore { cache?: any; dataManager?: IUR; userPrefs: IUP; IModal?: IfingerprintModal; } export interface IModal { cbCancel: IFModalFn | null; cbTryAgain?: I ...

javascriptreactjstypescriptreact-nativereact-redux

When trying to use setInterval () after using clearInterval () within an onclick event, the functionality seems

Can anyone assist me with an issue I am encountering while using the setInterval() function and then trying to clear it with clearInterval()? The clearInterval() works fine, but the automatic functionality of li elements with a specific class suddenly stop ...

javascripthtmljqueryfunctionsetinterval

Repair the image within the HTML image tag

Currently, I am working on an HTML page using Knockout.js and Bootstrap. I am facing an issue where the image I am adding in the image tag does not completely cover the image tag. Instead, there is a white background appearing which is not desired. I wan ...

jqueryhtmlcsstwitter-bootstrapknockout.js

Leveraging next-generation JavaScript (NextJS), incorporate sass-loader for seamless inclusion of variables in each individual

I'm having trouble implementing a custom webpack configuration in my nextjs project. My objective is to automatically import @import "src/styles/variables.scss"; for all scss files in my application. I have successfully set up a webpack con ...

javascriptreactjswebpacksassnext.js

Steps for setting up type-graphql in your projectNeed help with

Trying to include this in my TypeScript project: import { ID } from "type-graphql"; Encountered an issue when attempting to install type-graphql. Received a 404 error stating that it could not be found in the npm registry. npm install @types/type-graphq ...

javascriptreactjstypescriptnpmgraphql

What is the best way to create a mirrored effect for either a card or text using CSS

Can anyone assist me with this CSS issue? When I hover over to view the movie details, the entire word flips along with it. Is there a way to make only the word flip initially, and then have it return to normal when hovered? The HTML code is included belo ...

javascripthtmlcss

Changing text content of an element with dynamic formatting

When a link is clicked on, I want to dynamically set the text. Here is the current code: <a href="www.somelinkhere.com" onclick="getElementById('setText').innerHTML='text to replace'" target="someIFrame" ...

javascripthtml

Authenticate the user by comparing the entered username and password with the database records. If they match, proceed to redirect the user to their profile page. Otherwise, log

Attempting to complete this assignment which involves a user entering their username and password. If the information matches what is stored in the database, the user should be redirected to their profile page where a personalized greeting message is displ ...

javascriptmysqlnode.jsexpressbody-parser

Detecting repeated property values within a collection of embedded objects

I am currently working with a JSON file that contains an array of nested objects and arrays to represent a shopping cart. My goal is to identify duplicate values and update the quantity of the item if duplicates exist, otherwise simply add the items to the ...

javascriptjsonnested-object