JSFiddle - React, Tailwind, and code Playground

by Tan Kucukhas

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>

JavaScript 1.7

const data = [
  [
    { "start": "09:15", "duration": 30 },
    { "start": "10:00", "duration": 60 },
    { "start": "11:15", "duration": 30 },
    { "start": "12:45", "duration": 30 },
    { "start": "13:15", "duration": 90 },
    { "start": "15:00", "duration": 30 },
    { "start": "15:30", "duration": 30 }
  ],
  [
    { "start": "09:30", "duration": 30 },
    { "start": "11:00", "duration": 30 },
    { "start": "12:30", "duration": 30 },
    { "start": "13:00", "duration": 60 },
    { "start": "14:15", "duration": 30 },
    { "start": "15:00", "duration": 60 },
    { "start": "16:30", "duration": 30 }
  ],
  [
    { "start": "09:00", "duration": 60 },
    { "start": "10:00", "duration": 30 },
    { "start": "11:00", "duration": 30 },
    { "start": "11:30", "duration": 90 },
    { "start": "14:00", "duration": 30 },
    { "start": "14:30", "duration": 30 }
  ],
  [
    { "start": "10:30", "duration": 30 },
    { "start": "11:00", "duration": 60 },
    { "start": "12:00", "duration": 90 },
    { "start": "15:00", "duration": 30 },
    { "start": "15:30", "duration": 30 },
    { "start": "16:00", "duration": 60 }
  ],
  [
    { "start": "10:00", "duration": 30 },
    { "start": "10:30", "duration": 90 },
    { "start": "12:00", "duration": 30 },
    { "start": "14:30", "duration": 30 },
    { "start": "15:00", "duration": 60 },
    { "start": "16:30", "duration": 30 }
  ]
]


const appts = data[0]

const datesLessThan30 = [];

appts.map(date =>{
  datesLessThan30.push()
  return date.duration < 30;
})

appts.forEach(appointment => {
	 if(appointment.duration <= 30){
   datesLessThan30.push(appointment);
   }
})


const FilteredAppointments = appts.filter(appointment => appointment.duration <= 30
)


apptsWithEndDate = [];



console.log(apptsWithEndDate);



const AppointmentWithEndDate = (apptData) =>{
 apptsWithEndDate = [];

    apptData.forEach((appointment, index) => {

       const end =...