Web -front/HTML,CSS,JS 썸네일형 리스트형 예제 만들면서 배우기 4. Hello world 급 예제 Todolist 만들기. 예제 택한 이유 이번 예제는 앞선 예제를 하면서 배운 것들로 프론트 예제로 가장 흔하고 많이 한다는 TodoList를 만들어 보았습니다. 구현한 기능 플러스 버튼 누를시 Prompt 창을 활성화시켜 텍스트를 입력시키면 추가된다. 삭제 수행한 일을 체크하고 체크된 메모 삭제하면 체크된 메모들 삭제 가장 마지막에 입력한 메모 삭제 모든 메모 삭제 저장 본래 저장은 네트워크를 이용해 db를 연동해 하고싶었지만.. 어려움을 느껴 우선 로컬 스토리지를 이용해 메모를 이용하는 사용자에게만 해당 메모가 보이도록했다. 인터넷 기록을 삭제하지 않는 한 남아있도록 했다. 더 구현 하고 싶은 기능 DB를 이용하여 사용자 별로 정리하기 Node.js를 이용하여 하고 싶었지만 벽에 느껴.. 좀 더 공부하고 다시 도전해야할듯 싶.. 더보기 예제 만들면서 배우기 3. 1~9까지 숫자 빠르게 맞추기 예제로 택한 이유. 예제로 할만할 주제를 찾던 와중 구글에서 숫자맞추기 게임을 구현한 블로그를 우연히 보게되었고 이번에는 블로그를 참조하지 않고 생각한 대로 만들어보게되었다. 구현한 기능 게임 시작버튼을 누르면 숫자들이 랜덤으로 배열되며 시작초가 흐른다. 1~9까지 다 맞추면 한번 더 시간을 재고 걸린 시간과 누른 횟수를 카운터 한다. 구현하고 싶은 기능 좀 더 공부해서 서버를 배우게 되면 점수와 카운터를 익명으로 대입해 순위표도 만들어 보고 싶다. Main.html 1부터 10까지를 잽싸게 빠르게 눌러버리깅! 1 2 3 4 5 6 7 8 9 시작 재시작 Main.js let random_number = []; let count =1; let cnt =0; let click_cnt=0; let time=.. 더보기 예제 만들면서 배우기 2 . 간단한 POS기 만들기 예제로 택한 이유 자바스크립트를 익힐 겸 예제 정보를 찾던 중 Pos기기를 구현 하면 어떨까 라는 생각을 하였다 모델은 전에 알바했던 곳의 Pos기를 참고했다. 생각했던 기능 메인화면에서 각 table를 선택하면 menu.html로 이동해 메뉴를 선택하여 주문완료를 누르면 메인 화면 각 tableArea에 선택한 메뉴들의 이름만 보이게 한다.-> 로컬 스트리지를 이용했다. 결제 버튼을 만든다. Main.html Table Select Table1 Table2 Table3 Table4 Table5 Table6 Table7 Table8 Table9 Main.js // 메뉴를 표시할 textarea 아이디 값을 Menu로 부터 가져온다 const temp = decodeURI(location.href).spl.. 더보기 예제 만들면서 배우기 1. 숫자 맞추기 게임 R.random.html ->main 페이지 웹 처음 배울 떄는 style 파일을 따로 만들어서 분리 할 줄 몰랐습니다. 기존 사이트에 있는 숫자맞추기 예제를 따라해보며 익혔습니다. 랜덤 숫자 맞추기 1부터 100까지 랜덤 숫자를 맞춰주세요. 총 10번의 기회가 있습니다. Enter a guess: Random1.js // 필요한 엘리먼트들 선언 let randomNumber = Math.floor(Math.random() * 100)+1; const inputNumber = document.querySelector(".inputNumber"); const result = document.querySelector(".result"); const hint = document.querySelector(".h.. 더보기 이전 1 다음