So the weekend is here and you are sitting in front of your computer and don’t know what to do.
You are still bored after watching YouTube videos all day.
Don’t Worry, you have come to the right place. I will show you how to display funny text,
add a spinning 3D globe to your web page, build a calculator for your math homework or in case you work requires you to calculate the remaing fuel contents on your rocket entring an orbit around Mars. and more …
Here are 9 things you can code when you are bored.
Hello World
This “Hello World” jumps out and is a real attention seeking device. Your eyes are automatically caught paying more attention to it. If you want to drive people into madness you can display your whole page using this quirk.
You will certainly be rewarded with a firestorm of complaints.
<html> <head><title>bored_1</title></head> <body> <p></p> <p></p> <center><b><div id="OUT"></div></b></center> <script> var div = document.getElementById ( "OUT" ); div.innerHTML = "Hello World"; function randomClr ( char ) { var r = parseInt ( Math.random ( ) * 255, 10 ); var g = parseInt ( Math.random ( ) * 255, 10 ); var b = parseInt ( Math.random ( ) * 255, 10 ); var ret = "<font color='rgb(" + r + "," + g + "," + b + ");'>" + char + "</font>"; return ret; } function randomType ( char ) { var ret=char, r = parseInt ( Math.random ( ) * 4, 10 ); switch ( r ) { case 0: ret = "<b>" + char + "</b>"; break; case 1: ret = "<i>" + char + "</i>"; break; case 2: ret = "<sup>" + char + "</sup>"; break; case 3: ret = "<sub>" + char + "</sub>"; break; } return ret; } setInterval ( function ( ) { var html="", text = "Hello World"; for ( var t=0; t<text.length; t++ ) { var clr = randomClr ( text[t] ); html += randomType ( clr ); } div.innerHTML = "<h1>" + html + "</h1>"; }, 500 ); </script> </body> </html>
Random Password generator
This generator will allow you to create your very own randomly generated password string.
<html> <head><title>bored_2</title></head> <body> <p></p> <p></p> <center><b><div id="OUT"></div></b></center> <script> var div = document.getElementById ( "OUT" ); var randomString = function(length) { var text = ""; var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; for(var i = 0; i < length; i++) { text += possible.charAt(Math.floor(Math.random() * possible.length)); } return text; } div.innerHTML = randomString ( 20 ); </script> </body> </html>
I got some interesting feedback wrt this generator and decided to provide another version which will use the crypto API
inside the browsers instead of Math.random ( );
<!DOCTYPE html> <html> <head><title>bored_2</title></head> <body> <p></p> <p></p> <center><b><div id="OUT"></div></b></center> <script> var div = document.getElementById ( "OUT" ); var randomString = function(length) { var text = ""; var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; var cryp = new Uint8Array ( possible.length ); var rand = getRandomValues ( cryp ); for ( var i = 0; i < length; i++ ) { text += possible.charAt ( rand[i] % possible.length ); } return text; } getRandomValues = function ( buf ) { if (!(buf instanceof Uint8Array)) { throw new Error('Invalid type: buf not an Uint8Array'); } if (typeof window !== 'undefined' && window.crypto && window.crypto.getRandomValues) { window.crypto.getRandomValues(buf); } else if (typeof window !== 'undefined' && typeof window.msCrypto === 'object' && typeof window.msCrypto.getRandomValues === 'function') { window.msCrypto.getRandomValues(buf); } else if (nodeCrypto) { var bytes = nodeCrypto.randomBytes(buf.length); buf.set(bytes); } else if (this.randomBuffer.buffer) { this.randomBuffer.get(buf); } else { throw new Error('No secure random number generator available.'); } return buf; } div.innerHTML = randomString ( 20 ); </script> </body> </html>
Santas trip
Want to move Santa across your web page to celebrate the season or have a selfie take a trip over your web page …
Here is a fun snippet to achieve that.
<!DOCTYPE html> <html> <head><title>bored_3</title></head> <body bgcolor="black"> <img src="flying.gif" id="sleigh" style="position: absolute" /> <audio src="bells.mp3" autoplay loop></audio> <script> var img = document.getElementById ( "sleigh" ); var left = 0; setInterval ( function ( ) { left += 3; img.style.left = left+"px"; if ( left > window.innerWidth ) left = -400; }, 100 ); </script> </body> </html>
Calculator
Still don’t know what to do ?
Have you ever wondered what your monthly mortgage rate would be like if you change the interest rate or the length of the loan ?
Or are you looking for a simple tip calculator. This snippet is using evil-eval to accomplish this task.
<!DOCTYPE html> <html> <head><title>bored_4</title> <script> function calc ( ) { var out = document.getElementById ( "OUT" ); var txt = document.getElementById ( "eq" ); var res = eval ( txt.value ); out.innerHTML = res+""; } </script> </head> <body> <form> <input type="text" id="eq" value='var r=5.00, N=12*15, P=100000; var R=r/12/100; var M=R/(1-(1+R) ** -N ) * P; P+"@"+r+"% = "+M' size="70" \> <input type="button" value="Calculate" onclick="calc();" \> </form> <p><b><div id="OUT"> -- VALUE --</div></b> </body> </html>
Polar Clock
Want to know what tmie it is but you wnat to realy try to use as much brain power as possible
Try the Polar Clock. A fun way to display time.
<html> <head> <title>bored_5</title> <script src="clock.js"> </script> </head> <body bgcolor="white"> <div id="logo" > <canvas id="canvas" width="120" height="120" ></canvas> </div> </body> </html>
Random Image
Do you want to use a random background image from Flicker.
This code snippet does just that using the flickr API.
<html> <head><title>bored_6</title> <style> body { background-size: contain; background-repeat: no-repeat; background-position: center center; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script type="text/javascript"> var keyword = "mountains"; function getImg ( ) { keyword = document.getElementById ( "key" ).value; var req = { tags: keyword, tagmode: "any", format: "json" }; var url = "https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?"; $.getJSON ( url, req, function ( data ) { var rnd = Math.floor(Math.random() * data.items.length); var image_src = data.items[rnd]['media']['m'].replace("_m", "_b"); $('body').css('background-image', "url('" + image_src + "')"); } ); } $(document).ready(function(){ getImg ( ); }); </script> </head> <body> <button onclick="getImg ( );">New Image</button> <input type="text" value="mountain" id="key"/> </body> </html>
Chess Game
Granted this one is a bit too much to invent yourself. But fear not, you can get the tiny 1k code for a chess game from Here …
<!doctype html> <html> <!-- (c) © js1k.com, 2010 - 2017 Note: submissions belong to their respectful owner, do not copy without their consent --> <head> <title>JS1k 2010 - Demo 750 </title> <meta charset="utf-8"> <meta name="author" content="Óscar Toledo G."> <meta name="description" content="JS1k 2010 demo: Tiny Chess."> <meta name="pubdate" content="20100909"> <link rel="icon" type="image/png" href="http://js1k.com/favicon.png"> <link rel="canonical" href="http://js1k.com/2010-first/demo/750"> <link rel="alternate" type="application/rss+xml" title="New demo feed" href="http://js1k.com/feed.xml"> <link rel="shortlink" href="http://js1k.com/750"> <script> setTimeout(function(){ var ga = document.createElement('script'); ga.async = true; ga.defer = true; ga.src = 'http://www.google-analytics.com/ga.js'; ga.onload = function(){try{_gat._getTracker('UA-19882353-1')._trackPageview();}catch(e){window.console&&console.log("ga fail :'( ");};}; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); }, 10); </script> <style> /* http://qfox.nl/notes/333 */ body,html,iframe{margin:0;padding:0;border:0;width:100%;height:100%} iframe{position:absolute;top:0;left:0;padding-top:50px;box-sizing:border-box} header{position:relative;z-index:1;height:47px;padding-top:2px;border-bottom:1px solid #000;box-shadow:0 -10px 25px #ccc inset;background-color:#eee} aside,div,h1,p{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center;font-size:16px;font-weight:inherit;line-height:22px;padding:0;margin:0;cursor:default} aside,h1{display:inline} a{color:#000;text-decoration:none;border-bottom:1px dashed #000} a:hover{border-bottom:1px solid red} a[href="0"]{text-decoration:line-through;pointer-events:none;border-bottom:0;color:#ccc} .button{float:left;width:40px;height:40px;line-height:40px;text-align:center;padding:0;margin:2px 0 0 10px;border:1px solid #888;border-color:#ddd #888 #888 #ddd;font-family:sans-serif;font-size:30px;font-weight:700;cursor:pointer} .button:hover{color:red;border-bottom-color:#888} .r{margin-right:10px} time{display:none} </style> </head> <body> <header> <div> <h1> <a href="http://js1k.com">JS1k</a> <a href="http://js1k.com/2010-first">2010</a> <strong></strong> demo — by Óscar Toledo G. </h1> <p> <em> Tiny Chess. </em> </p> <aside> — 1023 bytes — <!-- --> <a href="http://js1k.com/2010-first/details/750">demo details</a> — <a href="http://js1k.com/2010-first/demos">list of demos</a> <!-- <b><a href="http://js1k.com/2010-first/demo/"> Update available here! </a></b> <!-- --> — <a href="http://js1k.com/750" title="short link for your mobile devices" rel="nofollow">js1k.com/750</a> </aside> </div> <a href="749" class="button p">↞</a> <a href="751" class="button n">↠</a> </header> <script type="demo"> for(B=i=y=u=b=i=5-5,x=10,I=[],l=[];B++<304;I[B-1]=B%x?B/x%x<2|B%x<2?7:B/x&4?0:l[i++]="ECDFBDCEAAAAAAAAIIIIIIIIMKLNJLKM@G@TSb~?A6J57IKJT576,+-48HLSUmgukgg OJNMLK IDHGFE".charCodeAt(y++)-64:7);function X(c,h,e,s){c^=8;for(var o,S,C,A,R,T,G,d=e&&X(c,0)>1e4,n,N=-1e8,O=20,K=78-h<<9;++O<99;)if((o=I[T=O])&&(G=o^c)<7){A=G--&2?8:4;C=o-9?l[61+G]:49;do if(!(R=I[T+=l[C]])&&!!G|A<3||(R+1^c)>9&&G|A>2){if(!(R-2&7))return K;n=G|(c?T>29:T<91)?o:6^c;S=(R&&l[R&7|32]*2-h-G)+(n-o?110:!G&&(A<2)+1);if(e>h||1<e&e==h&&S>2|d){I[T]=n;I[O]=0;S-=X(c,h+1,e,S-N);if(!(h||e-1|B-O|T-b|S<-1e4))return W(),c&&setTimeout("X(8,0,2),X(8,0,1)",75);I[O]=o;I[T]=R}if(S>N||!h&S==N&&Math.random()<.5)if(N=S,e>1)if(h?s-S<0:(B=O,b=T,0))break}while(!R&G>2||(T=O,(G||A>2|(c?O>78:O<41)&!R)&&++C*--A))}return-K+768<N|d&&N}function W(){i="<table>";for(u=18;u<99;document.body.innerHTML=i+=++u%x-9?"<th width=60 height=60 onclick='I[b="+u+"]>8?W():X(0,0,1)'style='font-size:50px'bgcolor=#"+(u-B?u*.9&1||9:"d")+"0f0e0>&#"+(I[u]?9808+l[67+I[u]]:160):u++&&"<tr>")B=b}W() </script> <script> (function(){var doc=document;var header=doc.getElementsByTagName("header")[0];var firstChild=header.firstChild;var p=doc.getElementsByClassName("p")[0];var n=doc.getElementsByClassName("n")[0];header.insertBefore(p,firstChild);header.insertBefore(n,firstChild);header.appendChild(doc.getElementsByTagName("p")[0])})(); (function reload(){var doc=document;var header=doc.getElementsByTagName("header")[0];var iframe=doc.createElement("iframe");doc.body.appendChild(iframe);var iwin=iframe.contentWindow;var idoc=iframe.contentDocument;idoc.open();idoc.close();idoc.write('<!doctype html><head><meta charset="utf-8"><body>');idoc.head.innerHTML="<style>\n"+"html, body { margin: 0; padding: 0; border: 0; width: 100%; height: 100%; }\n"+"</style>\n";idoc.body.innerHTML="\n\t\t"+"<canvas"+' id="c"'+''+"></canvas>\n"+ (false?"<script>\x3c/script>\n":"")+"";var Audio=iwin.Audio;iwin.Audio=function(x){return new Audio(x)};if(false){var canvas=idoc.getElementsByTagName("canvas")[0];iwin.a=canvas.getContext("2d");iwin.b=idoc.body;iwin.c=canvas;var p2d=iwin.Path2D;function wrap(ctx){var fill=ctx.fill,clip=ctx.clip,stroke=ctx.stroke;ctx.scale=ctx.scale;ctx.drawFocusIfNeeded=ctx.drawFocusIfNeeded;ctx.ellipse=ctx.ellipse;ctx.fill=function(r){fill.call(ctx,r==="evenodd"?"evenodd":"nonzero")};ctx.stroke= function(p){if(p&&p2d&&p instanceof p2d)stroke.call(ctx,p);else stroke.call(ctx)};ctx.clip=function(p){if(p&&p2d&&p instanceof p2d)clip.call(ctx,p);else clip.call(ctx)};return ctx}if(false){var cvs=iwin.c;var cNode=cvs.cloneNode;cvs.cloneNode=function(){var clone=cNode.apply(cvs,arguments);var cloneGet=clone.getContext;clone.getContext=function(){return wrap(cloneGet.call(clone,"2d"))};return clone};var get=cvs.getContext;cvs.getContext=function(){return wrap(get.call(cvs,"2d"))}}if(false)wrap(iwin.a)}idoc.body.clientWidth; var demo=idoc.createElement("script");var scrpt=doc.querySelector('script[type="demo"]').textContent.replace(/m.location=m.location;/,"top.reload();");if(false)scrpt="A=0,B=0;"+scrpt;demo.textContent=scrpt;idoc.body.appendChild(demo);idoc.close();iframe.contentWindow.focus();var r=doc.createElement("div");r.innerHTML="↻";r.className="button r";r.title="restart just the demo (local, without remote fetch)";window.reload=r.onclick=function(){doc.body.removeChild(iframe);r.parentElement.removeChild(r); iframe=null;r=null;idoc=null;header=null;reload()};var firstLine=doc.getElementsByTagName("div")[0];header.insertBefore(r,firstLine)})(); </script> </body> </html>
3D Globe
And finally here is a quick way to add a 3D globe to your web page using OpenGlobus.
<html> <head><title>OpenGlobus - Earth planet</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdn.rawgit.com/OpenGlobus/OpenGlobus/eb8392c2/build/og.css" type="text/css" /> <script src="https://cdn.rawgit.com/OpenGlobus/OpenGlobus/eb8392c2/build/og.js"></script> </head> <body> <div id="globus" style="width:100%;height:80%"></div> <button id="btnOSM">OSM</button> <button id="btnMQS">MapQuest Sat.</button> <script> document.getElementById("btnOSM").onclick = function () { osm.setVisibility(true); }; document.getElementById("btnMQS").onclick = function () { sat.setVisibility(true); }; var osm = new og.layer.XYZ("OpenStreetMap", { specular: [0.0003, 0.00012, 0.00001], shininess: 20, diffuse: [0.89, 0.9, 0.83], isBaseLayer: true, url: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", visibility: true, attribution: 'Data @ OpenStreetMap contributors, ODbL' }); var sat = new og.layer.XYZ("MapQuest Satellite", { shininess: 20, specular: og.math.vector3(0.00048, 0.00037, 0.00035), diffuse: og.math.vector3(0.88, 0.85, 0.8), ambient: og.math.vector3(0.15, 0.1, 0.23), isBaseLayer: true, url: "https://api.mapbox.com/styles/v1/mapbox/satellite-v9/tiles/256/{z}/{x}/{y}@2x?access_token=pk.eyJ1IjoibWdldmxpY2giLCJhIjoiY2o0ZmVudncwMGZvbjJ3bGE0OGpsejBlZyJ9.RSRJLS0J_U9_lw1Ti1CmsQ", visibility: false, attribution: '@2014 MapQuest - Portions @2014 "Map data @ <a target="_blank" href="http://www.openstreetmap.org/">OpenStreetMap</a> and contributors, <a target="_blank" href="http://opendatacommons.org/licenses/odbl/"> CC-BY-SA</a>"' }); var controls = [ og.control.mouseNavigation(), og.control.touchNavigation(), og.control.zoomControl(), og.control.earthCoordinates(), og.control.sun() ]; globus = new og.Globus({ "target": "globus", "name": "Earth", "controls": controls, "terrain": new og.terrainProvider.TerrainProvider("OpenGlobus"), "layers": [osm, sat] }); </script> </body> </html>
Resources
So now that you know what to do it should be easy to take some of these suggestions and run with it. If nothing else you can find plenty more on gihub.com to help you kill off some of your time.
You can directly follow the link to the Battlefield to play with the code.
I read this article completely on the topic of the comparison of
most recent and previous technologies, it’s amazing article.
I think the admin ᧐f this web page is really wоrking hаrd for hіs site, for thе reason tһat here every
stuff is quality based stuff.
You need to be a part of a contest for one of the best blogs on the net.
I will highly recommend this blog!
That s okay! This list isn t exhaustive there are countless other tools and applications you can build with Python that we haven t covered here. Don t think you re limited to what s on this list. It is simply a resource to give you a place to start.
Experienced programmers will often throw snippets like the above at you. It s easy! , they ll promise. But even a few seemingly simple lines of code can be incredibly confusing. For instance, why is one line indented? What s
Edwin… ( I am sure its not your name )
I found that you sent multiple comments on the same day from the same IP address with links to -LINK building sites —
Please excuse that I removed those from you posting.
Its also interesting that you used different email addresses and different names Edwin, I mean Augustus, I mean Edmund, I mean … )
Ahh and so it goes. Spam-a-lam-ding-dong.
You are asking why is the line indented … but then you are not really asking … are you ???
Qué pasa, inicio sesión para sus blogs regularmente .
¡Tu estilo de esccritura es increíble , ¡sigue haciendo lo quee estás
haciendo! estaré agradecido cuando proceda esto en futuro.
Numerosos otras personas se beneficiará de su escritura.
¡Salud! información. Suerte conmigo Descubrí su sitio
por casualidad (tropiezo). He guardado para más tarde |
Es impresionante que estás obteniendo
pensamientos de este párrafo así como de nuestro debate hecho aquí .|
Si desea mejorar su know-how simplemente siya visitando este sitio
web y sse actualizará con el el más actualizado chismes publicado aquí.
|
Lo que está sucediendo soy nuevo en esto, me topé con esto tengo encontrado absolutamente útil y me ha ayudado mucho.
Espero dar una contribución y ayuda diferente clientes como ayudó
a mí. Buen trabajo. |
Wow , eso es lo que estaba buscando , ¡qué
información ! presente aquí en este blog , gracias administrador
de estge página web. |
Si
Saludo Querido, ¿estás realmente visitando este sifio web de manesra regulqr ,
si es así entonces definitivamente obtener fastidioso saber-como.
Hi to every body, it’s my first pay a visit of this webpage;
thks weblog contains amazing and really good information in favor of readers.
Hmm it seems like your site ate my first comment
(it was super long) so I guess I’ll just sum it up what I had written and say, I’m thoroughly enjoying your blog.
I as well am an aspiring blog writer but I’m still new to everything.
Do you have any tips and hints for rookie blog writers? I’d genuinely appreciate it.
Your style is so unique compared to other folks I have
read stuff from. Thank you ffor posting when you hqve the
opportunity, Guess I will just book mark this blog.