Merge pull request #3 from vvideo/example

Add CommonJS support
vvideo · Feb 10, 2024 · e7d1ae3 · e7d1ae3
2 parents 373c363 + e70a684
commit e7d1ae3
Show file tree

Hide file tree

Showing 8 changed files with 1,225 additions and 4,042 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 node_modules
 dist
+.DS_Store
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,3 @@
+# v1.2.0
+- Add CommonJS support.
+- Add example.
diff --git a/README.md b/README.md
@@ -5,6 +5,8 @@
 
 [Small package](https://bundlephobia.com/result?p=calc-aspect-ratio) for calculating aspect ratio of display resolution.
 
+## [Demo](https://vvideo.github.io/calc-aspect-ratio/example/index.html)
+
 ## Install
 `npm i --save-dev calc-aspect-ratio`
 

diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Calc Aspect Ratio</title>
+  <meta charset="utf-8" />
+  <style>
+    html, body {
+        padding: 0;
+        margin: 0;
+        border: 0;
+        background: black;
+        color: white;
+    }
+
+    .screen {
+        position: fixed;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        font-size: 30px;
+    }
+
+    .screen__title {
+        font-size: 40px;
+        margin-bottom: 5px;
+    }
+  </style>
+</head>
+<body>
+    <div class="screen">
+        <div class="screen__title">Your screen</div>
+        <div class="screen__size">
+            Size: <span class="screen__size-value"></span>
+        </div>
+        <div class="screen__aspect-ratio">
+            Aspect ratio: <span class="screen__aspect-ratio-value"></span>
+        </div>
+    </div>
+    <script type="module">
+        import { calcAspectRatio } from 'https://unpkg.com/calc-aspect-ratio/dist/index.esm.js';
+
+        const screenWidth = window.screen.width;
+        const screenHeight = window.screen.height;
+
+        const sizeElem = document.querySelector('.screen__size-value');
+        const aspectRatioElem = document.querySelector('.screen__aspect-ratio-value');
+
+        function updateText() {
+            sizeElem.innerHTML = `${screenWidth}×${screenHeight}`;
+
+            const aspectRatio = calcAspectRatio(screenWidth, screenHeight)
+            aspectRatioElem.innerHTML = aspectRatio.value;
+        }
+
+        setInterval(updateText, 1000);
+        updateText();
+    </script>
+</body>
+</html>