How else can you optimize js code?

Question

JavaScript

I am new to javascript. Started refactoring the code. Fixed syntax errors. It seems to be possible to structure the components. I suppose that it is possible to rewrite many parts of the program in a simpler way.
Initial view of the code:

class dateInput { 
   constructor() { 
    this.input = document.querySelector(".input"); 
     
    this.input.onChange = this.onChange; 
   } 
    
    onChange(event) { 
    this.inputValue = event.srcElement.value; 
    this.updateTime = new Date(); 
    return this.inputValue; 
   } 
  } 
  
  class dateRange extends dataInput { 
   constructor() { 
    this.container = document.querySelector('.containerForLastUpdateRecordAndPeriodItems'); 
   } 
 
   createItems(period) { 
    let dates = []; 
    for (i = +period.start; i < +period.end; i+= 3600000 * 168) 
    dates.push(i); 
    let periods = []; 
    for(i=0;i<date.length;i++) { 
     let date = new Date(dates[i]); 
     if (date.getDay() == 1) period = `${date.toLocaleDateString()} - {date.setHours(168).toLocaleDateString()}`; 
     else if (date.getDay() == 2) period[i] = `${date.setHours(-24).toLocaleDateString()} - {date.setHours(144).toLocaleDateString()}`; 
     else if (date.getDay() == 3) period[i] = `${date.setHours(-48).toLocaleDateString()} - {date.setHours(120).toLocaleDateString()}`; 
     else if (date.getDay() == 4) period[i] = `${date.setHours(-48).toLocaleDateString()} - {date.setHours(120).toLocaleDateString()}`; 
     else if (date.getDay() == 5) period[i] = `${date.setHours(-72).toLocaleDateString()} - {date.setHours(96).toLocaleDateString()}`; 
     else if (date.getDay() == 6) period[i] = `${date.setHours(-96).toLocaleDateString()} - {date.setHours(72).toLocaleDateString()}`; 
     else if (date.getDay() == 0) period[i] = `${date.setHours(-120).toLocaleDateString()} - {date.setHours(48).toLocaleDateString()}`; 
 
     var n = periods.length, a = periods.length; 
     do { b = false; 
      a /= 1.3; 
      if (a == 9 || a == 10) a = 11; 
      if (a < 1) a = 1; 
      for (const i=0; i < n-a; i++) 
      { if (periods[ i ] > periods[i+a]) 
       { b = true; 
        var t = periods[i+a]; periods[i+a] = periods[ i ]; periods[ i ] = t; 
       } 
      } 
     } while (a > 1 || b); 
    } 
    return periods; 
   } 
    
   renderItems(items) { 
    this.container.appendChild(element = document.createElement('div')) 
    element.innerText = `Последнее изменение: ${this.updateTime.getDate() + '.' + this.updateTime.getMonth() > 9 ? ':' '0'+this.updateTime.getMonth() : this.updateTime.getMonth()}`      
    
    items.forEach(function(item) { 
     const element = document.createElement('div', {innerText: item}); 
         this.container.appendChild(element) 
    } 
   } 
    
   onChange() { 
    renderItems(this.createItems(this.createPeriod(this.inputValue))); 
   } 
 
   createPeriod(date) { 
    let newDate = date; 
    newDate.year = newDate.year + 1; 
    return { 
    start: date, 
    end: newDate 
    } 
   } 
  } 
   
  const range = Object.create(dateRange.prototype); 
  range.constructor = range.constructor.bind(range); 
  range.constructor();

Code after making changes:

window.addEventListener('load', function() {

 class dateInput {

  constructor() { 
   this.input = document.querySelector(".input"); 
   this.input.onChange = this.onChange; 
 } 
  onChange(event) { 
   this.inputValue = event.srcElement.value; 
   this.updateTime = new Date(); 
    return this.inputValue; 
  } 
} 
// расчет диапазона времени
 class dateRange extends dataInput { 

  constructor() { 
   this.container = document.querySelector('.containerForLastUpdateRecordAndPeriodItems');
  } 

  createItems(period) {
   var dates = [], 
       periods = [];

    for (var i = +period.start; i < +period.end; i+= 3600000 * 168) {
      dates.push(i);
    } 

    for (var i = 0; i < date.length; i++) { 

     var date = new Date(dates[i]),
      n = periods.length,
      a = periods.length; 

    if (date.getDay() == 1) {
         period = `${date.toLocaleDateString()} - {date.setHours(168).toLocaleDateString()}`; 
      } else if (date.getDay() == 2) {
          period[i] = `${date.setHours(-24).toLocaleDateString()} - {date.setHours(144).toLocaleDateString()}`;
      } else if (date.getDay() == 3) {
          period[i] = `${date.setHours(-48).toLocaleDateString()} - {date.setHours(120).toLocaleDateString()}`;
      } else if (date.getDay() == 4) {
          period[i] = `${date.setHours(-48).toLocaleDateString()} - {date.setHours(120).toLocaleDateString()}`;
      } else if (date.getDay() == 5) {
          period[i] = `${date.setHours(-72).toLocaleDateString()} - {date.setHours(96).toLocaleDateString()}`;
      } else if (date.getDay() == 6) {
          period[i] = `${date.setHours(-96).toLocaleDateString()} - {date.setHours(72).toLocaleDateString()}`;
      } else (date.getDay() == 0) {
          period[i] = `${date.setHours(-120).toLocaleDateString()} - {date.setHours(48).toLocaleDateString()}`; 
      }
     
    do {  
     b = false; 
     a /= 1.3;

      if (a == 9 || a == 10) {
          a = 11; 
       } else (a < 1) {
               a = 1;
       } 

        for (const i = 0; i < n-a; i++) {

         if (periods[i] > periods[i+a]) { 
           b = true; 
           var t = periods[i+a]; 
           periods[i+a] = periods[i]; 
           periods[i] = t; 
          } 
         } 
        } while (a > 1 || b); 
     }
     return periods;
  }
 } 

  renderItems(items) { 
   this.container.appendChild( element = document.createElement('div') ); 
   element.textContent = `Последнее изменение: ${this.updateTime.getDate() + '.' + this.updateTime.getMonth() > 9 ? : '0' + this.updateTime.getMonth() : this.updateTime.getMonth()}`; 

   items.forEach(function(item) { 
    const element = document.createElement('div', {textContent: item}); 
    this.container.appendChild(element); 
  });
 } 

  onChange() { 
   renderItems(this.createItems(this.createPeriod(this.inputValue))); 
  } 

  createPeriod(date) { 
   var newDate = date; 
    newDate.year = newDate.year + 1; 
     return { 
     start: date, 
     end: newDate 
    } 
  } 

  const range = Object.create(dateRange.prototype); 
  range.constructor = range.constructor.bind(range); 
  range.constructor(); 

});

I apologize for such a "footcloth". Tell me, how else can I optimize (refactor) this js code?

Answer 1

We take a footcloth if-else

if (date.getDay() == 1) {
  period = `${date.toLocaleDateString()} - {date.setHours(168).toLocaleDateString()}`; 
} else if (date.getDay() == 2) {
  period[i] = `${date.setHours(-24).toLocaleDateString()} - {date.setHours(144).toLocaleDateString()}`;
} else if (date.getDay() == 3) {
  period[i] = `${date.setHours(-48).toLocaleDateString()} - {date.setHours(120).toLocaleDateString()}`;
} else if (date.getDay() == 4) {
  period[i] = `${date.setHours(-48).toLocaleDateString()} - {date.setHours(120).toLocaleDateString()}`;
} else if (date.getDay() == 5) {
  period[i] = `${date.setHours(-72).toLocaleDateString()} - {date.setHours(96).toLocaleDateString()}`;
} else if (date.getDay() == 6) {
  period[i] = `${date.setHours(-96).toLocaleDateString()} - {date.setHours(72).toLocaleDateString()}`;
} else (date.getDay() == 0) {
  period[i] = `${date.setHours(-120).toLocaleDateString()} - {date.setHours(48).toLocaleDateString()}`; 
}

and rewrite

let arr = ;
let day = date.getDay();
let dateString1 = arr[day][0] === null ? date.toLocaleDateString() : date.setHours(arr[day][0]).toLocaleDateString();
let dateString2 = arr[day][1] === null ? date.toLocaleDateString() : date.setHours(arr[day][1]).toLocaleDateString();
period[i] = `${dateString1} - ${dateString2}`;

Plus, if you are already using es6 syntax (you have classes there, template strings), then declare variables through const/let, and notvar

Answer 2

Fixed syntax errors.

Cho, right? Let's see if that's the case.
Omitted ifor redundant condition:

} else (date.getDay() == 0) {

Omitted ifor redundant condition:

} else (a < 1) {

The expression between ?and is :missing (UPD. Or it's :superfluous - there is one more in the line):

this.updateTime.getMonth() > 9 ? : '0'

In short, the errors are corrected for five plus.

Tell me, how else can I optimize (refactor) this js code?

You can throw it away. Aren't you ashamed to show such rubbish?