{"tag":{"id":"56744723958ef13879b95483","name":"HTML5","logo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1513322217442/SkZlDeWzz.png","slug":"html5","tagline":"HTML5 is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and current major version of the HTML standard.","__typename":"Tag"},"publication":{"id":"5f5b7821e0b75e58b295213c","hashnodeURL":"https://theintrovertcoder.com","url":"https://theintrovertcoder.com","canonicalURL":"https://theintrovertcoder.com","title":"The Introvert Coder","displayTitle":"The Introvert Coder | Connecting with Coders.","descriptionSEO":"Love Coding? The-Introvert-Coder is a place where I share my knowledge on HTML, CSS, Javascript. ","username":"theintrovertcoder","about":{"html":"

Full-Stack Developer • An Introvert Coder • Tech Blogger • A Proud Mom

\n","__typename":"AboutPublication"},"enabledFeatures":{"newsletter":true,"viewCount":false,"readTime":false,"__typename":"PublicationFeatures"},"ogMetaData":{"image":"https://cdn.hashnode.com/res/hashnode/image/upload/v1627349405956/Vs2pvOtDM.gif","__typename":"OpenGraphMetaData"},"author":{"id":"5f5b77a3e0b75e58b2952121","name":"Sangy K (SK) | The Introvert Coder","username":"sangyk","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1675345629099/F3C46pc1z.png","coverPhoto":"https://cdn.hashnode.com/res/hashnode/image/upload/v1600853485688/P0wh5SbD3.jpeg","__typename":"User"},"preferences":{"logo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1675339979870/LDQ7tt946.png","darkMode":{"logo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1675339984512/LIAfU5NIf.png","enabled":true,"__typename":"DarkModePreferences"},"customCSS":{"enabled":true,"staticMin":"::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background-color:#6a6a6a}::-webkit-scrollbar-thumb{border-radius:5px;background:#4169e1}.blog-header .css-6dpdzg{padding-top:.5rem}.blog-header .blog-sub-header .css-1liodlt .blog-follow-button{background-color:#4169e1;border-color:#4169e1;border-radius:10px}.blog-header .blog-sub-header .css-1liodlt .blog-follow-button:hover{background-color:#29428d}.dark .blog-header .blog-sub-header .css-1liodlt .blog-follow-button{background-color:#fff;border-color:#c7d2f2;color:#4169e1}.dark .blog-header .blog-sub-header .css-1liodlt .blog-follow-button:hover{background-color:#c7d2f2}.blog-header .css-vangzf{justify-content:start;margin-top:1rem}.blog-header .css-vangzf .scrollbar-container .blog-nav-active{border-radius:5px 5px 0 0;border-color:#c7d2f2 !important;background-color:#4169e1 !important}.blog-header .css-vangzf .scrollbar-container .blog-nav-active .blog-nav-text{color:#fff !important}.blog-header .css-vangzf .scrollbar-container .blog-nav-active .blog-nav-text:hover{background:transparent}.blog-header .css-vangzf .scrollbar-container nav a .blog-nav-text{margin:0 !important;padding:.25rem .5rem !important}.blog-header .css-vangzf .scrollbar-container .blog-nav .blog-nav-text:hover{background-color:#c7d2f2 !important;border-radius:.5rem .5rem 0 0;color:#0f172a}@media(min-width:768px){.blog-header .css-6dpdzg{margin-bottom:0}}.blog-page-content #heading-i-am-obsessed-with+p,.blog-page-content #heading-i-am-comfortable-with+p,.blog-page-content #heading-my-abode-lets-connect+p{background-color:#c7d2f2;border-radius:5px;display:flex;justify-content:center;flex-wrap:wrap;margin:0;padding:0}.blog-page-content #heading-i-am-obsessed-with+p img,.blog-page-content #heading-i-am-comfortable-with+p img{height:50px;margin:25px}.blog-page-content #heading-my-abode-lets-connect+p a{height:25px;margin:5px;padding:0}.blog-page-content #heading-my-abode-lets-connect+p a img{height:25px;margin:0;padding:0}.blog-page-content a[href=\"https://www.buymeacoffee.com/dev_sangyk\"] img{display:inline-block;padding:0;margin:0 0 0 5px}.blog-footer-area{border-color:#c7d2f2 !important}.blog-footer-area .blog-impressum{border-color:#c7d2f2 !important}.blog-footer-area .blog-impressum>p{color:#4169e1 !important}.dark .blog-footer-area .blog-impressum{background-color:#0f172a !important}","homeMin":"::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background-color:#6a6a6a}::-webkit-scrollbar-thumb{border-radius:5px;background:#4169e1}.blog-header .css-6dpdzg{padding-top:.5rem}.blog-header .blog-sub-header .css-1liodlt .blog-follow-button{background-color:#4169e1;border-color:#4169e1;border-radius:10px;color:#c7d2f2}.blog-header .blog-sub-header .css-1liodlt .blog-follow-button:hover{background-color:#29428d}.dark .blog-header .blog-sub-header .css-1liodlt .blog-follow-button{background-color:#fff;border-color:#c7d2f2;color:#4169e1}.dark .blog-header .blog-sub-header .css-1liodlt .blog-follow-button:hover{background-color:#c7d2f2}.blog-header .css-vangzf{justify-content:start;margin-top:1rem}.blog-header .css-vangzf .scrollbar-container .blog-nav-active{border-radius:5px 5px 0 0;border-color:#c7d2f2 !important;background-color:#4169e1 !important}.blog-header .css-vangzf .scrollbar-container .blog-nav-active .blog-nav-text{color:#fff !important}.blog-header .css-vangzf .scrollbar-container .blog-nav-active .blog-nav-text:hover{background:transparent}.blog-header .css-vangzf .scrollbar-container nav a .blog-nav-text{margin:0 !important;padding:.25rem .5rem !important}.blog-header .css-vangzf .scrollbar-container .blog-nav .blog-nav-text:hover{background-color:#c7d2f2 !important;border-radius:.5rem .5rem 0 0;color:#0f172a}.blog-featured-area{border-color:#c7d2f2 !important}.blog-featured-area .blog-article-card{border:1px solid #6a6a6a50;border-radius:.5rem;overflow:hidden;transition:scale 1s}.blog-featured-area .blog-article-card:hover{transform:scale(1.05)}.blog-featured-area .blog-article-card .blog-article-card-cover{border-width:0 !important;border-radius:.5rem .5rem 0 0}.blog-featured-area .blog-article-card .blog-article-card-author-strip{margin-bottom:1rem}.blog-featured-area .blog-article-card .blog-article-card-author-photo{border:2px solid #4169e1}.blog-author-container{border-color:#C7D2F280 !important}.blog-author-container .blog-author-card .blog-follow-wrapper{display:none}.blog-author-container .blog-author-card .css-telre5 p{margin:0 !important}.blog-articles-area .blog-article-card{border:1px solid #6a6a6a50;border-radius:.5rem;overflow:hidden;transition:scale 1s}.blog-articles-area .blog-article-card:hover{transform:scale(1.05)}.blog-articles-area .blog-article-card .blog-article-card-cover{border-width:0 !important;border-radius:.5rem .5rem 0 0}.blog-articles-area .blog-article-card .blog-article-card-author-strip{margin-bottom:1rem}.blog-articles-area .css-1vyhe0m button:hover,.blog-posts-wrapper .css-1fp32g9 button:hover{background:transparent}.blog-articles-area .css-1vyhe0m button svg path,.blog-posts-wrapper .css-1fp32g9 button svg path{display:none}.blog-articles-area .css-1vyhe0m button span,.blog-posts-wrapper .css-1fp32g9 button span{border:2px solid #4169e1;border-radius:5px;color:#4169e1;padding:.5rem 1rem;transition:box-shadow .5s}.blog-articles-area .css-1vyhe0m button:hover span,.blog-posts-wrapper .css-1fp32g9 button:hover span{box-shadow:0 5px 20px 0 #6a6a6a50;background-color:#4169e1;color:#c7d2f2}.blog-footer-area{border-color:#c7d2f2 !important}.blog-footer-area .blog-impressum{border-color:#c7d2f2 !important}.blog-footer-area .blog-impressum>p{color:#4169e1 !important}@media(min-width:768px){.blog-header .css-6dpdzg{margin-bottom:0}.blog-content-area .blog-series-card .css-1i0unf{flex-direction:column-reverse}.blog-content-area .blog-series-card .css-1i0unf div{width:100%}.blog-content-area .blog-series-card .css-1i0unf .blog-series-cover-container{margin-bottom:1rem !important}.blog-author-container .blog-author-card{padding:2rem}}","__typename":"CustomCSSPreferences"},"navbarItems":[{"id":"63b8e0f895025da0eecd2d04","label":"Project Euler JS Solution","url":"https://theintrovertcoder.com/series/project-euler","priority":0,"type":"series","series":{"id":"63a95e08b1011ed9ec6d3bdb","__typename":"Series"},"__typename":"PublicationNavbarItem"},{"id":"63dbb602787b1b79bedc1d7e","label":"🎯 It's Me! 📝","url":"https://theintrovertcoder.com/about","priority":0,"type":"page","series":null,"__typename":"PublicationNavbarItem"}],"enabledPages":{"badges":true,"newsletter":true,"members":null,"__typename":"PagesPreferences"},"customCSSDraft":{"enabled":null,"staticMin":"::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background-color:#6a6a6a}::-webkit-scrollbar-thumb{border-radius:5px;background:#4169e1}.blog-header .css-6dpdzg{padding-top:.5rem}.blog-header .blog-sub-header .css-1liodlt .blog-follow-button{background-color:#4169e1;border-color:#4169e1;border-radius:10px}.blog-header .blog-sub-header .css-1liodlt .blog-follow-button:hover{background-color:#29428d}.dark .blog-header .blog-sub-header .css-1liodlt .blog-follow-button{background-color:#fff;border-color:#c7d2f2;color:#4169e1}.dark .blog-header .blog-sub-header .css-1liodlt .blog-follow-button:hover{background-color:#c7d2f2}.blog-header .css-vangzf{justify-content:start;margin-top:1rem}.blog-header .css-vangzf .scrollbar-container .blog-nav-active{border-radius:5px 5px 0 0;border-color:#c7d2f2 !important;background-color:#4169e1 !important}.blog-header .css-vangzf .scrollbar-container .blog-nav-active .blog-nav-text{color:#fff !important}.blog-header .css-vangzf .scrollbar-container .blog-nav-active .blog-nav-text:hover{background:transparent}.blog-header .css-vangzf .scrollbar-container nav a .blog-nav-text{margin:0 !important;padding:.25rem .5rem !important}.blog-header .css-vangzf .scrollbar-container .blog-nav .blog-nav-text:hover{background-color:#c7d2f2 !important;border-radius:.5rem .5rem 0 0;color:#0f172a}@media(min-width:768px){.blog-header .css-6dpdzg{margin-bottom:0}}.blog-page-content #heading-i-am-obsessed-with+p,.blog-page-content #heading-i-am-comfortable-with+p,.blog-page-content #heading-my-abode-lets-connect+p{background-color:#c7d2f2;border-radius:5px;display:flex;justify-content:center;flex-wrap:wrap;margin:0;padding:0}.blog-page-content #heading-i-am-obsessed-with+p img,.blog-page-content #heading-i-am-comfortable-with+p img{height:50px;margin:25px}.blog-page-content #heading-my-abode-lets-connect+p a{height:25px;margin:5px;padding:0}.blog-page-content #heading-my-abode-lets-connect+p a img{height:25px;margin:0;padding:0}.blog-page-content a[href=\"https://www.buymeacoffee.com/dev_sangyk\"] img{display:inline-block;padding:0;margin:0 0 0 5px}.blog-footer-area{border-color:#c7d2f2 !important}.blog-footer-area .blog-impressum{border-color:#c7d2f2 !important}.blog-footer-area .blog-impressum>p{color:#4169e1 !important}.dark .blog-footer-area .blog-impressum{background-color:#0f172a !important}","homeMin":"::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background-color:#6a6a6a}::-webkit-scrollbar-thumb{border-radius:5px;background:#4169e1}.blog-header .css-6dpdzg{padding-top:.5rem}.blog-header .blog-sub-header .css-1liodlt .blog-follow-button{background-color:#4169e1;border-color:#4169e1;border-radius:10px;color:#c7d2f2}.blog-header .blog-sub-header .css-1liodlt .blog-follow-button:hover{background-color:#29428d}.dark .blog-header .blog-sub-header .css-1liodlt .blog-follow-button{background-color:#fff;border-color:#c7d2f2;color:#4169e1}.dark .blog-header .blog-sub-header .css-1liodlt .blog-follow-button:hover{background-color:#c7d2f2}.blog-header .css-vangzf{justify-content:start;margin-top:1rem}.blog-header .css-vangzf .scrollbar-container .blog-nav-active{border-radius:5px 5px 0 0;border-color:#c7d2f2 !important;background-color:#4169e1 !important}.blog-header .css-vangzf .scrollbar-container .blog-nav-active .blog-nav-text{color:#fff !important}.blog-header .css-vangzf .scrollbar-container .blog-nav-active .blog-nav-text:hover{background:transparent}.blog-header .css-vangzf .scrollbar-container nav a .blog-nav-text{margin:0 !important;padding:.25rem .5rem !important}.blog-header .css-vangzf .scrollbar-container .blog-nav .blog-nav-text:hover{background-color:#c7d2f2 !important;border-radius:.5rem .5rem 0 0;color:#0f172a}.blog-featured-area{border-color:#c7d2f2 !important}.blog-featured-area .blog-article-card{border:1px solid #6a6a6a50;border-radius:.5rem;overflow:hidden;transition:scale 1s}.blog-featured-area .blog-article-card:hover{transform:scale(1.05)}.blog-featured-area .blog-article-card .blog-article-card-cover{border-width:0 !important;border-radius:.5rem .5rem 0 0}.blog-featured-area .blog-article-card .blog-article-card-author-strip{margin-bottom:1rem}.blog-featured-area .blog-article-card .blog-article-card-author-photo{border:2px solid #4169e1}.blog-author-container{border-color:#C7D2F280 !important}.blog-author-container .blog-author-card .blog-follow-wrapper{display:none}.blog-author-container .blog-author-card .css-telre5 p{margin:0 !important}.blog-articles-area .blog-article-card{border:1px solid #6a6a6a50;border-radius:.5rem;overflow:hidden;transition:scale 1s}.blog-articles-area .blog-article-card:hover{transform:scale(1.05)}.blog-articles-area .blog-article-card .blog-article-card-cover{border-width:0 !important;border-radius:.5rem .5rem 0 0}.blog-articles-area .blog-article-card .blog-article-card-author-strip{margin-bottom:1rem}.blog-articles-area .css-1vyhe0m button:hover,.blog-posts-wrapper .css-1fp32g9 button:hover{background:transparent}.blog-articles-area .css-1vyhe0m button svg path,.blog-posts-wrapper .css-1fp32g9 button svg path{display:none}.blog-articles-area .css-1vyhe0m button span,.blog-posts-wrapper .css-1fp32g9 button span{border:2px solid #4169e1;border-radius:5px;color:#4169e1;padding:.5rem 1rem;transition:box-shadow .5s}.blog-articles-area .css-1vyhe0m button:hover span,.blog-posts-wrapper .css-1fp32g9 button:hover span{box-shadow:0 5px 20px 0 #6a6a6a50;background-color:#4169e1;color:#c7d2f2}.blog-footer-area{border-color:#c7d2f2 !important}.blog-footer-area .blog-impressum{border-color:#c7d2f2 !important}.blog-footer-area .blog-impressum>p{color:#4169e1 !important}@media(min-width:768px){.blog-header .css-6dpdzg{margin-bottom:0}.blog-content-area .blog-series-card .css-1i0unf{flex-direction:column-reverse}.blog-content-area .blog-series-card .css-1i0unf div{width:100%}.blog-content-area .blog-series-card .css-1i0unf .blog-series-cover-container{margin-bottom:1rem !important}.blog-author-container .blog-author-card{padding:2rem}}","__typename":"CustomCSSPreferences"},"layout":"magazine","__typename":"Preferences"},"favicon":"https://cdn.hashnode.com/res/hashnode/image/upload/v1675326571348/F2Yccavnt.png","headerColor":"","metaTags":"\n","integrations":{"fbPixelID":"","fathomSiteID":"","fathomCustomDomainEnabled":null,"fathomCustomDomain":"","hotjarSiteID":"","matomoSiteID":null,"matomoURL":"","gaTrackingID":"","plausibleAnalyticsEnabled":false,"wmPaymentPointer":"$ilp.uphold.com/A3XgEBX9aAwQ","__typename":"PublicationIntegrations"},"postsCount":22,"impressum":"

👋 Hello there,

My name is Sangy, you can also call me SK and I am the author of THE INTROVERT CODER 👩‍💻. I hope that you get to learn something useful from my blog.

If you like my content and want to stay updated then subscribe to my newsletter.

If you would like to request a particular article/topic covered or would want to discuss something, then please follow and connect me through Twitter

Learn and Grow! 💯

\n","isTeam":null,"links":{"twitter":"https://twitter.com/sangyk_dev","instagram":"","github":"https://github.com/sansk","website":"","hashnode":"","youtube":"","dailydev":"","linkedin":"","mastodon":"","__typename":"PublicationLinks"},"domainInfo":{"domain":{"value":"theintrovertcoder.com","certIssued":true,"ready":true,"__typename":"DomainStatus"},"wwwPrefixedDomain":{"value":"www.theintrovertcoder.com","certIssued":true,"ready":true,"__typename":"DomainStatus"},"__typename":"DomainInfo"},"posts":{"edges":[{"node":{"id":"61b46ab1b18f1f0c68300a3f","title":"Build a Pomodoro Timer using HTML, CSS and Javascript","slug":"build-a-pomodoro-timer-using-html-css-and-javascript","publishDate":"2021-12-11T09:09:05.938Z","cuid":"ckx1ljhow01tqg8s15ahe9vpn","url":"https://theintrovertcoder.com/build-a-pomodoro-timer-using-html-css-and-javascript","subtitle":"Create a Pomodoro Timer using HTML, CSS and Vanilla Javascript. No Canvas or SVGs. Using only

elements and CSS conic-gradient() function & JS.","brief":"In this tutorial, we are coding a Pomodoro timer. ⏲\nI Came across Advent Of CSS and Advent of JS challenges, created by Amy Dutton and James Q Quick for this holiday season. I decided it would be a fun little challenge to participate this year!\nSo h...","readTimeInMinutes":8,"views":1735,"author":{"id":"5f5b77a3e0b75e58b2952121","username":"sangyk","name":"Sangy K (SK) | The Introvert Coder","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1675345629099/F3C46pc1z.png","followersCount":10,"__typename":"User"},"coverImage":{"url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1639143687815/ErxkGmhSn.png","isPortrait":null,"__typename":"PostCoverImage"},"__typename":"Post"},"cursor":"61b46ab1b18f1f0c68300a3f_2021-12-11T09:09:05.938Z","__typename":"PostEdge"}],"pageInfo":{"endCursor":"61b46ab1b18f1f0c68300a3f_2021-12-11T09:09:05.938Z","hasNextPage":false,"hasPreviousPage":false,"startCursor":"61b46ab1b18f1f0c68300a3f_2021-12-11T09:09:05.938Z","__typename":"PostPageInfo"},"__typename":"PostConnection"},"__typename":"Publication"}}