Resource	Difficulty	HTML Difficulty	CSS Difficulty	Javascript Difficulty	Jquery Difficulty
Mailbox/Inventory	4/5	2/5	4/5	4/5	4/5

Mailbox/Inventory LIVE Demo and Code
[UNFINISHED WORK IN PROGRESS CODE]
[COPY + PASTE THE CODE BELOW]

What is it?

Screenshot of the chat/inventory system I am creating for my site. The app has a scrolling box of messages, a disabled textbox for sending messages, and another tab labeled 'Inventory'. — Screenshot of my mailbox/inventory system as of 12/1/2022

Screenshot of the chat/inventory system I am creating for my site, but this time it is for another site, and has a different color scheme and styling — Screenshot of the mailbox/inventory system implemented on my wifes' website as of 12/1/2022

You probably got here one of two ways! Either you got here by visiting my resources page and following the link to the one you're on now, or you clicked the link in my mailbox/inventory component. Either way, here's a quick explanation of what this page is:

This page and code are a work in progress, but in theory this page is a live demo of the inventory/"chat"/mailbox system I've been working on in my website, and this page is also a where the code can be made available so anyone can copy + paste the mailbox/inventory directly into their projects if they're interested in using all or part of it! Click the arrow in the bottom left corner, or click one of the buttons below this section and try doing stuff :-) Although the caveat to that is that the code for the inventory/chat component is at the bottom of the page for anyone who is navigating without the cursor, and the accessibility of the notifications is a work in progress.

Ok so what does it do? Can I talk to other people with it?

No, it's not a "real" mailbox with another person on the other side sending you messages in real-time, but instead it's a faux-chatbox/inventory like you might see in a point and click game, that can trigger messages to appear (as well as notifications to alert users of those messages), and an inventory system that allows the user to collect "items" or store them for later use (although there is currently no "USE ITEM" functionality).

Why use it? To add an element of exploration and intrigue to my website! I love websites that have easter eggs and hidden interactive elements! I want my website to be the same way, so I decided to build a reusable component that could both display messages, and include an inventory, with plans to expand the functionality significantly as I go along!

Hide and unhide chat box
Display notification for new/unread messages/inventory items
- "Read" messages/inventory item notifications and clear them
View chat tab or inventory tab
Add items
Add messages

What can I do with it?

Use full code
Use parts of the code
Alter CSS
Alter HTML
Alter Javascript/jQuery

Prerequisites

You don't need to be an expert in HTML, CSS, Javascript, or JQuery to copy + paste this code into your website. I have added comments to the code to explain what each piece is doing in the HTML, CSS, and Javascript files, however the following skills are helpful if you want to edit any of the files (which you will need to do to at least the Javascript files in order to add your messages/inventory items and the Javascript functions to trigger them).

Basic HTML skills. You should be able to understand how to use ids and classes
If you want to change the styling, being versed in common CSS properties/selectors is important. The more complicated selectors include things like :nth-of-type and :nth-child(Xn + X). Some of the more "complex" properties/values include things like CSS varialbes (--variable-name), CSS animations, and CSS transitions
Basic knowledge of what Javascript is, and enough familiarity and/or ability to Google to be able to add "click events" (or other interactive "events") based on
Ability to read and/or learn how to read JQuery selectors (which look like this: $('#html-element-id') with the '#html-element-id' representing an id, but which can be replaced with any valid CSS selector)

Code + Attribution Guidelines

If you came here via the inventory/chat link

I thought I'd document my process and make the code available for anyone to use (as if it isn't already for anyone who was dedicated ). I'll be updating this as I go, so there might be more when you see me again.

So if you want to use this code for your site/project, or just want to read my explanation of it for some reason, keep reading!

Inspiration

I looove point and click games (like Myst and Riven), point and click "games" (like 99 Rooms, and Kong Studios), and websites/online content with lots of hidden easter eggs etc. that take advantage of the web medium (Homestar Runner during the Flash days, Kong Studios again, This House Has People In It, lots of cool Neocities sites, old Neopets, etc.). I've wanted to make something like that since I was a kid, but I'm not good at linear storytelling. This site is a place to store my art, but it's also a place for me to make a den/cave where I can hang the contents of my brain on the digital walls. :-)

Method

I wanted to make my site a place where you can explore and interact with stuff and not just look at stuff. The first thing I added was the fridge ad/gem on the home page. At first there was no indication that the vegetables were clickable until I decided to add a drop shadow on :hover. But even then, I felt like when I added other little easter eggs like the one in the gem ad, I wasn't sure how to let people know that you can and should click on things, or hover over things in my site to find hidden stuff. I made a list of what I thought wasn't working about my site, and where I wanted it to be, and eventually it was more obvious that adding an inventory system would be a good direction to go to encourage people to try clicking/hovering on stuff in my site.

