Build a simple Object Oriented Javascript library for defining 2-dimensional geometric shapes and making basic calculations with them. The following shapes should be featured:
- circle
- right triangle
- equilateral triangle
- rectangle
- square
- parallelogram
For each shape, the library should be able to do the following:
- calculate the area
- calculate the perimeter
- proportionally resize the shape up or down, given a floating-point scale factor
To view test output alone, run npm run test
.
- Install Node LTS. Need to run multiple versions of Node? Use nvm or nvm-windows
- Clone this repository. -
git clone https://github.com/jcscott2015/2d-geometric-shapes.git
or download the zip - Make sure you're in the directory you just created. -
cd 2d-geometric-shapes
- Install Node Packages. -
npm install
- Run the app. -
npm start -s
This will run the automated build process, start up a webserver, and open the application in your default browser. When doing development with this kit, this command will continue watching files all your files. Every time you hit save the code is rebuilt (in memory), linting runs, and tests run automatically. (Currently, you'll have to reload the browser page manually.) Note: The -s flag is optional. It enables silent mode which suppresses unnecessary messages during the build. - Build the app. -
npm run build
This will run linting and tests and then build the app and place minimized and optimized code files in the dist folder. These can be copied to your public server. - Having issues? See below.
- Run
npm install
- If you forget to do this, you'll see this:babel-node: command not found
. - Make sure you're running the latest version of Node. Or, use Node LTS if you're having issues on Windows. Node 7 has issues on some Windows machines.
- Make sure files with names that begin with a dot (.babelrc, .editorconfig, .eslintrc) are copied to the project directory root. This is easy to overlook if you copy this repository manually.
- Don't run the project from a symbolic link. It will cause issues with file watches.
- Having linting issues? Delete any .eslintrc that you're storing in your user directory. Also, disable any ESLint plugin / custom rules that you've enabled within your editor. These will conflict with the ESLint rules defined in the course.
- Seeing
Error: listen EADDRINUSE :::3000
? That means port 3000 is already in use on your machine. You probably have another instance of this project running on your machine in a different window. So find that window and kill the other instance using Ctrl+C. - Nothing above work? Delete your node_modules folder and re-run npm install.
Dependency | Use |
---|---|
promise-polyfill | Lightweight promise polyfill. A+ compliant |
whatwg-fetch | A window.fetch polyfill |
Dependency | Use |
---|---|
babel-cli | Babel Command line interface |
babel-core | Babel Core for transpiling the new JavaScript to old |
babel-loader | Adds Babel support to Webpack |
babel-preset-env | Babel preset for running all the latest standardized JavaScript features |
babel-register | Register Babel to transpile our Mocha tests |
chai | Node BDD/TDD assertion library for node.js and the browser. Test framework agnostic. |
chai-as-promised | Extends Chai with assertions about promises. |
chai-fetch-mock | Chai plugin for fetch-mock library |
chalk | Node Terminal string styling done right |
cheerio | Supports querying DOM with jQuery like syntax - Useful in testing and build process for HTML manipulation |
compression | Node.js compression middleware |
copy-webpack-plugin | Copy files and directories in webpack |
cross-env | Cross-environment friendly way to handle environment variables |
css-loader | Add CSS support to Webpack |
eslint | Lints JavaScript |
eslint-plugin-import | Advanced linting of ES6 imports |
eslint-watch | Add watch functionality to ESLint |
express | Fast, unopinionated, minimalist web framework |
extract-text-webpack-plugin | Extracts CSS into separate file for production build |
fetch-mock | Mock http requests made using fetch (or isomorphic-fetch) |
file-loader | File loader module for webpack |
html-webpack-plugin | Simplifies creation of HTML files to serve your webpack bundles |
jsdom | In-memory DOM for testing |
jsdom-schema-faker | JSON-Schema + fake data generators |
jsdom-server | Serves JSON files through REST routes |
localtunnel | Expose localhost to the world |
mocha | JavaScript testing library |
nock | Node HTTP Server mocking for node.js |
node-sass | Node libsass wrapper |
npm-run-all | Display results of multiple commands on single command line |
nsp | The Node Security (nodesecurity.io) command line interface |
numeral | Format and manipulate numbers |
rimraf | Delete files |
sass-loader | Add SASS loading support to Webpack |
sinon | JavaScript test spies, stubs and mocks. |
style-loader | Add Style support to Webpack |
url-loader | URL loader module for webpack |
webpack | Bundler with plugin system and integrated development server |
webpack-dev-middleware | Adds middleware support to webpack |