Develop web memo application based on JavaScript

Developing a web memo application based on JavaScript

Memos are an important part of our lives and are used to record to-do items, important dates, plans, etc. With the development of the Internet, the demand for web memo applications is also increasing. In this article, we will use JavaScript to develop a simple web memo application.

Before we start, we need to prepare some basic HTML and CSS code. First, we need a list for displaying memos:

<ul id="memos"></ul>

Then, we need an input box and a button for adding new memos:

<input id="memoInput" type="text" placeholder="输入备忘录">
<button id="addButton">添加</button>

Next, we need to write some CSS code to beautify our web memo application:

body {
  font-family: Arial, sans-serif;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin-bottom: 10px;
}

input {
  padding: 5px;
  font-size: 16px;
}

button {
  padding: 5px 10px;
  background-color: #428bca;
  color: white;
  border: none;
  cursor: pointer;
}

The above is the basic HTML and CSS code we need. Next, we'll use JavaScript to add functionality to our web memo application.

First, we need to get the reference of the input box and button:

var memoInput = document.getElementById('memoInput');
var addButton = document.getElementById('addButton');

Then, we need to add a click event listener for the button. When the button is clicked, an add memo will be triggered. Function:

addButton.addEventListener('click', addMemo);

Next, we need to define the function to add a memo. This function will get the value of the input box and add it to the memo list:

function addMemo() {
  var memoText = memoInput.value;
  var memoList = document.getElementById('memos');
  
  if (memoText) {
    var memoItem = document.createElement('li');
    memoItem.textContent = memoText;
    memoList.appendChild(memoItem);
    memoInput.value = '';
  }
}

In the above code, we first get the value of the input box and check whether it is empty. If it is not empty, create a new <li> element and set the value of the input box to its text content. Then, append the new memo item to the memo list and reset the value of the input box to empty.

Finally, we need to initialize our web memo application after the page is loaded and add some initial memos to the memo list:

window.onload = function() {
  var initialMemos = ['购买礼物', '完成报告', '约会晚餐'];
  var memoList = document.getElementById('memos');
  
  for (var i = 0; i < initialMemos.length; i++) {
    var memoItem = document.createElement('li');
    memoItem.textContent = initialMemos[i];
    memoList.appendChild(memoItem);
  }
}

In the above code, we use an array to store Some initial memos. Then, use a loop to iterate over each note in the array and add it to the list of notes in turn.

Through the above steps, we have completed the development of a simple web memo application. Users can enter content in the input box and click the button to add a memo. All memos will be displayed in the memo list.

Through JavaScript event listening and DOM operations, we can easily implement the interactive functions of web applications. I hope the sample code in this article can help you understand and learn JavaScript to develop web applications!

The above is the detailed content of Develop web memo application based on JavaScript. For more information, please follow other related articles on the PHP Chinese website!