{"publication":{"id":"606794287f07b6328b5ddc32","url":"https://blog.timonwa.com","canonicalURL":"https://blog.timonwa.com","title":"Timonwa's Notes","displayTitle":"Timonwa's Notes | Web Development","descriptionSEO":"Timonwa writes technical articles on frontend development that help other developers have an easier learning journey. This includes beginner-friendly tutorials, experiences, opinions and more.","username":"timonwa","about":{"html":"

I am a front-end engineer and technical writer who excels at development and communication. I love learning and sharing knowledge and constantly seek new opportunities to grow and share my experience.

\n","__typename":"AboutPublication"},"enabledFeatures":{"newsletter":true,"viewCount":false,"readTime":true,"__typename":"PublicationFeatures"},"ogMetaData":{"image":"https://cdn.hashnode.com/res/hashnode/image/upload/v1664792074737/0bctAMciP.png","__typename":"OpenGraphMetaData"},"author":{"id":"606793e943f7713266914813","name":"Timonwa Akintokun","username":"Timonwa","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1675469430276/7DAKSW4_D.jpg","coverPhoto":"","__typename":"User"},"preferences":{"logo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1666978989889/4OtfRZApS.png","darkMode":{"logo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1666978992799/5WY-Mkz0x.png","enabled":false,"__typename":"DarkModePreferences"},"customCSS":{"enabled":true,"staticMin":".blog-header{background-color:#ffdfba !important}.dark .blog-header{background-color:#262323 !important}.dark .blog-header *{color:#fefff0 !important}.dark .blog-header .container a.blog-settings{background-color:#262323 !important}.dark .css-37nvso button{color:#fefff0 !important}.dark .css-1vqe7h8{background-color:#262323 !important}.blog-header .container button.blog-search-button{color:#434141 !important}.dark .blog-header .container button.blog-search-button{color:#fefff0 !important}.dark .blog-header .container button.blog-search-button:hover{background-color:rgba(254,255,240,0.1) !important}.blog-header .container button.blog-theme-switcher{color:#434141 !important}.dark .blog-header .container button.blog-theme-switcher{color:#fefff0 !important}.dark .blog-header .container button.blog-theme-switcher:hover{background-color:rgba(254,255,240,0.1) !important}.blog-header .container a.blog-settings{color:#434141 !important}.dark .blog-header .container a.blog-settings{color:#fefff0 !important}.dark .blog-header .container a.blog-settings:hover{background-color:rgba(254,255,240,0.1) !important}.blog-nav{color:#434141 !important}.dark .blog-nav{color:#fefff0 !important;opacity:.7 !important}.dark .blog-nav:hover{opacity:1 !important;background-color:rgba(254,255,240,0.1) !important}.dark .blog-nav-active{color:#fefff0 !important}.blog-social-media-section a{color:#434141 !important}.dark .blog-social-media-section a{color:#fefff0 !important;opacity:.7 !important}.dark .blog-social-media-section a:hover{background-color:rgba(254,255,240,0.1) !important}.tooltip-handle:hover::after{background-color:#636262 !important;color:#fefff0 !important}.css-1jyyrtb,.css-2j2uz3,.blog-body,.blog-featured-area,.blog-content-area,.blog-article-area .blog-articles-area{background:#fefff0 !important;color:#434141 !important}.dark .css-mjg0cr,.dark .css-1jyyrtb,.dark .css-2j2uz3,.dark .blog-body,.dark .blog-content-area,.dark .blog-featured-area,.dark .blog-articles-area,.dark .blog-page-area .css-1gce3bk{background:#434141 !important;color:#fefff0 !important}.css-12n6jp input{border-left-color:#ffdfba !important}.blog-article-card-cover{border-color:#ddd !important}.dark .blog-article-card-cover{border-color:#fefff0 !important}.dark .blog-article-card-brief,.dark .blog-article-card-author-strip,.dark .blog-article-card-author-name,.dark .blog-article-card-article-meta p a{color:#fefff0 !important;opacity:.9 !important}.blog-author-container,{background:#ffdfba !important;color:#434141 !important}.dark .blog-author-container{background:#262323 !important;color:#fefff0 !important}.css-1vyhe0m .css-1fspc5w{color:#434141 !important}.dark .css-1vyhe0m .css-1fspc5w{color:#fefff0 !important}.css-1vyhe0m .css-1fspc5w:hover{background-color:rgba(255,223,186,0.2) !important}.dark .css-1vyhe0m .css-1fspc5w:hover{background-color:rgba(254,255,240,0.2) !important}.blog-footer-area,.dark .blog-footer-area,.blog-footer-credits,.blog-footer-credits p,.blog-footer-credits a{background:#262323 !important;color:#fefff0 !important}.blog-impressum{background:#434141 !important;border-color:#fefff0 !important}.dark .blog-impressum{border-color:#ffefff0 !important}.css-12megap{color:rgba(254,255,240,0.5) !important}.css-1pdlr3v,.blog-impressum p,.blog-impressum a{color:#fefff0 !important}.css-1jvy7lu{border-color:#fefff0 !important}.dark .css-1jvy7lu{border-color:#fefff0 !important}.blog-content-area .feed-width{background-color:#fefff0}","homeMin":".blog-header{background-color:#ffdfba !important}.dark .blog-header{background-color:#262323 !important}.dark .blog-header *{color:#fefff0 !important}.dark .blog-header .container a.blog-settings{background-color:#262323 !important}.dark .css-37nvso button{color:#fefff0 !important}.dark .css-1vqe7h8{background-color:#262323 !important}.blog-header .container button.blog-search-button{color:#434141 !important}.dark .blog-header .container button.blog-search-button{color:#fefff0 !important}.dark .blog-header .container button.blog-search-button:hover{background-color:rgba(254,255,240,0.1) !important}.blog-header .container button.blog-theme-switcher{color:#434141 !important}.dark .blog-header .container button.blog-theme-switcher{color:#fefff0 !important}.dark .blog-header .container button.blog-theme-switcher:hover{background-color:rgba(254,255,240,0.1) !important}.blog-header .container a.blog-settings{color:#434141 !important}.dark .blog-header .container a.blog-settings{color:#fefff0 !important}.dark .blog-header .container a.blog-settings:hover{background-color:rgba(254,255,240,0.1) !important}.blog-nav{color:#434141 !important}.dark .blog-nav{color:#fefff0 !important;opacity:.7 !important}.dark .blog-nav:hover{opacity:1 !important;background-color:rgba(254,255,240,0.1) !important}.dark .blog-nav-active{color:#fefff0 !important}.blog-social-media-section a{color:#434141 !important}.dark .blog-social-media-section a{color:#fefff0 !important;opacity:.7 !important}.dark .blog-social-media-section a:hover{background-color:rgba(254,255,240,0.1) !important}.tooltip-handle:hover::after{background-color:#636262 !important;color:#fefff0 !important}.css-1jyyrtb,.css-2j2uz3,.blog-body,.blog-featured-area,.blog-content-area,.blog-article-area .blog-articles-area{background:#fefff0 !important;color:#434141 !important}.dark .css-mjg0cr,.dark .css-1jyyrtb,.dark .css-2j2uz3,.dark .blog-body,.dark .blog-content-area,.dark .blog-featured-area,.dark .blog-articles-area,.dark .blog-page-area .css-1gce3bk{background:#434141 !important;color:#fefff0 !important}.css-12n6jp input{border-left-color:#ffdfba !important}.blog-article-card-cover{border-color:#ddd !important}.dark .blog-article-card-cover{border-color:#fefff0 !important}.dark .blog-article-card-brief,.dark .blog-article-card-author-strip,.dark .blog-article-card-author-name,.dark .blog-article-card-article-meta p a{color:#fefff0 !important;opacity:.9 !important}.blog-author-container,{background:#ffdfba !important;color:#434141 !important}.dark .blog-author-container{background:#262323 !important;color:#fefff0 !important}.css-1vyhe0m .css-1fspc5w{color:#434141 !important}.dark .css-1vyhe0m .css-1fspc5w{color:#fefff0 !important}.css-1vyhe0m .css-1fspc5w:hover{background-color:rgba(255,223,186,0.2) !important}.dark .css-1vyhe0m .css-1fspc5w:hover{background-color:rgba(254,255,240,0.2) !important}.blog-footer-area,.dark .blog-footer-area,.blog-footer-credits,.blog-footer-credits p,.blog-footer-credits a{background:#262323 !important;color:#fefff0 !important}.blog-impressum{background:#434141 !important;border-color:#babfff !important}.dark .blog-impressum{border-color:#babfff !important}.css-12megap{color:rgba(254,255,240,0.5) !important}.css-1pdlr3v,.blog-impressum p,.blog-impressum a{color:#fefff0 !important}.css-1jvy7lu{border-color:#babfff !important}.dark .css-1jvy7lu{border-color:#babfff !important}","__typename":"CustomCSSPreferences"},"navbarItems":[{"id":"623069b538e0a0d99d331287","label":"About Me","url":"https://blog.timonwa.com/about","priority":5,"type":"page","series":null,"__typename":"PublicationNavbarItem"},{"id":"624c49834b4dde0dc0becd92","label":"Useful Links","url":"https://link.timonwa.com","priority":1,"type":"link","series":null,"__typename":"PublicationNavbarItem"},{"id":"623069ca38e0a0d99d331297","label":"Poetry","url":"https://diary.timonwa.com","priority":0,"type":"link","series":null,"__typename":"PublicationNavbarItem"}],"enabledPages":{"badges":false,"newsletter":true,"members":null,"__typename":"PagesPreferences"},"customCSSDraft":{"enabled":null,"staticMin":".blog-header{background-color:#ffdfba !important}.dark .blog-header{background-color:#262323 !important}.dark .blog-header *{color:#fefff0 !important}.dark .blog-header .container a.blog-settings{background-color:#262323 !important}.dark .css-37nvso button{color:#fefff0 !important}.dark .css-1vqe7h8{background-color:#262323 !important}.blog-header .container button.blog-search-button{color:#434141 !important}.dark .blog-header .container button.blog-search-button{color:#fefff0 !important}.dark .blog-header .container button.blog-search-button:hover{background-color:rgba(254,255,240,0.1) !important}.blog-header .container button.blog-theme-switcher{color:#434141 !important}.dark .blog-header .container button.blog-theme-switcher{color:#fefff0 !important}.dark .blog-header .container button.blog-theme-switcher:hover{background-color:rgba(254,255,240,0.1) !important}.blog-header .container a.blog-settings{color:#434141 !important}.dark .blog-header .container a.blog-settings{color:#fefff0 !important}.dark .blog-header .container a.blog-settings:hover{background-color:rgba(254,255,240,0.1) !important}.blog-nav{color:#434141 !important}.dark .blog-nav{color:#fefff0 !important;opacity:.7 !important}.dark .blog-nav:hover{opacity:1 !important;background-color:rgba(254,255,240,0.1) !important}.dark .blog-nav-active{color:#fefff0 !important}.blog-social-media-section a{color:#434141 !important}.dark .blog-social-media-section a{color:#fefff0 !important;opacity:.7 !important}.dark .blog-social-media-section a:hover{background-color:rgba(254,255,240,0.1) !important}.tooltip-handle:hover::after{background-color:#636262 !important;color:#fefff0 !important}.css-1jyyrtb,.css-2j2uz3,.blog-body,.blog-featured-area,.blog-content-area,.blog-article-area .blog-articles-area{background:#fefff0 !important;color:#434141 !important}.dark .css-mjg0cr,.dark .css-1jyyrtb,.dark .css-2j2uz3,.dark .blog-body,.dark .blog-content-area,.dark .blog-featured-area,.dark .blog-articles-area,.dark .blog-page-area .css-1gce3bk{background:#434141 !important;color:#fefff0 !important}.css-12n6jp input{border-left-color:#ffdfba !important}.blog-article-card-cover{border-color:#ddd !important}.dark .blog-article-card-cover{border-color:#fefff0 !important}.dark .blog-article-card-brief,.dark .blog-article-card-author-strip,.dark .blog-article-card-author-name,.dark .blog-article-card-article-meta p a{color:#fefff0 !important;opacity:.9 !important}.blog-author-container,{background:#ffdfba !important;color:#434141 !important}.dark .blog-author-container{background:#262323 !important;color:#fefff0 !important}.css-1vyhe0m .css-1fspc5w{color:#434141 !important}.dark .css-1vyhe0m .css-1fspc5w{color:#fefff0 !important}.css-1vyhe0m .css-1fspc5w:hover{background-color:rgba(255,223,186,0.2) !important}.dark .css-1vyhe0m .css-1fspc5w:hover{background-color:rgba(254,255,240,0.2) !important}.blog-footer-area,.dark .blog-footer-area,.blog-footer-credits,.blog-footer-credits p,.blog-footer-credits a{background:#262323 !important;color:#fefff0 !important}.blog-impressum{background:#434141 !important;border-color:#fefff0 !important}.dark .blog-impressum{border-color:#ffefff0 !important}.css-12megap{color:rgba(254,255,240,0.5) !important}.css-1pdlr3v,.blog-impressum p,.blog-impressum a{color:#fefff0 !important}.css-1jvy7lu{border-color:#fefff0 !important}.dark .css-1jvy7lu{border-color:#fefff0 !important}.blog-content-area .feed-width{background-color:#fefff0}","homeMin":".blog-header{background-color:#ffdfba !important}.dark .blog-header{background-color:#262323 !important}.dark .blog-header *{color:#fefff0 !important}.dark .blog-header .container a.blog-settings{background-color:#262323 !important}.dark .css-37nvso button{color:#fefff0 !important}.dark .css-1vqe7h8{background-color:#262323 !important}.blog-header .container button.blog-search-button{color:#434141 !important}.dark .blog-header .container button.blog-search-button{color:#fefff0 !important}.dark .blog-header .container button.blog-search-button:hover{background-color:rgba(254,255,240,0.1) !important}.blog-header .container button.blog-theme-switcher{color:#434141 !important}.dark .blog-header .container button.blog-theme-switcher{color:#fefff0 !important}.dark .blog-header .container button.blog-theme-switcher:hover{background-color:rgba(254,255,240,0.1) !important}.blog-header .container a.blog-settings{color:#434141 !important}.dark .blog-header .container a.blog-settings{color:#fefff0 !important}.dark .blog-header .container a.blog-settings:hover{background-color:rgba(254,255,240,0.1) !important}.blog-nav{color:#434141 !important}.dark .blog-nav{color:#fefff0 !important;opacity:.7 !important}.dark .blog-nav:hover{opacity:1 !important;background-color:rgba(254,255,240,0.1) !important}.dark .blog-nav-active{color:#fefff0 !important}.blog-social-media-section a{color:#434141 !important}.dark .blog-social-media-section a{color:#fefff0 !important;opacity:.7 !important}.dark .blog-social-media-section a:hover{background-color:rgba(254,255,240,0.1) !important}.tooltip-handle:hover::after{background-color:#636262 !important;color:#fefff0 !important}.css-1jyyrtb,.css-2j2uz3,.blog-body,.blog-featured-area,.blog-content-area,.blog-article-area .blog-articles-area{background:#fefff0 !important;color:#434141 !important}.dark .css-mjg0cr,.dark .css-1jyyrtb,.dark .css-2j2uz3,.dark .blog-body,.dark .blog-content-area,.dark .blog-featured-area,.dark .blog-articles-area,.dark .blog-page-area .css-1gce3bk{background:#434141 !important;color:#fefff0 !important}.css-12n6jp input{border-left-color:#ffdfba !important}.blog-article-card-cover{border-color:#ddd !important}.dark .blog-article-card-cover{border-color:#fefff0 !important}.dark .blog-article-card-brief,.dark .blog-article-card-author-strip,.dark .blog-article-card-author-name,.dark .blog-article-card-article-meta p a{color:#fefff0 !important;opacity:.9 !important}.blog-author-container,{background:#ffdfba !important;color:#434141 !important}.dark .blog-author-container{background:#262323 !important;color:#fefff0 !important}.css-1vyhe0m .css-1fspc5w{color:#434141 !important}.dark .css-1vyhe0m .css-1fspc5w{color:#fefff0 !important}.css-1vyhe0m .css-1fspc5w:hover{background-color:rgba(255,223,186,0.2) !important}.dark .css-1vyhe0m .css-1fspc5w:hover{background-color:rgba(254,255,240,0.2) !important}.blog-footer-area,.dark .blog-footer-area,.blog-footer-credits,.blog-footer-credits p,.blog-footer-credits a{background:#262323 !important;color:#fefff0 !important}.blog-impressum{background:#434141 !important;border-color:#babfff !important}.dark .blog-impressum{border-color:#babfff !important}.css-12megap{color:rgba(254,255,240,0.5) !important}.css-1pdlr3v,.blog-impressum p,.blog-impressum a{color:#fefff0 !important}.css-1jvy7lu{border-color:#babfff !important}.dark .css-1jvy7lu{border-color:#babfff !important}","__typename":"CustomCSSPreferences"},"layout":"magazine","disableFooterBranding":false,"__typename":"Preferences"},"favicon":"https://cdn.hashnode.com/res/hashnode/image/upload/v1639824979547/D3MUX3zyp.png","headerColor":"#ffdfba","metaTags":"","integrations":{"fbPixelID":"","fathomSiteID":"","fathomCustomDomainEnabled":null,"fathomCustomDomain":"","hotjarSiteID":"","matomoSiteID":null,"matomoURL":"","gaTrackingID":"UA-241548294-1","plausibleAnalyticsEnabled":null,"wmPaymentPointer":"$ilp.uphold.com/kA6UWnfXwYNL","__typename":"PublicationIntegrations"},"postsCount":20,"impressum":"

This blog is featured on Tech Blogs

Tech Roadmap provides you with guides, articles, and useful resources to help you choose a career path, start your journey, and grow in tech.

Learn about Crypto in the simplest of terms with Breach.

\nConnect with me on\n

GitHub | Twitter | LinkedIn | Instagram.

\n","isTeam":false,"links":{"twitter":"https://twitter.com/timonwa_","instagram":"https://instagram.com/timonwa_codes","github":"https://github.com/timonwa","website":"https://timonwa.com","hashnode":"https://hashnode.com/@Timonwa","youtube":"","dailydev":"https://app.daily.dev/timonwa","linkedin":"https://linkedin.com/in/timonwa","mastodon":"","__typename":"PublicationLinks"},"domainInfo":{"domain":{"value":"blog.timonwa.com","certIssued":true,"ready":true,"__typename":"DomainStatus"},"wwwPrefixedDomain":{"value":null,"certIssued":null,"ready":null,"__typename":"DomainStatus"},"__typename":"DomainInfo"},"__typename":"Publication","series":{"id":"6209204f85b93114aeba54ee","name":"Javascript Projects","coverImage":"https://cdn.hashnode.com/res/hashnode/image/upload/v1644765066480/B1z7V290G.png","slug":"javascript-projects","description":"In this series, I will be writing tutorials on how to create JavaScript projects, from mini ones you can integrate into your other projects to standalone projects. Welcome.👋🏼\n","cuid":"ckzlerraj06lg32s1fda39d5a","author":{"id":"606793e943f7713266914813","name":"Timonwa Akintokun","username":"Timonwa","__typename":"User"},"posts":{"edges":[{"node":{"id":"62306a8cdf08b9b82341cd53","title":"3 Simple Ways to Build an Accordion","slug":"3-simple-ways-to-build-an-accordion","publishDate":"2022-03-15T10:29:32.025Z","cuid":"cl0rzszv10f2i2onv9o4jeh5l","url":"https://blog.timonwa.com/3-simple-ways-to-build-an-accordion","subtitle":"","brief":"Hi guys and welcome to my JavaScript Project Series. In this series, I will be building several JavaScript projects, from simple easy mini-projects to the little bit complex ones.\nBefore we start, I want you to know that all the codes to each project...","readTimeInMinutes":6,"views":1325,"author":{"id":"606793e943f7713266914813","username":"Timonwa","name":"Timonwa Akintokun","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1675469430276/7DAKSW4_D.jpg","followersCount":100,"__typename":"User"},"coverImage":{"url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1647340494594/YLLGvdx-R.png","isPortrait":false,"__typename":"PostCoverImage"},"__typename":"Post"},"cursor":"NjIzMDZhOGNkZjA4YjliODIzNDFjZDUzXzIwMjItMDMtMTVUMTA6Mjk6MzIuMDI1Wg==","__typename":"PostEdge"},{"node":{"id":"62470717c794c505604c3305","title":"How to Build a Random Color Flipper with Vallina Javascript","slug":"how-to-build-a-random-color-flipper-with-vallina-javascript","publishDate":"2022-04-01T14:07:19.014Z","cuid":"cl1gi2jtd0261wbnvav6dbsvv","url":"https://blog.timonwa.com/how-to-build-a-random-color-flipper-with-vallina-javascript","subtitle":"","brief":"Hi guys and welcome to the second article in my Javascript Project Series, a series where I will be building 10+ Javascript projects, to test and build our Javascript coding skills.\nIn this second article, we going to \nlearn how to build a Color Flip...","readTimeInMinutes":11,"views":3084,"author":{"id":"606793e943f7713266914813","username":"Timonwa","name":"Timonwa Akintokun","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1675469430276/7DAKSW4_D.jpg","followersCount":100,"__typename":"User"},"coverImage":{"url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1648821860040/uRUDgvqtr.gif","isPortrait":false,"__typename":"PostCoverImage"},"__typename":"Post"},"cursor":"NjI0NzA3MTdjNzk0YzUwNTYwNGMzMzA1XzIwMjItMDQtMDFUMTQ6MDc6MTkuMDE0Wg==","__typename":"PostEdge"},{"node":{"id":"627d1e774903bec29b58768a","title":"How to Create an Image Slider using CSS and JavaScript","slug":"how-to-create-an-image-slider-using-css-and-javascript","publishDate":"2022-05-12T14:49:27.085Z","cuid":"cl334mnud03owesnv07zbab8w","url":"https://blog.timonwa.com/how-to-create-an-image-slider-using-css-and-javascript","subtitle":"","brief":"An image slider is a type of slideshow that displays a series of images in a horizontal or vertical arrangement. The images are displayed one after another, with a transition effect between each image. The images can be cycled through, and the user c...","readTimeInMinutes":11,"views":6013,"author":{"id":"606793e943f7713266914813","username":"Timonwa","name":"Timonwa Akintokun","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1675469430276/7DAKSW4_D.jpg","followersCount":100,"__typename":"User"},"coverImage":{"url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1652365742837/4j9U8c9zR_.gif","isPortrait":false,"__typename":"PostCoverImage"},"__typename":"Post"},"cursor":"NjI3ZDFlNzc0OTAzYmVjMjliNTg3NjhhXzIwMjItMDUtMTJUMTQ6NDk6MjcuMDg1Wg==","__typename":"PostEdge"}],"pageInfo":{"endCursor":"NjI3ZDFlNzc0OTAzYmVjMjliNTg3NjhhXzIwMjItMDUtMTJUMTQ6NDk6MjcuMDg1Wg==","hasNextPage":false,"__typename":"PageInfo"},"__typename":"PostConnection"},"__typename":"Series"}}}