[HTML/ CSS/ JS] 단어장
superpil
[HTML/ CSS/ JS] 단어장개발노트/Code2019. 10. 28. 19:34@superpil
Table of Contents

-기능

1. 단어 및 의미 추가 기능

2. 단어 및 의미 검색 기능

 

-HTML

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500,700,900&display=swap&subset=korean" rel="stylesheet">  
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="style.css">
  <title>단어장(스터디)</title>
</head>
<body>
  <div id="warp">
    <div id="titleBox">
      <h1>English Vocabulary</h1>
    </div>
    <div id="settingBox">
      <div id="insertWord">
        <input type="text" id="writeWord" placeholder="Word">
        <input type="text" id="writeMeaning" placeholder="Meaning">
        <button id="insertBtn">Add</button>
      </div>
      <div id="searchWord">
        <input type="text" id="searchInput" placeholder="searchWord">
        <button id="searchBtn">search</button>
      </div>
    </div>
    <div id="displayBox">
      <div id="option">
        <p>option</p>
      </div>
      <table id="displayTable">
      </table>
    </div>
  </div>
  <script src="main.js"></script>
</body>
</html>

 

 

-reset.css

body{
  margin: 0;
  padding: 0;
  background: lightgray;
  font-family: 'Noto Sans KR', sans-serif;
}
h1, h2, h3, h4, h5, h6, p, div, span, a, button, input, label, ul, ol, li, img, input{
  padding: 0;
  margin: 0;
  line-height: 1.3em;
  font-size: 16px;
  font-weight: normal;
  list-style: none;
  text-decoration: none;
  color: black;
}

 

 

-style.css

#warp{
  width: 90%;
  margin: 0 auto;
  overflow: hidden;
}
/* titleBox */
#titleBox{
  text-align: center;
}
#titleBox h1{
  padding: 15px;
  font-size: 45px;
  font-weight: bold;
}
/* settingBox */
#settingBox{
  width: 80%;
  margin: 0 auto;
}
#insertWord{
  padding: 5px;
  text-align: center;
}
#insertWord input[type="text"]{
  border: none;
  border-radius: 5px;
  padding: 13px 15px;
  margin-left: 2%;
}
#insertWord input[type="text"]::placeholder{
  font-weight: bold;
  letter-spacing: 1.5px;
}
#insertWord button{
  background: crimson;
  color: whitesmoke;
  border-radius: 5px;
  cursor: pointer;
  width: 100px;
  height: 45px;
  border: none;
  margin-left: 2%;
}
#searchWord{
  text-align: center;
  margin-top: 5px;
  padding: 5px;
}
#searchWord input[type="text"]{
  border: none;
  border-radius: 5px;
  width: 100px;
  padding: 8px 10px;
}
#searchWord button{
  background: crimson;
  color: whitesmoke;
  border-radius: 5px;
  cursor: pointer;
  width: 100px;
  height: 36px;
  border: none;
  margin-left: 2%;
}
/* displayBox */
#displayBox{
  margin: 0 auto;
  width: 80%;
}
/* option */
#option{
  background: whitesmoke;
  text-align: right;
}
#displayBox table{
  background: whitesmoke;
  border-collapse: collapse;
  width: 100%;
  margin: 10px auto;
  text-align: center;
  /* 테이블은 width값에 맞게 자동 줄바꿈 안됨 그래서 아래 코드 넣어야함 */
  table-layout: fixed;
  word-break: break-all;
}
tr,
td{
  border: 1px solid black;
  height: 40px;
  font-size: 19px;
  font-weight: 500;
}
table tr td:nth-child(1){
  width: 5%;
  font-weight: bold;
}
table tr td:nth-child(2){
  width: 45%;
}
table tr td:nth-child(3){
  width: 45%;
}

/* media */
@media(max-width:838px){
  #insertWord button{
    width: 225px;
    margin-top: 2%;
  }
}

