Description

The project is a working calculator made in the style of neomorphism.

• Demo

Use technology.

The following technologies were used to create this project:

Task-Manager

Software platform

Preprocessors

Package manager

Languages

---

Plugins

To develop the project through gulp, I used the following types of NPM plugins:

Plugin	Status	Description
gulp-sourcemaps		Intended for generation of css source maps which will be necessary at debugging of a code.
gulp-imagemin		Minify PNG, JPEG, GIF and SVG images with imagemin
gulp-autoprefixer		Prefix CSS with Autoprefixer
imagemin-pngquant		Pngquant imagemin plugin
gulp-uglify		Minify JavaScript with UglifyJS3.
gulp-rigger		Rigger is a build time include engine for Javascript, CSS, CoffeeScript.
gulp-minify-css		Gulp plugin to minify CSS
rimraf		The UNIX command rm -rf for node.
gulp-watch		File watcher that uses super-fast chokidar and emits vinyl objects.
gulp-pug		This Gulp plugin enables you to compile your Pug templates into HTML or JS.
gulp-sass		Compilation of sass and scss files
browser-sync		Keep multiple browsers & devices in sync when building websites.

Documentation

The repository of this project is divided into several sections:

• app - this repository is intended for files with the help of which the project is being developed. It is from this repository that all project files are compiled, which are later transferred to the dist repository;
• dist - this folder is a repository where files from the app repository are compiled;
• docs - a repository intended for displaying the project on Github Pages servers.

The following describes in more detail the repository app and dist:

• app - this repository is divided into several folders and files:

  • image - all images for the site are stored in the folder;

  • js - this folder consists of the main js file called main.js folder partial inside which contains js files predlagaemye to initialize js plugins and the folder libs which contains js library;

  • scss - this folder consists of the main css file called main.scss and the folder partial in which are contained the various scss files and folder libs containing the scss library;

  • template - the folder contains 2 files head.pug and scripts.pugand folder partials inside which there are various pug files consisting of page blocks.

  • index.pug - is the main file inside which page elements are created.

• dist - this repository is divided into several folders and files:

  • image - this folder stores minimized and processed images using gulp plugins such as gulp-imagemin and imagemin-pngquant;

  • js - this folder contains the main js file called main.js which was compiled and minified using the plugins gulp-rigger and gulp-uglify;

  • css - the folder contains the file main.css which contains all the basic styles of the page, the file has been compiled and and minified using the plugins gulp-sass and gulp-minify-css.

  • index.html - the file is the main html document of the page that has been compiled and minimized from index.pug file using the plugin gulp-pug.

This section describes how to work with gulpfile.js used in the project:

• gulpfile.js - this file is a configuration file designed to run tasks assigned by the developer:

  • html:dist - this command is run through the console by writing it gulp html:dist. This command is used to compile pug files, minimize them and transfer pug files to the dist repository;
  • js:dist - this command is run through the console by writing it gulp js:dist. This command is used to compile a file using the rigger plugin, create a sourcemap, minimize the file, and transfer it to the dist repository;
  • style:dist - this command is run through the console by writing it gulp style:dist. This command is used to compile scss files, minimize them, create sourcemap, and transfer files to the dist repository;
  • image:dist - this command is run through the console by writing it gulp image:dist. Use this command to minimize and transfer images to the dist repository;
  • fonts:dist - this command is run through the console by writing it gulp fonts:dist. Use this command to move fonts to the dist repository;
  • dist - this command is run through the console by writing it gulp dist. This command is designed to run several commands at the same time, such as: html:dist, js:dist, style:dist, image:dist, fonts:dist;
  • watch - this command is run through the console by writing it gulp watch. Use this command to monitor file changes;
  • webserver - this command is run through the console by writing it gulp webserver. This command is used to start the local web server;
  • clean - this command is run through the console by writing it gulp clean. This command is used to clean up the repository;
  • default - this command is run through the console by writing it gulp default.This command is used to run all tasks at the same time.

Appearance

The image of the website:

• Gif
• Desktop Image
• Tablet Image
• Phone Image

Gif

• Calculation
  

• Dark Theme
  

Desktop

Phone

• 414px
• 375px
• 320px