영어단어 2

온라인 영어 암기 단어장 만들기(7) - 단어장 저장하기

단어와 뜻을 다 입력한 뒤, 저장 버튼을 구현하였다. 저장하는 내용은 제목(8월 모의고사)과 영단어와 뜻 목록을 데이터로 담아서 $.post 로 데이터를 전송하면 된다.아래는 save 버튼 클릭시 발생하는 이벤트 구현소스이다.$('.save-btn').click(function(){ if ($('.add_element').val() == ""){ alert("단어장 제목을 입력하세요.") $('.add_element').focus() return } var wm = $('.word_mean') if(wm.length == 0){ alert("입력된 단어가 없습니다.") return } ..

온라인 영어 암기 단어장 만들기(5) - 단어입력화면 만들기

데이터베이스 설계 이후, 여러가지 일로 좀 많은 시간이 걸렸다. 어떻게 하면 좀더 편하게 단어를 입력할 수 있을까 하는 고민을 상당시간 하였고, 날 코딩으로 화면을 구성하는 것이 쉽지 않아서 시간이 좀 많이 걸렸다.설계를 완료하고 위의 이미지와 같은 방식으로 화면 구성을 하였다. 툴바의 + 버튼을 클릭하면 "학습창 추가" 화면이 보여지게 되고 순서대로 자료를 입력하면 된다.제목입력 이후, 두번째 필드에는 콤마(,)로 분리된 영어단어 리스트를 입력한 뒤, 망치 버튼을 클릭하면 아래쪽에 입력된 단어들이 표시가 되게 되게 만들었다. 오른쪽에 + 버튼을 클릭시 한개씩 단어를 아래쪽에 추가할 수 있고, X 버튼을 클릭하면 해당 단어가 삭제가 된다.망치를 클릭할때, 단어가 자동으로 펼쳐지게 되고, 구글 번역 API..

반응형