If you\u2019re a beginner or kid who’s learning to code, this JavaScript tutorial will show you how to create your own Easter Egg Hunt game using JavaScript and jQuery. You can personalize and hide Easter eggs for your friends and family to find.<\/p>\n\n\n\n
Complete this easy JavaScript tutorial to code your own Easter egg hunt.<\/strong><\/h2>\n\n\n\nPlay Easter Egg Hunt<\/a><\/strong><\/p>\n\n\n\n![\"JavaScript](\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2022\/03\/easter_complete-1024x453.jpg\")
<\/a><\/figure>\n\n\n\n\n\nTable of Contents<\/strong><\/p>\n\n\n\n\n- What you need<\/a><\/li>\n\n\n\n
- Step 1: Setup a JavaScript Function<\/a><\/li>\n\n\n\n
- Step 2: Add the Function Call<\/a><\/li>\n\n\n\n
- Step 3: Fade the Egg on Click<\/a><\/li>\n\n\n\n
- Step 4: Add a Score Variable<\/a><\/li>\n\n\n\n
- Step 5: Increase the Score By 1<\/a><\/li>\n\n\n\n
- Step 6: Update Score with New Score<\/a><\/li>\n\n\n\n
- Step 7: Add a Condition For Eggs Found<\/a><\/li>\n\n\n\n
- Step 8: Alert When All Eggs Are Found<\/a><\/li>\n\n\n\n
- Step 9: Your Game is Complete!<\/a><\/li>\n<\/ul>\n<\/div><\/div><\/div>\n\n<\/div><\/div><\/div>\n\n\n
What you need:<\/strong><\/h3>\n\n\n\n1. Text editor<\/strong><\/p>\n\n\n\nIn the project examples, we’ll be using the CodeWizardsHQ editor.<\/p>\n\n\n\n
You can use a simple text editor like Notepad, TextEdit, Sublime Text, etc. You may also use an online text editor like Repl.it to write and share your code.<\/p>\n\n\n\n
2. Base HTML, CSS, and image files.<\/strong><\/p>\n\n\n\nDownload the base folder<\/a> and open the easter.html file. This folder contains all the images and files you will need to complete your game. <\/p>\n\n\n\nCodeWizardsHQ students, you can download the starter files called \u201cx_easter_egg_hunt\u201d in your editor and easily share your project URL with family and friends. That\u2019s what I\u2019m using for my project!<\/p>\n\n\n\n
Recommended: <\/em><\/strong>HTML and CSS Coding Classes<\/em><\/a><\/p>\n\n\n\nStep 1: Setup a JavaScript Function<\/strong><\/h2>\n\n\n\nThe starter files setup the basic HTML and connects your CSS and jQuery. The eggs have been hidden and your goal is to add the JavaScript and jQuery code to collect the eggs and win the game.<\/p>\n\n\n\n
Open the easter.html<\/strong> file and find the <script> tag. Inside the <script> tag, set up a function called foundEgg().<\/p>\n\n\n\n\n\nfunction foundEgg(event) { <\/code><\/p>\n\n\n\n}<\/code><\/p>\n<\/div>\n\n\n\n\n![\"Easter](\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2022\/03\/js-easter-game-step1-1.jpg\")
<\/figure>\n<\/div>\n<\/div>\n\n\n\nStep 2: Add the function call<\/strong><\/h2>\n\n\n\nWe want to call our foundEgg() function for all elements with class .egg.<\/p>\n\n\n\n
Use a \u201cclick\u201d function to call the foundEgg() function. When an egg is clicked, the foundEgg() function will run.<\/p>\n\n\n\n
\n\n$('.egg').click(foundEgg);<\/code><\/p>\n<\/div>\n\n\n\n\n![\"Easter](\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2022\/03\/js-easter-game-step2-1.jpg\")
<\/figure>\n<\/div>\n<\/div>\n\n\n\nTip: Make sure your function call happens after your function definition and not inside.<\/p>\n\n\n\n
<\/div>\n\n\n\nStep 3: Fade the Egg on Click<\/strong><\/h2>\n\n\n\nCreate a variable called \u201cegg\u201d that is equal to the current target for the event. The \u201cclick\u201d is the mouse event and the current target is the egg.<\/p>\n\n\n\n
Then apply the jQuery fadeOut() function to the targeted element. In the fadeOut() function, add a parameter for the duration, or how long it takes to fade out, in milliseconds. When the egg is clicked it will now fade from view over 250 milliseconds. <\/p>\n\n\n\n
\n\nvar egg = $(event.currentTarget);<\/code><\/p>\n\n\n\negg.fadeOut(250);<\/code><\/p>\n<\/div>\n\n\n\n\n![\"Easter](\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2022\/03\/js-easter-game-step3-1.jpg\")
<\/figure>\n<\/div>\n<\/div>\n\n\n\nTip: You can select the current mouse or keyboard event with the event variable. Using the event variable is the same as accessing window.event.<\/p>\n\n\n\n
<\/div>\n\n\n\nStep 4: Add a Score Variable<\/strong><\/h2>\n\n\n\nTo keep track of how many eggs have been discovered, let\u2019s add a score. <\/p>\n\n\n\n
There is already a score element in your HTML where we can display the score. In the JavaScript, we need a variable to represent our score as it changes. Define the variable \u201cscore\u201d before your foundEgg() function.<\/p>\n\n\n\n
\n\nvar score = 0;<\/code><\/p>\n<\/div>\n\n\n\n\n![\"Easter](\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2022\/03\/js-easter-game-step4-1.jpg\")
<\/figure>\n<\/div>\n<\/div>\n\n\n\nStep 5: Increase the Score By 1<\/strong><\/h2>\n\n\n\nEvery time we click an egg, we want the score to increase by one. Increase the score variable by one inside of the foundEgg() function.<\/p>\n\n\n\n
\n\nscore = score + 1;<\/code><\/p>\n<\/div>\n\n\n\n\n![\"Easter](\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2022\/03\/js-easter-game-step5-1.jpg\")
<\/figure>\n<\/div>\n<\/div>\n\n\n\nTip: You can also increment by one using the ++ notation. In that case, you would write score = score++;<\/p>\n\n\n\n
<\/div>\n\n\n\nStep 6: Update Score with New Score<\/strong><\/h2>\n\n\n\nNow, we need to update the score on the screen. The variable has increased, but we need to display the new score. <\/p>\n\n\n\n
Select the div with id \u201cscore\u201d and update the text with the score variable using the text() function.<\/p>\n\n\n\n
\n\n$(\u201c#score\u201d).text(score);<\/code><\/p>\n<\/div>\n\n\n\n\n![\"Easter](\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2022\/03\/js-easter-game-step6-1.jpg\")
<\/figure>\n<\/div>\n<\/div>\n\n\n\nRecommended: <\/em><\/strong>JavaScript Coding for Kids<\/em><\/a><\/p>\n\n\n\nStep 7: Add a Condition For Eggs Found<\/strong><\/h2>\n\n\n\nUsing an if statement, we can set an alert when all of the eggs have been found. Since we have four eggs, we will use the condition if score >=4.<\/p>\n\n\n\n
\n\n if(score >= 4){<\/code><\/p>\n\n\n\n }<\/code><\/p>\n<\/div>\n\n\n\n\n![\"Easter](\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2022\/03\/js-easter-game-step7-1.jpg\")
<\/figure>\n<\/div>\n<\/div>\n\n\n\nStep 8: Alert When All Eggs Are Found<\/strong><\/h2>\n\n\n\nInside of the if statement, we will execute an alert that says \u201cYou found all of the eggs!\u201d. When the player finds four or more eggs, they will see this alert.<\/p>\n\n\n\n
\n\nalert('You found all of the eggs!');<\/code><\/p>\n<\/div>\n\n\n\n\n![\"Easter](\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2022\/03\/js-easter-game-step8-1.jpg\")
<\/figure>\n<\/div>\n<\/div>\n\n\n\nTip: Make sure your alert is inside of the if statement {}.<\/p>\n\n\n\n
<\/div>\n\n\n\nStep 9: Your game is complete!<\/strong><\/h2>\n\n\n\nNice work! You\u2019ve completed this simple JavaScript tutorial. Open the i_easter.html file to see the completed game code. <\/p>\n\n\n\n
Next, get creative and design your own theme or add additional hidden eggs with the bonus images. <\/p>\n\n\n\n
https:\/\/margaret.codewizardshq.com\/x_easter_egg_hunt\/i_easter.html<\/a><\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nRecommended: <\/em><\/strong>Kids Coding Websites<\/em><\/a><\/p>\n\n\n\nDownload JavaScript Projects Source Code<\/strong><\/h2>\n\n\n\nIf you want to get the code behind 7 different JavaScript projects, download the full source code for free. You can use this code as an example to add to or inspire new projects. Enter your email below:<\/p>\n\n\n\n\n\n\n
<\/div>\n\n\n\nLearn JavaScript with Live Coding Classes <\/strong><\/h2>\n\n\n\nIf you want to build more games in JavaScript, check out our coding programs for kids<\/a> ages 8-18. We teach coding classes in JavaScript<\/a> where students can learn to build interactive applications and websites. You will go from a JavaScript beginner to learning advanced JavaScript code with the most fun and effective coding classes for kids. <\/p>\n\n\n\nReady to level up your child\u2019s learning experience?<\/strong> Take a coding class with CodeWizardsHQ:<\/p>\n\n\n\n\n- Elementary School Coding Classes<\/a><\/li>\n\n\n\n
- Middle School Coding Classes<\/a><\/li>\n\n\n\n
- High School Coding Classes<\/a><\/li>\n<\/ul>\n\n\n\n
Happy Easter!<\/p>\n","protected":false},"excerpt":{"rendered":"
It\u2019s the time of year for candy and eggs, it\u2019s almost Easter! One of our favorite Easter traditions is the egg hunt. Whether you color the eggs, cook them, or go for the plastic variety, it\u2019s so much fun searching for the hidden Easter eggs. Let\u2019s use this real life game to practice coding a […]<\/p>\n","protected":false},"author":24,"featured_media":47803,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_lmt_disableupdate":"yes","_lmt_disable":"","footnotes":""},"categories":[10809,4758],"tags":[10815,10739,10814],"class_list":["post-47782","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-activities","category-learn-coding","tag-free-activities","tag-javascript","tag-tutorials"],"acf":[],"yoast_head":"\n
JavaScript Tutorial for Kids & Beginners: Easter Egg Hunt<\/title>\n<meta name=\"description\" content=\"Complete this easy JavaScript tutorial to code your own Easter egg hunt. Fun for kids and beginners to practice JavaScript and jQuery coding.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codewizardshq.com\/javascript-tutorial-easter-egg-hunt\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Tutorial: Easter Egg Hunt\" \/>\n<meta property=\"og:description\" content=\"Complete this easy JavaScript tutorial to code your own Easter egg hunt. Fun for kids and beginners to practice JavaScript and jQuery coding.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codewizardshq.com\/javascript-tutorial-easter-egg-hunt\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeWizardsHQ\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codewizardshq\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-11T16:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-04T06:34:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2022\/03\/JavaScript-Easter-Game-Social-Banner.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"600\" \/>\n\t<meta property=\"og:image:height\" content=\"323\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Margaret Choi\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codewizardshq\" \/>\n<meta name=\"twitter:site\" content=\"@codewizardshq\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Margaret Choi\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\n\t \"@context\": \"https:\/\/schema.org\",\n\t \"@graph\": [\n\t {\n\t \"@type\": \"Article\",\n\t \"@id\": \"https:\/\/www.codewizardshq.com\/javascript-tutorial-easter-egg-hunt\/#article\",\n\t \"isPartOf\": {\n\t \"@id\": \"https:\/\/www.codewizardshq.com\/javascript-tutorial-easter-egg-hunt\/\"\n\t },\n\t \"author\": {\n\t \"name\": \"Margaret Choi\",\n\t \"@id\": \"https:\/\/www.codewizardshq.com\/#\/schema\/person\/0d1794273fcc4d0b634d50375e00e1ca\"\n\t },\n\t \"headline\": \"JavaScript Tutorial: Easter Egg Hunt\",\n\t \"datePublished\": \"2022-03-11T16:00:00+00:00\",\n\t \"dateModified\": \"2023-08-04T06:34:26+00:00\",\n\t \"mainEntityOfPage\": {\n\t \"@id\": \"https:\/\/www.codewizardshq.com\/javascript-tutorial-easter-egg-hunt\/\"\n\t },\n\t \"wordCount\": 993,\n\t \"publisher\": {\n\t \"@id\": \"https:\/\/www.codewizardshq.com\/#organization\"\n\t },\n\t \"image\": {\n\t \"@id\": \"https:\/\/www.codewizardshq.com\/javascript-tutorial-easter-egg-hunt\/#primaryimage\"\n\t },\n\t \"thumbnailUrl\": \"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2022\/03\/JavaScript-Easter-Game-Banner.jpg\",\n\t \"keywords\": [\n\t \"free activities\",\n\t \"JavaScript\",\n\t \"tutorials\"\n\t ],\n\t \"articleSection\": [\n\t \"Activities\",\n\t \"Learn Coding\"\n\t ],\n\t \"inLanguage\": \"en-US\"\n\t },\n\t {\n\t \"@type\": \"WebPage\",\n\t \"@id\": \"https:\/\/www.codewizardshq.com\/javascript-tutorial-easter-egg-hunt\/\",\n\t \"url\": \"https:\/\/www.codewizardshq.com\/javascript-tutorial-easter-egg-hunt\/\",\n\t \"name\": \"JavaScript Tutorial for Kids & Beginners: Easter Egg Hunt\",\n\t \"isPartOf\": {\n\t \"@id\": \"https:\/\/www.codewizardshq.com\/#website\"\n\t },\n\t \"primaryImageOfPage\": {\n\t \"@id\": \"https:\/\/www.codewizardshq.com\/javascript-tutorial-easter-egg-hunt\/#primaryimage\"\n\t },\n\t \"image\": {\n\t \"@id\": \"https:\/\/www.codewizardshq.com\/javascript-tutorial-easter-egg-hunt\/#primaryimage\"\n\t },\n\t \"thumbnailUrl\": \"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2022\/03\/JavaScript-Easter-Game-Banner.jpg\",\n\t \"datePublished\": \"2022-03-11T16:00:00+00:00\",\n\t \"dateModified\": \"2023-08-04T06:34:26+00:00\",\n\t \"description\": \"Complete this easy JavaScript tutorial to code your own Easter egg hunt. Fun for kids and beginners to practice JavaScript and jQuery coding.\",\n\t \"breadcrumb\": {\n\t \"@id\": \"https:\/\/www.codewizardshq.com\/javascript-tutorial-easter-egg-hunt\/#breadcrumb\"\n\t },\n\t \"inLanguage\": \"en-US\",\n\t \"potentialAction\": [\n\t {\n\t \"@type\": \"ReadAction\",\n\t \"target\": [\n\t \"https:\/\/www.codewizardshq.com\/javascript-tutorial-easter-egg-hunt\/\"\n\t ]\n\t }\n\t ]\n\t },\n\t {\n\t \"@type\": \"ImageObject\",\n\t \"inLanguage\": \"en-US\",\n\t \"@id\": \"https:\/\/www.codewizardshq.com\/javascript-tutorial-easter-egg-hunt\/#primaryimage\",\n\t \"url\": \"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2022\/03\/JavaScript-Easter-Game-Banner.jpg\",\n\t \"contentUrl\": \"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2022\/03\/JavaScript-Easter-Game-Banner.jpg\",\n\t \"width\": 1600,\n\t \"height\": 395,\n\t \"caption\": \"JavaScript Easter Game Banner\"\n\t },\n\t {\n\t \"@type\": \"BreadcrumbList\",\n\t \"@id\": \"https:\/\/www.codewizardshq.com\/javascript-tutorial-easter-egg-hunt\/#breadcrumb\",\n\t \"itemListElement\": [\n\t {\n\t \"@type\": \"ListItem\",\n\t \"position\": 1,\n\t \"name\": \"Home\",\n\t \"item\": \"https:\/\/www.codewizardshq.com\/\"\n\t },\n\t {\n\t \"@type\": \"ListItem\",\n\t \"position\": 2,\n\t \"name\": \"JavaScript Tutorial: Easter Egg Hunt\"\n\t }\n\t ]\n\t },\n\t {\n\t \"@type\": \"WebSite\",\n\t \"@id\": \"https:\/\/www.codewizardshq.com\/#website\",\n\t \"url\": \"https:\/\/www.codewizardshq.com\/\",\n\t \"name\": \"CodeWizardsHQ\",\n\t \"description\": \"The leading online coding academy for kids and teens ages 8-18\",\n\t \"publisher\": {\n\t \"@id\": \"https:\/\/www.codewizardshq.com\/#organization\"\n\t },\n\t \"potentialAction\": [\n\t {\n\t \"@type\": \"SearchAction\",\n\t \"target\": {\n\t \"@type\": \"EntryPoint\",\n\t \"urlTemplate\": \"https:\/\/www.codewizardshq.com\/?s={search_term_string}\"\n\t },\n\t \"query-input\": {\n\t \"@type\": \"PropertyValueSpecification\",\n\t \"valueRequired\": true,\n\t \"valueName\": \"search_term_string\"\n\t }\n\t }\n\t ],\n\t \"inLanguage\": \"en-US\"\n\t },\n\t {\n\t \"@type\": \"Organization\",\n\t \"@id\": \"https:\/\/www.codewizardshq.com\/#organization\",\n\t \"name\": \"CodeWizardsHQ\",\n\t \"url\": \"https:\/\/www.codewizardshq.com\/\",\n\t \"logo\": {\n\t \"@type\": \"ImageObject\",\n\t \"inLanguage\": \"en-US\",\n\t \"@id\": \"https:\/\/www.codewizardshq.com\/#\/schema\/logo\/image\/\",\n\t \"url\": \"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2016\/08\/blueVertical@2x-e1572141901928.png\",\n\t \"contentUrl\": \"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2016\/08\/blueVertical@2x-e1572141901928.png\",\n\t \"width\": 150,\n\t \"height\": 108,\n\t \"caption\": \"CodeWizardsHQ\"\n\t },\n\t \"image\": {\n\t \"@id\": \"https:\/\/www.codewizardshq.com\/#\/schema\/logo\/image\/\"\n\t },\n\t \"sameAs\": [\n\t \"https:\/\/www.facebook.com\/codewizardshq\/\",\n\t \"https:\/\/x.com\/codewizardshq\",\n\t \"https:\/\/www.instagram.com\/codewizardshq\/\",\n\t \"https:\/\/www.linkedin.com\/company\/codewizardshq\",\n\t \"https:\/\/www.pinterest.com\/codewizardshq\/\",\n\t \"https:\/\/www.youtube.com\/channel\/UC4NM0jfN0LI8_vWtiwLqgGw\"\n\t ]\n\t },\n\t {\n\t \"@type\": \"Person\",\n\t \"@id\": \"https:\/\/www.codewizardshq.com\/#\/schema\/person\/0d1794273fcc4d0b634d50375e00e1ca\",\n\t \"name\": \"Margaret Choi\",\n\t \"image\": {\n\t \"@type\": \"ImageObject\",\n\t \"inLanguage\": \"en-US\",\n\t \"@id\": \"https:\/\/www.codewizardshq.com\/#\/schema\/person\/image\/\",\n\t \"url\": \"https:\/\/secure.gravatar.com\/avatar\/7815305d40218c8baa3db95a35d697293aad7b383484ae7e26b6383e0f67b6ba?s=96&d=mm&r=g\",\n\t \"contentUrl\": \"https:\/\/secure.gravatar.com\/avatar\/7815305d40218c8baa3db95a35d697293aad7b383484ae7e26b6383e0f67b6ba?s=96&d=mm&r=g\",\n\t \"caption\": \"Margaret Choi\"\n\t },\n\t \"description\": \"Instructor and marketing manager at CodeWizardsHQ since 2019. She breaks down topics around coding and specific coding languages for kids to understand.\",\n\t \"sameAs\": [\n\t \"https:\/\/www.facebook.com\/margaret.choi.3\"\n\t ],\n\t \"url\": \"https:\/\/www.codewizardshq.com\/author\/margaretchoi\/\"\n\t }\n\t ]\n\t}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"JavaScript Tutorial for Kids & Beginners: Easter Egg Hunt","description":"Complete this easy JavaScript tutorial to code your own Easter egg hunt. Fun for kids and beginners to practice JavaScript and jQuery coding.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codewizardshq.com\/javascript-tutorial-easter-egg-hunt\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Tutorial: Easter Egg Hunt","og_description":"Complete this easy JavaScript tutorial to code your own Easter egg hunt. Fun for kids and beginners to practice JavaScript and jQuery coding.","og_url":"https:\/\/www.codewizardshq.com\/javascript-tutorial-easter-egg-hunt\/","og_site_name":"CodeWizardsHQ","article_publisher":"https:\/\/www.facebook.com\/codewizardshq\/","article_published_time":"2022-03-11T16:00:00+00:00","article_modified_time":"2023-08-04T06:34:26+00:00","og_image":[{"width":600,"height":323,"url":"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2022\/03\/JavaScript-Easter-Game-Social-Banner.jpg","type":"image\/jpeg"}],"author":"Margaret Choi","twitter_card":"summary_large_image","twitter_creator":"@codewizardshq","twitter_site":"@codewizardshq","twitter_misc":{"Written by":"Margaret Choi","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codewizardshq.com\/javascript-tutorial-easter-egg-hunt\/#article","isPartOf":{"@id":"https:\/\/www.codewizardshq.com\/javascript-tutorial-easter-egg-hunt\/"},"author":{"name":"Margaret Choi","@id":"https:\/\/www.codewizardshq.com\/#\/schema\/person\/0d1794273fcc4d0b634d50375e00e1ca"},"headline":"JavaScript Tutorial: Easter Egg Hunt","datePublished":"2022-03-11T16:00:00+00:00","dateModified":"2023-08-04T06:34:26+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codewizardshq.com\/javascript-tutorial-easter-egg-hunt\/"},"wordCount":993,"publisher":{"@id":"https:\/\/www.codewizardshq.com\/#organization"},"image":{"@id":"https:\/\/www.codewizardshq.com\/javascript-tutorial-easter-egg-hunt\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2022\/03\/JavaScript-Easter-Game-Banner.jpg","keywords":["free activities","JavaScript","tutorials"],"articleSection":["Activities","Learn Coding"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codewizardshq.com\/javascript-tutorial-easter-egg-hunt\/","url":"https:\/\/www.codewizardshq.com\/javascript-tutorial-easter-egg-hunt\/","name":"JavaScript Tutorial for Kids & Beginners: Easter Egg Hunt","isPartOf":{"@id":"https:\/\/www.codewizardshq.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codewizardshq.com\/javascript-tutorial-easter-egg-hunt\/#primaryimage"},"image":{"@id":"https:\/\/www.codewizardshq.com\/javascript-tutorial-easter-egg-hunt\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2022\/03\/JavaScript-Easter-Game-Banner.jpg","datePublished":"2022-03-11T16:00:00+00:00","dateModified":"2023-08-04T06:34:26+00:00","description":"Complete this easy JavaScript tutorial to code your own Easter egg hunt. Fun for kids and beginners to practice JavaScript and jQuery coding.","breadcrumb":{"@id":"https:\/\/www.codewizardshq.com\/javascript-tutorial-easter-egg-hunt\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codewizardshq.com\/javascript-tutorial-easter-egg-hunt\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codewizardshq.com\/javascript-tutorial-easter-egg-hunt\/#primaryimage","url":"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2022\/03\/JavaScript-Easter-Game-Banner.jpg","contentUrl":"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2022\/03\/JavaScript-Easter-Game-Banner.jpg","width":1600,"height":395,"caption":"JavaScript Easter Game Banner"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codewizardshq.com\/javascript-tutorial-easter-egg-hunt\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codewizardshq.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript Tutorial: Easter Egg Hunt"}]},{"@type":"WebSite","@id":"https:\/\/www.codewizardshq.com\/#website","url":"https:\/\/www.codewizardshq.com\/","name":"CodeWizardsHQ","description":"The leading online coding academy for kids and teens ages 8-18","publisher":{"@id":"https:\/\/www.codewizardshq.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codewizardshq.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codewizardshq.com\/#organization","name":"CodeWizardsHQ","url":"https:\/\/www.codewizardshq.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codewizardshq.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2016\/08\/blueVertical@2x-e1572141901928.png","contentUrl":"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2016\/08\/blueVertical@2x-e1572141901928.png","width":150,"height":108,"caption":"CodeWizardsHQ"},"image":{"@id":"https:\/\/www.codewizardshq.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codewizardshq\/","https:\/\/x.com\/codewizardshq","https:\/\/www.instagram.com\/codewizardshq\/","https:\/\/www.linkedin.com\/company\/codewizardshq","https:\/\/www.pinterest.com\/codewizardshq\/","https:\/\/www.youtube.com\/channel\/UC4NM0jfN0LI8_vWtiwLqgGw"]},{"@type":"Person","@id":"https:\/\/www.codewizardshq.com\/#\/schema\/person\/0d1794273fcc4d0b634d50375e00e1ca","name":"Margaret Choi","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codewizardshq.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7815305d40218c8baa3db95a35d697293aad7b383484ae7e26b6383e0f67b6ba?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7815305d40218c8baa3db95a35d697293aad7b383484ae7e26b6383e0f67b6ba?s=96&d=mm&r=g","caption":"Margaret Choi"},"description":"Instructor and marketing manager at CodeWizardsHQ since 2019. She breaks down topics around coding and specific coding languages for kids to understand.","sameAs":["https:\/\/www.facebook.com\/margaret.choi.3"],"url":"https:\/\/www.codewizardshq.com\/author\/margaretchoi\/"}]}},"modified_by":"Dima","featured_image_src":"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2022\/03\/JavaScript-Easter-Game-Banner-600x395.jpg","featured_image_src_square":"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2022\/03\/JavaScript-Easter-Game-Banner-600x395.jpg","author_info":{"display_name":"Margaret Choi","author_link":"https:\/\/www.codewizardshq.com\/author\/margaretchoi\/"},"_links":{"self":[{"href":"https:\/\/www.codewizardshq.com\/wp-json\/wp\/v2\/posts\/47782","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codewizardshq.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codewizardshq.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codewizardshq.com\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codewizardshq.com\/wp-json\/wp\/v2\/comments?post=47782"}],"version-history":[{"count":2,"href":"https:\/\/www.codewizardshq.com\/wp-json\/wp\/v2\/posts\/47782\/revisions"}],"predecessor-version":[{"id":71698,"href":"https:\/\/www.codewizardshq.com\/wp-json\/wp\/v2\/posts\/47782\/revisions\/71698"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codewizardshq.com\/wp-json\/wp\/v2\/media\/47803"}],"wp:attachment":[{"href":"https:\/\/www.codewizardshq.com\/wp-json\/wp\/v2\/media?parent=47782"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codewizardshq.com\/wp-json\/wp\/v2\/categories?post=47782"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codewizardshq.com\/wp-json\/wp\/v2\/tags?post=47782"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/a><\/figure>\n\n\nTable of Contents<\/strong><\/p>\n\n\n\n 1. Text editor<\/strong><\/p>\n\n\n\n In the project examples, we’ll be using the CodeWizardsHQ editor.<\/p>\n\n\n\n You can use a simple text editor like Notepad, TextEdit, Sublime Text, etc. You may also use an online text editor like Repl.it to write and share your code.<\/p>\n\n\n\n 2. Base HTML, CSS, and image files.<\/strong><\/p>\n\n\n\n Download the base folder<\/a> and open the easter.html file. This folder contains all the images and files you will need to complete your game. <\/p>\n\n\n\n CodeWizardsHQ students, you can download the starter files called \u201cx_easter_egg_hunt\u201d in your editor and easily share your project URL with family and friends. That\u2019s what I\u2019m using for my project!<\/p>\n\n\n\n Recommended: <\/em><\/strong>HTML and CSS Coding Classes<\/em><\/a><\/p>\n\n\n\n The starter files setup the basic HTML and connects your CSS and jQuery. The eggs have been hidden and your goal is to add the JavaScript and jQuery code to collect the eggs and win the game.<\/p>\n\n\n\n Open the easter.html<\/strong> file and find the <script> tag. Inside the <script> tag, set up a function called foundEgg().<\/p>\n\n\n\n We want to call our foundEgg() function for all elements with class .egg.<\/p>\n\n\n\n Use a \u201cclick\u201d function to call the foundEgg() function. When an egg is clicked, the foundEgg() function will run.<\/p>\n\n\n\n Tip: Make sure your function call happens after your function definition and not inside.<\/p>\n\n\n\n Create a variable called \u201cegg\u201d that is equal to the current target for the event. The \u201cclick\u201d is the mouse event and the current target is the egg.<\/p>\n\n\n\n Then apply the jQuery fadeOut() function to the targeted element. In the fadeOut() function, add a parameter for the duration, or how long it takes to fade out, in milliseconds. When the egg is clicked it will now fade from view over 250 milliseconds. <\/p>\n\n\n\n Tip: You can select the current mouse or keyboard event with the event variable. Using the event variable is the same as accessing window.event.<\/p>\n\n\n\n To keep track of how many eggs have been discovered, let\u2019s add a score. <\/p>\n\n\n\n There is already a score element in your HTML where we can display the score. In the JavaScript, we need a variable to represent our score as it changes. Define the variable \u201cscore\u201d before your foundEgg() function.<\/p>\n\n\n\n Every time we click an egg, we want the score to increase by one. Increase the score variable by one inside of the foundEgg() function.<\/p>\n\n\n\n Tip: You can also increment by one using the ++ notation. In that case, you would write score = score++;<\/p>\n\n\n\n Now, we need to update the score on the screen. The variable has increased, but we need to display the new score. <\/p>\n\n\n\n Select the div with id \u201cscore\u201d and update the text with the score variable using the text() function.<\/p>\n\n\n\n Recommended: <\/em><\/strong>JavaScript Coding for Kids<\/em><\/a><\/p>\n\n\n\n Using an if statement, we can set an alert when all of the eggs have been found. Since we have four eggs, we will use the condition if score >=4.<\/p>\n\n\n\n Inside of the if statement, we will execute an alert that says \u201cYou found all of the eggs!\u201d. When the player finds four or more eggs, they will see this alert.<\/p>\n\n\n\n Tip: Make sure your alert is inside of the if statement {}.<\/p>\n\n\n\n Nice work! You\u2019ve completed this simple JavaScript tutorial. Open the i_easter.html file to see the completed game code. <\/p>\n\n\n\n Next, get creative and design your own theme or add additional hidden eggs with the bonus images. <\/p>\n\n\n\n https:\/\/margaret.codewizardshq.com\/x_easter_egg_hunt\/i_easter.html<\/a><\/p>\n\n\n\n Recommended: <\/em><\/strong>Kids Coding Websites<\/em><\/a><\/p>\n\n\n\n If you want to get the code behind 7 different JavaScript projects, download the full source code for free. You can use this code as an example to add to or inspire new projects. Enter your email below:<\/p>\n\n\n\n\n\n\n If you want to build more games in JavaScript, check out our coding programs for kids<\/a> ages 8-18. We teach coding classes in JavaScript<\/a> where students can learn to build interactive applications and websites. You will go from a JavaScript beginner to learning advanced JavaScript code with the most fun and effective coding classes for kids. <\/p>\n\n\n\n Ready to level up your child\u2019s learning experience?<\/strong> Take a coding class with CodeWizardsHQ:<\/p>\n\n\n\n Happy Easter!<\/p>\n","protected":false},"excerpt":{"rendered":" It\u2019s the time of year for candy and eggs, it\u2019s almost Easter! One of our favorite Easter traditions is the egg hunt. Whether you color the eggs, cook them, or go for the plastic variety, it\u2019s so much fun searching for the hidden Easter eggs. Let\u2019s use this real life game to practice coding a […]<\/p>\n","protected":false},"author":24,"featured_media":47803,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_lmt_disableupdate":"yes","_lmt_disable":"","footnotes":""},"categories":[10809,4758],"tags":[10815,10739,10814],"class_list":["post-47782","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-activities","category-learn-coding","tag-free-activities","tag-javascript","tag-tutorials"],"acf":[],"yoast_head":"\n\n
What you need:<\/strong><\/h3>\n\n\n\n
Step 1: Setup a JavaScript Function<\/strong><\/h2>\n\n\n\n
function foundEgg(event) { <\/code><\/p>\n\n\n\n}<\/code><\/p>\n<\/div>\n\n\n\n<\/figure>\n<\/div>\n<\/div>\n\n\n\nStep 2: Add the function call<\/strong><\/h2>\n\n\n\n
$('.egg').click(foundEgg);<\/code><\/p>\n<\/div>\n\n\n\n<\/figure>\n<\/div>\n<\/div>\n\n\n\nStep 3: Fade the Egg on Click<\/strong><\/h2>\n\n\n\n
var egg = $(event.currentTarget);<\/code><\/p>\n\n\n\negg.fadeOut(250);<\/code><\/p>\n<\/div>\n\n\n\n<\/figure>\n<\/div>\n<\/div>\n\n\n\nStep 4: Add a Score Variable<\/strong><\/h2>\n\n\n\n
var score = 0;<\/code><\/p>\n<\/div>\n\n\n\n<\/figure>\n<\/div>\n<\/div>\n\n\n\nStep 5: Increase the Score By 1<\/strong><\/h2>\n\n\n\n
score = score + 1;<\/code><\/p>\n<\/div>\n\n\n\n<\/figure>\n<\/div>\n<\/div>\n\n\n\nStep 6: Update Score with New Score<\/strong><\/h2>\n\n\n\n
$(\u201c#score\u201d).text(score);<\/code><\/p>\n<\/div>\n\n\n\n<\/figure>\n<\/div>\n<\/div>\n\n\n\nStep 7: Add a Condition For Eggs Found<\/strong><\/h2>\n\n\n\n
if(score >= 4){<\/code><\/p>\n\n\n\n}<\/code><\/p>\n<\/div>\n\n\n\n<\/figure>\n<\/div>\n<\/div>\n\n\n\nStep 8: Alert When All Eggs Are Found<\/strong><\/h2>\n\n\n\n
alert('You found all of the eggs!');<\/code><\/p>\n<\/div>\n\n\n\n<\/figure>\n<\/div>\n<\/div>\n\n\n\nStep 9: Your game is complete!<\/strong><\/h2>\n\n\n\n
<\/a><\/figure>\n\n\n\nDownload JavaScript Projects Source Code<\/strong><\/h2>\n\n\n\n
Learn JavaScript with Live Coding Classes <\/strong><\/h2>\n\n\n\n
\n