primavera

getCurrentPosition은 두 개의 인자를 필요로 한다. 첫 번째는 위치 정보를 얻어오는데 성공했을 때 실행하는 함수이고, 두 번째는 실패했을 때 실행하는 함수이다. 위의 코드를 실행했더니 왼)이런게 뜸! 와우 신기하다!! 오)허용 누르니까 콘솔 창에 내 위치 정보가 뜬다. 위도 경도까지 다 뜨는게 신기했다 https://openweathermap.org/ Сurrent weather and forecast - OpenWeatherMap Access current weather data for any location on Earth including over 200,000 cities! The data is frequently updated based on the global and local ..

이제 완성까지 얼마 남지 않았다. 투두리스트랑 날씨만 하면 된다! index.html 일단 html 파일에 위 코드를 적는다. - ul의 밑에 li는 쓰지 않는다. 일단 처음에는 추가한 to do list가 없을 것이기 때문에 비워두기 위해서이다. 저번 포스팅에서 배경화면 만든 것과 똑같이 js에서 요소를 추가할 것이다. - 한가지 더 주목할 게 있다. form을 사용한 것. form을 쓰면 form이 제출될 때 자동으로 새로고침을 하는 기본동작이 있었다. (greeting에서 함) 아 새로고침을 막기 위한 코드를 짜줘야 한다. submit할 때 해야할 것 1. 새로고침 막기 2. input에 적힌 text 저장하기 3. 제출한 후 input 비우기 to do list 만들기! 어쩌구 저쩌구 이렇게 만들..

quote와 비슷하다. 배경 사진을 여러 개 저장해놓고 랜덤으로 선택해서 화면에 보여줄 것이다. 일단 이렇게 사진을 여러 개 저장해둔다. 랜덤으로 화면에 띄울 것이기 때문에 2개 이상 저장해놓자. 그런 다음 quote에서 한 것처럼 랜덤으로 사진을 골라준다. chosenImage 변수에 랜덤 이미지가 저장되어 있다. 지금까지 우리는 html에 만들어져 있는 요소를 js 파일에 가져와서 그 요소를 수정했다. 이제는 js에서 직접 요소를 만들어서 그걸 html에 추가해보려고 한다. document.querySelector()가 아니라 document.createElement()를 사용해서 요소를 만든다! bgImage는 아직은 js에만 존재하는 요소이다. 이걸 html의 body 영역에 추가해보자. back..

quotes.js 파일을 만들고, html에서 import해준다. quotes.js에서는 다음과 같이 명언들을 나열해준다. quotes라는 배열을 만들고 그 안에 요소들을 넣는다. html에서 명언을 표시할 곳을 만들자. quote라는 아이디를 가진 div를 만들고, 그 안에 span을 2개 만들어서 하나는 quote, 다른 하나는 author가 보이도록 만들자. quotes.js에서는 span 하나하나를 quote, author 변수로 저장해준다. randomness(무작위성) 명언이 10개가 있다고 가정했을 때 10개 명언 중 하나를 랜덤으로 가져오도록 만들어야 한다. 배열의 인덱스는 0부터 시작하기 때문에 0부터 9까지의 숫자를 랜덤으로 접근하는 것이 필요하다. Math module를 사용한다. m..

저번에 해결하지 못한 문제1을 해결해보자. 숫자가 깔끔하게 보이지 않는다. 해결해보자! string이 적어도 최소한 2개여야 한다. 1인 경우 01로 바꿔줘야하지만, 11인 경우 그냥 11을 쓴다. padStart 앞의 string이 2개가 아니라면 앞부분에 0을 추가해줘~ 라는 뜻이다. 12의 경우 이미 길이가 2이기 때문에 문자를 추가하지 않는다. padStart는 앞에 문자를 추가하는 것이다. 반대로 뒤에 문자를 추가하는 함수인 padEnd도 있다. padStart는 string에 적용할 수 있는 함수이기 때문에 Date().getHours()를 string으로 바꿔줘야 한다. String으로 덮으면 문자로 바꿀 수 있다. 이렇게 코드를 짜면 const clock = document.querySel..

이제 새로운 js 파일을 만든다 clock.js 코드가 하는 일에 따라서 파일을 나눠서 작성한다. greeting.js는 username을 입력받아서 화면에 표시하는 것이다. 그 일은 모두 끝났고 이제는 clock과 관련된 다른 일을 할 것이기 때문에 새로운 파일을 만들어줬다. 그리고 파일의 경로도 수정했다. js 폴더 안에 자바스크립트 파일을 위치시켰고, css 폴더 안에 css 파일을 위치시켰다. 파일 경로는 다음과 같다. http에서 import하는 파일의 경로도 수정해줘야 한다. 이제 새 파일 clock.js에 코드를 작성해보자! html파일에서 h2를 만들고 거기에 default text로 00:00:00를 표시하게 만들었다. interval과 timeout interval: 정해진 시간마다 특..

local storage에 username이 존재하는지 확인하고, 만약 존재한다면 form을 표시하지 않고 바로 h1 요소가 표시되도록 하자. addEventListener를 하기 전에 localStorage를 확인해야 한다. localStorage에 username라는 key에 해당하는 것이 있을 때 1과 같이 key 값에 해당하는 value를 출력해준다. 그 key, value를 지운 후에 해당 명령어를 다시 실행하면 2와 같이 null을 보여준다. 이 null인지 아닌지를 코드에서 판별해서 null인 경우 우리가 이제껏 했던 걸 계속 하면 되고, null이 아닌 경우(무언가 있는 경우) 바로 h1 요소를 화면에 보여주게 하자. 여기서 잠깐, 'username'이라는 문자도 많이 사용하기 때문에 변수..

저번에 만든 것의 문제는 username을 기억할 수 없다는 것이다. 페이지에 들어올 때마다 로그인해줘야 한다. 이걸 영구적(?)으로 기억하려면 어떻게 해야 할까? 이 작업도 많이 사용되기 때문에 API가 존재한다. : localStorage localStorage가 브라우저에 뭔가를 저장할 수 있게 해준다. 개발자 창에서 localStorage를 확인할 수 있다. 위에 창에서 Application을 선택하면 Local Storage가 보인다. Storage의 아래에 위치하는 다른 것들로도 정보를 저장할 수 있다. 그 중에서 Local Storage가 다루기 가장 쉽기 때문에 이걸 사용해보자. 아직은 Local Storage가 비어있는 상태이다. localStorage는 다양한 함수를 제공한다. setI..

사용자가 username을 입력하고 클릭을 누르면 form 자체가 없어지도록 만들고 싶다. 이걸 구현하기 위한 두 가지 방법이 있다. 1. HTML 요소 자체 없애기. -> 이건 뭔가 단점이 많을 것 같은 느낌이 든다.. 2. CSS로 없애기(없어진 것처럼 보이게 하기) .hidden { display: none; } const loginForm = document.querySelector('#login-form'); const loginInput = document.querySelector('#login-form input'); function onLoginSubmit(event) { event.preventDefault(); //새로고침 막기 const username = loginInput.valu..

링크 href=... 라인을 추가해서 링크를 만들어주자. Go to courses preventDefault 저번 포스팅에서 form의 기본 동작이 submit이라는 걸 알게 되었다. 이걸 preventDafault로 막았다. 링크의 기본 동작은 다른 페이지로 바뀌는 것이다. 이것도 마찬가지로 막아보자. const loginForm = document.querySelector('#login-form'); const loginInput = document.querySelector('#login-form input'); const link = document.querySelector('a'); function onLoginSubmit(event) { event.preventDefault(); //새로고침 막..