@media(max-width:689px){
  #insertWord input[type="text"]{
    margin-top: 1%;
  }
}

@media(max-width:330px){
  #searchWord button{
    margin-top: 2%;
  }
}

 

 

-Javascript

const insertBtn = document.querySelector('#insertBtn');
const displayTable = document.querySelector('#displayTable');
const searchBtn = document.querySelector('#searchBtn');
let saveWord = [];

// create Element
function MakeTag(listTable){
  this.listTable = listTable
  this.listTr = document.createElement('tr');
  this.numberTd = document.createElement('td');
  this.wordTd = document.createElement('td');
  this.meanTd = document.createElement('td');
}
MakeTag.prototype.insertText = function(number, word, mean){
  this.numberTd.textContent = number;
  this.wordTd.textContent = word;
  this.meanTd.textContent = mean;
  this.listTr.appendChild(this.numberTd);
  this.listTr.appendChild(this.wordTd);
  this.listTr.appendChild(this.meanTd);
  this.listTable.appendChild(this.listTr);
}

// setting saveWordObj
function SetSaveWord(number, word, meaning){
  this.number = number;
  this.word = word;
  this.meaning = meaning;
}
SetSaveWord.prototype.pushing = function(){
  saveWordObj = {
    number : this.number,
    word : this.word,
    meaning : this.meaning,
  }
  return saveWord.push(saveWordObj);
}

// display number, word and meaning
function displayWord(){
  let useNumber = new MakeTag(displayTable);
  saveWord.forEach(function(value, index){
    useNumber.insertText(saveWord[index].number, saveWord[index].word, saveWord[index].meaning);
  })
}

// push number, word and meaning to saveWord
function pushSaveWord(wordValue, meanValue){
  let orderNumber = saveWord.length + 1;
  let useSeting = new SetSaveWord(orderNumber, wordValue, meanValue);
  useSeting.pushing(); 
  displayWord();
}

// get localStorage value and push to the saveWord
function getLocal(){
  const callLocal = JSON.parse(localStorage.getItem('saveLocal'));
  if(callLocal != null){
    callLocal.forEach(function(ele,index){
      saveWord.push(ele);
      displayWord()
    })
  }
}

// save to local storage
function setLocal(){
  localStorage.setItem('saveLocal', JSON.stringify(saveWord));
}

// get word and meaning
function getWord(){
  const wordInput = document.querySelector('#writeWord');
  const meaningInput = document.querySelector('#writeMeaning');
  let wordValue = wordInput.value;
  let meaningValue = meaningInput.value;
  if(wordValue && meaningValue){
    pushSaveWord(wordValue, meaningValue);
    setLocal();
  }
  wordInput.value = '';
  meaningInput.value = '';
}

// search word
function searchWord(){
  const searchInput = document.querySelector('#searchInput');
  const searchValue = searchInput.value;
  saveWord.forEach(function(value){
    if(searchValue === value.word || searchValue === value.meaning){
      alert(`number: ${value.number} word: ${value.word} mean: ${value.meaning}`);
    }
  })
  searchInput.value = '';
}

// init
function init(){
  insertBtn.addEventListener('click', getWord);
  searchBtn.addEventListener('click', searchWord);
  getLocal();
}
init();
저작자표시

'개발노트 > Code' 카테고리의 다른 글

[HTML/ CSS/ JS] input checkbox 다루기  (0) 2019.11.03
[HTML/ CSS/ JS] random 끝말잇기 게임 - 리팩토링  (0) 2019.10.18
[HTML/ CSS/ JS] random 끝말잇기 게임  (0) 2019.10.07
(HTML / CSS / JS) 버튼 클릭 시 자동 합계(2019/9/4)(리팩토링 필요!)  (0) 2019.09.04
[HTML / CSS]input[type="text"]에 아이콘 넣기  (0) 2019.08.09
superpil
@superpil :: 주니어 개발자의 성장기

개발 기록

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!

개발노트/Code 추천 글
more
image

티스토리툴바