TIL 1. Python의 페이지 이동과 날씨, 다크모드

[JS, Python, Flask 사용]

임시저장만 하고 완료는 하지 않은 나란 사람..

1일차에는 팀프로젝트를 위해 구상을 하는 시간을 가졌고, 개인적으로는 메인 페이지와, 메인 페이지의 이름버튼을 누르면
해당 이름에 해당하는 팀원의 소개 페이지로 이동하는 작업을 했다.

<button onclick="window.location.href='/seob'" class="btn btn-secondary">김인섭</button>

js, flask, python을 사용해서 페이지를 만드는데, html 경로를 입력한 일반적인 페이지 전환은 하지 못한다.
그래서 아래처럼 해줘야한다.

@app.route('/seob')
def seob():
   return render_template('seob.html')

---

메인 페이지의 주간, 야간모드 버튼도 넣어줬다.

<button class="modebtn" id="date" onclick="datemod()">mode</button>

function datemod() {
    let a = document.querySelector('body');
    if (this.id == 'date') {
        a.style.backgroundColor = 'black';
        a.style.color = 'white';
        this.id = 'dateX';


    } else {
        a.style.backgroundColor = '';
        a.style.color = 'black';
        this.id = 'date';
    }
}

---

날씨도 넣어줬다.
날씨는 내 위치정보를 기반으로 경도와 위도의 데이터로 내 위치를 보여주고, 수 많은 정보들 중 날씨와 온도를 가져와서 보여줬다.

<div id="weather">
        <span></span><br>
        <span></span>
</div>

// 날씨 api (성공 시)
function onGeoOk(position) {
    const lat = position.coords.latitude;
    const lon = position.coords.longitude;
    const url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY}&units=metric`
    fetch(url).then((response) => response.json()).then((data) => {
        const weather = document.querySelector("#weather span:first-child");
        const city = document.querySelector("#weather span:last-child");
        city.innerText = data.name;
        weather.innerText = `${data.weather[0].main} / ${Math.floor(data.main.temp)}°C`;
    })
}

// (실패 시)
function onGeoError() {
    alert("날씨정보를 불러올 수 없습니다.");
}

// 날씨 불러오기 func(성공 시, 실패 시);
navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError);

---

여기서 시련이 닥쳐왔다.
S.A.에 방명록을 삭제하는 기능을 넣겠다고 했는데, 데이터베이스와 연동해서 삭제하기란 쉽지 않았다...
로컬스토리지에 있는 삭제와 비슷하겠거니 생각하고 넣자고 한 게 실수였다.
그래서 이때부터 다음날까지 이것만 붙잡고 있었던 것 같다.

해결은 다음 TIL에서.