Создайте простое приложение для создания заметок 🔏

Создайте простое приложение для создания заметок 🔏

Учитесь на практике с помощью этого руководства для начинающих

Я люблю писать. Либо это для меня, либо для людей, делиться вещами здесь или в моей новостной рассылке, о коде или случайных вещах: это помогает мне очистить свой разум и записать то, о чем я думаю. Поскольку я всегда ищу новые проекты для улучшения своих навыков кодирования, я хотел сделать что-то, связанное с письмом: приложение для создания заметок.

Что-то, где вы могли бы писать, стилизовать и сохранять свои заметки.

• Напишите: введите то, о чем вы думаете.
• Стиль: как и в Medium, добавьте стиль к тексту (жирный, курсив…)
• Сохранить: автоматически сохраните свою работу, чтобы не потерять ее.

Создадим основную структуру

Это самая простая и короткая часть: она состоит в построении основной HTML-структуры вашей веб-страницы. По крайней мере, все, что следует за тегами !DOCTYPE, head и body, ссылками CSS и JavaScript (на потом) и тегами meta (как в каждом новом проекте).

Чтобы создать наш редактор, нам понадобятся только два div, заголовок и содержимое. Дайте им текст внутри, чтобы вы могли видеть в своем браузере две строки текста. HTML5 великолепен, потому что с помощью всего одного атрибута он может сделать любой тег редактируемым. Передайте каждому из ваших div атрибут contenteditable со значением true и обновите браузер. Если вы нажмете на один из ваших div, теперь вы можете редактировать их содержимое!

На данный момент ваш код должен выглядеть так, как показано ниже, и этого достаточно, если вы хотите иметь очень простой текстовый редактор. Мы могли бы остановиться сейчас, поскольку у нас есть то, что мы хотим, но я думаю, что мы могли бы улучшить его, добавив больше функций!

...
<div contenteditable="true">What I'm thinking about</div>
<div contenteditable="true">Your deep thoughts...</div>
...

Сохраните свою работу

Пишите ли вы сообщения в блоге, случайные мысли или перечисляете идеи своих проектов, вы хотите, чтобы это было в безопасности! Я даже думаю, что вы никогда не должны удалять то, что вы пишете. Нам нужно, чтобы наше приложение автоматически сохраняло наш контент.

Давайте скажем браузеру сохранить ваши записи благодаря мощности JavaScript и localStorage. Это функция API веб-хранилища, которая позволяет хранить данные локально в вашем браузере в течение неограниченного времени. Это означает, что даже если вы закроете вкладку или окно браузера, ваши данные останутся в безопасности и будут сохранены. Шаг за шагом, вот как это сделать:

1. Нацельте свои два div (из части 1) в файл .js (с querySelector) и сохраните их innerHTML в новом экземпляре localStorage.
2. Создайте функцию save(), которая обновляет содержимое, хранящееся в каждом экземпляре localStorage. Это содержимое будет равно новому innerHTML каждого div.
3. Создайте событие на ваших divs, которое запустит функцию сохранения. Я выбрал onkeyup, чтобы сохранять содержимое каждый раз, когда вы вводите новый символ. Добавьте его после объявления функции. Или прямо в файле HTML, добавив новый атрибут к вашим divs: onkeyup="save()".

Итак, вот окончательный код для всей части сохранения:

// Set variables
const editorTitle = document.querySelector('.title');
const editorContent = document.querySelector('.content');
const defaultTitle = 'What are you thinking about?';
const defaultContent = 'Let\'s write your deepest thougts...';

// Attribute localStorage values
editorTitle.innerHTML = localStorage['title'] || defaultTitle;
editorContent.innerHTML = localStorage['content'] || defaultContent;

// Define the saving function
let save = () => {
  localStorage['title'] = editorTitle.innerHTML;
  localStorage['content'] = editorContent.innerHTML;
};

// Launch the function
editorTitle.onkeyup = () => save();
editorContent.onkeyup = () => save();

Я воспользовался этим проектом, чтобы изучить и привыкнуть к новым функциям ES6, таким как функции const и let или => (вы можете многое узнать об этом в этой отличной публикации Zell Liew). Дайте мне знать, если какая-то часть моего кода должна быть улучшена!

