Easter Egg 🐇🥚 Hunt Anyone? - Add ASCII Art to the console log
Tags: javascript, challenge, webdev, codenewbie
Published: 2020-04-08 19:01:31

---
title: Easter Egg 🐇🥚 Hunt Anyone? - Add ASCII Art to the console log
published: true
description: Add an Easter Egg to website with ASCII Art and console.log.
tags: javascript, challenge, webdev, codenewbie
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/i8an3kcpiuls8y3g4xpr.png
---

As Easter is upon us and we're all trying to bring some happiness in these hard times. Why not add an Easter Egg 🐇🥚 to your website or client websites?

**TLDR;** - It's quick and easy, just generate the ASCII art and use `console.log`.

# DEV Easter Egg
Did you know that dev.to has this Easter Egg?

If you've ever opened the development tools of your favourite browser (<kbd>F12</kbd>) when visiting the dev.to website you probably all ready seen the ASCII art displayed in the console logs.

```
-oooooooo/-      .+ooooooooo:  +ooo+        oooo/
+MMMMMMMMMMm+   -NMMMMMMMMMMs  +MMMM:      /MMMM/
+MMMNyyydMMMMy  /MMMMyyyyyyy/   mMMMd      mMMMd
+MMMm    :MMMM. /MMMN           /MMMM/    /MMMM:
+MMMm    .MMMM- /MMMN            dMMMm    mMMMh
+MMMm    .MMMM- /MMMMyyyy+       :MMMM/  +MMMM-
+MMMm    .MMMM- /MMMMMMMMy        hMMMm  NMMMy
+MMMm    .MMMM- /MMMMoooo:        -MMMM+oMMMM-
+MMMm    .MMMM- /MMMN              yMMMmNMMMy
+MMMm    +MMMM. /MMMN              .MMMMMMMM.
+MMMMdddNMMMMo  /MMMMddddddd+       sMMMMMMs
+MMMMMMMMMNh:   .mMMMMMMMMMMs        yMMMMs
.///////:-        -/////////-         .::.

```
<figcaption>Output on the console log with dev tools opened when visiting dev.to.</figcaption>

And thought that looks awesome.

# How Do I Add That To My Site?

First we need a way to convert text to ASCII art, I've used the following npm package `figlet-cli`, which can be executed on the command line.

<blockquote><strong>Note:</strong> Other packages or applications are available.</blockquote>

https://www.npmjs.com/package/figlet-cli

```bash
npx figlet-cli "Raven Code"
```
<blockquote><strong>Note:</strong> Used npx to install as we don't need as a global package.</blockquote>

This will generate the following output using the default font.

```
  ____                          ____          _      
 |  _ \ __ ___   _____ _ __    / ___|___   __| | ___
 | |_) / _` \ \ / / _ \ '_ \  | |   / _ \ / _` |/ _ \
 |  _ < (_| |\ V /  __/ | | | | |__| (_) | (_| |  __/
 |_| \_\__,_| \_/ \___|_| |_|  \____\___/ \__,_|\___|
```

Now to output this to the console we have to escape the special characters using a `\` (backslash) and terminating each line with `\n\` (a new line `\n` and the backlash to indicate the string spans multiple lines).

```javascript
console.log(
      "     ____                          ____          _\n\
    |  _ \\ __ ___   _____ _ __    / ___|___   __| | ___\n\
    | |_) / _` \\ \\ / / _ \\ '_ \\  | |   / _ \\ / _` |/ _ \\\n\
    |  _ < (_| |\\ V /  __/ | | | | |__| (_) | (_| |  __/\n\
    |_| \\_\\__,_| \\_/ \\___|_| |_|  \\____\\___/ \\__,_|\\___|"
    )
```
<blockquote><strong>Note:</strong> Could use `Template Literals` in ES6 as this supports multiline strings and you wouldn't need the \n\ syntax.</blockquote>

# Change The Font

The `figlet-cli` package supports other command line parameters, one of those being the `-f` flag. Specifying this option determines the font used to generate the ASCII art.

To see the list of fonts supported use the following command:

```bash
npx figlet-cli -l
```

To use a font called `ANSI Shadow`, use the following command:

```bash
npx figlet-cli -f "ANSI Shadow" "Raven Code"
```

This will generate the following output using the `ANSI Shadow` font.

```bash
██████╗  █████╗ ██╗   ██╗███████╗███╗   ██╗     ██████╗ ██████╗ ██████╗ ███████╗
██╔══██╗██╔══██╗██║   ██║██╔════╝████╗  ██║    ██╔════╝██╔═══██╗██╔══██╗██╔════╝
██████╔╝███████║██║   ██║█████╗  ██╔██╗ ██║    ██║     ██║   ██║██║  ██║█████╗
██╔══██╗██╔══██║╚██╗ ██╔╝██╔══╝  ██║╚██╗██║    ██║     ██║   ██║██║  ██║██╔══╝
██║  ██║██║  ██║ ╚████╔╝ ███████╗██║ ╚████║    ╚██████╗╚██████╔╝██████╔╝███████╗
```

So what are you waiting for get creative!

## Extra Creative

If you want to go the extra mile and convert an image to ASCII art than look at the `ascii-art` npm package.

https://www.npmjs.com/package/ascii-art

Again this can be installed via `npx` using the following command:

```bash
npx ascii-art image path/to/image.png
```
<blockquote><strong>Note:</strong> This package also supports generating text to ASCII art. However, the font support seem to be limited.</blockquote>

You could use this to generate ASCII art for your logo and output this on the console.log.

# The Easter Egg Hunt 🐇🥚🔍

Let's do a virtual Easter Egg Hunt and hunt down those websites that have an Easter Egg, list the best in the comments below. So get hunting!

# Resources

https://dev.to
https://www.npmjs.com/package/figlet-cli
https://github.com/khrome/ascii-art