https://github.com/yuriyvyatkin/notepad-frontend

Записная книжка (Frontend часть)
https://github.com/yuriyvyatkin/notepad-frontend

css html js oop

Last synced: 5 days ago
JSON representation

Записная книжка (Frontend часть)

• Host: GitHub
• URL: https://github.com/yuriyvyatkin/notepad-frontend
• Owner: yuriyvyatkin
• License: mpl-2.0
• Created: 2024-01-05T10:02:41.000Z (10 months ago)
• Default Branch: master
• Last Pushed: 2024-07-12T19:09:04.000Z (4 months ago)
• Last Synced: 2024-07-13T21:15:02.732Z (4 months ago)
• Topics: css, html, js, oop
• Language: JavaScript
• Homepage: https://yuriyvyatkin.github.io/notepad-frontend
• Size: 25.1 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
## Записная книжка (Frontend часть)

**🛠️ Стек**

JS + CSS + HTML

**⚙️ Реализовано**:

  -  Сохранение в истории ссылок и текстовых сообщений

![](./pic/function1.gif)

  -  Кликабельные ссылки (то, что начинается с `http://` или `https://`)

![](./pic/function2.gif)

  -  Сохранение в истории изображений, видео и аудио (как файлов) - через Drag & Drop и через иконку загрузки (скрепка)

![](./pic/function3.1.gif)

![](./pic/function3.2.gif)

  -  Скачивание файлов (на компьютер)

![](./pic/function4.gif)

  -  Ленивая подгрузка: сначала подгружаются последние 4 сообщения, при прокрутке вверх подгружаются следующие 4 и т.д.

![](./pic/function5.gif)

  -  Синхронизация - если приложение открыто в нескольких окнах (вкладках), то контент синхронизируется;

![](./pic/function6.gif)

  -  Отправка геолокации;

![](./pic/function7.1.gif)

![](./pic/function7.2.gif)

  -  Закрепление (pin) одного из сообщений (крепится к верхней части страницы)

![](./pic/function8.gif)

  -  Добавление сообщения в избранное и вкладка для его просмотра

![](./pic/function9.gif)

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

![](./pic/function10.gif)

Backend часть приложения: https://github.com/yuriyvyatkin/notepad-backend

**📚 Инструкция по работе с проектом**

##### 1. Клонирование

```

git clone https://github.com/yuriyvyatkin/notepad-frontend.git

```

```

cd notepad-frontend

```

##### 2. Установка зависимостей

```

npm install

```

##### 3. Запуск

```

npm build

```

```

npm start

```