Tools used to build so far:

HTML
CSS
Javascript
JQuery

Tools to be used with later features:

Session Storage

URGENT MESSAGE BEFORE YOU GET TO THE CODE

This code is still a work in progress, so it has very few accessibility features built in right now. For instance, the notification that pops up when you have an unread message isn't using the "aria-live" property yet, so that change might not be caught by a screen reader, or if it is, it may not be communicated to the user/you properly because the button isn't labelled dynamically right now (I might fix that right now, though, but you get the idea).

If you decide to use all or part of this code somewhere, I hope you'll put in the time to bring it up to speed accessibility-wise! Also it's just not finished in any sense. Right now you can't do anything with inventory items, and I want to give the inventory items buttons that appear if you click them to perform actions with them or see flavor text or trigger events or something. I'll update as I go! :) - 09/05/2022

Attribution

If you use this code, I'd appreciate, but won't require, attribution of some kind (whether it's in your footer, a "credits" page, or even just an HTML comment). Ideally it would be something along these lines (though feel free to modify the wording to suit your site):

Inventory/Chatbox code by Moonflute

And/or you can link to my site with a button:

HTML - Structure

<div id="mailbox__wrapper" class="mailbox sp-positioning-in">
    <div id="mailbox__box">
        <div id="mailbox__header">
        
        <button id="mailbox__minmax" aria-label="Maximize mailbox window" style="transform:rotate(45deg)"><==</button>
        <button id="mailbox__header__mailbox-btn" class="mailbox__tab">
            Mailbox
        </button>
        <button id="mailbox__header__inventory-btn" class="mailbox__tab">
            Inventory
        </button>
        </div>
        <div id="mailbox__body">
        
        <div id="mailbox__body__mailbox-wrapper">
            
            
        </div>
        
        <div id="mailbox__body__inventory-wrapper">
        </div>
        </div>
        <div id="mailbox__footer">
        <div id="mailbox__footer__mailbox-wrapper">
            <textarea disabled="true">Send a message?</textarea>
            <button disabled="true">Send</button>
        </div>
            <div id="mailbox__footer__inventory-wrapper">
            <p>Do you like scavenger hunts?</p>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="./code/mailbox.js"></script>
<script type="text/javascript" src="./code/mailbox__resources-page.js"></script>

CSS - Styling

This needs to be simplified and reorganized...

/*chat box */
/* Change the color palette as desired as desired */
#chatbox {
border: 10px solid orangered;
bottom: 0;
box-shadow: 0 0 10px black;
box-sizing: border-box;
color: black;
height: 500px;
position: fixed;
right: 0;
width: 400px;
/* This puts the chatbox mostly off-screen except for a 100x100px section  */
transform: translate(300px, 400px);
/* The higher z index makes it so the box is always on top of other elements, although you may have to raise the number if you're one of those people who regularly sets z-indexes to 9999 */
z-index: 99;
}

.chat,
.chat #chatbox__body {
background-color: black;
}

/* Making sure that the inventory is invisible when on the chat tab and vice versa */
.chat #chatbox__body__inventory-wrapper,
.inventory #chatbox__body__chat-wrapper,
.chat #chatbox__footer__inventory-wrapper,
.inventory #chatbox__footer__chat-wrapper {
display: none;
}

/* Setting the color scheme to be slightly different from the chat tab */
.inventory,
.inventory #chatbox__body,
.inventory #chatbox__footer {
background-color: maroon;
color: ivory;
}

/* I like using a lot of ol's and ul's (ordered lists and unordered lists) to semantically describe collections of UI elements. Since an inventory is a list of items, it makes sense to me to use a list to describe them. */
/* I need to do research into whether I should do the same for the messages */
#chatbox__body__inventory-list {
display: flex;
flex-wrap: wrap;
flex-direction: row;
/ * Gets rid of bullets/numbers in list */
list-style: none;
margin: 0;
padding: 0;
}

#chatbox__body__inventory-list li {
height: 150px;
margin: 0 5px 20px 5px;
width: 45%;
}

/* inventory item */
.item {
align-items: center;
background-color: linen;
border: 5px solid black;
color: white;
display: flex;
flex-direction: column;
height: 150px;
padding: 10px;
text-transform: uppercase;
width: 100%;
}

.item:hover {
border-color: orangered;
text-decoration: underline;
}

/* The 'sp' stands for 'special', I don't know why I decided on that name  */
.sp-positioning-in {
transform: translate(300px, 400px) !important;
transition: transform 1.8s;
}

.sp-positioning-out {
transform: translate(0, 0) !important;
transition: transform 1.8s;
}

