)
}
}
)
(
}
{
)
)
(
)
(
(
{
}
)
(
)
}
)
)
{
(
(
)
)
}
)
(
}
AboutAll PostsWarningRandom

W3Schools Output Tag

  1. <!-- from w3schools.com -->
  2. <!DOCTYPE html>
  3. <html>
  4. <body>
  5.  
  6. <h1>The output element</h1>
  7.  
  8. <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  9. <input type="range" id="a" value="50">
  10. +<input type="number" id="b" value="25">
  11. =<output name="x" for="a b"></output>
  12. </form>
  13.  
  14. <p><strong>Note:</strong> The output element is not supported in Edge 12 (or earlier).</p>
  15.  
  16. </body>
  17. </html>

I like w3Schools.

This code has some problems… but… for a cool little snippet to play with – I think that’s ok. SnippetZone certainly has tons of things like this…

// hacks // html // humor // speedcoding

Acronym Definition Generator

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <title>Acro</title>
  6.  
  7.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9.     <style>
  10.  
  11.       body {
  12.         font-family: sans-serif;
  13.         margin: 3em;
  14.       }
  15.  
  16.       button {
  17.         cursor: pointer;
  18.         font-size: 1em;
  19.         padding: .6em;
  20.         margin-bottom: 2em;
  21.       }
  22.  
  23.       h1 {
  24.         font-size: 3em;
  25.         text-decoration: underline;
  26.       }
  27.  
  28.       hr {
  29.         border: none;
  30.         border-bottom: 1px dashed gray;  
  31.       }
  32.  
  33.       i {
  34.         text-transform: lowercase;
  35.       }
  36.  
  37.       #acro {
  38.         position: relative;
  39.         width: 100%;
  40.         min-width: 350px;
  41.         max-width: 700px;
  42.         margin: 0 auto;
  43.  
  44.       }
  45.  
  46.       input[type=text] {
  47.         padding: .5em;  
  48.         margin-right: 1em;
  49.         text-transform: uppercase;
  50.       }
  51.  
  52.       #go {
  53.         margin-right: .5em;  
  54.       }
  55.  
  56.       #btn {
  57.         float: right;  
  58.       }
  59.  
  60.       .row {
  61.         width: 100%;
  62.         clear: both;
  63.       }
  64.       .uiBreak { display: none; }
  65.  
  66.       @media only screen and (max-width: 600px) {
  67.         body {
  68.           font-size: .8em;
  69.           margin: 1em;
  70.         }
  71.  
  72.       }
  73.  
  74.       @media only screen and (max-width: 400px) {
  75.         .uiBreak { display: block; }
  76.         #btn {
  77.           float: left;
  78.           display: block;
  79.           clear: both;
  80.         }
  81.       }
  82.  
  83.     </style>
  84.   </head>
  85.   <body>
  86.     <div id=acro>
  87.       <h1>Acro</h1>
  88.       <div>
  89.         <input id=input type=text placeholder="enter acronym">
  90.         <button id=go>go...</button>
  91.         <br class=uiBreak>
  92.         <button id=btn>generate random...</button>
  93.       </div>
  94.  
  95.       <div id=acros></div>
  96.     </div>
  97.     <script>
  98. (() => {
  99.  
  100.   const min = 3
  101.   const max = 5
  102.   const diff = max - min
  103.  
  104.   const { random } = Math
  105.  
  106.   const wordsByLetter = {}
  107.   const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split``
  108.   let words;
  109.  
  110.   alphabet.forEach(let => wordsByLetter[let] = [])
  111.  
  112.   console.log('loading...')
  113.  
  114.   fetch('words.txt')
  115.     .then(data => data.text())
  116.     .then(text => {
  117.       console.log('prepping...')
  118.  
  119.       words = text.split(/\s+/m).sort()
  120.  
  121.       const chunk = 500
  122.       const ticks = ~~(words.length / chunk)
  123.  
  124.       let idx = 0
  125.       let count = 0
  126.  
  127.       let interval = setInterval(() => {
  128.         if (count === ticks) {
  129.           start()
  130.           clearInterval(interval)
  131.           return
  132.         }
  133.  
  134.         for (let i = 0; i < chunk; i++) {
  135.           const word = words[idx]
  136.           if (word[0]) {
  137.             const firstLetter = word[0].toUpperCase()
  138.             wordsByLetter[firstLetter]?.push(word)
  139.           }
  140.           idx++
  141.         }
  142.         count++
  143.       }, 1)
  144.     })
  145.  
  146.   function start() {
  147.     console.log('starting...')
  148.  
  149.     const rando = _ => {
  150.       const leng =  ~~(min + diff * random())
  151.       let word = ''
  152.       for (let i = 0; i < leng; i++) {
  153.         word += alphabet[~~(random() * alphabet.length)]
  154.       }
  155.       return word
  156.     }
  157.  
  158.     const gen = custom => {
  159.       if (!custom) return
  160.       custom = custom.toUpperCase()
  161.       const leng = custom.length
  162.       const def = []
  163.  
  164.       for (let i = 0; i < leng; i++) {
  165.         const sourceWords = wordsByLetter[custom[i]]
  166.         def[i] = sourceWords[~~(random() * sourceWords.length)]
  167.       }
  168.       const div = document.createElement`div`
  169.       div.className = 'row'
  170.       div.innerHTML = `
  171.         <h2>${custom}</h2>
  172.         <i>${def.join` `}</i>
  173.         <hr>
  174.       `
  175.       acros.prepend(div)
  176.     }
  177.  
  178.     btn.onclick = () => {
  179.       gen(rando())
  180.     }
  181.  
  182.     go.onclick = () => gen(input.value);
  183.     document.onkeydown = e => {
  184.       if (e.key === 'Enter') gen(input.value);
  185.     }
  186.  
  187.   }
  188. })()
  189.     </script>
  190.   </body>
  191. </html>


