JavaScript6 공부 과정 기록07_노마드코더 시청 후 제작 페이지 코드 설명_todolist 작성(03_04) 이제 마지막으로 todo 리스트 작성 기능까지 구현하면 todo 리스트 페이지가 완성됩니다. const inputForm = document.getElementById("input-form"); const inputTodo = document.getElementById("inputTodo"); const todoContainer = document.getElementById("todoContainer"); //각각 user의 키값, 정보가 들어갈 변수이다. let userKey, userObj; //현재 로그인 되어 있는 객체(status 1)를 찾아 해당 객체의 키값을 반환한다. function returnUserKey() { let key, value, i; for(i = 0; i < localSto.. 2022. 8. 27. 공부 과정 기록07_노마드코더 시청 후 제작 페이지 코드 설명_메인페이지 인사 표현, 로그아웃, 날씨 정보 받아오기(03_03) 지난 글에 이어서 계속 만들어 보겠습니다. 이번 글에서는 메인 화면에 보이는 인사말(Hello asdf)과 우측 상단에 띄워져 있는 위치 정보 표현, 로그아웃 기능을 코드로 한 번 보도록 하겠습니다. const greetingText = document.getElementById("greetingText"); //localStorage의 길이값 가져옴 const localStorageLen = localStorage.length; //i => 반복문에 사용되는 변수, key => localStorage의 key값을 담을 변수 //value => key에 대응되는 내용을 담을 변수 let i, key, value; //localStorage에 저장된 값들 중 status 값이 1인 객체를 찾아 해당 객체를.. 2022. 8. 26. 공부 과정 기록07_노마드코더 시청 후 제작 페이지 코드 설명_메인페이지 시간, 명언 및 배경사진 구현(03_02) 전 글에서 로그인/회원가입 페이지의 코드를 보며 어떻게 동작하는지 살펴 봤습니다. 이번 글에서는 메인 페이지에 들어갔을 때의 기능 구현을 코드로 알아 보겠습니다. Logout 00:00 Hello /* 일반 태그 css */ * { box-sizing: border-box; } body { height: 98vh; width: 98vw; background-repeat : no-repeat; background-size : cover; background-position: center; } input[type=text] { background-color: inherit; border: 0 solid black; color: white; font-size: 1.5rem; margin-left: 5vw; t.. 2022. 8. 23. 공부 과정 기록07_노마드코더 시청 후 제작 페이지 코드 설명_로그인과 회원가입(03_01) 전 글에서는 페이지가 어떻게 구성되어 있는지, 어떻게 돌아가는지 소개하는 시간을 가졌다면 이번 글에서는 코드를 보면서 페이지 제작 과정을 보겠습니다. (참고로 파일 배치 속성(src, href 등....)에 관련된 것은 저와 파일 경로가 다르다면 오류가 날 것입니다.) id : pw : Sign in Sign up 먼저 index.html 페이지 코드입니다. index.html 페이지를 보면 처음 로그인을 하는 화면으로, 전체 로그인 영역을 div(loginContainer)로 감싸고 있고 그 안에 id, pw, 버튼들을 각각 div 태그로 감싸서 배치를 하였습니다. 그리고 loginStyle.css를 적용하고, body 태그 맨 아래에 script src로 loginJS.js 파일의 내용.. 2022. 8. 22. 공부 과정 기록07_노마드코더 시청 후 제작한 페이지 소개(02) 전 글에서 노마드코더 클론 코딩 강의를 시청했었다고 했습니다. 이번 글에서는 강의 시청에서 얻은 지식들을 활용하여 제가 구상한 페이지를 만들어 봤었는데, 그 페이지를 살펴 보는 시간을 갖도록 하겠습니다. 처음 페이지에 들어가면 이렇게 로그인 페이지가 나옵니다. 페이지 중앙의 로그인 폼이 들어 있는 영역을 제외하면 나머지 영역의 색을 회색으로 줬고, 로그인 버튼과 회원가입 버튼 2개가 있는 것이 보입니다. 만약 회원가입이 되어 있지 않은 id, pw를 입력하거나 둘 중 하나를 입력하지 않은 상태에서 로그인 버튼을 누르면 상황에 따라 위와 같이 경고창을 띄워 줍니다. 그럼 회원가입 페이지를 보겠습니다. 회원가입 페이지도 디자인은 로그인 페이지와 비슷합니다. 다만 다른 점은 id, pw, pw check까지 .. 2022. 8. 19. 공부 과정 기록06_JS 활용 페이지 만들어보기(02) 저번 시간에는 JS까지 활용하여 계산기를 구현해 봤습니다. 이번 글에서는 문자 퍼즐이란 페이지를 만들어 보겠습니다. 페이지를 열면 이렇게 위의 페이지가 나옵니다. (참고로, 이번 코드는 JS를 중심으로 하기 때문에 CSS 디자인은 적용시키지 않았습니다.) 어떤 동작인지 대강 설명하자면, 저렇게 위에 원본 영단어가 표시되고(compare) 아래에는 그 영단어의 알파벳을 섞어 놓은 버튼들이 배치됩니다. (저 버튼들은 눌러도 이벤트가 발생하지 않습니다.) 그리고 아래에 뒤집기, 왼쪽/오른쪽 밀어내기 버튼이 있는데 뒤집기 버튼은 앞뒤 알파벳들이 바뀌는 것이고 왼쪽/오른쪽 밀어내기는 왼쪽이나 오른쪽으로 알파벳들이 한 칸씩 이동하는 것입니다. 뒤집기 버튼부터 차례대로 눌러 본 결과입니다. 그리고 밑에 "일치하지 않.. 2022. 8. 18. 이전 1 다음