Добавьте функции стиля

Базовый редактор, который у нас есть сейчас, работает, но вы согласитесь, что он все еще очень прост и может быть улучшен с помощью новых функций. Почему бы не добавить функции стиля? Жирный шрифт, курсив, подчеркивание кажутся красивыми и могут улучшить внешний вид ваших текстов!

Первым шагом для этого является создание меню с кнопками (столько, сколько элементов стиля у нас есть, в нашем случае три). После нажатия они будут применять стиль к выделенному тексту в вашем контенте. Я не говорю сейчас о CSS. Сначала заставьте это работать, а затем сделайте это красиво.

Я был удивлен, насколько легко было реализовать эти опции. JavaScript имеет встроенные функции, которые делают его очень простым и быстрым. В основном вам нужна только одна функция: execCommand(). С помощью этой функции вы можете передавать параметры (полный список здесь), такие как bold, copy, createLink… После вызова эта функция применит переданный параметр к выделенному тексту (вы даже не нужно сохранять этот текст, так как он определяется автоматически). Если текст не выбран, ничего не происходит. Вот полный, но очень краткий код этих функций стиля:

// Define your styling function
let addStyle = (style) => {
  document.execCommand(style);
};

// Call the function on click
boldButton.onclick = () => addStyle('bold');
italicButton.onclick = () => addStyle('italic');
underlineButton.onclick = () => addStyle('underline');

Как и раньше, вы также можете вызывать функции непосредственно в HTML-теге: onclick="addStyle(’bold’).

Учитывая, что основные браузеры имеют свои собственные встроенные сочетания клавиш, нет необходимости создавать клавиатуру JavaScript для переопределения этих сочетаний клавиш (Ctrl/Cmd + B/U/I).

сделай это красиво

В этой части вы свободны: делайте все, что хотите, чтобы стилизовать свое приложение и сделать его красивым! Меня вдохновляют другие приложения для создания заметок, такие как Papier, Bear, Мобильные приложения Squarespace и Simplenote. Когда я разрабатывал приложение, я сосредоточился на следующих важных моментах:

• Я сделал его отзывчивым, чтобы одно и то же приложение можно было одинаково легко использовать на компьютере, планшете и мобильном телефоне.
• Я хотел чего-то очень простого и минималистского. Мне нравится оставаться сосредоточенным на своих письмах: отвлекаться нельзя.

Результат

Вы можете попробовать демо здесь: https://notes.quentin-bellanger.com. Итак, теперь у вас есть то, что:

• Позволяет вводить заметки с помощью contenteditable, стилизовать их с помощью execCommand и сохранять локально с помощью localStorage. Это основные возможности простого текстового редактора.
• Хорошо отображается во всех основных браузерах (кроме IE). Как вы можете видеть здесь, здесь и здесь, все функции (contenteditable, localStorage, execCommand) этого проекта поддерживаются большинством используемых браузеров, поэтому больших проблем с совместимостью нет.
• Работает на любом устройстве, от компьютера до смартфона. Размер экрана не проблема, и приложение отзывчиво.
• Многому учит. Работа над этим проектом научила меня многому, в основном в JavaScript. Если вы потратите на это время, я надеюсь, вы также узнаете много нового. Если вы застряли, проверьте полный код в репозитории Github.

Это простой текстовый редактор, созданный как личный проект для изучения и улучшения моих навыков программирования. Я знаю, что есть возможные улучшения (например, как сказано в этой публикации, вероятно, есть лучшие и более оптимизированные решения для создания правильного редактора) и новые функции, такие как новые параметры редактора ( ссылка, заголовки, списки…), возможность загрузки заметок, ночной и/или полноэкранный режим…

Хорошее вдохновение для этого проекта исходит от Самая Шамдасани и его редакторского проекта на enlight.ml. Это отличное подспорье для начинающих. Проверьте это, если вы ищете небольшие проекты для начала. Также спасибо Arnaud Rinquin и LAURENT Romain за их ценную помощь в коде.

Спасибо, за то что прочитали эту статью. Вы можете комментировать (или отправить мне твит), если у вас есть вопросы или улучшения. И если вам понравилось, не стесняйтесь 💙 и поделитесь им с другими.