#chatbox__header {
background-color: orangered;
max-height: 50px;
}

/* Creating tab buttons */
#chatbox__header button {
border-radius: 40px 40px 0 40px;
cursor: pointer;
}

.chatbox__tab {
background-color: maroon;
color: orangered;
border: 0;
border-radius: 40px 40px 0 40px;
height: 50px;
width: 150px;
}

.chatbox__tab:nth-child(2) {
background-color: black;
}

#chatbox__header #chatbox__minmax {
height: 50px;
width: 50px
}

#chatbox__body {
background-color: black;
border: 5px solid lavender;
color: white;
height: 300px;
margin: 10px;
overflow-y: scroll;
padding: 10px;
}

#chatbox__footer {
padding: 0px 10px;
}

#chatbox__footer__chat-wrapper {
display: flex;
flex-direction: row;
width: 100%;
}

#chatbox__footer textarea {
cursor: wait;
flex: 1;
font-size: 16px;
height: 90px;
resize: none;
}

/* I like that you can set cursors to be whatever you want, even if it's an antipattern */
#chatbox__footer button {
/* This cursor makes me not want to hover over anything that makes it show up */
cursor: wait;
}

.message {
background-color: #6dea26;
color: black;
padding: 5px;
margin: 10px 0;
}

.message button {
font-size: 16px;
font-weight: bold;
background-color: turquoise;
border: 0;
padding: 3px;
}

.message button:hover {
background-color: sienna;
color: white;
}

.message__name {
color: white;
font-size: 1.5em;
}

.message__date {
color: #717171;
text-align: right;
width: 100%;
}

/* Rainbow */
.message:nth-of-type(7n + 1) {
background-color: palevioletred;
}

.message:nth-of-type(7n + 2) {
background-color: orange;
}

.message:nth-of-type(7n + 3) {
background-color: yellow;
}

.message:nth-of-type(7n + 3) .message__name {
color: black;
}

.message:nth-of-type(7n + 4) {
background-color: yellowgreen;
}

.message:nth-of-type(7n + 5) {
background-color: aquamarine;
}

.message:nth-of-type(7n + 6) {
background-color: mediumslateblue;
}

.message:nth-of-type(7n + 7) {
background-color: violet;
}

.message:last-of-type .message__date {
color: black;
}

.message:last-of-type {
border: 0 solid darkorchid;
-webkit-animation: borderAlert 2s linear;
}

/* Makes it so that you only see the rainbow backgrounds on the most recent message */
.message:not(.message:last-of-type) {
background-color: #8080807a;
color: #d0d0d0;
}

.message button:not(.message:last-of-type button) {
background-color: #bfbfbf7a;
color: #d0d0d0;
}

#chatbox__unread-btn,
#chatbox__new-item-btn {
color: white;
background-color: red;
border: 5px solid maroon;
/* Teardrop shape */
border-radius: 40px 40px 0 40px;
height: 90px;
position: absolute;
width: 80px;
z-index: 999;
}

#chatbox__unread-btn:hover,
#chatbox__new-item-btn:hover {
background-color: #bd0000;
}

#chatbox__unread-btn {
left: -60px;
top: -74px;
}

#chatbox__new-item-btn {
left: 165px;
top: -74px;
}

.chatbox__unread-btn:hover {
background-color: maroon;
border: 5px solid red;
}

/* Placeholder until I decide on a better animation */
@-webkit-keyframes borderAlert {
50% {
border-width: 5px;
}
100% {
border-width: 0;
}
}
/*chat box */

Javascript - Functionality

This could probably be streamlined more, but I'm going to leave that for later :)

I may eventually try to replace the jQuery in this page with vanilla Javascript at least, but for now I'm too lazy.

var chatboxHidden = true;
var chatboxTab = 'chat'; // 'chat' || 'inventory'
// These two variables are to tell whether we need to show the red alert button for chat or inventory
var unreadMessages = 0;
var newItems = 0;
// Right now there is only one possible item
// If you added more items, you would manually increment this value
var totalItem = 1;
// Example item based on what I used
items = [
{
// This id will appear as the name of your inventory item
id: 'milk',
// Replace this src with the path to your image
src: '/assets/layout/milk_01.png',
// Descriptive text
alt: 'A glass bottle of cow milk',
}
];
// Starting with empty inventory
// If you wanted to use localStorage or sessionStorage you could store the inventory items in a variable there when you update the inventory/chat, and then set this by checking session/localStorage for that value
inventory = [];

var messages = [
{
message: "You got some milk!",
sender: 'Sender Name: ',
},
// {
//   message: "Just use this format to set up new messages",
//   sender: 'Whoever: ',
// }
];