A friend of mine had this idea the other night so I coded it up…

Update: I forgot to mention, this uses this list of words from google…

// humor // javascript // speedcoding // strings

Step Between Two Numbers

  1. const stepBetweenA = (min, max, steps) => 
  2.   Array(steps).fill(0).reduce((prev, curr, i) => {
  3.     prev.push(min + ((max - min) / (steps - 1)) * i)
  4.     return prev
  5.   }, [])
  6.  
  7.  
  8. const stepBetweenB = (min, max, steps) => {
  9.   steps -= 1
  10.   const diff = (max - min) / steps
  11.   const result = [min]
  12.   for (let i = 0; i < steps; i++) {
  13.     result.push(min += diff)
  14.   }
  15.   return result
  16. }
  17.  
  18. console.log('a', stepBetweenA(10, 110, 4))
  19. console.log('b', stepBetweenB(10, 110, 4))
  20.  
  21. const ITER = 10000
  22.  
  23. console.time('a')
  24. for (let i = 0; i < ITER; i++) {
  25.   stepBetweenA(10, 110, 4)
  26. }
  27. console.timeEnd('a')
  28.  
  29.   console.time('b')
  30. for (let i = 0; i < ITER; i++) {
  31.   stepBetweenB(10, 110, 4)
  32. }
  33. console.timeEnd('b')

Two messy implementations for stepping between two numbers… I am not sure it’s possible to make console.time work well with the snippet zone quick editor – so if you want to see the times… open your console.

// arrays // javascript // math // speedcoding

Alphabet Array Golfed

  1. l=[]
  2. for(i=26;i--;)l[i]=(10+i).toString(36)
  3. console.log(l)

A nasty golfed way to fill an array with letters a-z.

I usually do (as seen in another post):

  1. let letters = 'abcdefghijklmopqrstuvwxyz'.split``
// codegolf // javascript // speedcoding // strings

Fake RNG

  1. let anchors
  2. let idx
  3. let leng = 10
  4. let size = 200
  5. let px = 0
  6. let py = 0
  7.  
  8. function seed() {
  9.   idx = 0
  10.   anchors = (Date.now() + '').split``
  11.     .reverse()
  12.     .map(v => parseFloat(v) / 10)
  13.     .splice(0, leng)
  14. }
  15.  
  16. let last = 0
  17. let zoom = 1
  18. function rand() {
  19.   if (idx > size * size) seed()
  20.  
  21.   px += zoom
  22.   py += ~~(px / size)
  23.  
  24.   if (px >= size) px = 0
  25.   if (py >= size) py = 0
  26.  
  27.   const point = {
  28.     x: anchors[idx % leng],
  29.     y: anchors[(idx + 1) % leng]
  30.   }
  31.   idx++
  32.  
  33.   let dists = []
  34.   for (let i = 0; i < anchors.length; i += 2) {
  35.     let dx = px - anchors[i] * size
  36.     let dy = py - anchors[i + 1] * size
  37.     dists.push(Math.sqrt(dx * dx + dy * dy))
  38.   }
  39.   dists.sort()
  40.   last += (dists[0] / size - last) / 4
  41.   return last
  42. }
  43.  
  44. seed()
  45.  
  46. let d = document
  47. let b = d.body
  48. with (b.appendChild(
  49.   Object.assign(d.createElement`canvas`, { width: 400, height: 400 })
  50. ).getContext`2d`) {
  51.   fillStyle = 'black'
  52.   fillRect(0, 0, 400, 400)
  53.  
  54.   for (let i = 0; i < 200; i++) {
  55.     for (let j = 0; j < 200; j++) {
  56.       const c = rand() * 255
  57.       fillStyle = `rgb(${c}, ${c}, ${c})`
  58.       fillRect(j * 2, i * 2, 1, 2)
  59.     }
  60.   }
  61. }

Another one for genuary “Create your own pseudo-random number generator and visually check the results.”

// canvas // graphics // hacks // math // random // speedcoding
Older Posts
Newer Posts

Recent

Archive

RSS
snippet.zone ~ 2021-24 /// {s/z}