본문 바로가기
Programming

javascript #3 project 나만의 노트 만들기

by 하하호호 2021. 9. 17.
반응형

 

 

UI 설계

javascript를 이용한 나만의 노트만들기 프로젝트다.

 

 

창의 크기는 400x400이다.

버튼은 총 3가지가 있다.

수정 + 삭제 + 추가 버튼이 구성되어 있다.

 

나만의 노트를 작성하고 수정을 누르면 수정이 되지 

않는 보기모드로 전환된다.

 

삭제 버튼 클릭시 노트가 삭제된다.

 

추가 버튼을 클릭시 새로운 노트가 

생성된다.

 

 

 

프로그램 작동원리

textarea과 새로운 이름의 div를 생성한다.

수정버튼을 클릭시 main이 hidden처리가

되면서 textarea가 display되는 형식의

프로그램이다.

 

추가버튼 혹은 삭제버튼 클릭의 경우

div 태그를 생성하고 삭제하는 원리로

프로그램이 작동한다.

 

 

HTML의 구성 요소들을 가져와서

addEventListener()을 구동한다.

 

메인 함수역할을 하는 addNewNote()에서

새로운 div 태그 클래스를 반복해서

생성하면서, 새로운 노트를 만들어

화면에 display하는 역할을 하고 있다.

 

새로운 노트가 완성되면,

document.querySelector('.content-container').appendChild('note');

코드를 사용해서 새로운 div태그가

content-container태그에 생성된다.

 

 

 

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">
    <title>NoteWeb Pad</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/marked/3.0.4/marked.min.js'></script>
    <script src="https://kit.fontawesome.com/93e22192d8.js" crossorigin="anonymous"></script>
</head>
<body>
    <div class='content-container'>
        <div class="notes">
            <div class="tools">
                <button class="edit"><i class="fas fa-edit"></i></button>
                <button class="trash"><i class="fas fa-trash-alt"></i></button>
                <button class="add"><i class="fas fa-plus"></i></button>
            </div>
            <div class="main hidden"></div>  
            <textarea name="" id="" cols="30" rows="10"></textarea>
            
        </div>        
              
    </div>
</body>
</html>

 

 

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

*{
    box-sizing : border-box;
}

body{
    font-family : 'Poppins', sans-serif;
    background-color: #eec0c6;
    background-image: linear-gradient(315deg, #eec0c6 0%, #7ee8fa 74%);
    display : flex;
    flex-wrap : wrap;
    margin : 10px;
    align-items: center;
}

.notes{
    background-color : white;
    box-shadow : 0 0 10px 4px rgba(0,0,0,0.5);
    width : 400px; 
    height : 400px;
    margin : 1px;
    font-size : 35px;
}

.notes .tools {
    background-color : navy;
    width : 100%;
    height : 50px;        
    display: flex;
    justify-content: flex-end;
}

.tools button{
    background-color : transparent;
    color : white;
    font-size : 20px;
    border : none;
    margin-right : 10px;
    cursor : pointer;
}

.tools button:active{
    color : grey;
    font-size : 15px;
}

.main{
    background-color : white;
    width : 100%;
    height : 100%;
    overflow : hidden;
}

.hidden{
    display : none;
}

textarea{
    width : 100%;
    height : 100%;
    outline : none;
    font-family : inherit;
}

 


JavaScript

const editBTN = document.querySelector('.edit');
const delBTN = document.querySelector('.trash');
const main = document.querySelector('.main');
const textArea = document.querySelector('textarea');
const addBTN = document.querySelector('.add');

delBTN.addEventListener('click', ()=>{
    note.remove();
});
editBTN.addEventListener('click', ()=>{
    main.classList.toggle('hidden');
    textArea.classList.toggle('hidden');
});

textArea.addEventListener('input', (e)=>{
    const { value } = e.target;
    main.innerHTML = marked(value);
})

addBTN.addEventListener('click', ()=>{
    addNewNote();
})


function addNewNote(){
    const note = document.createElement('div');
    note.classList.add('notes');
    note.innerHTML=`
    <div class="notes">
            <div class="tools">
                <button class="edit"><i class="fas fa-edit"></i></button>
                <button class="trash"><i class="fas fa-trash-alt"></i></button>
                <button class="add"><i class="fas fa-plus"></i></button>
            </div>
            <div class="main hidden"></div>  
            <textarea></textarea>
        </div>
    `;
    const editBTN = note.querySelector('.edit');
    const delBTN = note.querySelector('.trash');
    const main = note.querySelector('.main');
    const textArea = note.querySelector('textarea');
    const addBTN = note.querySelector('.add');

    delBTN.addEventListener('click', ()=>{
        note.remove();
    });
    editBTN.addEventListener('click', ()=>{
        main.classList.toggle('hidden');
        textArea.classList.toggle('hidden');
    });
    
    textArea.addEventListener('input', (e)=>{
        const { value } = e.target;
        main.innerHTML = marked(value);
    })
    addBTN.addEventListener('click', ()=>{
        addNewNote();
    })
       
    document.querySelector('.content-container').appendChild(note);
}

 

추가 기능들

 ✔ font / color : https://www.eggradients.com/

 ✔ marked 기능 : https://github.com/markedjs/marked

 ✔ icon : https://fontawesome.com/

반응형
저작자표시

'Programming' 카테고리의 다른 글

깃 Git SSH 키 발급  (0) 2021.09.21
Git 은 도대체 왜 쓰는 걸까?  (0) 2021.09.21
[async await] 비동기함수 in javascript how to use 어떻게 사용하는가 && 개념  (0) 2021.09.18
javascript project #2 시험 템플릿 프로그램  (0) 2021.09.17
javascript countdown project + input 태그에서 javascript로 데이터 받아오는 방법  (0) 2021.09.17
[Web Dev] javascript value 가져오는 방법  (0) 2021.09.16

관련글

댓글

티스토리툴바