Introduction: How to Add Easter Egg Cookies to Your Website!

By GitHub
About: Electronics and Software Hobbyist. Let's see what I come up with... into #DoctorWho, #ESP8266, #Arduino, #WebDevelopment

Do you have a website? Do you like easter eggs?

Well then this instructable is for you!

This will show how to add a superfluous little easter egg cookie to your website that people who are smart enough and are browsing it can find.

"An HTTP cookie is a small piece of data sent from a website and stored in a user's web browser while the user is browsing that website. Every time the user loads the website, the browser sends the cookie back to the server to notify the website of the user's previous activity. Cookies were designed to be a reliable mechanism for websites to remember stateful information (such as items in a shopping cart) or to record the user's browsing activity (including clicking particular buttons, logging in, or recording which pages were visited by the user as far back as months or years ago)." -Wikipedia

Step 1: Software Needed

To make/edit your website you will need just about any text editor, I used Xcode because it has proper syntax highlighting, but you can use what ever you want, note that it should be able to open .html files.

And of course you will need a web browser, any will do.

Step 2: Make Your Website

If you already have a website then skip this step.

1. To make a new web page download the "Base.html" file and open it with your text editor.

2. Then you can change the title of your website where it says "Title Goes Here"

3. Then you can edit your contents in the <body> </body> section, If you want some free script to do cool stuff that you can just copy and paste onto it check this out.

For my webpage I just named it "Cookie Land" and made it display some images of cookies.

Attachments

Step 3: Add the Secret Cookie

Now you can add your cookie!

Just copy and paste the following code to the section:

<SCRIPT>
//Add Cookie!
expireDate = new Date
expireDate.setMonth(expireDate.getMonth()+6)
document.cookie = "Easter Egg Cookie="+"You_found_the_Easter_Egg_Cookie"+";expires=" + expireDate.toGMTString()
</SCRIPT>

Then replace "Easter Egg Cookie" with the name of the cookie you want, and replace "You_found_the_Easter_Egg_Cookie" with whatever you want the contents to be, keep in mind there should be no spaces.

Then save your file and you are done!

How it Works:

<SCRIPT> --> Starts script section

expireDate = new Date --> Set the cookie expire date to todays date

expireDate.setMonth(expireDate.getMonth()+6) --> Set the cookie to expire 6 mo nths fromtodays date

document.cookie = "Easter Egg Cookie="+"You_found_the_Easter_Egg_Cookie"+";expires=" + expireDate.toGMTString() --> Create the cookie with it's name, value & Expire date

</SCRIPT> --> Ends script section

Step 4: Finding the Cookie

*SPOILER ALERT*

THIS WILL SHOW YOU HOW TO FIND THE COOKIE

  1. Close your text editor.
  2. Rename Base.html to your webpage name.
  3. Open you webpage.
  4. If you followed this instructable correctly and your code is right the page should load normally.
  5. On your browser got to the URL bar.
  6. Click on the little file icon.
  7. It will display website cookies and certificates, click on "show cookies/site data"
  8. Follow the tree down until you get to your cookie, then you can see it's contents!

Step 5: Trouble Shooting

If there are no cookies check your code or download Cookie Land from the last step and customize that.

If your cookies are blocked:

  1. Go to your preferences.
  2. Go to privacy settings.
  3. Click on content settings.
  4. make sure that cookies are set to allow local data to be set.
  5. make sure java script is allowed to run

If you have more problems comment and i'll try to help you.

Step 6: Done!

Now you have added an easter egg cookie to your web page!

the code for Cookie Land is for download below, You can do what ever you want with it!

Attachments