Skip to main content

Posts

Showing posts from May, 2021

Quote and Joke Generator

*This a random quote and jokes generator. #The first one is a random quote generator. You will get a new quote every time you click on the button. #The second one is a random joke generator. You will get a new joke every time you click on the button. For Number Guessing Game : click here //click on the button to get a quote //-author get a quote //click on the button to get a joke get a joke

Number Guessing Game

* Enter a number between 1 and 10. Note : Firstly, enter the number in the input box. If your guessed number is equal to the computer generated number then you win. If your guessed number is not equal to the computer generated number then a message will be displayed like "you guessed too high" or "you guessed too low". So enter the number and hit the play button. (To play more after you win the game just refresh the page) play #For Temperatue Converter: click here </html

Analog Clock

# html code ==>> <!DOCTYPE html> <html lang="en"> <head>     <link href='E:\html\testpro\style.css' rel='stylesheet'>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>clock</title> </head> <body>     <div class="box">         <div class="clock">             <div class="hand" id='hr'></div>             <div class="hand" id='min'></div>             <div class="hand" id='sec'></div>             <div class="point"></div>         </div>         <img src="C:\Users\Pratik\Pictures\Screenshots\clock.png" alt="clock">     </div>     <script src=&qu

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;               borde

Mini Calendar using HTML/CSS and JS

 # html code ==>> <!DOCTYPE html> <html lang="en"> <head>     <link href='E:\html\testpro\style.css' rel='stylesheet'>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>mini_calendar</title> </head> <body>     <div class="calendar">         <p id='monthname'></p>         <p id='dayname'></p>         <p id='daynumber'></p>         <p id='year'></p>     </div>     <script src='E:\html\testpro\script.js' rel='text/js'></script> </body> </html> # css   code ==>> *{     box-sizing: border-box;     margin: 0;     padding: 0; } body{     display: flex;     background-color: #000;    

Digital Clock using HTLM/CSS & JS

# html  code ==>> <!DOCTYPE html> <html lang="en"> <head>     <link href='E:\html\testpro\style.css' rel='stylesheet'>     <link rel="preconnect" href="https://fonts.gstatic.com">     <link href="https://fonts.googleapis.com/css2?family=Orbitron&display=swap" rel="stylesheet">    <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>clock</title> </head> <body>     <div class="container">         <h2>digital clock</h2>         <div class="clock">             <p id='time'></p>         </div>     </div>     <script src='E:\html\testpro\script.js' rel='text/js'></script> <