Skip to content

Instantly share code, notes, and snippets.

View lewdev's full-sized avatar

Lewis Nakao lewdev

24 followers · 21 following
View GitHub Profile
@lewdev
lewdev / ipsum-generator.html
Last active July 22, 2022 22:44
Generate random Lorem Ipsum paragraphs.
<h1 style="margin:0">Ipsum Generator</h1>
<span id=b></span>
<button onclick="navigator.clipboard.writeText(o.value);">📋 Copy</button>
<textarea id=o style="display:block;width:100%;height:calc(100vh - 6rem)"></textarea>
<script>
const IPSUM = "suspendisse luctus nunc libero et varius tortor gravida sit amet aliquam nec turpis eget nibh ornare maecenas pulvinar velit neque sodales eu etiam posuere ac nisl ultrices pellentesque pretium purus diam quis finibus dui pharetra non consectetur sapien vestibulum arcu interdum phasellus vitae fringilla risus praesent elementum ut mattis proin est faucibus condimentum vel vestibulum justo molestie erat iaculis dapibus sem urna placerat blandit augue duis at quam odio sed mollis ligula in tempus id magna vehicula bibendum cursus tincidunt leo facilisis ut sollicitudin nulla consequat elit enim a efficitur mi aliquet scelerisque tempor donec dolor ipsum sed feugiat nunc viverra semper cras tellus venenatis convallis ante integer massa egestas interdum malesuada fames
@lewdev
lewdev / stop-watch-starter.html
Last active August 1, 2022 10:47
In response to Google stopping their support for the in search engine Timer, I made a stop watch app which can be a good starting point project.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container text-center">
<h1>Stop Watch</h1>
<button id="startStopBtn" class="btn btn-primary btn-lg">Start</button>
<button id="resetBtn" class="btn btn-secondary btn-lg">Reset</button>
<p id=o class="fs-1">0</p>
</div>
<script>
@lewdev
lewdev / cron-clock.html
Last active August 5, 2022 09:30
🕰 Cron Clock Stop Watch - Start/Stop Timer
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<p id=_e style=color:red;font-size:1rem></p><script>onerror=(msg, url, line, col)=>_e.innerHTML=`${[url, line, col].join(":")} ${msg}`</script>
<div class="container text-center">
<p id=o></p>
<button id="ssBtn" class="btn btn-primary btn-lg" onclick="startStop()">Start</button>
<button class="btn btn-secondary btn-lg" onclick="location.reload()">Reset</button>
</div>
@lewdev
lewdev / clock-timer-tools.md
Last active January 12, 2024 22:28
⏲ Clock/Timer Tools in your Address bar & Bookmarklets

⏲ Clock/Timer Tools in your Address bar & Bookmarklets

Just copy-paste the code into your address bar or save it as bookmark.

⏱ Running Timer 176b

data:text/html,<body id=o onload="w=_=>new Date;s=w();setInterval`t=w()-s;o.innerHTML=[36e5,6e4,1e3,10].map(u=>(v=t>=u?~~(t/u):0,t%=u,v>9?v:'0'+v)).join(':')`"style=font:20vw'>

⏱ Running Timer (less dramatic) 173b

@lewdev
lewdev / dialog-demo.html
Created August 9, 2022 23:25
📲 A minimal demonstration of `dialog` HTML5 element.
<button onclick=d.showModal()>Open Modal</button>
<dialog id=d>
Content
<button onclick=d.close()>Close</button>
</dialog>
@lewdev
lewdev / README.md
Last active August 10, 2022 00:48
ℹ Extract Markdown Table and links. Public APIs in JSON

Parsing Public APIs

I wanted to create an app that can browse and search the Public APIs effectively, so I created a parser to grab the data.

The next problem I want to solve is to include the Category into each row, but I'm saving that for another day.

Steps to Extract the links

Tool to use: Regex Find & Format

RegExp:

@lewdev
lewdev / learn-input-types.html
Last active August 10, 2022 22:14
ℹ Learn about all the <input type> elements. Also contains links to MDN. (493b)
data:text/html,<style>input:invalid{background: red}</style><body onload="f.innerHTML='button,checkbox,color,date,time,datetime-local,email,file,hidden,image,month,number,password,radio,range,reset,search,submit,tel,text,url,week'.split`,`.map(t=>`${t} <input type=${t}><a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/${t}'>?</a><p id=${t}>`).join`</p>`;for(let i of f.querySelectorAll`input`)i.oninput=_=>document.getElementById(i.type).innerHTML=i.value"><form id=f>
@lewdev
lewdev / README.md
Last active August 12, 2022 02:05
🏈 Scoreboard in your address bar

🏈 Scoreboard in your address bar (625b)

Copy-paste the following code into your address bar or a bookmarklet for access to an instant scoreboard.

  • Add, Subtract, & Reset scores
  • Hover top & bottom areas of the screen to reveal buttons
  • Apply names to each side (additional fields below using Tab)
  • Font size adjusts to the screen
@lewdev
lewdev / show-key-codes.html
Last active August 11, 2022 03:06
⌨ Track multiple key presses at once
data:text/html,<body style=font:12vw' onkeyup='this.innerHTML=["key","keyCode","code"].map(k=>`${k}: ${event[k]}`).join`<br>`'>Press a key
@lewdev
lewdev / press-space-to-exercise.html
Created August 13, 2022 05:49
🍔 Press Space to Exercise
<p id=z style=float:left></p><script>onerror=(a,b,c,d,e)=>z.innerHTML=[c,d,e].join`:`</script>
<style>html,body{overflow:hidden;margin:0;box-sizing:border-box;}</style><canvas id=a></canvas><script>
M=Math;;d=document;c=a.getContext`2d`;
k={};onkeyup=onkeydown=e=>k[e.keyCode]=!!e.type[5];
r=(max,min=0)=>min+(M.random()*(max||1)-min);
sw=sh=0;
draw=o=> {
let{x,y,w,h,t}=o
c.font='50px serif';c.fillStyle=o.c||'gray';c.fillRect((x-(w/2)),(y-(h/2)),(w|| 30),(h||30));
if(t){c.fillStyle='#000';c.fillText(t,x-(c.measureText(t).width/2),y);}