Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/notacat1/mesto-project

"Mesto" is a web platform that provides the ability to create photo cards using JavaScript functionality. Here, users can share captivating locations and make them accessible to other participants. This way, a unique collection of moments and places is created, which can be explored and enjoyed.
https://github.com/notacat1/mesto-project

adaptive asynchronous asynchronous-programming bem bem-methodology css html javascript js json oop-principles yandex-praktikum

Last synced: about 2 months ago
JSON representation

"Mesto" is a web platform that provides the ability to create photo cards using JavaScript functionality. Here, users can share captivating locations and make them accessible to other participants. This way, a unique collection of moments and places is created, which can be explored and enjoyed.

Awesome Lists containing this project

README 

        
# Mesto



![Проект Mesto](https://github.com/NotACat1/mesto-project/assets/113008873/ee7b6626-eb2d-49f9-809e-57e81413d4b4)



## О проекте



[Mesto](https://notacat1.github.io/mesto-project/) - это веб-платформа предоставляет возможность создавать фотокарточки, используя функциональность JavaScript. Здесь пользователи могут делиться захватывающими местами и делать их доступными для других участников. Таким образом, создается уникальная коллекция моментов и мест, которые можно исследовать и наслаждаться.



## Реализованный функционал



### 1. Добавление карточки



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



https://github.com/NotACat1/mesto-project/assets/113008873/567ae8d8-637c-4eba-855c-844cd0910421



### 2. Лайк карточки



Возможность ставить лайки к выложенным фотокарточкам доступна для каждого пользователя. Эта функция позволяет выразить свою позитивную реакцию на фотографии других пользователей и поделиться своим восхищением. С помощью нажатия на кнопку "Лайк" пользователи могут показать, что фотокарточка вызвала у них интерес или понравилась.



https://github.com/NotACat1/mesto-project/assets/113008873/78482e45-3aca-490f-bd05-339bafa2c088



### 3. Удаление карточки



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



https://github.com/NotACat1/mesto-project/assets/113008873/384b610b-38b0-4abd-9724-3e509475fbbe



#### Подтверждение удаления



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



![Подтверждение удаления](https://github.com/NotACat1/mesto-project/assets/113008873/fc414824-b03d-4994-a512-18290f0c3fd0)



### 4. Открытие попапа с картинкой



При клике на фотографию фотокарточки пользователь может открыть изображение в полноэкранном режиме, чтобы более детально рассмотреть и ознакомиться с ней. Эта функция позволяет предоставить более углубленный и визуально насыщенный опыт для пользователей.



https://github.com/NotACat1/mesto-project/assets/113008873/64d41488-cbb3-4e53-8aed-ad3da577c952



### 5. Валидация форм



Валидация форм на стороне клиента является важной частью оптимизации пользовательского опыта при заполнении данных в формах на веб-сайте или в приложении. Она предоставляет мгновенную обратную связь пользователю о том, что он ввел некорректные данные до отправки формы на сервер.



https://github.com/NotACat1/mesto-project/assets/113008873/f9f02cf9-9ac5-4d98-bbae-86cbe56a45d5



### 6. Редактирование профиля



Редактирование профиля - это функциональность, которая предоставляет пользователям возможность изменить различные аспекты своего профиля, такие как никнейм и описание. Эта функция позволяет пользователям поддерживать актуальность информации и настраивать свой профиль по своему усмотрению.



https://github.com/NotACat1/mesto-project/assets/113008873/d811f304-574c-42cd-85d6-297bb014080e



### 7. Смена аватарки пользователя 



Смена аватарки пользователя предоставляет возможность пользователям обновить свое изображение профиля, что способствует индивидуализации и актуализации их визуального представления в онлайн-среде.



![Смена аватарки пользователя](https://github.com/NotACat1/mesto-project/assets/113008873/8f913feb-4880-431f-9bcb-27890087178d)



### 8. Закрытие попапа



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



#### 8.1 Закрытие попапа по нажатию кнопки



Закрытие попапа при помощи нажатия на кнопку-крестик - это распространенный и интуитивно понятный способ завершения взаимодействия с всплывающим окном.



https://github.com/NotACat1/mesto-project/assets/113008873/3ac67af5-cb75-4cd2-b198-bf16e1996d0b



#### 8.2 Закрытие попапа по нажатию на оверлей



Закрытие попапа по нажатию на оверлей (область вне самого попапа) - это эффективный способ закрыть всплывающее окно и вернуться к основному контенту. Этот метод предоставляет пользователю простой способ закрыть попап.



https://github.com/NotACat1/mesto-project/assets/113008873/28beccde-915a-4f3a-9ace-bda91d5a06e8



#### 8.3 Закрытие попапа по нажатию клавиши Esc (Escape)



Закрытие попапа по нажатию клавиши "Esc" (Escape) - это удобная и стандартная функциональность, которая обеспечивает быстрый и интуитивный способ закрыть всплывающее окно.



#### 9. Объектно-ориентированное программирование (ООП)



В данном проекте использование объектно-ориентированного программирования (ООП) имеет ключевое значение для создания структурированного и легко управляемого кода. Применение ООП позволяет разделить функциональность на отдельные объекты с собственными свойствами и методами, что способствует повышению читаемости, переиспользуемости и масштабируемости проекта.



#### 10. Методология БЭМ (Блок-Элемент-Модификатор)



Применение методологии БЭМ (Блок-Элемент-Модификатор) в проекте дополняет применение объектно-ориентированного программирования (ООП), создавая структурированный и модульный подход к организации кода и стилей. Методология БЭМ ориентирована на создание понятной и семантически верной разметки и стилей, что способствует легкости сопровождения и расширения проекта. 



## Используемые технологии



### 1. Normalize.css



[Normalize.css](https://necolas.github.io/normalize.css/) предоставляет браузерам возможность более последовательного отображения всех элементов согласно современным стандартам. Он акцентируется на нормализации только тех стилей, которые действительно требуют коррекции.



```css

/* index.css */

@import url(../vendor/normalize.css);

```



### 2. Webpack



[Webpack](https://webpack.js.org/) - это инструмент с открытым исходным кодом для сборки веб-приложений. Он позволяет объединять различные файлы, такие как HTML, CSS, JavaScript, изображения, в единый пакет для оптимизированной доставки на веб-сервер. Webpack также поддерживает использование различных загрузчиков и плагинов, что облегчает процесс разработки, минимизации и управления зависимостями.



Настройки Webpack:



```js

// webpack.config.js

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

const MiniCssExtractPlugin = require('mini-css-extract-plugin');



module.exports = {

  entry: {

    main: './src/pages/index.js'

  },

  output: {

    path: path.resolve(__dirname, 'dist'),

    filename: 'main.js',

    publicPath: '',

  },

  mode: 'development',

  devServer: {

    static: path.resolve(__dirname, './dist'),

    open: true,

    compress: true,

    port: 8080

  },

  module: {

    rules: [{

        test: /\.js$/,

        use: 'babel-loader',

        exclude: '/node_modules/'

      },

      {

        test: /\.(png|svg|jpg|jpeg|gif)$/,

        type: 'asset/resource',

        generator: {

            filename: 'images/[name].[hash][ext]',

          }

      },

    {

      test: /\.(woff|woff2|eot|ttf|otf)$/i,

      type: 'asset/resource',

      generator: {

            filename: 'fonts/[name].[hash][ext]',

        }

      },

      {

        test: /\.css$/,

        use: [MiniCssExtractPlugin.loader, {

            loader: 'css-loader',

            options: {

              importLoaders: 1

            }

          },

          'postcss-loader'

        ]

      },

    ]

  },

  plugins: [

    new HtmlWebpackPlugin({

      template: './src/index.html'

    }),

    new CleanWebpackPlugin(),

    new MiniCssExtractPlugin(),



  ]

}

```



#### 2.1 Babel



[Babel](https://babeljs.io/) - это инструмент для транспиляции кода на JavaScript. Он позволяет разработчикам писать код, используя современные функции языка, которые могут быть не поддержаны всеми браузерами. Babel преобразует этот код в совместимый с более старыми версиями браузеров, обеспечивая кросс-браузерную поддержку и совместимость.



Настройки Babel:



```js

// babel.config.js

const presets = [

  ['@babel/preset-env', {

    targets: {

      edge: '17',

      ie: '11',

      firefox: '50',

      chrome: '64',

      safari: '11.1'

    },

    useBuiltIns: "entry"

  }]

];

module.exports = { presets };

```



#### 2.2 PostCSS



[PostCSS](https://postcss.org/) - это инструмент для обработки и трансформации кода CSS. Он позволяет разработчикам применять различные плагины к CSS коду, автоматизируя задачи, такие как автопрефиксинг, оптимизация, генерация переменных и многое другое. PostCSS гибкий и настраиваемый, что позволяет адаптировать его под конкретные потребности проекта.



Настройки PostCSS:



```js

// postcss.config.js

const autoprefixer = require('autoprefixer');

const cssnano = require('cssnano');

module.exports = {

  plugins: [

    autoprefixer,

    cssnano({ preset: 'default' })

  ]

};

```