Virtual Pet

CSS HTML Javascript

Friday, November 1, 2024

Demo
Github

Introduction

Try the Demo Here:

https://codesuzyworld.github.io/VirtualPet/

Virtual Pet is a virtual pet website powered with local storage. Feed and pet your little dumpling and watch it grow!

virtualpet

Features

Create your pet
Name your pet and adopt!
Hunger and Mood
Hunger and mood depletes as time goes by, so remember to play and feed with the pet!
Pet Adoption
If you decide to send the pet away, you can always send it to adoption.

Tech

FRONTEND - Vanilla HTML, CSS and Javascript
  • Front-end rendering done in plain, simple HTML and CSS! Very lightweight and fast.
  • Written in vanilla JS, it uses local storage to store the date the user adopted the pet and form validation for pet naming
  • The stats will update in real time while the user is on the website, and will also update when the user is back.
  • The character portrait is rendered dynamically in layers.
DESIGN - Figma and Illustrator
  • Design of application and user flow done in Figma
  • Illustration of the dynamic pet portrait done in Adobe Illustrator

Dynamic Pet Portrait

  • The character portrait is rendered dynamically in layers.
  • Graphics are created in Adobe Illustrator and exported in transparent PNG