Coding: Creating Your Own Digital Pet

Published: 2025-08-22 Coding: Creating Your Own Digital Pet

For kids

Learn to code your very own digital pet! We'll use simple code to make a pet that can eat, play, and even get sleepy. Get ready to become a pet-coding expert!

What You'll Need

A computer with a web browser (like Chrome, Safari, or Firefox)
A text editor (like Notepad on Windows or TextEdit on Mac) or a code editor (like VS Code, which is free!)
Some patience and a sense of fun!

Let's Code Your Pet!

We'll create a simple pet using HTML, CSS, and a tiny bit of JavaScript. Don't worry if you don't know these languages; we'll break it down step by step!

Open your text editor. Create a new file and save it as "digital_pet.html". Make sure to save it with the ".html" extension.
Add the basic HTML structure. Type or copy and paste the following code into your "digital_pet.html" file:

<!DOCTYPE html>
<html>
<head>
  <title>My Digital Pet</title>
  <style>
    body {
      font-family: 'Comic Sans MS', cursive, sans-serif;
      text-align: center;
      background: linear-gradient(to bottom, #ffe6f0, #e6f7ff);
      margin: 0;
      padding: 20px;
    }

    h1 {
      color: #ff66a3;
      text-shadow: 2px 2px #fff;
    }

    #pet {
      width: 150px;
      height: 150px;
      background-color: lightblue;
      border-radius: 50%;
      margin: 20px auto;
      position: relative;
      box-shadow: 0 0 20px rgba(0,0,0,0.2);
      transition: transform 0.3s ease;
    }

    #pet:hover {
      transform: scale(1.1);
    }

    /* Eyes */
    .eye {
      width: 30px;
      height: 30px;
      background: white;
      border-radius: 50%;
      position: absolute;
      top: 40px;
    }
    .eye.left {
      left: 35px;
    }
    .eye.right {
      right: 35px;
    }
    .pupil {
      width: 15px;
      height: 15px;
      background: black;
      border-radius: 50%;
      margin: 7px;
    }

    /* Mouth */
    .mouth {
      width: 60px;
      height: 30px;
      border-bottom: 5px solid #cc0066;
      border-radius: 50%;
      position: absolute;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
    }

    button {
      margin: 10px;
      padding: 10px 20px;
      background-color: #ff66a3;
      color: white;
      border: none;
      border-radius: 20px;
      cursor: pointer;
      box-shadow: 0 4px #cc0066;
      transition: all 0.2s ease;
    }

    button:hover {
      background-color: #ff3385;
    }

    button:active {
      box-shadow: 0 2px #cc0066;
      transform: translateY(2px);
    }
  </style>
</head>
<body>
  <h1>My Digital Pet</h1>
  <div id="pet">
    <div class="eye left"><div class="pupil"></div></div>
    <div class="eye right"><div class="pupil"></div></div>
    <div class="mouth"></div>
  </div>
  <button onclick="feedPet()">🍎 Feed Me</button>
  <button onclick="playWithPet()">🎾 Play with Me</button>
  <button onclick="sleepyPet()">😴 Make Me Sleepy</button>
  <script>
    function feedPet() {
      alert("Yum! Thanks for the food! 🍎");
    }
    function playWithPet() {
      alert("Yay! Playing is fun!");
    }
    function sleepyPet() {
      alert("Zzzzz... I'm sleepy now!");
    }
  </script>
</body>
</html>

Open the HTML file in your browser. Double-click the "digital_pet.html" file (or right-click and select "Open with" your browser). You should see a blue circle and three buttons: "Feed Me", "Play with Me", and "Make Me Sleepy".
Try out the buttons. Click the buttons to see the alerts pop up!
How to Change the Pet's Appearance (Optional): Inside the <style> section, you can change the appearance of the "pet" div. For example, to make your pet pink and square, replace the "#pet" style rules with these:

    #pet {
      width: 100px;
      height: 100px;
      background-color: pink;
      border-radius: 0%; /* Makes it a square! */
      margin: 20px auto;
    }

How it Works

The HTML code creates the structure of our digital pet: the title, the pet "box" (the blue circle), and the buttons. The CSS code styles the pet, making it look nice. The JavaScript code is what makes the buttons do something when you click them. Each button calls a JavaScript function which, in this case, shows an alert box.

Try This Next!

Here are some ideas to make your digital pet even cooler:

Add more actions: Create buttons for different actions, like "Give a hug" or "Go for a walk."
Change the alerts: Instead of simple alerts, try displaying different images or sounds.
Make it interactive: Use JavaScript to change the pet's appearance (like making it smile or change colors) based on what the user does.

Have fun coding your digital pet and exploring the world of code! You can create anything you imagine with coding!