데이터베이스 설계 이후, 여러가지 일로 좀 많은 시간이 걸렸다. 어떻게 하면 좀더 편하게 단어를 입력할 수 있을까 하는 고민을 상당시간 하였고, 날 코딩으로 화면을 구성하는 것이 쉽지 않아서 시간이 좀 많이 걸렸다.
설계를 완료하고 위의 이미지와 같은 방식으로 화면 구성을 하였다. 툴바의 + 버튼을 클릭하면 "학습창 추가" 화면이 보여지게 되고 순서대로 자료를 입력하면 된다.
제목입력 이후, 두번째 필드에는 콤마(,)로 분리된 영어단어 리스트를 입력한 뒤, 망치 버튼을 클릭하면 아래쪽에 입력된 단어들이 표시가 되게 되게 만들었다. 오른쪽에 + 버튼을 클릭시 한개씩 단어를 아래쪽에 추가할 수 있고, X 버튼을 클릭하면 해당 단어가 삭제가 된다.
망치를 클릭할때, 단어가 자동으로 펼쳐지게 되고, 구글 번역 API를 통해 단어의 뜻을 자동을 불러오도록 기능을 만들려고 한다.
SAVE버튼 클릭시 몽고DB의 User, Study, Word 컬렉션에 데이터를 적절하게 입력된다.
<HTML>코드
<div class="add_word_container hide">
<div class="add_title">학습장 추가</div>
<div class="add_content">
<div><input type="text" id="title" class="add_element" placeholder="Title" autocapitalize="off"></div>
<hr size=1 width="95%">
<div><input type="text" id="word_list" class="word_list" placeholder="List of words separated by comma" autocapitalize="off">
<i class="sm-btn2 fa fa-gavel fa-lg"></i>
<i class="sm-btn2 fa fa-plus fa-plus-word fa-lg"></i>
</div>
<div class="sub_wordset">
</div>
<div class="button_list">
<button id="cancel-btn" class="effect_btn red">Cancel</button>
<button id="save-btn" class="effect_btn blue">Save</button>
</div>
</div>
</div>
<CSS 코드>
.add_word_container {
width: 96%; min-height:280px; margin: 0 auto; background-color: #ffffff; border-radius: 10px;
padding-top: 15px;padding-bottom: 5px;
}
.add_title {
color: white;width : 372px; height: 24px;
font-size : 18px; font-weight: normal;
border-bottom: 1px solid #a88a8a;
margin: 0 auto;background-color: #5363f1;
border: 1px solid #5363f1;
border-radius: 10px 10px 0px 0px;
padding: 4px; -ms-ime-mode: active;
display: flex;
}
.add_content {
background-color: white;
width: 380px; height : 340px; margin: 0 auto;
border: 1px solid #5363f1;
display: table;
padding-bottom: 20px;
margin-bottom: 15px;
}
.add_element {
width : 330px; height: 30px; font-size:16px;
margin-left: 20px; margin-top:20px; margin-bottom: 10px;
}
.word_list {
width : 290px; height: 30px; font-size:16px;
margin-left: 20px; margin-top:10px; margin-bottom: 10px;
}
.add_num {
width: 20px; height: 30px; margin-left: 20px;
float: left; text-align: left; border: 0; background-color: white;
}
.word_mean {
padding-top: 15px;
}
.add_word {
width : 110px; height: 30px; margin-left: 0px;
float: left; border: 1px solid #2fee72; padding-left: 5px;
}
.add_mean {
width : 150px; height: 30px; margin-left: 10px;
float: left; border: 1px solid #2fee72; padding-left: 5px;
}
.fa-times {
margin-top: 8px;margin-left:10px;
}
.button_list {
width: 100%; padding-top:20px;
text-align: center ;
}<JS> 코드
$(".fa-gavel").click(function(){
list = $(".word_list").val().split(",")
if(list.length==0 || (list.length==1 && $.trim(list[0]) == "")){
alert("입력된 단어가 없습니다.");
$(".word_list").val('')
return
}
check = confirm("기존의 목록을 초기화 하시겠습니까?")
if(check) $(".sub_wordset").empty()
var max_idx = getMaxIndex()
var idx = 0
list.forEach(function(el, index){
el = el.trim()
if(el != ""){
idx = Number(max_idx) + Number(index) + 1
$(".sub_wordset").append(`
<div class="word_mean" idx="${idx}">
<input type="text" id="title" class="add_num" value="${idx}" disabled>
<input type="text" id="title" class="add_word" autocapitalize="off" value="${el}">
<input type="text" id="title" class="add_mean c-rp10px" autocapitalize="off">
<i class="sm-btn2 fa fa-times fa-lg"></i>
</div>`)
}
})
$(".fa-times").click(function(){
$(this).parent().remove()
})
})
$(".fa-plus-word").click(function(){
var idx = Number(getMaxIndex()) + 1
$(".sub_wordset").append(`
<div class="word_mean" idx="${idx}">
<input type="text" id="title" class="add_num" value="${idx}" disabled>
<input type="text" id="title" class="add_word" autocapitalize="off">
<input type="text" id="title" class="add_mean c-rp10px" autocapitalize="off">
<i class="sm-btn2 fa fa-times fa-lg"></i>
</div>`)
$(".fa-times").click(function(){
$(this).parent().remove()
})
})
$('#cancel-btn').click(function(){
$(".sub_wordset").empty()
$(".stats_container").hide()
$(".study_set_container").show()
$(".add_word_container").hide()
})
$('#save-btn').click(function(){
if ($('.add_element').val() == ""){
alert("단어장 제목을 입력하세요.")
$('.add_element').focus()
return
}
if($('.word_mean').length == 0){
alert("입력된 단어가 없습니다.")
return
}
})
다음으로는 구글 API연동을 통해 단어의 뜻을 불러오고, 이후에 몽고DB 저장하는 로직을 붙여볼 예정이다.
'Programming > 온라인 영어암기 단어장 개발' 카테고리의 다른 글
| 온라인 영어 암기 단어장 만들기(7) - 단어장 저장하기 (0) | 2025.01.13 |
|---|---|
| 온라인 영어 암기 단어장 만들기(6) - Google Translate API를 활용한 단어 뜻 찾아오기 (0) | 2025.01.11 |
| 온라인 영어 암기 단어장 만들기(4) - 데이터베이스 설계하기 (0) | 2024.12.03 |
| 온라인 영어 암기 단어장 만들기(3) - 로그인, 회원가입 로직추가 (2) | 2024.11.22 |
| 온라인 영어 암기 단어장 만들기(2) - 로그인 화면구성 (2) | 2024.11.20 |