JAVASCRIPT 50
Css-jojo.js Guest on 2nd July 2020 05:12:32 PM
  1. const stuffs = `background: red | blue | green | orange | purple | yellow
  2. border-color: red | blue | green | orange | purple | yellow
  3. border-radius: 1px | 3px | 6px
  4. border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
  5. border-width: thin | medium | thick | 1px | 2px | 3px
  6. color: red | blue | green | orange | purple | yellow
  7. cursor: none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out | grab | grabbing
  8. direction: ltr | rtl
  9. display: block | inline | run-in | flow | flow-root | table | flex | grid | ruby | inline-block | inline-list-item | inline-table | inline-flex | inline-grid
  10. font-size: xx-small | x-small | small | medium | large | x-large | xx-large | 10px | 14 px | 18px | 20px | 22px
  11. font-style: normal | italic | oblique 45deg | oblique 5deg | oblique 22deg
  12. font-variant: small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps | normal | none
  13. font-weight: normal | bold | bolder | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
  14. letter-spacing: 1em | 2em | 2px | 6px
  15. line-height: 2 | 1.5 | 1.38 | 16px
  16. list-style-type: disc | circle | square | decimal | georgian
  17. margin-bottom: 1px | 2px | 3px | 4px | 8px | 12px
  18. margin-left: 1px | 2px | 3px | 4px | 8px | 12px
  19. margin-right: 1px | 2px | 3px | 4px | 8px | 12px
  20. margin-top: 1px | 2px | 3px | 4px | 8px | 12px
  21. max-height: 10px | 14px | 30px | 60px
  22. max-width: 10px | 14px | 30px | 60px
  23. opacity: 0 | 1 | 0.33 | 0.5
  24. outline-color: red | blue | green | orange | purple | yellow
  25. outline-radius: 1px | 3px | 6px
  26. outline-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
  27. outline-width: 1px | 2px | 3px | 4px | 8px | 12px
  28. overflow-x: visible | hidden | clip | scroll | auto | none
  29. overflow-y: visible | hidden | clip | scroll | auto | none
  30. padding-bottom: 1px | 2px | 3px | 4px | 8px | 12px
  31. padding-left: 1px | 2px | 3px | 4px | 8px | 12px
  32. padding-right: 1px | 2px | 3px | 4px | 8px | 12px
  33. padding-top: 1px | 2px | 3px | 4px | 8px | 12px
  34. position: static | relative | absolute | sticky | fixed
  35. text-align: start | end | left | right | center | justify
  36. text-overflow: clip | ellipsis
  37. visibility: visible | hidden | collapse
  38. white-space: normal | pre | nowrap | pre-wrap | pre-line
  39. word-wrap: normal | break-word | anywhere
  40. z-index: 1 | 2 | 3 | 4 | 5`.split('\n');
  41.  
  42. const length = stuffs.length;
  43.  
  44. const letters = 'abcdefghijklmnopqrstuvwxyz';
  45.  
  46. function getRandomDeclaration() {
  47.   const rand = stuffs[Math.floor(Math.random() * length)].split(':');
  48.   const values = rand[1].split('|');
  49.   const value = values[Math.floor(Math.random() * values.length)].trim();
  50.   return `${rand[0]}: ${value}`;
  51. }
  52.  
  53. function getRandomRuleset(numdeclarations = 5, classlength = 5, pretty = true) {
  54.   const classname =
  55.     letters[Math.floor(Math.random() * letters.length)] +
  56.     Math.random()
  57.       .toString(36)
  58.       .substr(2, classlength - 1);
  59.   const decl = [];
  60.   for (let i = 0; i < numdeclarations; i++) {
  61.     decl.push(getRandomDeclaration());
  62.   }
  63.   if (!pretty) {
  64.     return `.${classname} {${decl.join('; ')}}`;
  65.   }
  66.   return `.${classname} {\n  ${decl.join(';\n  ')};\n}`;
  67. }

Paste is for source code and general debugging text.

Login or Register to edit, delete and keep track of your pastes and more.

Raw Paste

Login or Register to edit or fork this paste. It's free.