Posts

Showing posts from July, 2021

Counter using JavaScript

By -
Image
Code is given below : 1.HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Counter</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="container"> <h1>Counter</h1> <br> <p id="count"></p> <button onclick="lower()">Lower Count</button> <button onclick="add()">Add Count</button> </div> </body> </html> 2.CSS body { padding: 0; margin: 0; } .container { top: 50%; left: 50%; transform: translate(-50%,-50%); position: absolute; width: 50%; text-align: center; background: #D0D3D4; box-shadow: 0px 5px #BDC3C7; border-radius: 25px; } #count { font-size: 35px; font-weight: bold; color: #E74C3C; } button { margin: 5px 25px; background: #BCBB92; border-radius...
Post a Comment
Read more

Quote generator using JavaScript

By -
Image
 Code is given below. 1.HTML  <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Qoute Generator</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=Uchen&display=swap" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="style.css"> /head> <body> <div class="con"> <button onclick="getQuote()">Get Quote</button> <p id="quote"></p> </div> </body> </html> 2.CSS body { padding: 0; margin: 0; } .con { top: 50%; left: 50%; transform: translate(-50%,-50%); position: absolute; text-align: center; width: 50%; } p { padding: 5px; font-...
Post a Comment
Read more

Temperature conversion using JavaScript

By -
Image
  In this, we can convert the temperature from celsius to fahrenheit or fahrenheit to celsius. Code is given below : 1.HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></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=Merriweather:ital,wght@1,300&display=swap" rel="stylesheet">           <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="container" id="container"> <h1>Temperature Conversion</h...
Post a Comment
Read more

Random number generator using JavaScript

By -
Image
This program gives the random numbers from 0 to 9. Code is given below : 1.HTML <!DOCTYPE html>  <html>  <head>   <meta charset="utf-8">   <title>Random Number Generator</title>   <link rel="stylesheet" type="text/css" href="random.css">  </head>  <body>   <div>   <h1>Random Number Generator</h1>   <button onclick="getRandom()">Click</button>   <p id="result"></p>   </div>  </body>  </html> 2.CSS body { padding: 0; margin: 0; } div { top: 50%; left: 50%; transform:translate(-50%,-50%); position: absolute; text-align: center; width: 400px; border: 2px solid #111; padding: 15px; } p { font-size: 20px; color: #E67E22; } button { border: none; outline: none; background:#3498DB; border-radius:15px; padding: 3px 45px 3px 45px; font-size: 20px; } button:hover...
Post a Comment
Read more

Age Calculator Using JavaScript

By -
Image
 Code is given below. 1.HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Age Calculator</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=Zen+Tokyo+Zoo&display=swap" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <link rel=...
Post a Comment
Read more

Clock using JavaScript

By -
Image
1.HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Clock</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=Uchen&display=swap" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="dates"> <h1>Year :<button id="year"></button> </h1> <h1>Month :<button id="month"></button></h1> <h1>Day :<button id="date"></button></h1> <h1>Hour :<button id="hour"></button> </h1> <h1>Minute :<button id="minute"></button> </h1> <h1...
Post a Comment
Read more

Simple Calculator Using JavaScript

By -
Image
Hello Guys In this post , I had developed a simple calculator using  JavaScript. Code is given below.  1. HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Calculator</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=Uchen&display=swap"                                         rel="stylesheet">           <link rel="stylesheet" type="text/css" href="style.css">           </head> <body> <table> <tr> <td colspan="4"><input type="text" name="" id="display" readonly></td> </tr> <tr> <td><input type="but...
Post a Comment
Read more