Year in Pixels - LocalStorage

index.html

<h1 class="title">Year in pixels</h1>

<div class="social">
  <a href="https://rominamartin.github.io/"><img src="https://image.flaticon.com/icons/svg/25/25231.svg" alt="github"></img></a>
  <a href="https://twitter.com/rominamartinlib"><img src="https://i.imgsafe.org/43/431dd07874.png" alt="twitter"></img></a>
</div>

<div id="guide">
  <div id="moods"></div>
  <div id="selectedMood">Selected mood: <span></span></div>
</div>
<div class="content">
  <div id="daysHeader"></div>
  <div id="tableContainer">
    <div id="monthHeader"></div>
    <div id="yearContainer"></div>
  </div>
</div>

script.js

const COLORS = {
  0: { code: "#2DE1C2", label: "😃" },
  1: { code: "#01BAEF", label: "😊" },
  2: { code: "#AFBFC0", label: "😐" },
  3: { code: "#037171", label: "😞" },
  4: { code: "#305654", label: "😭" }
};

const YEAR_CONTAINER = document.getElementById("yearContainer");
const DAYS_HEADER = document.getElementById("daysHeader");
const MONTH_HEADER = document.getElementById("monthHeader");
const GUIDES = document.getElementById("guide");
const SELECTED_MOOD = document.querySelector("#selectedMood span");
const MOODS = document.getElementById("moods");
const MONTH_LETTERS = [
  "J",
  "F",
  "M",
  "A",
  "M",
  "J",
  "J",
  "A",
  "S",
  "O",
  "N",
  "D"
];

let selectedMood = null;

let init = () => {
  checkLocalStorage();
  generateVisualStructure();
  setMoods();
};

let setMoods = () => {
  let colorKeys = Object.keys(COLORS);

  colorKeys.forEach(e => {
    let mood = document.createElement("div");
    let color = document.createElement("span");

    color.style.background = getGradient(COLORS[e].code);

    mood.setAttribute("mood", e);
    color.setAttribute("mood", e);

    mood.textContent += COLORS[e].label;
    mood.appendChild(color);

    MOODS.appendChild(mood);
  });
};

let checkLocalStorage = () => {
  if (window.localStorage.structure === undefined) {
    let structure = generateDataStructure();
    localStorage.setItem("structure", JSON.stringify(structure));
  }
};

let generateDataStructure = () => {
  let data = {};

  for (let i = 0; i < 12; i++) {
    data[i] = Array.from({ length: getDaysFromMonth(i + 1) }, () => null);
  }

  return data;
};

let generateVisualStructure = () => {
  const data = getCurrentLSStructure();
  const months = Object.keys(data);
  const dayHeaderLength = 31;

  let monthHeaderSet = false;

  for (let day = 1; day <= dayHeaderLength; day++) {
    let dayHeader = document.createElement("div");
    dayHeader.className = "dayHeader";
    dayHeader.textContent = day;

    DAYS_HEADER.appendChild(dayHeader);
  }

  months.forEach(month => {
    let monthContainer = document.createElement("div");
    monthContainer.className = "monthContainer";
    let monthHeader = document.createElement("div");
    monthHeader.className = "monthHeader";
    monthHeader.textContent = MONTH_LETTERS[month];

    let days = Object.keys(data[month]);

    days.forEach(day => {
      let dayContainer = document.createElement("div");
      dayContainer.className = "dayContainer";
      dayContainer.onclick = () => {
        assignMood(month, day, dayContainer);
      };

      if (data[month][day])
        dayContainer.style.background = getGradient(
          COLORS[data[month][day]].code
        );

      monthContainer.appendChild(dayContainer);
    });

    MONTH_HEADER.appendChild(monthHeader);
    YEAR_CONTAINER.appendChild(monthContainer);
  });
};

let assignMood = (month, day, item) => {
  let data = getCurrentLSStructure();
  data[month][day] = selectedMood;

  if (selectedMood)
    item.style.background = getGradient(COLORS[selectedMood].code);

  localStorage.setItem("structure", JSON.stringify(data));
};

let getDaysFromMonth = month => new Date(2019, month, 0).getDate();
let getCurrentLSStructure = () => JSON.parse(window.localStorage.structure);
let getGradient = colorId =>
  `radial-gradient(ellipse at center, rgba(255,255,255,.1) -95%, ${colorId} 100%)`;

GUIDES.addEventListener("click", e => {
  if (e.target.attributes[0].value) {
    selectedMood = e.target.attributes[0].value;
    SELECTED_MOOD.style.background = getGradient(COLORS[selectedMood].code);
  }
});

init();

style.scss

$backgroundColor: #f8f7f2;
$titleColor: #564d65;
$singleContainerDim: 1.25em;
$borderColor: #dfe8ea;

body {
  background: $backgroundColor;
  font-family: "Amatic SC", cursive;
  user-select: none;
}

.title {
  text-align: center;
  font-family: "Pacifico", cursive;
  margin: 0;
  color: $titleColor;
  text-shadow: 1px 3px 1px $borderColor;
}

.social {
  position: absolute;
  left: 10px;
  top: 10px;

  a img {
    display: inline-block;
    height: 1.5em;
  }
}

#guide {
  display: flex;
  justify-content: center;
  font-weight: bold;
  margin: 1em 0;

  &:hover {
    cursor: pointer;
  }

  #selectedMood span {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: middle;
  }
}
#moods {
  display: flex;
  div {
    position: relative;
    margin: 0 1em;
    padding-left: 1.25em;

    span {
      position: absolute;
      left: 0;
      top: 0.25em;
      width: 1em;
      height: 1em;
    }
  }
}

.content {
  display: inline-flex;
  flex-direction: column;
}

#yearContainer,
#monthHeader,
#daysHeader,
#tableContainer {
  display: flex;
  justify-content: center;
  margin-bottom: 0.25em;
}

#daysHeader {
  margin-left: 1.25em;
  margin-bottom: 0;
  margin-top: 1em;
}

.monthHeader,
.dayHeader {
  width: $singleContainerDim;
  height: $singleContainerDim;
  font-size: 1rem;
  padding: 1px 0 0 1px;
  text-align: center;
  font-weight: bold;
}

.monthContainer {
  display: flex;
  flex-direction: column;
  align-items: stretch;

  &:hover {
    cursor: pointer;
  }
}

.dayContainer {
  width: $singleContainerDim;
  height: $singleContainerDim;
  border: 1px solid $borderColor;
  margin-right: -1px;
  margin-bottom: -1px;
}

@media (min-width: 769px) {
  .content {
    display: flex;
    justify-content: center;
  }

  #yearContainer {
    flex-direction: column;
  }

  // .monthContainer,
  #monthHeader {
    flex-direction: column;
  }
  .dayHeader,
  #daysHeader,
  .monthContainer {
    flex-direction: row;
  }
}

@media (max-width: 768px) {
  .content {
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
  }

  #yearContainer,
  #monthHeader {
    flex-direction: row;
  }

  .dayHeader,
  #daysHeader,
  #tableContainer {
    flex-direction: column;
  }
}

styles

<link href="https://fonts.googleapis.com/css?family=Amatic+SC|Pacifico" rel="stylesheet" />

year-in-pixels-localstorage.markdown

Year in Pixels - LocalStorage

Keep track of your days this year! LocalStorage used to keep track of it

A Pen by Romina on CodePen.

License.