使用HTML，CSS，Vanilla JavaScript和API构建动态粘性纸币应用-DEV365 开发者社区

在本文中，我们将学习如何使用HTML/CSS和JavaScript构建粘性笔记应用程序。我们将将笔记存储在API中，并从API中获取注释以显示在屏幕上。

这是我们将遵循的四个步骤来构建粘性纸条应用：

设置HTML结构和CSS
创建表格以捕获注释
api的发帖
从API获取笔记

要与本教程一起遵循，您需要熟悉以下内容：

HTML和CSS
JavaScript和Dom Maubulation
fetch api

注意：在本教程中，我们将使用mock api存储笔记。

1.设置HTML结构和CSS

创建index.html文件并将其链接到style.css文件。将以下HTML代码添加到index.html。

注意：以下内容html代码，也链接index.js文件

 <head>
    <!-- link style.css file -->
    <link rel="stylesheet" href="./style.css" />
    <title>my notes</title>
  </head>
 <body>
    <main>
      <header>
        <h1>My Notes</h1>
        <a id="display-form-input"
          class="Add-new-note-btn">+ Add a new note</a>
      </header>
      <section id="note-section" class="main-article-section">
        <div id="article-div" class="flex-section-div"></div>
      </section>
    </main>
    <script src="./index.js"></script>
  </body>

现在创建一个style.css文件。将下面的代码添加到style.css文件。

:root {
  --head-color: hsla(0, 0%, 13%, 1);
  --dark-blue: hsla(228, 69%, 13%, 1);
  --blue: hsla(228, 69%, 20%, 1);

  --content-color: hsla(0, 0%, 13%, 1);
  --greyish: hsla(0, 2%, 44%, 1);
  --white: hsla(0, 0%, 100%, 1);
}
body {
  position: relative;
  inline-size: 100%;
  block-size: 100%;
  font-family: "DM Sans", sans-serif;
  background: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.8rem;
}
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
main {
  inline-size: 90%;
}

.add-new-note-btn {
  background-color: var(--dark-blue);
  font-size: 16px;
  line-height: 16px;
  display: inline-block;
  inline-size: 15%;
  text-align: center;
  text-decoration: none;
  padding: 15px 24px;
  color: var(--white);
  border-radius: 25px;
  margin-block-end: 1.5rem;
}
.submit-note{
  padding: 15px 24px;
  background:var(--dark-blue);
  border-radius: 20px;
  color: var(--white);
  margin-block-start: 1rem;
  inline-size: 40%;
  margin-inline-start:60%;
  border:none;
  white-space: nowrap;
}
textarea{
  resize: none;
  padding: 0.7rem;
  display: block;
  inline-size: 310px;
  block-size: 112px;
  border-radius: 10px;
  background:var(--greyish);
  color: var(--white);
}
.note-div{
  inline-size: 160px;
  block-size: 120px;
  background: #FCF5D2;
  border-radius: 10px;
  margin: 1rem;
  padding: 0.4rem;
}
#note-section{
  display: flex;
  flex-wrap: wrap;
}

在浏览器中运行index.html文件。代码输出应重新整理下面的图像。

2.创建表格以捕获笔记

现在，用户需要在某个地方键入音符。在本节中，我们将实现显示表单逻辑。当用户单击+Add new note按钮时，显示表单。然后，用户可以在textarea中输入注释。下面的步骤实现表单逻辑。

创建index.js文件。
添加单击事件侦听器到+Add a new note按钮。下面的代码通过调用displayForm函数来处理点击事件。

const addNewNote = document.querySelector(".Add-new-note-btn");

addNewNote.addEventListener("click",function (event){
  event.preventDefault();
  displayForm()
})

function displayForm(){
  const form = document.createElement("form");
    form.setAttribute("id", "note-form");
    // create textarea
    const textArea = document.createElement("textarea");
    textArea.setAttribute("id", "note");
    textArea.setAttribute("placeholder","Add note");
    // create add note button
    const button = document.createElement("button");
    button.setAttribute("class", "submit-note btn-state");
    button.setAttribute("id", "add-note");
    button.textContent = "Add note";
    // add textarea and button element to form created
    form.append(textArea, button);
    document.body.appendChild(form);
}

运行index.html文件，然后单击Add new note按钮。您的浏览器应该看起来像下面的图片。

3.张贴到API的注释

用户能够在我们的应用程序中键入注释，但是提交时文本消失。我们需要首先防止表格的默认提交。然后获取笔记内容并将注释存储在API中。

要存储在API中，请按照以下步骤：

添加单击事件侦听器到add note按钮
呼叫postNote功能通过url作为参数

 const postNoteBtn = document.querySelector("#add-note");
  postNoteBtn.addEventListener("click", function (e) {
    e.preventDefault();
    postNote("https://64e507a7c555638029140f2a.mockapi.io/note");
  });

注意： add note按钮事件侦听器，在displayForm函数中添加，以防止TypeError messege（ postnotebtn为null ），因为尚未显示键入文本的表单。

postNote函数执行以下操作：

获取用户打字值。
用content作为键

NoteObject

将键入值分配给

  const noteObject = {content:typedValueFromUser};

POST NoteObject 使用fetch方法
创建新的div html元素
将新div的属性分配给从fetch方法获得的值
附录创建了div至index.html中的id note-section的部分元素
删除表单元素

function postNote(url) {
  const note = document.getElementById("note").value;

  let noteObject = { content: note };
  //   request object used in fetch api
  const requestObject = {
    method: "POST",
    headers: {
      "content-type": "application/json",
    },
    body: JSON.stringify(noteObject),
  };

  fetch(url, requestObject).then((response) => {
    if (response.statusText == "Created") {
      response.json().then((noteObj) => {
        const div = document.createElement("div");
        div.setAttribute("class", "note-div");
        div.textContent = noteObj.content;
        document.querySelector("#note-section").appendChild(div);
        document.getElementById("note-form").remove();
      });
    }
  });
}

4.从API获取笔记

我们能够将笔记发布给API。我们还可以在浏览器中显示我们的注释。但是，当浏览器加载时，每个音符都会消失。当浏览器加载时，我们需要在浏览器中显示所有注释。

我们将加载事件侦听器添加到窗口对象。当浏览器加载时，它会触发fetchNote功能。 fetchNote函数执行以下操作：

从阵列形式获取API的所有注释
为数组中的每个音符创建div
将每个div的textContent设置为阵列中的每个音符
将每个div附加到index.html中的ID note-section的部分元素

window.addEventListener("load", function fetchNote() {
  fetch("https://64e507a7c555638029140f2a.mockapi.io/note").then((response) => {
    if (response.statusText == "OK") {
      response.json().then((notes) => {
        notes.forEach((note) => {
          const div = document.createElement("div");
          div.setAttribute("class", "note-div");
          div.textContent = note.content;
          document.querySelector("#note-section").appendChild(div);
        });
      });
    }
  });
});

太好了！现在，您创建了自己的粘性笔记应用程序。粘性音符的最终结果将使下面的图像

删除

结论

总而言之，我们已经开始了使用HTML，CSS和Vanilla JavaScript的基本Web技术创建动态且引人入胜的粘性音符应用程序，并通过API集成增强。我们已经学会了：

设置HTML结构和CSS
创建表格以捕获注释
api的发帖
从API获取笔记

请记住，扩展有无限的可能性。您可以将粘性笔记应用程序扩展到编辑和删除已发布的注释。