How to Create a Broadcast Bar with Cookies using Vanilla JavaScript

Hi, My name is Andy Leverenz and I work as a Product Designer at Dribbble. For fun I design, code, and write. Check out my blog called Web-Crunch https://web-crunch.com where I publish design and development tutorials with the occasional vlog.

====================

I'm back at it with the Let's Build: With JavaScript series. In this video learn how to build a broadcast bar with cookies using vanilla JavaScript and some elbow grease.

This particular example utilizes some browser technologies to create a cookie for any user who navigates to your page and closes a broadcast banner. If they did indeed click the "X" icon, a cookie gets stored for 7 days in their browser.

This solution isn't foolproof as a user can just clear their cookies to see the broadcast bar again, but it does allow you to leverage storing something without needing a user to be signed in to some sort of session.

⚙️Codepen: https://codepen.io/webcrunchblog/pen/ajMevx

====================

💻 Previously published at: https://web-crunch.com/lets-build-with-javascript-broadcast-bar-cookies

💻 Check out the blog: https://web-crunch.com

🔭 Check out my app: https://affinicasts.com

💡 👫 Check out my agency: https://coupleofcreatives.com

🦄 Check out my personal site: https://justalever.com

🚀 Links: Weekly Newsletter: https://web-crunch.com/subscribe Twitter: https://twitter.com/webcrunchblog Twitter(Personal Account): https://twitter.com/justalever Facebook: https://facebook.com/webcrunchblog Dribbble: https://dribbble.com/justalever Github: https://github.com/justalever Medium: https://medium.com/the-web-crunch-publication

📘Check out my book on UX Design: "LUXD: Learn User Experience Design" https://web-crunch.com/books/luxd

📙 Check out my FREE book on Tumblr Theming: "Pro Tumblr Theming" https://web-crunch.com/books/ptt

💯 Need awesome web hosting? Check out cloudways. They allow me to use a variety of hosting providers and build apps with ease: http://bit.ly/webcrunchhosting

🌊 Need more advanced hosting for Rails, PHP, Node, or other projects? Digital Ocean has you covered. https://m.do.co/c/ee243ee15648

💎 Ruby on Rails devs, Try HatchBox.io. You'll save upwards of 50% compared to Heroku. I use it and love it! https://hatchbox.io/?via=andy

☕️ 🙏🏻 Patreon https://www.patreon.com/webcrunch

☕️ Or buy me a coffee https://www.buymeacoffee.com/webcrunch ... https://www.youtube.com/watch?v=L-K6qLvLsbE