--- title: Magic 8 Ball : Frontend Coding Exercises | daily.dev description: A beginner-friendly coding exercise walks through building a Magic 8 Ball web app using plain HTML, CSS, and JavaScript. Starting code provides the markup, a... canonical: https://daily.dev/posts/magic-8-ball-frontend-coding-exercises-pkn4znreh twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Magic 8 Ball : Frontend Coding Exercises | daily.dev og:description: A beginner-friendly coding exercise walks through building a Magic 8 Ball web app using plain HTML, CSS, and JavaScript. Starting code provides the markup, a... og:url: https://daily.dev/posts/magic-8-ball-frontend-coding-exercises-pkn4znreh og:image: https://api.daily.dev/og/posts/pKN4ZnREH.png og:image:alt: Magic 8 Ball : Frontend Coding Exercises og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Magic 8 Ball : Frontend Coding Exercises **[Kirupa](https://daily.dev/sources/kirupa)** · 4 min read · 37 upvotes · 3 comments ## Summary A beginner-friendly coding exercise walks through building a Magic 8 Ball web app using plain HTML, CSS, and JavaScript. Starting code provides the markup, a form for entering a question, and the array of 20 classic answers. Readers must implement the random answer logic, handle empty input, prevent the form's default page reload, and style the page to resemble an 8 ball, with optional extra credit for a shake animation. Completing the exercise and posting a solution on the site's forum earns a collectible badge. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@bob72** · 1 upvotes > very cool website. **@diyweb** · 0 upvotes > Great beginner exercise. Small things like handling empty input and preventing the form reload are exactly the habits people skip when they jump straight to frameworks. ## Similar posts on daily.dev - [Rock, Paper, Scissors : Frontend Coding Exercises](https://daily.dev/posts/rock-paper-scissors-frontend-coding-exercises-mw08dlqmv) · Kirupa · 2 upvotes · 0 comments - [Star Rating : Frontend Coding Exercises](https://daily.dev/posts/star-rating-frontend-coding-exercises-yepu59hbd) · Kirupa · 4 upvotes · 0 comments - [Build My First JavaScript Project : A Weather App](https://daily.dev/posts/build-my-first-javascript-project-a-weather-app-7sxiew9zu) · Medium · 7 upvotes · 0 comments - [Build 19 Web Dev Projects using HTML, CSS, & JavaScript](https://daily.dev/posts/build-19-web-dev-projects-using-html-css-javascript-jgpeicnuh) · freeCodeCamp · 66 upvotes · 2 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#javascript](https://daily.dev/tags/javascript), [#css](https://daily.dev/tags/css), [#html](https://daily.dev/tags/html) [View this post on daily.dev](https://daily.dev/posts/magic-8-ball-frontend-coding-exercises-pkn4znreh) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Magic 8 Ball : Frontend Coding Exercises","url":"https://daily.dev/posts/magic-8-ball-frontend-coding-exercises-pkn4znreh","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/magic-8-ball-frontend-coding-exercises-pkn4znreh"},"datePublished":"2026-10-06T20:47:43.994Z","dateModified":"2026-10-06T20:52:15.287Z","description":"A beginner-friendly coding exercise walks through building a Magic 8 Ball web app using plain HTML, CSS, and JavaScript. Starting code provides the markup, a...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/d7c57b00025c571b52206ab48b947700?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/d7c57b00025c571b52206ab48b947700?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Kirupa","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Kirupa","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/ff2fdb4927d34b81bd07cd18d6049a98","url":"https://daily.dev/sources/kirupa"},"commentCount":3,"discussionUrl":"https://daily.dev/posts/magic-8-ball-frontend-coding-exercises-pkn4znreh","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":36},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":3}],"keywords":"webdev,javascript,css,html","timeRequired":"PT4M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Kirupa","item":"https://daily.dev/sources/kirupa"},{"@type":"ListItem","position":3,"name":"Magic 8 Ball : Frontend Coding Exercises"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/magic-8-ball-frontend-coding-exercises-pkn4znreh","comment":[{"@type":"Comment","text":"very cool website.","datePublished":"2026-10-07T19:25:06.686Z","url":"https://daily.dev/posts/pKN4ZnREH#c-6PZWUAVgG","author":{"@type":"Person","name":"Bob","url":"https://daily.dev/bob72","image":"https://avatars.githubusercontent.com/u/193962566?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}},{"@type":"Comment","text":"Great beginner exercise. Small things like handling empty input and preventing the form reload are exactly the habits people skip when they jump straight to frameworks.","datePublished":"2026-10-11T13:31:32.722Z","url":"https://daily.dev/posts/pKN4ZnREH#c-C4LDOlybx","author":{"@type":"Person","name":"DiyWeb","url":"https://daily.dev/diyweb","image":"https://media.daily.dev/image/upload/s--dgS6jDeN--/f_auto/v1790879420/avatars/avatar_774zDwMaRTNS1fv5OKStX?_a=BAMAMicg0"}}]} ```