The latest articles on DEV Community by Alejandro Wurts (@alwurts). https://dev.to/alwurts https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F773436%2Fc5819afe-b1fa-4b8d-83c4-f3097d2ada75.png https://dev.to/alwurts en Alejandro Wurts Thu, 10 Feb 2022 04:59:58 +0000 https://dev.to/alwurts/progressive-web-app-calculator-hex-calculator-558j https://dev.to/alwurts/progressive-web-app-calculator-hex-calculator-558j <h2> Test it live </h2> <p><u><a href="https://hex-calculator.app/" rel="noopener noreferrer">Hex Calculator</a><br> </u> </p> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fu2cpry1zer08b9gitg8w.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fu2cpry1zer08b9gitg8w.png" alt="2 iPhones showing a calculator ui"></a></p> <p>A Progressive web app that has features to convert between Hexagonal, Octagonal, Decimal and Binary numbers, as well as adding, substracting, multiplying and dividing them. I call it the Hex Caculator.</p> <p>Features</p> <ul> <li><p>Can be installed and works completely offline</p></li> <li><p>Convert between the following base numbers: base 16 (Hexahonal), base 10 (Decimal), base 8 (Octagonal) and base 2 (Binary)</p></li> <li><p>Adding, substracting, multiplying and dividing using the different base numbers.</p></li> <li><p>Dark and light mode toggable via a button.</p></li> </ul> <h2> Progressive Web App compliant </h2> <p>Can be installed to work completely offline as a native app</p> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdwn0lymhns32aq9w99ri.jpeg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdwn0lymhns32aq9w99ri.jpeg" alt="Install feature on google chrome for android"></a></p> <h2> Using different base numbers </h2> <p>When changing between the base number options the UI responds accordingly, turning on or off the available buttons for that base number type.</p> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsa1xdxvkcfcxzsbxp1pt.gif" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsa1xdxvkcfcxzsbxp1pt.gif" alt="A gif showing the calculator changing between different base numbers"></a></p> <h2> Switching between the Dark and Light mode </h2> <p>The app has to UI themes, a Dark and a Light one, to switch between them you use the bottom left corner button.</p> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmyc8c9kodukb6qdxvgh4.gif" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmyc8c9kodukb6qdxvgh4.gif" alt="A gif showing how dark and light mode for the calculator"></a></p> <h2> Calculator functions </h2> <p>The app has basic adding, substracting, multiplying and dividing functions that you can use with the different base number types.</p> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9uwen7zr6bxy5e6wzi85.gif" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9uwen7zr6bxy5e6wzi85.gif" alt="A gif showing the calculator performing operations"></a></p> <p>The code for it is on my <a href="https://github.com/Alwurts/Hex-Calculator" rel="noopener noreferrer">github</a>, I'm always looking for ways to improve it, some let me know what you think of it. </p> <p>Also do visit <a href="https://www.alejandrowurts.com/" rel="noopener noreferrer">my website</a> for more information and other projects. </p> javascript pwa webdev ux