// Minimize/Maximize chat by adding and removing a class
$('#chatbox__minmax').click(function () {
var chatboxWrapper = $('#chatbox__wrapper');
var btn = $('#chatbox__minmax');
// Changing value to the inverse of itself
chatboxHidden = !chatboxHidden;
// If chatbox is not hidden (chatboxHidden is false) unhide it
if (!chatboxHidden) {
chatboxWrapper.addClass('sp-positioning-out');
// Don't forget to remove old class
chatboxWrapper.removeClass('sp-positioning-in');
// Flipping button arrow to point in
btn.attr(
'style',
'transform:rotate(225deg);transition: transform 0.8s cubic-bezier(0.16, 1.08, 0.38, 0.98);'
);
// If chatbox is hidden (chatboxHidden is true) hide it
} else {
chatboxWrapper.addClass('sp-positioning-in');
// Don't forget to remove old class
chatboxWrapper.removeClass('sp-positioning-out');
// Flipping button arrow to point out
btn.attr(
'style',
'transform:rotate(45deg);transition: transform 0.8s cubic-bezier(0.16, 1.08, 0.38, 0.98);'
);
}
// Remove unread messages notification because you have seen it (hopefully)
var unreadBtn = $('#chatbox__unread-btn');
if (!!unreadBtn)
unreadBtn.remove();
unreadMessages = 0;
});

function scrollToBottomChatbox() {
if (chatboxTab === 'chat')
$("#chatbox__body").scrollTop($("#chatbox__body")[0].scrollHeight);
}

/* "Unread" alert for new item in inventory
function setNewItemAlert() {
newItems +=1;
var newItemAlertBtn = $('<button>', {id: 'chatbox__new-item-btn', text: newItems});
// 'prepend' adds element to the beginning of the list of child elements while 'append' adds it to the end
$('#chatbox__wrapper').prepend(newItemAlertBtn);
newItemAlertBtn.click(function() {
navToInventory();
newItemAlertBtn.remove();
newItems = 0;
});
}

$('#chatbox__header__chat-btn').click(function() {
navToChat();
});

$('#chatbox__header__inventory-btn').click(function() {
navToInventory();
});

function navToChat() {
if (chatboxTab !== 'chat') {
chatboxTab = 'chat';
$('#chatbox__wrapper').attr('class', 'chat sp-positioning-out');
scrollToBottomChatbox();
}
}

function navToInventory() {
if (chatboxTab !== 'inventory') {
chatboxTab = 'inventory';
$('#chatbox__wrapper').attr('class', 'inventory sp-positioning-out');
var newItemAlertBtn = $('#chatbox__new-item-btn');
if (!!newItemAlertBtn)
newItemAlertBtn.remove();
newItems = 0;
}
}

// Generating messages and inventory items
// This is just an example function for what might trigger a message, but it can be anything you want
$('#element-that-triggers-message').click(function () {
// Note that I'm just passing an id that corresponds to the place in my array of messages that this message occupies
addMessage(0);
addItem(0);
});

// Add message to chat
function addMessage(id) {
var date = new Date();
var dateNow = date.toLocaleString('default', { month: 'long' }) + ' ' + date.getDate() + ', ' + date.getFullYear();
var messageWrapper = $('<div>', {class: 'message'});
var messageDate = $('<div>', {class: 'message__date', text: dateNow});
var sender = $('<span>', {class: 'message__name', text: messages[id].sender});
var message = $('<p>', {text: messages[id].message});
switch(id) {
case 1:
var button = $('<button>', {text: ' give them back please.'});
button.click(function() {
milkMessage();
});
message.append(button);
break;
default:
break;
}
message.prepend(sender);
messageWrapper.prepend(message);
messageWrapper.append(messageDate);
$('#chatbox__body__history-wrapper').append(messageWrapper);
scrollToBottomChatbox();
setUnread();
}

// This isn't necessary, but I thought it would be nice to tell people how many items there are in total
function setInventoryDesc() {
var prevCounterText = $('#chatbox__footer__inventory-counter');
if (!!prevCounterText)
prevCounterText.remove();
var footerElem = $('#chatbox__footer__inventory-wrapper');
var messageElem = $('<p>', {text: "You've found " + inventory.length + '/' + totalItem + ' items', style: 'transform: rotate(3deg);', id: 'chatbox__footer__inventory-counter'});
footerElem.append(messageElem);
}

setInventoryDesc();
// Note that this will cause an error if this function is called on a page with no chatbox 
scrollToBottomChatbox();

Mailbox/Inventory LIVE Demo and Code[UNFINISHED WORK IN PROGRESS CODE][COPY + PASTE THE CODE BELOW]