Dust

string 일 때 원하는 글자수가 아닐경우 앞에 원하는 내용을 추가할 수 있음

const time = prompt("시간을 입력하세요","").padStart(2,"0");

ex) 2만 입력했을 때
--> 02로 변경

padEnd()
--> padStart 와 같지만 뒤에 원하는 내용을 추가해줌

const time = prompt("시간을 입력하세요","").padEnd(3,"**");

--> 3** 로 변경

const h2 = document.querySelector("h2");
const superEventHandler = {};
function mouseEnter() {
  h2.style.color = colors[0];
  h2.innerText = "The mouse is here!";
}

function mouseLeave() {
  h2.style.color = colors[1];
  h2.innerText = "The mouse is gone!";
}

위에 내용을 도대체 어떻게 넣나 했는데 이렇게 넣는 거 였다..

다음에 또 까먹으면 보러와야지

const h2 = document.querySelector("h2");
const superEventHandler = {
  handleEnter:function(){
    h2.style.color = colors[0];
    h2.innerText = "The mouse is here!";
  },
  handleLeave:function(){
    h2.style.color = colors[1];
    h2.innerText = "The mouse is gone!";
  }
};

h2.addEventListener("mouseenter", superEventHandler.handleEnter);

사용해보는 중

<div id="calendar-container">
    <div id="calendar"></div>
</div>

document.addEventListener('DOMContentLoaded', function(){
    let calendarEl = document.getElementById("calendar");
    let calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        expandRows: true,
        slotMinTime: '08:00',
        slotMaxTime: '20:00',
        headerToolbar:{
            left: 'prev',
            center: 'title',
            right: 'next'
            // 월, 주 등등
            // dayGridMonth, timeGridWeek, timeGridDay, listWeek
        },
        initialView: 'dayGridMonth',
        initialDate: '2022-01-01',
        navLinks: true, // 날짜 선택시 day 캘린더나 week 캘린더로 링크
        editable: true, // 수정가능?
        selectable: true, // 달력 일자 드래그 설정가능
        nowIndicator: true, // 현재 시간 마크
        dayMaxEvents: true, // 이벤트가 오버되면 높이 제산 (몇개정도 표현?)
        locale: 'ko', // 한국어 설정
        eventAdd: function(obj){ // 이벤트가 추가되면 발생하는 이벤트
            console.log(obj);
        },
        eventChange: function(obj){ // 수정
            console.log(obj);
        },
        eventRemove: function(obj){ // 삭제
            console.log(obj);
        },
        select: function(arg){ // 캘린더에서 드래그로 이벤트 설정
            let title = prompt("Event Title:");
            if(title){
                calendar.addEvent({
                    title: title,
                    start: arg.start,
                    end: arg.end,
                    allDay: arg.allDay
                })
            }
            calendar.unselect()
        }
    });
    calendar.render();
})

참고

https://fullcalendar.io/docs/initialize-globals

https://nowonbun.tistory.com/368

querySelector는 특정 요소 하나만 선택하고

querySelectorAll는 해당하는 모든 요소를 선택함

querySelector에 addEventListener를 하면 오류가 안나지만

querySelectorAll에 addEventListener할 경우 오류남

참고로 querySelectorAll 로 select를 검색했을 때

이렇게 보여짐(객체 반환)

해결 방법

- 반복문 사용

const allSelect = document.querySelectorAll("#joinForm select");
for(let i = 0; i < allSelect.length; i++){
    allSelect[i].addEventListener("change", function(event){
        const value = event.target.value;
        let optionArr = new Array();
        optionArr.push(value);
        console.log(optionArr);
    })
}

이렇게 해봤는데 클릭할 때 마다 배열에 클릭한 값만 들어감.. 

줄줄이 넣고 싶은데.. 고민중.. 

let numbers = [10, 20, 3, 16, 45];
let max = min = numbers[0];

console.log(max);
console.log(min);

numbers.forEach(function(number){
    if(number > max){
        max = number;
    }
    if(number < min){
        min = number;
    }

});
console.log(max, min);

이렇게 작성하면 코드도 길고 가독성도 떨어지기 때문에

 Math.max, Math.min 메소드에 apply를 사용

let numbers = [10, 20, 3, 16, 45];
let max = Math.max.apply(null, numbers);
let min = Math.min.apply(null, numbers);

console.log(max, min);