DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for A Letter To Myself
Liu Yongliang
Liu Yongliang

Posted on

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; 
Enter fullscreen mode Exit fullscreen mode
  • Saving a key value pair is simple.
function send() {
  let myStorage = window.localStorage;
  let myLetter = document.getElementById("letter").value;
  myStorage.setItem("myLetter", myLetter);
}
Enter fullscreen mode Exit fullscreen mode
  • Retrieving a value is even simpler.
function view() {
  let myStorage = window.localStorage;
  let myLetter = document.getElementById("letter");
  myLetter.value = myStorage.getItem("myLetter");
}
Enter fullscreen mode Exit fullscreen mode
  • Saved content can be removed/cleared programmatically as well.
// not used in this project, for information
myStorage.removeItem('myLetter');

myStorage.clear();
Enter fullscreen mode Exit fullscreen mode
  • 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);
Enter fullscreen mode Exit fullscreen mode

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.

GitHub logo 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:)

cool gif

Top comments (0)

πŸ‘‹ New to DEV?

Head over to our Welcome Thread and tell us a bit about yourself!