The latest articles on DEV Community by Abiyyu Cakra (@abiyyu03). https://dev.to/abiyyu03 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%2F1072235%2F0be3153b-8263-4ed2-bd12-b31ec8d38d73.jpeg https://dev.to/abiyyu03 en Abiyyu Cakra Tue, 23 May 2023 17:11:16 +0000 https://dev.to/abiyyu03/githubhack23-pomotimer-app-using-vanilla-javascript-31n6 https://dev.to/abiyyu03/githubhack23-pomotimer-app-using-vanilla-javascript-31n6 <h2> What I built </h2> <p>I created a <a href="https://en.wikipedia.org/wiki/Pomodoro_Technique">pomodoro</a> timer app to help users to focus and rest at certain intervals. This app is based on the Pomodoro time management method developed by Francesco Cirillo in the late 1980s</p> <h3> Category Submission: </h3> <p>Phone Friendly: Projects built for Mobile (PWA)</p> <h3> App Link </h3> <p><a href="https://pomotimerjs.netlify.app/">https://pomotimerjs.netlify.app/</a></p> <h3> Screenshots </h3> <p>Splash Screen in android PWA<br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--7E9jvhBB--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q9fcxyjd94f1gzpt1lki.jpeg" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--7E9jvhBB--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q9fcxyjd94f1gzpt1lki.jpeg" alt="Splash Screen in android PWA" width="720" height="1280"></a><br> Web Desktop Version<br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--v8ZrL3gk--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rns090dsyoglcefjde6y.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--v8ZrL3gk--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rns090dsyoglcefjde6y.png" alt="Desktop Version" width="800" height="466"></a></p> <h3> Description </h3> <p>A simple application that will help users train their focus with the Pomodoro method. The way the Pomodoro method works is by doing the work for a set time, then resting for 5-15 minutes. then start focusing again and so on until the job is done. users can customize the sound of the alarm when finished focusing and finished resting. This app is build with HTML, CSS and Javascript</p> <h3> Link to Source Code </h3> <p>visit <a href="https://github.com/abiyyu03/pomotimer/">this link</a> to get source code</p> <h3> Permissive License </h3> <p>This project is licensed under MIT</p> <h2> Background </h2> <p>My main purpose to create this web app is because I want to learn more about Javascript, besides that, I am a person who easily loses focus when doing something, so I know the Pomodoro method. And I decided to make it in the form of a web-based application. even though there are many pomodoro timer applications out there, I want to make my own version in the hope that the application that I made can be useful for many people</p> <h3> How I built it </h3> <p>I utilize Github Actions to deploy static content to pages and for build Github pages. In developing process, i've learned much about JavaScript, like the how unique this language, applying asynchronous, etc. And also i've learned how to implement progressive web app in a static site. </p> <h3> How to install on mobile </h3> <p>open this app link, then find in your browser menu, "add to home screen" or something like that. </p> <h3> Additional Resources/Info </h3> <p><a href="https://en.wikipedia.org/wiki/Pomodoro_Technique">https://en.wikipedia.org/wiki/Pomodoro_Technique</a><br> <a href="https://www.freecodecamp.org/news/build-a-pwa-from-scratch-with-html-css-and-javascript/">https://www.freecodecamp.org/news/build-a-pwa-from-scratch-with-html-css-and-javascript/</a></p> githubhack23