Posts

Showing posts with the label Html

Calculator Online PRO

Calculator + - * / 1 2 3 4 5 6 7 8 9 0 . AC = palette nights_stay

HOW TO MAKE GAME WITH HTML

Advantages and Use of Canvas Canvas is used to make game in HTML using CSS or JavaScript, we can make our game more attractive Adding Canvas To insert a Canvas we use the syntax: &ltcanvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"&gt Your browser does not support the HTML canvas tag. &lt/canvas&gt Adding Game Object An Game Object is the role playing character which is simply known as Character. In this Example we will add only one Game Object Syntax: &lt!DOCTYPE html&gt &lthtml&gt &lthead&gt &ltmeta name="viewport" content="width=device-width, initial-scale=1.0"/&gt

Online Free HTML CSS JAVASCRIPT editor

Image
Online Games Click on Image If Editor is not visible than open page in Desktop Mode and Copy/Paste to see output. Run writecode

Stopwatch Online

Timer 00:00:00 Reset

Compass Online

Compass Beta: Gamma: Alpha:

HTML LOADING

Image
Source Code:  <!DOCTYPE html> <html> <head><style> body {     font-family:"Arial", cursive; } #page {     display: none; } #loading {     display: block;     position: absolute;     top: 0;     left: 0;     z-index: 100;     width: 100vw;     height: 100vh;     background-color: black;     background-image: url("https://upload.wikimedia.org/wikipedia/commons/e/ee/Loadinginjg.gif");     background-repeat: no-repeat;     background-position: center; } </style></head> <body> <script> function onReady(callback) {     var intervalID = window.setInterval(checkReady, 1000);     function checkReady() {         if (document.getElementsByTagName('body')[0] !== undefined) {             window.clearInterval(intervalID);     ...

Call Of Duty Mobile Loading HTML and CSS | Source Code

Image
Online Games Click on Image Input:  <!DOCTYPE html> <html> <head> <style> *, *::before, *::after{     margin: 0;     padding: 0;     box-sizing: border-box; } :root{     --bg: #252525;     --fg: #fbff2a;     --lw: 210px;     --lh: 210px; } body{     background-color: var(--bg); } .wrapper{     transform: scale(.5);     width: 100%;     min-height: 100vh; }   .loader{       width: var(--lw);       height: var(--lh);       position: absolute;       top: 40%;       left: 50%;       transform: translate(-50%, -50%);       display: flex;       justify-content: center;       align-items: center;   }     .rotor{         position: absolute;         backgro...

HOW TO ADD PIE CHART IN HTML | PRAKHAR DONERIA

Input:   <html>   <head>     <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js" ></script>     <script type = "text/javascript" >       google . charts . load ( "current" , { packages :[ "corechart" ]});       google . charts . setOnLoadCallback ( drawChart );       function drawChart () {         var data = google . visualization . arrayToDataTable ([           [ 'Task' , 'Hours per Day' ],           [ 'Work' ,     11 ],           [ 'Eat' ,       2 ],           [ 'Commute' ,   2 ],           [ 'Watch TV' , 2 ],           [ 'Sleep' ,     7 ]         ]);     ...

HOW TO INSERT IMAGE IN HTML | IMG TAD ATTRIBUTES | INSERTING GIFs

Home &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp Youtube &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp Instagram Img source: https://upload.wikimedia.org/wikipedia/commons/4/42/GalvesLocherbach_-_Low_resolution.gif Inserting Gif using HTML Use this Syntax &ltIMG SRC=" "URL OF GIF/IMAGE" ALT="ANY TEXT" WIDTH="ANY NUMBER" HEIGHT="ANY NUMBER"&gt Adding GIF in body Background Use this Syntax &ltBody background="url of file" alt="any text" width=any number hight=any number&gt Adding Video in body background

ONLINE WHITEBOARD FREE

  Click to see live demo Source Code: <!DOCTYPE html> <head> <meta charset="utf-8" /> <style> * { margin: 0; padding: 0; } body, html { height: 100%; } #myCanvas { cursor: crosshair;     position: fixed; } </style> <title>HTML5 Canvas Drawing Board</title> <script type="text/JavaScript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2"></script> </head> <body> <br><br> <h2>by Prakhar Doneria</h2> <canvas id="myCanvas"> Sorry, your browser does not support HTML5 canvas technology. </canvas>               <script>     window.onload = function() { var myCanvas = document.getElementById("myCanvas"); var ctx = myCanvas.getContext("2d");          // Fill Window Width and Height     myCanvas.width = window.innerWidth; myCanvas.height = wi...

ADDING BACKGROUND VIDEO

&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp To apply background video effect in HTML document we will use CSS in HTML Let us start: Add CSS /* video background */ #background-video { height: 100vh; width: 100vw; object-fit: cover; position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: -1; } /* page content */ h1, h2 ,p { color: white; font-family: Trebuchet MS; font-weight: bold; text-align: center; } h1 { font-size: 6rem; margin-top: 30vh; } h2 { font-size: 3rem; } @media (max-width: 750px) { #background-video { display: none; } body { background: url("https://assets.codepen.io/6093409/river.jpg") no-repeat; background-size: cover; } ...

Starting Python

Image
Menu Home YouTube Instagram Latest Version Of Python Download Python 3.6.5 Python Editor for Android Python Online Editor Python implementation was started in late 1980s and was started by Guido Van Rossum in 1989 at CWI .In 1919,its code was published and in the year 1994 Python 1.0 was Released. Python is an object-oriented language, which means that is lays more emphasis on the data rather that the procedure. Why Python is Popular Easy to learn Free to use even for Commercial purpose Portable Interactive Mode Simple Syntax Page Title Under Copyright ©prakhardoneria.blogspot.com &nbsp&nbsp&nbsp&nbspNext&nbsp&nbsp&nbsp&nbsp

COLOR PICKER USING HTML AND SYNTAX

Show a Color Picker Select your favorite color: Note: type="color" is not supported in Internet Explorer 11 or Safari 9.1 (or earlier). Get the Program Code

TIME COUNTDONE | DATE SELECTED- JAN 01 2022

DARK MODE USING HTML,CSS,JAVASCRIPT

Toggle Dark/Light Mode Click the button to toggle between dark and light mode for this page. Toggle dark mode Program Code POP Up using HTML

ANIMATION USING HTML AND CSS | HTML | PRAKHAR DONERIA | OUTPUT PROGRAM

Image
Note: This example does not work in Internet Explorer 9 and earlier versions. Note: This example does not work in Internet Explorer 9 and earlier versions.

Feedback form program

<!Doctype html>    <html>          <head>              <meta name="viewport" content="width=device-width, intial-scale=1">              <title> Form </title>        </head>   <style>      @import url('https://fonts.googleapis.com/css2?family=Itim&display=swap');      @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');      @import url('https://fonts.googleapis.com/css2?family=Newsreader:wght@300&display=swap');      @import url('https://fonts.googleapis.com/css2?family=Girassol&display=swap');    form {         font-family:'Itim', cursive;             }    button{           border:2px solid black;   ...