Post

아이디어 메모장

Posted Updated
Preview Image
By minnnning
8 min read
아이디어 메모장

자바스크립트와 bootstrap을 이용해서 사진과 같은 메모장을 만드는것이다 오랜만에 html과 css사용을 하려니까 잊어버린 것이 많았다(bootstrap에 이미 다 적용되어있지만)

bootstrap에서 라디오 버튼과 card, input을 이용해서 위 사진과 똑같이 만들어야한다 bootstrap에 이미 html과 css가 적용되어 있으므로 해당 부분을 가져오기만 하면된다

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <title>아이디어 메모장</title>

</head>
<body>
    <h1>아이디어 메모장</h1>

    <div class="form-check"> <!-- 라디오 버튼 -->
        <input class="form-check-input" type="radio" name="flexRadioDefault" id="pink">
        <label class="form-check-label" for="flexRadioDefault1">
          Pink
        </label>
    </div>
    <div class="form-check">
        <input class="form-check-input" type="radio" name="flexRadioDefault" id="gray" checked>
        <label class="form-check-label" for="flexRadioDefault2">
          Gray
        </label>
    </div>

    <div class="input-group mb-3"> <!-- 메모 입력 필드-->
        <input type="text" id="inputField" class="form-control" placeholder="새로운 메모를 입력하세요" aria-label="Recipient's username" aria-describedby="button-addon2">
        <button class="btn btn-outline-secondary" type="button" id="button-addon2">저장</button>
    </div>

    <div class="to-dos" id="toDoList"> </div>  <!-- inputfield에 입력이 되면 그 리스트를 출력할 공간 -->
    

    <script src ="js2.js"></script>
    
</body>
</html>

input한 값을 js에서 이용하기 위해 id부분을 추가한게 끝이다

 

 

기능

  1. 메모를 입력하고 저장하면 새로운 메모가 저장된다
  2. 제목에 현재 시간을 저장한다
  3. 삭제 버튼을 누르면 해당 메모 삭제
  4. 라디오 버튼을 이용해서 타이틀의 배경색을 변경

1번 기능

html에 메모를 입력하는 input과 button이 이미 존재한다 이를 이용해서 메모를 받아 저장하고 다시 html에 보여주는 과정이 필요한다

1
2
3
4

let inputBox = document.getElementById('inputField');  // 할 일 입력창
let addToDo = document.getElementById('button-addon2');  // 버튼
let toDoList = document.getElementById('toDoList');  // 리스트

html에 입력된 데이터를 가저오기위해서 주어진 id와 일치하는 Element 객체를 반환한다 만약 일치하는 id가 없다면 null을 반환

이제 js에서 받은 데이터로 html에 다시 보여 줄 수 있어야한다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

addToDo.addEventListener('click', function(){    // 버튼에 클릭 이벤트가 발생하면
    
    let layout = document.createElement('div');     //헤더 생성
    layout.setAttribute("class","card"); //생성한 헤더에 클래스와 속성 부여
    
    let title = document.createElement('div');     
		title.setAttribute("class","card-header"); 
        
    let contain = document.createElement('div');     
    contain.setAttribute("class","card-body"); 
    
    let text = document.createElement('div');     
    text.setAttribute("class","card-text");  

    if (!inputBox.value)            // 할 일 입력창에 내용이 입력되지 않으면 alert 발생
        alert('내용을 입력해 주세요!');
    else
    {
        toDoList.appendChild(layout); //card div 생성

        title.innerText = "현재 시간";  
        layout.appendChild(title);   //layout 에 title을 넣음 div class="card"의 내부에 생성되기 위함
        
        layout.appendChild(contain); //layout 에 contain을 넣음

        text.innerText = inputBox.value;  //내용 입력
        contain.appendChild(text);

        inputBox.value= "";     // 할 일 입력창 초기화
    }

addEventListener()는 document 특정요소 (여기선 addToDo)가 event(click등)가 일어난다면 실행하는 함수이다

여기서는 버튼이 눌리면 실행된다

document.createElement(‘div’)를 통해서 태그를 생성한다 이 테그에 속성을 setAttribute()로 부여할 수 있는데 이과정은 card 클래스의 css를 이용하기 위해서 원래 형식을 만들어 주기 위함이다

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div class="card">
  <div class="card-header">
    <h1>
      현재시간
    </h1>
   	<div class="card-body">
      <div class="card=text">
        <p>
          내용
        </p>
      </div>
    </div>
  </div>
</div>

appendchild()를 마치고 나면 생성되는 구조이다 bootstrap의 card class에 적용된 css를 그대로 사용하기 위해서 똑같은 현식과 클래스를 부여해야한다

 

 

2번 기능

제목에는 현재 시간을 저장해야한다 저장할 때마다 시간이 다르게 하기위해 함수를 따로 만들어서 이함수가 호출되면 현재 시간을 반환하게 만들었다

1
2
3
4

function getTime(){ 
    let date = new Date();
    return date.toLocaleString('ko-kr');
}

title.innerText = "getTime()"; 을 통해서 시간을 입력한다

 

 

3번 기능

삭제는 remove()를 이용하여 해당하는 부분을 지울수 있다

먼저 버튼을 만들어야 해서 함수안에 버튼을 위한 태그 a를 생성하고 버튼 모양을 위해 클래스를 부여한다

1
2
3
4
5
6

let delet = document.createElement('a');     //헤더 생성
delet.setAttribute("class","btn btn-primary");   //생성한 헤더에 클래스와 속성 부여

// 버튼위치에 맞도록 아래 코드를 추가한다 
delet.innerText = "삭제";  
contain.appendChild(delet);

버튼을 추가 했으면 버튼을 눌렀을때 일어날 함수를 작성해야한다

1
2
3
4

// 삭제하기 위한 버튼 누르면 실행될 함수
delet.addEventListener('click', function(){ 
    layout.remove()
})

addEventListener()를 통해서 클릭한다면 layout 하위 자식들을 지워지게 한다

 

 

4번 기능

라디오 버튼을 통해서 제목 부분의 배경색상을 바꾸는 기능 색상을 바꾸기 위해서card-header class에 back-ground값을 변경 시켜야한다

먼저 html에서 라디오 버튼을 선택한걸 js에서 받아야한다

1
2
3

let radios = document.querySelector('input[type=radio][name=flexRadioDefault]:checked'); // obiect 리턴
let color = radios.id; //pink 또는 gray가 저장된다
console.log(color);

querySelector를 통해서 라디오 버튼에 선택된 값을 얻을 수 있다 이값의 id를 가져오면 pink 또는 gray가 나온다(html에서 id를 pink와 gray로 설정)

받은 값으로 색상을 알았으니 이제 반영해줘야한다

1
2
3
4
5
6
7
8

if (color == "gray") {    
    title.setAttribute("class","card-header"); //생성한 헤더에 클래스와 속성 부여
    title.setAttribute("style","background-color:gary");
}
else {     
    title.setAttribute("class","card-header");
    title.setAttribute("style","background-color:pink");
}

title은 이미 생성한 변수이고 그 변수에 해당하는 클래스에 background-color에 원한느 색상을 넣으면 라디오버튼에 따라 제목 부분 색상이 바뀌게 된다

 

 

querySelector와 getElementByID 차이

눈송이
This post is licensed under CC BY 4.0 by the author.