index.html 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. <!DOCTYPE html>
  2. <html lang="en-GB">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>loglevel Demo</title>
  6. <meta
  7. name="description"
  8. content="A demo to show the features of loglevel."
  9. />
  10. <meta name="viewport" content="width=device-width, initial-scale=1" />
  11. <link rel="stylesheet" href="styles.css" />
  12. <link
  13. rel="stylesheet"
  14. href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,600,0,0"
  15. />
  16. </head>
  17. <main>
  18. <h1>loglevel Demo</h1>
  19. <form id="LogForm" class="code-container">
  20. <code>
  21. log.
  22. <select name="logLevel" aria-label="Log type" required>
  23. <option value="trace">trace</option>
  24. <option value="debug">debug</option>
  25. <option value="info">info</option>
  26. <option value="warn">warn</option>
  27. <option value="error">error</option>
  28. </select>
  29. ("
  30. <input
  31. name="debugMessage"
  32. type="text"
  33. placeholder="Log text"
  34. aria-label="Log text"
  35. required
  36. />
  37. ")
  38. </code>
  39. <button type="submit">Run</button>
  40. <details>
  41. <summary>More information...</summary>
  42. Choose your level of logging and enter some text to output it to the console using logLevel.
  43. <a href="https://github.com/pimterry/loglevel#logging-methods">Documentation for logging methods.</a>
  44. </details>
  45. </form>
  46. <form id="SetLevel" class="code-container">
  47. <code>
  48. log.setLevel("
  49. <select name="level" aria-label="Log type" required>
  50. <option value="0">trace</option>
  51. <option value="1">debug</option>
  52. <option value="2">info</option>
  53. <option value="3">warn</option>
  54. <option value="4">error</option>
  55. <option value="5">silent</option>
  56. </select>
  57. ",
  58. <select name="persist" aria-label="Log type" required>
  59. <option value="true">true</option>
  60. <option value="false">false</option>
  61. </select>
  62. )
  63. </code>
  64. <button type="submit">Run</button>
  65. <details>
  66. <summary>More information...</summary>
  67. Disable all logging below the given level.
  68. <a href="https://github.com/pimterry/loglevel#logsetlevellevel-persist">Documentation for setLevel().</a>
  69. </details>
  70. </form>
  71. <form id="SetDefaultLevel" class="code-container">
  72. <code>
  73. log.setDefaultLevel("
  74. <select name="level" aria-label="Log type" required>
  75. <option value="0">trace</option>
  76. <option value="1">debug</option>
  77. <option value="2">info</option>
  78. <option value="3">warn</option>
  79. <option value="4">error</option>
  80. <option value="5">silent</option>
  81. </select>
  82. ")
  83. </code>
  84. <button type="submit">Run</button>
  85. <details>
  86. <summary>More information...</summary>
  87. Select a level and run to set the default logging level.
  88. <a href="https://github.com/pimterry/loglevel#logsetdefaultlevellevel">Documentation for setDefaultLevel().</a>
  89. </details>
  90. </form>
  91. <div class="code-container">
  92. <code>
  93. log.resetLevel()
  94. </code>
  95. <button id="ResetLevelButton" type="button">Run</button>
  96. <details>
  97. <summary>More information...</summary>
  98. Reset the current logging level to default.
  99. <a href="https://github.com/pimterry/loglevel#logresetlevel">Documentation for resetLevel().</a>
  100. </details>
  101. </div>
  102. <div class="code-container">
  103. <code>
  104. log.enableAll()
  105. </code>
  106. <button id="EnableAllButton" type="button">Run</button>
  107. <details>
  108. <summary>More information...</summary>
  109. Enables all logs - equivalent of <code>setLevel('trace')</code>.
  110. <a href="https://github.com/pimterry/loglevel##logenableall-and-logdisableall">Documentation for enableAll().</a>
  111. </details>
  112. </div>
  113. <div class="code-container">
  114. <code>
  115. log.disableAll()
  116. </code>
  117. <button id="DisableAllButton" type="button">Run</button>
  118. <details>
  119. <summary>More information...</summary>
  120. Disables all logs - equivalent of <code>setLevel('silent')</code>.
  121. <a href="https://github.com/pimterry/loglevel##logenableall-and-logdisableall">Documentation for disableAll().</a>
  122. </details>
  123. </div>
  124. <h2>Log State</h2>
  125. <div id="LogState" class="code-container">
  126. <label>
  127. Current log level
  128. <input name="currentLevel" aria-label="Current log level" readonly>
  129. </label>
  130. <details>
  131. <summary>More information...</summary>
  132. Uses the <code>getLevel()</code> method to display the current log level.
  133. <a href="https://github.com/pimterry/loglevel##logenableall-and-logdisableall">Documentation for disableAll().</a>
  134. </details>
  135. </div>
  136. </main>
  137. <script src="../dist/loglevel.js"></script>
  138. <script src="script.js"></script>
  139. </html>