this.js

const numItemsToGenerate = 1; 

var today = new Date()
var curHr = today.getHours()

// moring, afternoon, night logic so that the text switches based on the time
// also added the function call so that the morning img renders at the proper time
// I also added an img functionality so that the img logo changes, but I didn't like the look of it so I removed it. 
if (curHr < 12) {
  document.getElementById('morning').innerText ='morning'
  for(let i=0;i<numItemsToGenerate;i++){
  rendermoringItem();

  


  };
} else if (curHr < 18) {
  document.getElementById('morning').innerText ='afternoon'
  for(let i=0;i<numItemsToGenerate;i++){
  renderafternoonItem();

  }
} else {
  document.getElementById('morning').innerText ='night'
  for(let i=0;i<numItemsToGenerate;i++){
  rendernightItem();
 
  
  }
}

//based on these functions, the morning, afternoon, and night image will be rendered. 

  function rendermoringItem(){
    
    const setBackground = fetch(`https://source.unsplash.com/1600x900/?morning`).then((response)=> {   
      document.body.style.backgroundImage = `url(${response.url})`

    }) 

  };

  function renderafternoonItem(){
    
    const setBackground = fetch(`https://source.unsplash.com/1600x900/?afternoon,`).then((response)=> {   
      document.body.style.backgroundImage = `url(${response.url})`

    }) 

  };

  function rendernightItem(){
    
    const setBackground = fetch(`https://source.unsplash.com/1600x900/?night`).then((response)=> {   
      document.body.style.backgroundImage = `url(${response.url})`

    }) 

  };



function currentTime() {
    var date = new Date(); /* creating object of Date class */
    var hour = date.getHours();
    var min = date.getMinutes();
    var sec = date.getSeconds();
    var midday = "AM";
    midday = (hour >= 12) ? "PM" : "AM"; /* assigning AM/PM */
    hour = (hour == 0) ? 12 : ((hour > 12) ? (hour - 12): hour); /* assigning hour in 12-hour format */
    hour = updateTime(hour);
    min = updateTime(min);
    sec = updateTime(sec);
    document.getElementById("clock").innerText = hour + " : " + min + " : " + sec + " " + midday; /* adding time to the div */
      var t = setTimeout(currentTime, 1000); /* setting timer */
  }
  
  function updateTime(k) { /* appending 0 before time elements if less than 10 */
    if (k < 10) {
      return "0" + k;
    }
    else {
      return k;
    }
  }
  
  currentTime();


var today = new Date()
var curHr = today.getHours()

let areaText = document.getElementById("name");

//saving content editable space to local storage 

const saveLocally = function() {
  let text = areaText.innerHTML;
  localStorage.setItem('siteData', text);
}

const retrieveSavedText = function() {
  var text = localStorage.getItem('siteData');
  areaText.innerHTML = text;
}

document.addEventListener('keyup', saveLocally);
retrieveSavedText();

//setting width of bar based on day
setInterval(function () {
  var now = new Date();
  document.getElementById('hours').style.width = ((now.getHours() / 24) * 200) + 'px';
}, 500);