Vanilla JS9 어후..갑자기 기상api에 꽂혀서 기상 api에 꽂혀서 이런 저런 api찾다가 결국 돌고 돌아 openweather api를 이용해서 뻘짓을 좀 했습니다.. 처음엔 그냥 현재 날씨웹앱을 만들었고, 두번째는 단기 예보 웹앱을 만들었습니다. https://weather-bear.netlify.app/ Document weather-bear.netlify.app 현재 날씨 웹앱이고, 이걸 바탕으로 만든게 https://forecast-bear.netlify.app/ OpenWeather Forecast forecast-bear.netlify.app 3시간 마다 변경되는 5일 짜리 단기 예보 웹앱입니다. 해외 날씨 api를 써서 그런지 기상청에서 보는거랑 조금 안맞는거 같긴한데 json파일 열어서 보면 맞게 잘 동작하는거 같습니다. 이런저런 하.. 2023. 3. 15. Vanilla JS. 로또 추첨기(while) + 추가ver. for 하라는 공부는 안하고 로또 추첨기를 만들고 있는 내가 레전드 먼저, 버튼을 눌러서 번호가 출력되게 html파일에 기본적인 기능만 세팅을 해줍니다. START 그 다음에 app.js파일에 const start = document.querySelector("#start"); const result = document.querySelector("#result"); start.addEventListener("click", startLotto); start와 result를 불러와서 변수로 설정 한 후에 click 이벤트를 수신하고 startLotto 함수를 트리거하는 start에 이벤트 리스너를 추가합니다. function startLotto() { const lottoNumbers = []; }; startLo.. 2023. 3. 1. Vanilla JS. Light and Dark Mode * 오늘은 라이트 모드랑 다크 모드를 해보자. * input태그 하나로 누르면 라이트 모드, 다크 모드 두개를 실행하게 해볼 예정이다. .day { background-color: white; color : black; } .night { background-color: black; color: white; } * style.css 파일에 day와 night 클래스의 속성을 정했줬다. const change = document.querySelector("#change"); const body = document.querySelector("body"); //화면의 배경화면을 전체 바꿔야하니 body 태그를 불러왔다. function changeHandle () { if(change.value === "ni.. 2023. 1. 19. Vanilla JS. DropDown Menu(feat. CSS) * 오늘은 자바스크립트로 드롭다운 메뉴 만들기 도전 * 저번에 못 만들고 타협해서 셀렉트 박스로 바꿨었는데 // class에서 dropdown과 closed 2가지를 선언 DropDown ✓ 유튜브 menu 2 menu 3 menu 4 * class에서 띄어쓰기를 하면 하나의 class가 아닌 다른 class로 선언된다. body { margin: 0; font-family: Courier New; font-size: 20px; } ul { margin: 0; padding: 0; list-style-type: none; } a { text-decoration: none; color: black; } .dropdown { transition: all 0.2s ease-in-out; overflow: hi.. 2023. 1. 16. 이전 1 2 3 다음
