A Letter To Myself

TLDR

A simple project that allows you to write a letter to yourself and read it in 2021. Click Here 💌

Motivation

I was learning about cookies and Web APIs such as localStorage and the idea came to me. Why not make a simple project to demonstrate the concept? Also that 2020 is a harsh year, which makes it a great time to reflect and plan for the future.

Brief explanation of localStorage

I chose localStorage over cookies because it is really easy to understand and implement. I will simply illustrate the key points using the code that I have written for this tiny project.

• Obtain a storage object that is domain & protocol specific. It lives in your browser and has no expiration date.

let myStorage = window.localStorage; 

• Saving a key value pair is simple.

function send() {
  let myStorage = window.localStorage;
  let myLetter = document.getElementById("letter").value;
  myStorage.setItem("myLetter", myLetter);
}

• Retrieving a value is even simpler.

function view() {
  let myStorage = window.localStorage;
  let myLetter = document.getElementById("letter");
  myLetter.value = myStorage.getItem("myLetter");
}

• Saved content can be removed/cleared programmatically as well.

// not used in this project, for information
myStorage.removeItem('myLetter');

myStorage.clear();

• You can also inspect existing data in localStorage: (Steps for Chrome)
  1. Inspect page
  2. Under the application tab
  3. Under local storage and the respective URLs

Further breakdown

Main logic

• Check if the current year is equal to or greater than 2021. If no, users can pen down their thoughts and press the "SEAL" button to save the letter. If yes, users can click on the "VIEW" button to see the content.

Interaction:

1. textarea to input/ouput content of the letter
2. button to trigger save or view function

// setup
var isOpenDate = new Date().getFullYear() >= 2021;
var btn = document.getElementById("btn");

function activate() {
  if (!isOpenDate) {
    send();
    btn.setAttribute("disabled", "true");
    btn.innerHTML = "DONE";
  } else {
    view();
  }
}

// update button
if (isOpenDate) {
  btn.innerHTML = "VIEW";
}
btn.addEventListener("click", activate);

Design

• I was browsing through dribbble.com for some artistic inspiration and found the design by illustrator Christina Young to be extremely fitting. All design credits go to her!

Conclusion

Write a letter to yourself! Click Here 💌
I promise not to look (Not that I can 😂).

---

The code can be found at this repo.

tlylt / letter-to-self

Write a letter to yourself, receive it in 2021

P.S.
The page is not made responsive because you need a proper keyboard to type out a proper letter, or that I am just lazy. The letter might get erased if the browser data is cleared or different browser is used for saving and viewing. Essentially, no warranty/guarantee is provided.

---

I might do an article next year to remind people to check their letter, that could be fun:)