[3nd Project]벌레 잡기

안녕 빵동글이야

안녕? 
오늘은 따뜻한 우롱차를 한잔으로 하루를 시작합니다. 

콧물 줄줄 얼굴 붓기 광광

쿄오와 요로시쿠오네가이시마스

잠을 많이 잤더니 몸은 가벼워지나 얼굴은 커지는 매직

감기 언제 걸리나 했더니 바로 걸리는  . . . . 

오늘은 여정쿤과 닭발을 먹기로 한 날이기 때문에 빨리빨리 

해야 할 일을 쳐내야하는 부지런데이

하지만 빠릿한 나의 두뇌와 손은 언제나 믿음직하지

 

오늘은 피피티를 완성시키고, 
반응형 425px 완성시키고,  세부적인 css 맞추려고 한다. 
이번에 백엔드를 안쓰고 다 자바스크립트로만 구현을 해서 그런지 
넘모 재밌다.  .  . 물론 백엔드도 재밌는데

자바스크립트가 재밌어서 열시미 공부하고 싶어진다뇽

 

토키유키사마

요즘 재밌게 보고 있는 도망을 잘 치는 도련님

이거 역사 애니에여 이상한 거 아님

근데 연출이 미쳤어요 

진짜 기괴하고 무서우면서도 시대 배경을 아주 잘 담아냈습니다. 

토키유키(남자임)

빨랑 보고 싶음ㅠㅠ

글구 토키유키 모시는 이름이 기억이 안나는데 스와가문의 요리시게? 

거의 주인공2 느낌인 사람 성우가 고죠사토루 성우임

그래서 더욱ㅇ ㅣ 행보쿠데스네루 
아 진짜 너무 재밌음 ㅠ

하루종일 내 머리에서 둥둥 떠다님 
얼른 보고 싶어 .  . . . . . 낭당을 구하는데 겐마가 합류하는 시점부터 존잼 ㅠ



모브2기도 봐야하는데!!!!!!!!!!!!!!!!!!!!!!
주말에 김장하고 봐야지 
김장하는 날 엄마가 

굴이랑 고수랑 무쳐준 거에 꼬기랑 배추랑 먹으면 .. 1년 중 가장 기다리는 날 
23일에 나 행복쿠야 💛

저 11시부터 Sysdate(16:11분) 반응형 하나도 못하고 ppt 만들었삼요

너무 눈이 아퍼요 

힘드네요 반응형 내일해도 될까요 팀장님

일단 잔 버그 먼저 고치러 갈게요 .. 플리즈 

그리하여 잔버그 

팝업으로 길찾기를 하면 마커가 사라지지 않고 존재한다.

        // 길찾기 버튼 클릭 이벤트 추가
        document.getElementById('navigate-btn').addEventListener('click', () => {
        const latitude = item.latitude || '정보 없음';
        const longitude = item.longitude || '정보 없음';

        if (latitude !== '정보 없음' && longitude !== '정보 없음') {
            const endLocationInput = document.getElementById('end-location');
            endLocationInput.value = item.name; // 도착지 입력 필드에 장소명 설정
            
            // 도착지 좌표 설정
            endCoords = `${longitude},${latitude}`;

            // 길찾기 탭으로 전환
             showTab('route'); // 기존 탭 전환 함수 호출
        } else {
            alert('위도와 경도 정보가 없습니다.');
        }
    });

}

이 코드에는 마커를 초기화하는 코드가 없다.

그래서 마커가 사라지지 않고 계속 존재한다.

 

// 길찾기 버튼 클릭 이벤트
document.getElementById('navigate-btn').addEventListener('click', () => {
    const latitude = item.latitude || '정보 없음'; // 위도 정보
    const longitude = item.longitude || '정보 없음'; // 경도 정보

    if (latitude !== '정보 없음' && longitude !== '정보 없음') {
        const endLocationInput = document.getElementById('end-location'); // 도착지 입력 필드
        endLocationInput.value = item.name; // 도착지 이름 입력 창에 설정

        // 도착지 좌표 설정
        endCoords = `${longitude},${latitude}`;

        // 기존 도착지 마커 제거
        if (endMarker) {
            console.log("기존 도착지 마커 제거"); // 디버깅용 로그
            endMarker.setMap(null); // 지도에서 마커 제거
        }

        // 새로운 도착지 마커 생성
        endMarker = new kakao.maps.Marker({
            position: new kakao.maps.LatLng(latitude, longitude), // 새로운 마커의 위치 설정
            map: map, // 마커를 표시할 지도 객체
        });

        // 지도 중심을 도착지로 이동
        map.panTo(new kakao.maps.LatLng(latitude, longitude));

        // 길찾기 탭으로 전환
        showTab('route'); // 기존 탭 전환 함수 호출
    } else {
        alert('위도와 경도 정보가 없습니다.'); // 위도, 경도 정보가 없는 경우 경고 표시
    }
});

// 초기화 버튼 또는 길찾기 종료 시 호출
document.getElementById('reset-route-btn').addEventListener('click', resetRoute);
}

마커를 초기화하는 함수와 길찾기 초기화 버튼을 만들었습니다. 우헤ㅐ헤

 

function resetRoute() {
    // 도착지 마커 제거
    if (endMarker) {
        console.log("길찾기 초기화: 도착지 마커 제거"); // 디버깅용 로그
        endMarker.setMap(null); // 지도에서 도착지 마커 제거
        endMarker = null; // endMarker 변수를 null로 초기화
    }

    // 도착지 좌표 초기화
    endCoords = null;

    // 입력 필드 초기화
    document.getElementById('end-location').value = ''; // 도착지 입력 필드를 빈 값으로 설정
    document.getElementById('start-location').value = ''; // 출발지 입력 필드를 빈 값으로 설정

    // 추가적으로 필요한 초기화 작업이 있다면 여기에 추가 가능
    console.log("길찾기가 초기화되었습니다."); // 초기화 완료 로그
}

뾰로롱 
사실 어제 이거 하다가 버튼 잘못눌려서 jsp까지 싹다 날라간거지 모에여 

다행히 깃에 올려둔거 복구하면서 
되돌려놨어요,, 

그래서 0부터 시작했답니다!

여기 코드 써놔서 다행히도 바로 복구했다뇽

반응형 넘 하기 싫어서 잔버그 잡는거 아님!

 

이번에는 길찾기 초기화 및 스왑버튼을 만들거랍니닷

기염둥이 아이콘

아이콘을 넣었으니 기능도 넣어야겠죵?

1. swap 버튼 기능

//스왑버튼: 출발지와 도착지의 값을 교환
function swapLocations(){
    //출발지와 도착지 입력 필드 가져오기
    const startLocation = document.getElementById('start-location');
    const endLocation = document.getElementById('end-location');

    //출발지와 도착지의 값을 교환
    const temp = startLocation.value; //출발지 값을 임시 변수에 저장
    startLocation.value =endLocation.value; //도착지 값을 출발지로 복사
    endLocation.value = temp;//임시 변수에 저장된 출발지 값을 도착지로 복사
}

2. 초기화 버튼 기능

//초기화 버튼 기능: 출발지와 도착지 입력값 모두 초기화
function clearAllInputs() {
    //출발지와 도착지 입력 필드 가져오기 
    const startLocation = document.getElementById('start-location');
    const endLocation = document.getElementById('end-location');
    //입력값 초기회
    startLocation.value = '';
    endLocation.value = ''; //도착지 값을 빈 문자열로 설정
}

아주 간단하쥬?

벌써 다음주면 11월도 끝이라니 
작심삼주 챌린지가 생각보다 Easy 🚚