A Letter To Myself
Tags: showdev, webdev, codenewbie, javascript
Published: 2020-09-10 11:46:07

### TLDR
A simple project that allows you to write a letter to yourself and read it in 2021. [Click Here :love_letter:](tlylt.github.io/letter-to-self/)

### Motivation
I was learning about [cookies](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/cookies) and Web APIs such as [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/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.
```javascript
let myStorage = window.localStorage; 
```
- Saving a key value pair is simple.
```javascript
function send() {
  let myStorage = window.localStorage;
  let myLetter = document.getElementById("letter").value;
  myStorage.setItem("myLetter", myLetter);
}
```
- Retrieving a value is even simpler.
```javascript
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.
```javascript
// 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

```javascript
// 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](https://dribbble.com/christinacyoung) to be extremely fitting. All design credits go to her!

### Conclusion
**Write a letter to yourself!** [Click Here :love_letter:](tlylt.github.io/letter-to-self/)
I promise not to look (Not that I can :joy:).

---
The code can be found at this [repo](https://github.com/tlylt/letter-to-self).
{% github tlylt/letter-to-self no-readme %}

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](https://media.giphy.com/media/3oFzlW75cfUCiGQFS8/giphy.gif)