HTML CSS 및 JavaScript로 메모 앱 만들기

HTML CSS 및 JavaScript로 메모 앱 만들기

2022-10-19 last update

6 minutes reading programming css javascript html
codewithrandom 블로그에 오신 것을 환영합니다. 이 블로그에서는 HTML, CSS 및 JavaScript를 사용하여 Notes 앱을 만드는 방법을 배웁니다. 이 메모 앱에서는 메모를 새로 만들고 메모를 편집하고 삭제할 수 있습니다.

블로그를 즐기시기 바라며 Notes 앱의 기본 html 구조부터 시작하겠습니다.

*Notes 앱용 HTML 코드 *

목차

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
<link rel="stylesheet" href="style.css" />
<title>Notes App</title>
</head>
<body>
<button class="add" id="add">
<i class="fas fa-plus"></i> Add note
</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/1.2.2/marked.min.js"></script>
<script src="script.js"></script>
</body>
</html>


Notes 앱에 대한 모든 HTML 코드가 있습니다. 이제 CSS 및 JAVASCRIPT 없이 출력을 볼 수 있으며 Notes 앱에 대해 CSS 및 JAVASCRIPT를 작성합니다.

*출력 노트 앱 *



Notes 앱용 CSS 코드

@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];400&display=swap');
* {
box-sizing: border-box;
outline: none;
}
body {
background-color: #7bdaf3;
font-family: 'Poppins', sans-serif;
display: flex;
flex-wrap: wrap;
margin: 0;
padding-top: 3rem;
}
.add {
position: fixed;
top: 1rem;
right: 1rem;
background-color: #9ec862;
color: #fff;
border: none;
border-radius: 3px;
padding: 0.5rem 1rem;
cursor: pointer;
}
.add:active {
transform: scale(0.98);
}
.note {
background-color: #fff;
box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.1);
margin: 30px 20px;
height: 400px;
width: 400px;
overflow-y: scroll;
}
.note .tools {
background-color: #9ec862;
display: flex;
justify-content: flex-end;
padding: 0.5rem;
}
.note .tools button {
background-color: transparent;
border: none;
color: #fff;
cursor: pointer;
font-size: 1rem;
margin-left: 0.5rem;
}
.note textarea {
outline: none;
font-family: inherit;
font-size: 1.2rem;
border: none;
height: 400px;
width: 100%;
padding: 20px;
}
.main {
padding: 20px;
}
.hidden {
display: none;
}


이제 메모 앱에 대한 CSS 섹션을 완료했습니다. 다음은 메모 앱의 업데이트된 출력입니다.

*출력 노트 앱 *



이제 메모 앱에 기능을 위한 자바스크립트를 추가하세요. 우리는 노트 앱을 위해 자바스크립트에서 HTML 코딩을 사용합니다. 왜냐하면 우리는 대부분의 코드를 자바스크립트를 통해 사용하기 때문입니다. 메모 작성을 위한 Textarea와 div를 생성합니다. 그런 다음 메모를 편집하고 메모 양식 메모를 삭제하기 위해 자바 스크립트에서 두 개의 버튼을 만듭니다. 그런 다음 로컬 저장소를 사용하여 브라우저에 메모를 저장합니다.

Notes 앱용 자바스크립트 코드

const addBtn = document.getElementById('add')  
 const notes = JSON.parse(localStorage.getItem('notes'))  
 if(notes) {  
   notes.forEach(note => addNewNote(note))  
 }  
 addBtn.addEventListener('click', () => addNewNote())  
 function addNewNote(text = '') {  
   const note = document.createElement('div')  
   note.classList.add('note')  
   note.innerHTML = `  
   <div class="tools">  
     <button class="edit"><i class="fas fa-edit"></i></button>  
     <button class="delete"><i class="fas fa-trash-alt"></i></button>  
   </div>  
   <div class="main ${text ? "" : "hidden"}"></div>  
   <textarea class="${text ? "hidden" : ""}"></textarea>  
   `  
   const editBtn = note.querySelector('.edit')  
   const deleteBtn = note.querySelector('.delete')  
   const main = note.querySelector('.main')  
   const textArea = note.querySelector('textarea')  
   textArea.value = text  
   main.innerHTML = marked(text)  
   deleteBtn.addEventListener('click', () => {  
     note.remove()  
     updateLS()  
   })  
   editBtn.addEventListener('click', () => {  
     main.classList.toggle('hidden')  
     textArea.classList.toggle('hidden')  
   })  
   textArea.addEventListener('input', (e) => {  
     const { value } = e.target  
     main.innerHTML = marked(value)  
     updateLS()  
   })  
   document.body.appendChild(note)  
 }  
 function updateLS() {  
   const notesText = document.querySelectorAll('textarea')  
   const notes = []  
   notesText.forEach(note => notes.push(note.value))  
   localStorage.setItem('notes', JSON.stringify(notes))  
 }  


Notes 앱의 최종 출력



이제 Javascript를 사용하여 Notes 앱을 완성했습니다. 다음은 메모 앱의 업데이트된 출력입니다. Notes 앱이 마음에 드시면 출력 비디오와 프로젝트 스크린샷을 볼 수 있습니다. 다른 블로그를 참조하고 프론트엔드 개발에 대한 지식을 얻으십시오. 고맙습니다

이 게시물에서는 간단한 HTML, CSS 및 자바스크립트를 사용하여 Notes 앱을 만드는 방법을 배웁니다. 우리가 실수하거나 혼란을 일으켰다면 댓글을 남겨 답장을 보내거나 쉬운 학습을 도와주세요.

작성자 – Random/Anki가 있는 코드

일부 관련 주제 -

category/project

spotify-clone-html-css-javascript

flappy-bird-game-code-flappy-bird-game-using-html-css-javascript

simple-javascript-carousel-how-to-create-a-carousel-using-css-js