main.js

//------------------- Assignment 1 -------------------

// get select elements
let familySelect = document.getElementById("family");
let backColorSelect = document.getElementById("color");

// create font size select
let fontSizeSelect = document.createElement("select");
fontSizeSelect.name = "font-size";
fontSizeSelect.id = "fontSize";
for (let i = 16; i <= 30; i++) {
  let option = document.createElement("option");
  option.value = `${i}px`;
  option.textContent = i;
  fontSizeSelect.appendChild(option);
}

// Append font size select to parent div
let fontSizeDiv = document.querySelector(".font-size");
fontSizeDiv.appendChild(fontSizeSelect);

// get test part of page
let showTest = document.getElementById("showTest");

// set the style of test part from local storage if exists
document.querySelectorAll(".assign-1 select").forEach((ele) => {
  if (localStorage.getItem(ele.name)) {
    showTest.style.setProperty(ele.name, localStorage.getItem(ele.name));
    ele.value = localStorage.getItem(ele.name);
  }
});

// Save style of test part to local storage when it changes
document.querySelectorAll(".assign-1 select").forEach((ele) => {
  ele.addEventListener("change", function () {
    showTest.style.setProperty(this.name, this.value);
    localStorage.setItem(this.name, this.value);
  });
});

//------------------- Assignment 2 -------------------

let inputs = document.querySelectorAll(".assign-2 form input");
let lastSelect = document.querySelector(".assign-2 form select");

// set the value of inputs from session storage if exists
inputs.forEach((input) => {
  if (window.sessionStorage.getItem(input.name)) {
    input.value = window.sessionStorage.getItem(input.name);
  }
});

// set the value of select from session storage if exists
if (window.sessionStorage.getItem(lastSelect.name)) {
  lastSelect.value = window.sessionStorage.getItem(lastSelect.name);
}

// Save the value of inputs to session storage when it becomes out of focus
inputs.forEach((input) => {
  input.onblur = function () {
    if (input.value) {
      window.sessionStorage.setItem(input.name, input.value);
    }
  };
});

// Save the value of select to session storage when it changes
lastSelect.onchange = function () {
  if (lastSelect.value) {
    window.sessionStorage.setItem(lastSelect.name, lastSelect.value);
  }
};