Skip to main content

Code for temperature converter

#html code==>>

<html>

  <body>

    <form>

      <div id="celsius">

        <input placeholder="celsius" type="number" />

      </div>

      <br /><br />

      <div id="fahrenheit">

        <input placeholder="fahrenheit" type="number" />

      </div>

      <br /><br />

      <div id="kelvin">

        <input placeholder="kelvin" type="number" />

      </div>

      <br /><br />

      <input id="reset" type="reset" value="reset" />

    </form>

  </body>

</html>


#css code==>>

            *{

          margin: 0;

          padding: 0;

          box-sizing: border-box;

      }

            input{

              position: relative;

              border: none;

           outline: none;

              color: #000;

              border-radius: 5px;

              padding: 6px;

              left:20%;

            }

            input:hover{

          box-shadow: 2px 2px 1px 1px #777;

      }

            ::placeholder{

          color: #aaa;

      }

            ::-webkit-inner-spin-button,

      ::-webkit-outer-spin-button{

          -webkit-appearance: none;

      }

            form{

              padding: 10px;

       width: 300px;

              height: none;

              line-height:20px;

          height: initial;

              border: 6px solid slateblue;

              border-radius: 10px;

              box-shadow: 1px 1px 1px 1px inset;

       background: linear-gradient(to top, #2da2f0, #73f5e4);

      }

            #reset{

          position: relative;

          top: 20%;

          left: 31%;

          padding: 10px;

          width: 100px;

          border-radius: 5px;

          border: none;

          letter-spacing: 1px;

      }


      #reset:hover{

          box-shadow: 2px 2px 4px #777;

          transform: scale(1.4em);

      }


#js code==>

       const celsiusinput = document.querySelector('#celsius > input');

      const fahrenheitinput = document.querySelector('#fahrenheit > input');

      const kelvininput = document.querySelector('#kelvin > input');


      function roundnum(num){

          return Math.round(num*100)/100;

      }


      function ctofandk(){

          const ctemp = parseFloat(celsiusinput.value);

          const ftemp = (ctemp * (9/5)) + 32;

          const ktemp = ctemp + 273.15;


          fahrenheitinput.value =roundnum(ftemp);

          kelvininput.value = roundnum(ktemp);

      }


      function ftocandk(){

          const ftemp = parseFloat(fahrenheitinput.value);

          const ctemp = (ftemp - 32) * (5/9);

          const ktemp = (ftemp + 459.67) * 5/9;


          celsiusinput.value = roundnum(ctemp);

          kelvininput.value = roundnum(ktemp);

      }


      function ktocandf(){

          const ktemp = parseFloat(kelvininput.value);

          const ctemp = ktemp - 273.15;

          const ftemp = 9/5 * (ktemp - 273) + 32;


          celsiusinput.value = roundnum(ctemp);

          fahrenheitinput.value = roundnum(ftemp);

      }


      function main(){

          celsiusinput.addEventListener('input', ctofandk);

          fahrenheitinput.addEventListener('input', ftocandk);

          kelvininput.addEventListener('input', ktocandf);

      }

      main();




For Temperature Converter Web App: click here

Labels:

Comments

Post a Comment

Popular posts from this blog

Glowing Border effect using html/css

  {html code} <html>     <head>         <link href='E:\html\.vscode\.vscode\style.css' type='text/css' rel='stylesheet'>         <title>Glowing Border</title>     </head>     <body>         <div class='box'>             <div class='text'>             <h2><u>Glowing Border</u></h2>             <p>HTML and CSS are technically not the programming languages, they are the scripting languages.              Usually used for the front-end development.</p>             </div>         </div>             </body> </html> {css code} body{     background: black;     display: ...
2 comments
Read more

What are some methods for optimizing Oracle databases for large data inserts?

 For large data inserts I can suggest you few things like: Use trigger(PL/SQL) Use APPEND hint Remove indexes on tables Firstly, while you use triggers in the table it could leave data to be logically corrupt. And it will then perform insert in a very conventional way. Which is a time consuming process and won’t helps us! Secondly, using APPEND hint will help us to an extend. So, APPEND hint tells the optimizer to perform a direct-insert into the table, which improves the performance. Now there is a way which we could achieve this by minimizing the Redo generation. What Redo do is; it basically ensures the recoverability of data to the database. It writes down every transaction to the archive log. Let’s take a scenario, where if the database is running on the NOARCHIVELOG mode, using APPEND hint will reduce the redo generation i.e; it won’t write into the archive log anymore and thus increases the speed. But then it won’t be able to recover at any point in time if your data is ambi...
Post a Comment
Read more

Stock Market using Python

 "The stock market is a device for transferring money from the impatient to the patient." - Warren Buffett Today we'll look into few ways for accessing the stock market. And we'll do this using Python ! Now, as we know that there are 2 stock exchange in India; BSE and NSE So we'll get the data from both! To begin with let's access the data from BSE first. (P.S: I certainly like the 2nd and the 3rd method to access stock market!) * So, to import the BSE data we need to " pip install bsedata ". => And then import the module, => Create an object to store the Driver Class => Then we need to do " getQuote('script_code')" where we need to provide a script code of a company which we need to access. Just like here we have given; => And from here we can see that the script code was for the company named "V-MART". But we can't remember all the script code hence we need to download this script file from the BSE websi...
Post a Comment
Read more