├── .gitignore ├── README.md ├── config ├── env.js ├── jest │ ├── cssTransform.js │ └── fileTransform.js ├── paths.js ├── polyfills.js ├── webpack.config.dev.js ├── webpack.config.prod.js └── webpackDevServer.config.js ├── docs ├── asset-manifest.json ├── favicon-32x32.png ├── favicon.ico ├── index.html ├── manifest.json ├── service-worker.js └── static │ ├── css │ ├── main.97acf62d.css │ └── main.97acf62d.css.map │ └── js │ ├── main.8dbb88ef.js │ └── main.8dbb88ef.js.map ├── package.json ├── public ├── favicon-32x32.png ├── favicon.ico ├── index.html └── manifest.json ├── scripts ├── build.js ├── start.js └── test.js ├── src ├── App.test.js ├── components │ ├── App │ │ ├── METHODS.js │ │ ├── index.js │ │ ├── styles.css │ │ └── styles.scss │ ├── Footer │ │ ├── index.js │ │ └── styles.css │ ├── Navbar │ │ ├── components │ │ │ └── MethodsList │ │ │ │ └── index.js │ │ └── index.js │ ├── Results │ │ ├── index.js │ │ └── styles.css │ └── showMethod │ │ ├── index.js │ │ └── styles.css ├── index.css ├── index.js ├── logo.svg └── registerServiceWorker.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | 23 | package-lock.json 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # JavaScript Guide 2 | 3 | JavaScript Guide is a simple web application that helps the user to find the right basic JavaScript methods. 4 | 5 | [See it live here](https://javascriptguide.herokuapp.com) 6 | -------------------------------------------------------------------------------- /config/env.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const fs = require('fs'); 4 | const path = require('path'); 5 | const paths = require('./paths'); 6 | 7 | // Make sure that including paths.js after env.js will read .env variables. 8 | delete require.cache[require.resolve('./paths')]; 9 | 10 | const NODE_ENV = process.env.NODE_ENV; 11 | if (!NODE_ENV) { 12 | throw new Error( 13 | 'The NODE_ENV environment variable is required but was not specified.' 14 | ); 15 | } 16 | 17 | // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use 18 | var dotenvFiles = [ 19 | `${paths.dotenv}.${NODE_ENV}.local`, 20 | `${paths.dotenv}.${NODE_ENV}`, 21 | // Don't include `.env.local` for `test` environment 22 | // since normally you expect tests to produce the same 23 | // results for everyone 24 | NODE_ENV !== 'test' && `${paths.dotenv}.local`, 25 | paths.dotenv, 26 | ].filter(Boolean); 27 | 28 | // Load environment variables from .env* files. Suppress warnings using silent 29 | // if this file is missing. dotenv will never modify any environment variables 30 | // that have already been set. 31 | // https://github.com/motdotla/dotenv 32 | dotenvFiles.forEach(dotenvFile => { 33 | if (fs.existsSync(dotenvFile)) { 34 | require('dotenv').config({ 35 | path: dotenvFile, 36 | }); 37 | } 38 | }); 39 | 40 | // We support resolving modules according to `NODE_PATH`. 41 | // This lets you use absolute paths in imports inside large monorepos: 42 | // https://github.com/facebookincubator/create-react-app/issues/253. 43 | // It works similar to `NODE_PATH` in Node itself: 44 | // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders 45 | // Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored. 46 | // Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims. 47 | // https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421 48 | // We also resolve them to make sure all tools using them work consistently. 49 | const appDirectory = fs.realpathSync(process.cwd()); 50 | process.env.NODE_PATH = (process.env.NODE_PATH || '') 51 | .split(path.delimiter) 52 | .filter(folder => folder && !path.isAbsolute(folder)) 53 | .map(folder => path.resolve(appDirectory, folder)) 54 | .join(path.delimiter); 55 | 56 | // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be 57 | // injected into the application via DefinePlugin in Webpack configuration. 58 | const REACT_APP = /^REACT_APP_/i; 59 | 60 | function getClientEnvironment(publicUrl) { 61 | const raw = Object.keys(process.env) 62 | .filter(key => REACT_APP.test(key)) 63 | .reduce( 64 | (env, key) => { 65 | env[key] = process.env[key]; 66 | return env; 67 | }, 68 | { 69 | // Useful for determining whether we’re running in production mode. 70 | // Most importantly, it switches React into the correct mode. 71 | NODE_ENV: process.env.NODE_ENV || 'development', 72 | // Useful for resolving the correct path to static assets in `public`. 73 | // For example, . 74 | // This should only be used as an escape hatch. Normally you would put 75 | // images into the `src` and `import` them in code to get their paths. 76 | PUBLIC_URL: publicUrl, 77 | } 78 | ); 79 | // Stringify all values so we can feed into Webpack DefinePlugin 80 | const stringified = { 81 | 'process.env': Object.keys(raw).reduce((env, key) => { 82 | env[key] = JSON.stringify(raw[key]); 83 | return env; 84 | }, {}), 85 | }; 86 | 87 | return { raw, stringified }; 88 | } 89 | 90 | module.exports = getClientEnvironment; 91 | -------------------------------------------------------------------------------- /config/jest/cssTransform.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // This is a custom Jest transformer turning style imports into empty objects. 4 | // http://facebook.github.io/jest/docs/tutorial-webpack.html 5 | 6 | module.exports = { 7 | process() { 8 | return 'module.exports = {};'; 9 | }, 10 | getCacheKey() { 11 | // The output is always the same. 12 | return 'cssTransform'; 13 | }, 14 | }; 15 | -------------------------------------------------------------------------------- /config/jest/fileTransform.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const path = require('path'); 4 | 5 | // This is a custom Jest transformer turning file imports into filenames. 6 | // http://facebook.github.io/jest/docs/tutorial-webpack.html 7 | 8 | module.exports = { 9 | process(src, filename) { 10 | return `module.exports = ${JSON.stringify(path.basename(filename))};`; 11 | }, 12 | }; 13 | -------------------------------------------------------------------------------- /config/paths.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const path = require('path'); 4 | const fs = require('fs'); 5 | const url = require('url'); 6 | 7 | // Make sure any symlinks in the project folder are resolved: 8 | // https://github.com/facebookincubator/create-react-app/issues/637 9 | const appDirectory = fs.realpathSync(process.cwd()); 10 | const resolveApp = relativePath => path.resolve(appDirectory, relativePath); 11 | 12 | const envPublicUrl = process.env.PUBLIC_URL; 13 | 14 | function ensureSlash(path, needsSlash) { 15 | const hasSlash = path.endsWith('/'); 16 | if (hasSlash && !needsSlash) { 17 | return path.substr(path, path.length - 1); 18 | } else if (!hasSlash && needsSlash) { 19 | return `${path}/`; 20 | } else { 21 | return path; 22 | } 23 | } 24 | 25 | const getPublicUrl = appPackageJson => 26 | envPublicUrl || require(appPackageJson).homepage; 27 | 28 | // We use `PUBLIC_URL` environment variable or "homepage" field to infer 29 | // "public path" at which the app is served. 30 | // Webpack needs to know it to put the right -------------------------------------------------------------------------------- /docs/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "homepage": "https://lydiahallie.github.io/javascriptguide" 5 | "icons": [ 6 | { 7 | "src": "favicon.ico", 8 | "sizes": "192x192", 9 | "type": "image/png" 10 | } 11 | ], 12 | "start_url": "./index.html", 13 | "display": "standalone", 14 | "theme_color": "#000000", 15 | "background_color": "#ffffff" 16 | } 17 | -------------------------------------------------------------------------------- /docs/service-worker.js: -------------------------------------------------------------------------------- 1 | "use strict";function setOfCachedUrls(e){return e.keys().then(function(e){return e.map(function(e){return e.url})}).then(function(e){return new Set(e)})}var precacheConfig=[["/javascriptguide/index.html","6fd77d7d380e4c1f4f942b4f9ea0d64a"],["/javascriptguide/static/css/main.97acf62d.css","1471bc45098ffa719872bc5a0a7653b4"],["/javascriptguide/static/js/main.8dbb88ef.js","efd010a4dd36050d7e1028eedac4f27c"]],cacheName="sw-precache-v3-sw-precache-webpack-plugin-"+(self.registration?self.registration.scope:""),ignoreUrlParametersMatching=[/^utm_/],addDirectoryIndex=function(e,t){var n=new URL(e);return"/"===n.pathname.slice(-1)&&(n.pathname+=t),n.toString()},cleanResponse=function(e){return e.redirected?("body"in e?Promise.resolve(e.body):e.blob()).then(function(t){return new Response(t,{headers:e.headers,status:e.status,statusText:e.statusText})}):Promise.resolve(e)},createCacheKey=function(e,t,n,r){var a=new URL(e);return r&&a.pathname.match(r)||(a.search+=(a.search?"&":"")+encodeURIComponent(t)+"="+encodeURIComponent(n)),a.toString()},isPathWhitelisted=function(e,t){if(0===e.length)return!0;var n=new URL(t).pathname;return e.some(function(e){return n.match(e)})},stripIgnoredUrlParameters=function(e,t){var n=new URL(e);return n.hash="",n.search=n.search.slice(1).split("&").map(function(e){return e.split("=")}).filter(function(e){return t.every(function(t){return!t.test(e[0])})}).map(function(e){return e.join("=")}).join("&"),n.toString()},hashParamName="_sw-precache",urlsToCacheKeys=new Map(precacheConfig.map(function(e){var t=e[0],n=e[1],r=new URL(t,self.location),a=createCacheKey(r,hashParamName,n,/\.\w{8}\./);return[r.toString(),a]}));self.addEventListener("install",function(e){e.waitUntil(caches.open(cacheName).then(function(e){return setOfCachedUrls(e).then(function(t){return Promise.all(Array.from(urlsToCacheKeys.values()).map(function(n){if(!t.has(n)){var r=new Request(n,{credentials:"same-origin"});return fetch(r).then(function(t){if(!t.ok)throw new Error("Request for "+n+" returned a response with status "+t.status);return cleanResponse(t).then(function(t){return e.put(n,t)})})}}))})}).then(function(){return self.skipWaiting()}))}),self.addEventListener("activate",function(e){var t=new Set(urlsToCacheKeys.values());e.waitUntil(caches.open(cacheName).then(function(e){return e.keys().then(function(n){return Promise.all(n.map(function(n){if(!t.has(n.url))return e.delete(n)}))})}).then(function(){return self.clients.claim()}))}),self.addEventListener("fetch",function(e){if("GET"===e.request.method){var t,n=stripIgnoredUrlParameters(e.request.url,ignoreUrlParametersMatching);(t=urlsToCacheKeys.has(n))||(n=addDirectoryIndex(n,"index.html"),t=urlsToCacheKeys.has(n));!t&&"navigate"===e.request.mode&&isPathWhitelisted(["^(?!\\/__).*"],e.request.url)&&(n=new URL("/javascriptguide/index.html",self.location).toString(),t=urlsToCacheKeys.has(n)),t&&e.respondWith(caches.open(cacheName).then(function(e){return e.match(urlsToCacheKeys.get(n)).then(function(e){if(e)return e;throw Error("The cached response that was expected is missing.")})}).catch(function(t){return console.warn('Couldn\'t serve response for "%s" from cache: %O',e.request.url,t),fetch(e.request)}))}}); -------------------------------------------------------------------------------- /docs/static/css/main.97acf62d.css: -------------------------------------------------------------------------------- 1 | body{margin:0;padding:0;font-family:sans-serif}.method-details,.navbar,.result,.results,.results-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.method-details,.navbar,.result,.results-wrapper{-ms-flex-direction:column;flex-direction:column}.method-details,.results{-ms-flex-pack:center;justify-content:center}.results{-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:15vw;width:85vw}.result{background:rgba(0,0,0,.8);border-radius:20px;color:#fff;height:30em;-ms-flex-pack:distribute;justify-content:space-around;margin:1em;width:35em}.method-details h1,a,button,h2,h5{font-family:Raleway,sans-serif}.method-details h4,.navbar p,p a{font-family:Source Sans Pro,sans-serif;color:hsla(0,0%,100%,.5)}a,h2,h5,p:hover,p a:hover{color:#fff}.method-details h1{border-bottom:1px solid #3a3a3a;padding:.5em;margin:0}a,p a{text-decoration:none;cursor:pointer}.methods p,.methods p:hover,button,p a:hover{cursor:pointer}.methods p,.methods p:hover,button,p a,p a:hover{-webkit-transition:.5s;-o-transition:.5s;transition:.5s}p a{color:hsla(0,0%,100%,.5)}.navbar{background-color:#000;height:100vh;overflow:scroll;position:fixed;width:14em}h4{color:hsla(0,0%,100%,.8);font-size:20px}h5{font-size:18px}button{background-color:hsla(0,0%,100%,.2);border:1px solid #000;color:hsla(0,0%,100%,.4);font-size:16px;font-weight:200;height:3em;width:10em}button:hover{background-color:hsla(0,0%,100%,.6);-webkit-transition:.5s;-o-transition:.5s;transition:.5s}button:focus{background-color:grey;outline:none}button:disabled{background-color:#404144;color:#282828}.methods p{font-size:18px;margin:1em 0}.methods{width:7em}.button-row,.methods{border-bottom:1px solid grey}.button-row{padding:1em}.footer{width:100%;height:3em;background-color:#000;color:hsla(0,0%,100%,.7);display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;font-family:Source Sans Pro,sans-serif;font-size:1em}.show-method-wrapper{width:100vw;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.show-method{background-color:rgba(0,0,0,.8);width:70em;height:100%;border-left:4px solid #000;border-right:4px solid #000}.show-method,.show-method-header{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.show-method-header h1{color:#fff;font-family:Raleway,sans-serif;border-bottom:1px solid #3a3a3a;padding:.5em;width:10em}.back-btn{margin:1em;padding:1em;border-radius:30px;width:100%;font-family:Source Sans Pro,sans-serif;height:1em;display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start}.back-btn p{margin:0;background-color:hsla(0,0%,100%,.1);padding:.5em;border-radius:30px;width:4em}.show-method p{color:hsla(0,0%,100%,.8);font-family:Source Sans Pro,sans-serif}.codepen-wrapper{height:15em;width:30em;margin:3em}#result-link{color:transparent;height:0;width:0}.explanation{width:50em;font-size:20px}.description{margin:1em}.show-method p{margin-top:2em;margin-bottom:-2em}#documentation{margin-bottom:1em} 2 | /*# sourceMappingURL=main.97acf62d.css.map*/ -------------------------------------------------------------------------------- /docs/static/css/main.97acf62d.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["index.css","components/Results/styles.css","components/Footer/styles.css","components/showMethod/styles.css"],"names":[],"mappings":"AAAA,KACE,SACA,UACA,sBAAwB,CCH1B,0DACE,oBACA,aACA,sBACI,kBAAoB,CAG1B,iDACE,0BACI,qBAAuB,CAG7B,yBACE,qBACI,sBAAwB,CAG9B,SACE,mBACI,eACJ,iBACA,UAAY,CAGd,QACE,0BACA,mBACA,WACA,YACA,yBACI,6BACJ,WACA,UAAY,CAGd,kCACE,8BAAmC,CAGrC,iCACE,uCACA,wBAAgC,CAGlC,0BACE,UAAa,CAGf,mBACE,gCACA,aACA,QAAU,CAGZ,MACE,qBACA,cAAgB,CAGlB,6CAIE,cAAgB,CAGlB,iDANE,uBACA,kBACA,cAAiB,CASlB,IAJC,wBAAgC,CAMlC,QACE,sBACA,aACA,gBACA,eACA,UAAY,CAGd,GACE,yBACA,cAAgB,CAGlB,GACE,cAAgB,CAGlB,OACE,oCACA,sBACA,yBACA,eACA,gBACA,WACA,UAAY,CAGd,aACE,oCACA,uBACA,kBACA,cAAiB,CAGnB,aACE,sBACA,YAAc,CAGhB,gBACE,yBACA,aAAe,CAGjB,WACE,eACA,YAAc,CAGhB,SAEE,SAAW,CAGb,qBAJE,4BAA8B,CAO/B,YADC,WAAa,CCjIf,QACE,WACA,WACA,sBACA,yBACA,oBACA,aACA,qBACI,uBACJ,sBACI,mBACJ,uCACA,aAAe,CCZjB,qBACE,YACA,oBACA,aACA,qBACI,uBACJ,sBACI,kBAAoB,CAG1B,aASE,gCACA,WACA,YACA,2BACA,2BAA8B,CAGhC,iCAfE,oBACA,aACA,0BACI,sBACJ,sBACI,mBACJ,qBACI,sBAAwB,CAmB9B,uBACE,WACA,+BACA,gCACA,aACA,UAAY,CAGd,UACE,WACA,YACA,mBACA,WACA,uCACA,WACA,oBACA,aACA,oBACI,0BAA4B,CAGlC,YACE,SACA,oCACA,aACA,mBACA,SAAW,CAGb,eACE,yBACA,sCAA2C,CAG7C,iBACE,YACA,WACA,UAAY,CAGd,aACE,kBACA,SACA,OAAW,CAGb,aACE,WACA,cAAgB,CAGlB,aACE,UAAY,CAGd,eACE,eACA,kBAAoB,CAGtB,eACE,iBAAmB","file":"static/css/main.97acf62d.css","sourcesContent":["body {\n margin: 0;\n padding: 0;\n font-family: sans-serif;\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/index.css",".results-wrapper, .results, .result, .method-details, .navbar {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.results-wrapper, .result, .method-details, .navbar {\n -ms-flex-direction: column;\n flex-direction: column;\n}\n\n.results, .method-details {\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n.results {\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n margin-left: 15vw;\n width: 85vw;\n}\n\n.result {\n background: rgba(0, 0, 0, 0.8);\n border-radius: 20px;\n color: white;\n height: 30em;\n -ms-flex-pack: distribute;\n justify-content: space-around;\n margin: 1em;\n width: 35em;\n}\n\na, button, h2, h5, .method-details h1 {\n font-family: 'Raleway', sans-serif;\n}\n\n.navbar p, p a, .method-details h4 {\n font-family: 'Source Sans Pro', sans-serif;\n color: rgba(255, 255, 255, 0.5);\n}\n\na, p:hover, p a:hover, h2, h5 {\n color: white;\n}\n\n.method-details h1 {\n border-bottom: 1px solid #3a3a3a;\n padding: .5em;\n margin: 0;\n}\n\na, p a {\n text-decoration: none;\n cursor: pointer;\n}\n\np a:hover, button, .methods p, .methods p:hover {\n -webkit-transition: 0.5s;\n -o-transition: 0.5s;\n transition: 0.5s;\n cursor: pointer;\n}\n\np a {\n color: rgba(255, 255, 255, 0.5);\n -webkit-transition: 0.5s;\n -o-transition: 0.5s;\n transition: 0.5s;\n}\n\n.navbar {\n background-color: black;\n height: 100vh;\n overflow: scroll;\n position: fixed;\n width: 14em;\n}\n\nh4 {\n color: rgba(255, 255, 255, 0.8);\n font-size: 20px;\n}\n\nh5 {\n font-size: 18px;\n}\n\nbutton {\n background-color: rgba(255, 255, 255, 0.2);\n border: 1px solid black;\n color: rgba(255, 255, 255, 0.4);\n font-size: 16px;\n font-weight: 200;\n height: 3em;\n width: 10em;\n}\n\nbutton:hover {\n background-color: rgba(255, 255, 255, 0.6);\n -webkit-transition: 0.5s;\n -o-transition: 0.5s;\n transition: 0.5s;\n}\n\nbutton:focus {\n background-color: grey;\n outline: none;\n}\n\nbutton:disabled {\n background-color: #404144;\n color: #282828;\n}\n\n.methods p {\n font-size: 18px;\n margin: 1em 0;\n}\n\n.methods {\n border-bottom: 1px solid grey;\n width: 7em;\n}\n\n.button-row {\n border-bottom: 1px solid grey;\n padding: 1em;\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/Results/styles.css",".footer {\n width: 100%;\n height: 3em;\n background-color: black;\n color: rgba(255, 255, 255, 0.7);\n display: -ms-flexbox;\n display: flex;\n -ms-flex-pack: center;\n justify-content: center;\n -ms-flex-align: center;\n align-items: center;\n font-family: 'Source Sans Pro', sans-serif;\n font-size: 1em;\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/Footer/styles.css",".show-method-wrapper {\n width: 100vw;\n display: -ms-flexbox;\n display: flex;\n -ms-flex-pack: center;\n justify-content: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.show-method {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-direction: column;\n flex-direction: column;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-pack: center;\n justify-content: center;\n background-color: rgba(0, 0, 0, 0.8);\n width: 70em;\n height: 100%;\n border-left: 4px solid black;\n border-right: 4px solid black;\n}\n\n.show-method-header {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-pack: center;\n justify-content: center;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-direction: column;\n flex-direction: column;\n}\n\n.show-method-header h1 {\n color: white;\n font-family: 'Raleway', sans-serif;\n border-bottom: 1px solid #3a3a3a;\n padding: .5em;\n width: 10em;\n}\n\n.back-btn {\n margin: 1em;\n padding: 1em;\n border-radius: 30px;\n width: 100%;\n font-family: 'Source Sans Pro', sans-serif;\n height: 1em;\n display: -ms-flexbox;\n display: flex;\n -ms-flex-pack: start;\n justify-content: flex-start;\n}\n\n.back-btn p {\n margin: 0;\n background-color: rgba(255, 255, 255, 0.1);\n padding: .5em;\n border-radius: 30px;\n width: 4em;\n}\n\n.show-method p {\n color: rgba(255, 255, 255, 0.8);\n font-family: 'Source Sans Pro', sans-serif;\n}\n\n.codepen-wrapper {\n height: 15em;\n width: 30em;\n margin: 3em;\n}\n\n#result-link {\n color: transparent;\n height: 0em;\n width: 0em;\n}\n\n.explanation {\n width: 50em;\n font-size: 20px;\n}\n\n.description {\n margin: 1em;\n}\n\n.show-method p{\n margin-top: 2em;\n margin-bottom: -2em;\n}\n\n#documentation {\n margin-bottom: 1em;\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/showMethod/styles.css"],"sourceRoot":""} -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "javascript-help", 3 | "version": "0.1.0", 4 | "private": true, 5 | "homepage": "https://lydiahallie.github.io/javascriptguide", 6 | "scripts": { 7 | "start": "node scripts/start.js", 8 | "build": "node scripts/build.js", 9 | "test": "node scripts/test.js --env=jsdom", 10 | "predeploy": "npm run build", 11 | "deploy": "gh-pages -d build" 12 | }, 13 | "jest": { 14 | "collectCoverageFrom": [ 15 | "src/**/*.{js,jsx}" 16 | ], 17 | "setupFiles": [ 18 | "/config/polyfills.js" 19 | ], 20 | "testMatch": [ 21 | "/src/**/__tests__/**/*.js?(x)", 22 | "/src/**/?(*.)(spec|test).js?(x)" 23 | ], 24 | "testEnvironment": "node", 25 | "testURL": "http://localhost", 26 | "transform": { 27 | "^.+\\.(js|jsx)$": "/node_modules/babel-jest", 28 | "^.+\\.css$": "/config/jest/cssTransform.js", 29 | "^(?!.*\\.(js|jsx|css|json)$)": "/config/jest/fileTransform.js" 30 | }, 31 | "transformIgnorePatterns": [ 32 | "[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$" 33 | ], 34 | "moduleNameMapper": { 35 | "^react-native$": "react-native-web" 36 | }, 37 | "moduleFileExtensions": [ 38 | "web.js", 39 | "js", 40 | "json", 41 | "web.jsx", 42 | "jsx", 43 | "node" 44 | ] 45 | }, 46 | "babel": { 47 | "presets": [ 48 | "react-app" 49 | ] 50 | }, 51 | "eslintConfig": { 52 | "extends": "react-app" 53 | }, 54 | "dependencies": { 55 | "autoprefixer": "7.1.2", 56 | "babel-core": "6.25.0", 57 | "babel-eslint": "7.2.3", 58 | "babel-jest": "20.0.3", 59 | "babel-loader": "7.1.1", 60 | "babel-preset-react-app": "^3.0.2", 61 | "babel-runtime": "6.26.0", 62 | "case-sensitive-paths-webpack-plugin": "2.1.1", 63 | "chalk": "1.1.3", 64 | "css-loader": "0.28.4", 65 | "dotenv": "4.0.0", 66 | "eslint": "4.4.1", 67 | "eslint-config-react-app": "^2.0.0", 68 | "eslint-loader": "1.9.0", 69 | "eslint-plugin-flowtype": "2.35.0", 70 | "eslint-plugin-import": "2.7.0", 71 | "eslint-plugin-jsx-a11y": "5.1.1", 72 | "eslint-plugin-react": "7.1.0", 73 | "extract-text-webpack-plugin": "3.0.0", 74 | "file-loader": "0.11.2", 75 | "fs-extra": "3.0.1", 76 | "html-webpack-plugin": "2.29.0", 77 | "jest": "20.0.4", 78 | "node-sass": "^4.5.3", 79 | "object-assign": "4.1.1", 80 | "postcss-flexbugs-fixes": "3.2.0", 81 | "postcss-loader": "2.0.6", 82 | "promise": "8.0.1", 83 | "prop-types": "^15.5.10", 84 | "react": "^15.6.1", 85 | "react-codepen": "^0.1.0", 86 | "react-dev-utils": "^4.0.1", 87 | "react-dom": "^15.6.1", 88 | "react-materialize": "^1.0.11", 89 | "react-router-dom": "^4.2.2", 90 | "sass-loader": "^6.0.6", 91 | "style-loader": "0.18.2", 92 | "sw-precache-webpack-plugin": "0.11.4", 93 | "url-loader": "0.5.9", 94 | "webpack": "3.5.1", 95 | "webpack-dev-server": "2.7.1", 96 | "webpack-manifest-plugin": "1.2.1", 97 | "whatwg-fetch": "2.0.3" 98 | }, 99 | "devDependencies": { 100 | "gh-pages": "^1.0.0" 101 | } 102 | } 103 | -------------------------------------------------------------------------------- /public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-guide/75d47896ae0ab0e5f1dbaad2ef2a2e18a48247a5/public/favicon-32x32.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-guide/75d47896ae0ab0e5f1dbaad2ef2a2e18a48247a5/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 26 | JavaScript Guide 27 | 28 | 29 | 32 |
33 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /scripts/build.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // Do this as the first thing so that any code reading it knows the right env. 4 | process.env.BABEL_ENV = 'production'; 5 | process.env.NODE_ENV = 'production'; 6 | 7 | // Makes the script crash on unhandled rejections instead of silently 8 | // ignoring them. In the future, promise rejections that are not handled will 9 | // terminate the Node.js process with a non-zero exit code. 10 | process.on('unhandledRejection', err => { 11 | throw err; 12 | }); 13 | 14 | // Ensure environment variables are read. 15 | require('../config/env'); 16 | 17 | const path = require('path'); 18 | const chalk = require('chalk'); 19 | const fs = require('fs-extra'); 20 | const webpack = require('webpack'); 21 | const config = require('../config/webpack.config.prod'); 22 | const paths = require('../config/paths'); 23 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles'); 24 | const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages'); 25 | const printHostingInstructions = require('react-dev-utils/printHostingInstructions'); 26 | const FileSizeReporter = require('react-dev-utils/FileSizeReporter'); 27 | const printBuildError = require('react-dev-utils/printBuildError'); 28 | 29 | const measureFileSizesBeforeBuild = 30 | FileSizeReporter.measureFileSizesBeforeBuild; 31 | const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild; 32 | const useYarn = fs.existsSync(paths.yarnLockFile); 33 | 34 | // These sizes are pretty large. We'll warn for bundles exceeding them. 35 | const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024; 36 | const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024; 37 | 38 | // Warn and crash if required files are missing 39 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) { 40 | process.exit(1); 41 | } 42 | 43 | // First, read the current file sizes in build directory. 44 | // This lets us display how much they changed later. 45 | measureFileSizesBeforeBuild(paths.appBuild) 46 | .then(previousFileSizes => { 47 | // Remove all content but keep the directory so that 48 | // if you're in it, you don't end up in Trash 49 | fs.emptyDirSync(paths.appBuild); 50 | // Merge with the public folder 51 | copyPublicFolder(); 52 | // Start the webpack build 53 | return build(previousFileSizes); 54 | }) 55 | .then( 56 | ({ stats, previousFileSizes, warnings }) => { 57 | if (warnings.length) { 58 | console.log(chalk.yellow('Compiled with warnings.\n')); 59 | console.log(warnings.join('\n\n')); 60 | console.log( 61 | '\nSearch for the ' + 62 | chalk.underline(chalk.yellow('keywords')) + 63 | ' to learn more about each warning.' 64 | ); 65 | console.log( 66 | 'To ignore, add ' + 67 | chalk.cyan('// eslint-disable-next-line') + 68 | ' to the line before.\n' 69 | ); 70 | } else { 71 | console.log(chalk.green('Compiled successfully.\n')); 72 | } 73 | 74 | console.log('File sizes after gzip:\n'); 75 | printFileSizesAfterBuild( 76 | stats, 77 | previousFileSizes, 78 | paths.appBuild, 79 | WARN_AFTER_BUNDLE_GZIP_SIZE, 80 | WARN_AFTER_CHUNK_GZIP_SIZE 81 | ); 82 | console.log(); 83 | 84 | const appPackage = require(paths.appPackageJson); 85 | const publicUrl = paths.publicUrl; 86 | const publicPath = config.output.publicPath; 87 | const buildFolder = path.relative(process.cwd(), paths.appBuild); 88 | printHostingInstructions( 89 | appPackage, 90 | publicUrl, 91 | publicPath, 92 | buildFolder, 93 | useYarn 94 | ); 95 | }, 96 | err => { 97 | console.log(chalk.red('Failed to compile.\n')); 98 | printBuildError(err); 99 | process.exit(1); 100 | } 101 | ); 102 | 103 | // Create the production build and print the deployment instructions. 104 | function build(previousFileSizes) { 105 | console.log('Creating an optimized production build...'); 106 | 107 | let compiler = webpack(config); 108 | return new Promise((resolve, reject) => { 109 | compiler.run((err, stats) => { 110 | if (err) { 111 | return reject(err); 112 | } 113 | const messages = formatWebpackMessages(stats.toJson({}, true)); 114 | if (messages.errors.length) { 115 | // Only keep the first error. Others are often indicative 116 | // of the same problem, but confuse the reader with noise. 117 | if (messages.errors.length > 1) { 118 | messages.errors.length = 1; 119 | } 120 | return reject(new Error(messages.errors.join('\n\n'))); 121 | } 122 | if ( 123 | process.env.CI && 124 | (typeof process.env.CI !== 'string' || 125 | process.env.CI.toLowerCase() !== 'false') && 126 | messages.warnings.length 127 | ) { 128 | console.log( 129 | chalk.yellow( 130 | '\nTreating warnings as errors because process.env.CI = true.\n' + 131 | 'Most CI servers set it automatically.\n' 132 | ) 133 | ); 134 | return reject(new Error(messages.warnings.join('\n\n'))); 135 | } 136 | return resolve({ 137 | stats, 138 | previousFileSizes, 139 | warnings: messages.warnings, 140 | }); 141 | }); 142 | }); 143 | } 144 | 145 | function copyPublicFolder() { 146 | fs.copySync(paths.appPublic, paths.appBuild, { 147 | dereference: true, 148 | filter: file => file !== paths.appHtml, 149 | }); 150 | } 151 | -------------------------------------------------------------------------------- /scripts/start.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // Do this as the first thing so that any code reading it knows the right env. 4 | process.env.BABEL_ENV = 'development'; 5 | process.env.NODE_ENV = 'development'; 6 | 7 | // Makes the script crash on unhandled rejections instead of silently 8 | // ignoring them. In the future, promise rejections that are not handled will 9 | // terminate the Node.js process with a non-zero exit code. 10 | process.on('unhandledRejection', err => { 11 | throw err; 12 | }); 13 | 14 | // Ensure environment variables are read. 15 | require('../config/env'); 16 | 17 | const fs = require('fs'); 18 | const chalk = require('chalk'); 19 | const webpack = require('webpack'); 20 | const WebpackDevServer = require('webpack-dev-server'); 21 | const clearConsole = require('react-dev-utils/clearConsole'); 22 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles'); 23 | const { 24 | choosePort, 25 | createCompiler, 26 | prepareProxy, 27 | prepareUrls, 28 | } = require('react-dev-utils/WebpackDevServerUtils'); 29 | const openBrowser = require('react-dev-utils/openBrowser'); 30 | const paths = require('../config/paths'); 31 | const config = require('../config/webpack.config.dev'); 32 | const createDevServerConfig = require('../config/webpackDevServer.config'); 33 | 34 | const useYarn = fs.existsSync(paths.yarnLockFile); 35 | const isInteractive = process.stdout.isTTY; 36 | 37 | // Warn and crash if required files are missing 38 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) { 39 | process.exit(1); 40 | } 41 | 42 | // Tools like Cloud9 rely on this. 43 | const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000; 44 | const HOST = process.env.HOST || '0.0.0.0'; 45 | 46 | // We attempt to use the default port but if it is busy, we offer the user to 47 | // run on a different port. `detect()` Promise resolves to the next free port. 48 | choosePort(HOST, DEFAULT_PORT) 49 | .then(port => { 50 | if (port == null) { 51 | // We have not found a port. 52 | return; 53 | } 54 | const protocol = process.env.HTTPS === 'true' ? 'https' : 'http'; 55 | const appName = require(paths.appPackageJson).name; 56 | const urls = prepareUrls(protocol, HOST, port); 57 | // Create a webpack compiler that is configured with custom messages. 58 | const compiler = createCompiler(webpack, config, appName, urls, useYarn); 59 | // Load proxy config 60 | const proxySetting = require(paths.appPackageJson).proxy; 61 | const proxyConfig = prepareProxy(proxySetting, paths.appPublic); 62 | // Serve webpack assets generated by the compiler over a web sever. 63 | const serverConfig = createDevServerConfig( 64 | proxyConfig, 65 | urls.lanUrlForConfig 66 | ); 67 | const devServer = new WebpackDevServer(compiler, serverConfig); 68 | // Launch WebpackDevServer. 69 | devServer.listen(port, HOST, err => { 70 | if (err) { 71 | return console.log(err); 72 | } 73 | if (isInteractive) { 74 | clearConsole(); 75 | } 76 | console.log(chalk.cyan('Starting the development server...\n')); 77 | openBrowser(urls.localUrlForBrowser); 78 | }); 79 | 80 | ['SIGINT', 'SIGTERM'].forEach(function(sig) { 81 | process.on(sig, function() { 82 | devServer.close(); 83 | process.exit(); 84 | }); 85 | }); 86 | }) 87 | .catch(err => { 88 | if (err && err.message) { 89 | console.log(err.message); 90 | } 91 | process.exit(1); 92 | }); 93 | -------------------------------------------------------------------------------- /scripts/test.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // Do this as the first thing so that any code reading it knows the right env. 4 | process.env.BABEL_ENV = 'test'; 5 | process.env.NODE_ENV = 'test'; 6 | process.env.PUBLIC_URL = ''; 7 | 8 | // Makes the script crash on unhandled rejections instead of silently 9 | // ignoring them. In the future, promise rejections that are not handled will 10 | // terminate the Node.js process with a non-zero exit code. 11 | process.on('unhandledRejection', err => { 12 | throw err; 13 | }); 14 | 15 | // Ensure environment variables are read. 16 | require('../config/env'); 17 | 18 | const jest = require('jest'); 19 | const argv = process.argv.slice(2); 20 | 21 | // Watch unless on CI or in coverage mode 22 | if (!process.env.CI && argv.indexOf('--coverage') < 0) { 23 | argv.push('--watch'); 24 | } 25 | 26 | 27 | jest.run(argv); 28 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | }); 9 | -------------------------------------------------------------------------------- /src/components/App/METHODS.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './styles.css'; 3 | 4 | const METHODS = [ 5 | { 6 | id: 1, 7 | name: ".charAt()", 8 | description: "Returns the character at the specified index (position)", 9 | goal: "find", 10 | dataType: "string", 11 | image: "https://image.ibb.co/mF8pBv/Screen_Shot_2017_09_07_at_20_41_28.png", 12 | URL: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/charAt", 13 | hash: "ZXzymb", 14 | explanation: ( 15 |
16 |

The .charAt() method returns the character at the index that is equal to the value of your argument. The argument is the number that is passed inbetween the parentheses.

17 |
18 |
19 | 20 | "Hello World".charAt(4) 21 | 22 |
23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 |
"Hello World"The string we want to check.
.charAt() The method we use in order to find the right index.
4The index of the character we want to have returned.
38 |
39 |
40 |
41 | ) 42 | }, 43 | { 44 | id: 2, 45 | name: ".concat()", 46 | description: "Joins two or more strings, and returns a new joined strings", 47 | goal: "join", 48 | dataType: "array", 49 | image: "https://image.ibb.co/gKoajF/Screen_Shot_2017_09_08_at_12_55_09.png", 50 | URL: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat?v=b", 51 | hash: "MEgEVq", 52 | explanation: ( 53 |
54 |

55 | The .concat() method concatenates two arrays. It returns a new array, it doesn't modify the original arrays. 56 |

57 |
58 |

let arr1 = ['Hello'];

59 |

let arr2 = ['World'];

60 |

arr1.concat(arr2) = ['Hello', 'World'];

61 |
62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 |
.concat()The method we use in order to concatenate our arrays.
arr1Our first array, the value of this array will be the first value of our new array with the concatenated values.
arr2Our second array, the value of this array will be the second value of our new array with the concatenated values.
['Hello', 'World']Our new array which contains the values of the arrays we concatenated.
80 |
81 |
82 |
83 | ) 84 | }, 85 | { 86 | id: 3, 87 | name: ".every()", 88 | description: "checks if every element in an array passes a test", 89 | goal: "check", 90 | dataType: "array", 91 | image: "https://image.ibb.co/f44y3k/Screen_Shot_2017_09_20_at_17_35_08_1.png", 92 | URL: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/every", 93 | hash: "wrwqrv", 94 | explanation: ( 95 |
96 |

97 | The .every() method checks if every element in an array passes a test. The test is a function that you create yourself. 98 |

99 |
100 |
101 |

const testValue = (x => x >= 10);

102 |

[2, 4, 9, 10, 20].every(testValue);

103 |
104 |
105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 |
testValueThe name of the function that contains the "test".
(x = x >= 10)This is our "test". The x stands for every single item in the array. You can call x anything you want, but both the first and the second x in our function need to have the same name. This basically says: check every single item, if every single item is (in this case) bigger or equal to 10, then return true.
[2, 4, 9, 10, 20]The array we want to have checked.
.every()The method we use in order to check whether every single item in the array returned true, thus passed our test.
123 |
124 |
125 |
126 | ) 127 | }, 128 | { 129 | id: 4, 130 | name: ".fill()", 131 | description: "Fill the elements in an array with a static value.", 132 | goal: "change", 133 | dataType: "array", 134 | image: "https://image.ibb.co/f95MOk/Screen_Shot_2017_09_20_at_17_38_52.png", 135 | URL: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/fill", 136 | hash: "YrKrBW", 137 | explanation: ( 138 |
139 |

The .every() method checks if every element in an array passes a test. The test is a function that you create yourself.

140 |
141 |
142 |

let numbers = [1, 2, 3];

143 |

numbers.fill(3);

144 |
145 |
146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 |
numbersThe name of our array that we want to change.
[1, 2, 3]The array that we want to change
.fill()The method we use in order to fill every value in the array with the value that we pass as argument.
3The value that we want every single item in the array to have.
164 |
165 |
166 |
167 | ) 168 | }, 169 | { 170 | id: 5, 171 | name: ".filter()", 172 | description: "Creates a new array with every element in an array that pass a test.", 173 | goal: "find", 174 | dataType: "array", 175 | image: "https://image.ibb.co/j2e4b5/Screen_Shot_2017_09_20_at_17_40_08.png", 176 | URL: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter", 177 | hash: "yzBzrQ", 178 | explanation: ( 179 |
180 |

The .filter() method checks if an element passes a test, and adds that item to a new array.

181 |
182 |
183 |

const isBigEnough = (x => x >= 10);

184 |

[1, 4, 19, -1, 14].filter(isBigEnough);

185 |
186 |
187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 |
isBigEnoughThe name of the function that contains the "test".
(x = x >= 10)This is our "test". The x stands for every single item in the array. You can call x anything you want, but both the first and the second x in our function need to have the same name. This basically says: check every single item, if an item is (in this case) bigger or equal to 10, then the item has passed the test
[1, 4, 19, -1, 14]The array we want to filter through.
.filter()The method we use in order to add the items that passed our "test" to a new array.
205 |
206 |
207 |
208 | ) 209 | }, 210 | { 211 | id: 6, 212 | name: ".find()", 213 | description: "Returns the value of the first element in an array that pass a test.", 214 | goal: "find", 215 | dataType: "array", 216 | image: "https://image.ibb.co/b97FG5/Screen_Shot_2017_09_20_at_17_40_51.png", 217 | URL: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find", 218 | hash: "MEgOKR", 219 | explanation: ( 220 |
221 |

The .find() method checks if an element passes a test, and returns the value of the first item that passed the test.

222 |
223 |
224 |

const isBigEnough = (x => x >= 10);

225 |

[1, 4, 19, -1, 14].find(isBigEnough);

226 |
227 |
228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 |
isBigEnoughThe name of the function that contains the "test".
(x = x >= 10)This is our "test". The x stands for every single item in the array. You can call x anything you want, but both the first and the second x in our function need to have the same name. If an item is (in this case) bigger or equal to 10, then that item has passed the test. The .find() method returns only the first value it finds.
[1, 4, 19, -1, 14]The array we want to check.
.find()The method we use in order to get the value of the first item in the array that passed the test.
246 |
247 |
248 |
249 | ) 250 | }, 251 | { 252 | id: 7, 253 | name: ".findIndex()", 254 | description: "Returns the index of the first element in an array that pass a test.", 255 | goal: "check", 256 | dataType: "array", 257 | image:"https://image.ibb.co/da02w5/Screen_Shot_2017_09_20_at_17_59_14.png", 258 | URL:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex", 259 | hash: "pWzdeB", 260 | explanation: ( 261 |
262 |

The .findIndex() method returns the index of the first element in an array that pass a test.

263 |
264 |
265 |

const isBigEnough = (x => x >= 10);

266 |

[1, 4, 19, -1, 14].findIndex(isBigEnough);

267 |
268 |
269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 |
isBigEnoughThe name of the function that contains the "test".
(x = x >= 10)This is our "test". The x stands for every single item in the array. You can call x anything you want, but both the first and the second x in our function need to have the same name. If an item is (in this case) bigger or equal to 10, then that item has passed the test. The .find() method returns only the first value it finds.
[1, 4, 19, -1, 14]The array we want to check.
.findIndex()The method we use in order to get the value of the first item in the array that passed the test.
287 |
288 |
289 |
290 | ) 291 | }, 292 | { 293 | id: 8, 294 | name: ".forEach()", 295 | description: "Calls a function for each array element.", 296 | goal: "change", 297 | dataType: "array", 298 | image: "https://image.ibb.co/eET5G5/Screen_Shot_2017_09_20_at_18_02_05.png", 299 | URL: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach", 300 | hash: "eGOeRO", 301 | explanation: ( 302 |
303 |

The .forEach() calls a function for every item in the array.

304 |
305 |
306 |

let arr = ['Hello', 'World'];

307 |

arr.forEach(x => console.log(x));

308 |
309 |
310 | 311 | 312 | 313 | 314 | 315 | 316 | 317 | 318 | 319 | 320 | 321 | 322 | 323 | 324 | 325 | 326 | 327 |
arrThe name of the array we want to iterate (loop) over.
['Hello', 'World']This is our "test". The x stands for every single item in the array. You can call x anything you want, but both the first and the second x in our function need to have the same name. If an item is (in this case) bigger or equal to 10, then that item has passed the test. The .find() method returns only the first value it finds.
[1, 4, 19, -1, 14]The array we want to check.
.findIndex()The method we use in order to get the value of the first item in the array that passed the test.
328 |
329 |
330 |
331 | ) 332 | }, 333 | { 334 | id: 9, 335 | name: ".indexOf()", 336 | description: "Search the array for an element and returns its position.", 337 | goal: "check", 338 | dataType: "array", 339 | image: "https://image.ibb.co/hmBsw5/Screen_Shot_2017_09_20_at_18_05_04.png", 340 | URL: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf", 341 | hash: "WZeXZL", 342 | explanation: ( 343 |
344 |

The .indexOf() method returns the index of the character given as argument.

345 |
346 |
347 |

let arr = ['Green', 'Blue', 'Yellow', 'Orange'];

348 |

arr.indexOf('Blue');

349 |
350 |
351 | 352 | 353 | 354 | 355 | 356 | 357 | 358 | 359 | 360 | 361 | 362 | 363 | 364 | 365 | 366 | 367 | 368 |
arrThe name of the array we want to get a value from.
['Green', 'Blue', 'Yellow', 'Orange']The array we want to get a value from.
.indexOf()The method we use in order to get the index of the given value.
'Blue'The value from which we want to have the index returned.
369 |
370 |
371 |
372 | ) 373 | }, 374 | { 375 | id: 10, 376 | name: ".isArray()", 377 | description: "checks whether an object is an array.", 378 | goal: "check", 379 | dataType: "other", 380 | image:"https://image.ibb.co/ekOEda/Screen_Shot_2017_09_08_at_12_03_08.png", 381 | URL: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray", 382 | hash: "MEgQxz", 383 | explanation: ( 384 |
385 |

The .isArray() checks whether its argument is an array.

386 |
387 |
388 |

Array.isArray([1])

389 |
390 |
391 | 392 | 393 | 394 | 395 | 396 | 397 | 398 | 399 | 400 | 401 | 402 | 403 | 404 | 405 | 406 | 407 | 408 |
ArrayThe standard syntax, always type Array. before the method.
.isArray()The method we use in order to check whether its argument is an array.
[1]The argument that's passed
'Blue'The value from which we want to have the index returned.
409 |
410 |
411 |
412 | ) 413 | }, 414 | { 415 | id: 11, 416 | name: ".join()", 417 | description: "joins all elements of an array into a string.", 418 | goal: "join", 419 | dataType: "array", 420 | image: "https://image.ibb.co/fH0Kda/Screen_Shot_2017_09_08_at_13_59_38.png", 421 | URL: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join", 422 | hash: "QqLQXx", 423 | explanation: ( 424 |
425 |

The .join() joins all elements of an array in a string.

426 |
427 |
428 |

['Dog', 'Fox', 'Ocelot'].join(' ')

429 |
430 |
431 | 432 | 433 | 434 | 435 | 436 | 437 | 438 | 439 | 440 | 441 | 442 | 443 | 444 |
['Dog', 'Fox', 'Ocelot']The array from which we want the values to be joined in a string.
.join()The method we use in order to join the values.
(' ')The default seperator, so when you write .join() is a comma. However, if you want a space instead, you'd write (' '). Same goes for any other character.
445 |
446 |
447 |
448 | ) 449 | }, 450 | { 451 | id: 12, 452 | name: ".lastIndexOf()", 453 | description: "Search the array for an element, starting at the end, and returns its position", 454 | goal: "check", 455 | dataType: "array", 456 | image: "https://image.ibb.co/ju3WTa/Screen_Shot_2017_09_10_at_13_54_24.png", 457 | URL:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf", 458 | hash: "PJYQMK", 459 | explanation: ( 460 |
461 |

The .join() joins all elements of an array in a string.

462 |
463 |
464 |

let numbers = [7, 2, 3, 2];

465 |

numbers.lastIndexOf(2)

466 |
467 |
468 | 469 | 470 | 471 | 472 | 473 | 474 | 475 | 476 | 477 | 478 | 479 | 480 | 481 | 482 | 483 | 484 | 485 |
numbersThe name of the array
[7, 2, 3, 2]The array with values from which we want to check the index.
.lastIndexOf()The method we use in order to find the index of the last value that's equal to the value in the argument.
(2)The value from which we want to get the last index returned.
486 |
487 |
488 |
489 | ) 490 | }, 491 | { 492 | id: 13, 493 | name: ".map()", 494 | description: "Creates a new array with the result of calling a function for each array element.", 495 | goal: "change", 496 | dataType: "array", 497 | image: "https://image.ibb.co/iqqKb5/Screen_Shot_2017_09_20_at_18_07_42.png", 498 | URL: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map", 499 | hash: "VMZXwK", 500 | explanation: ( 501 |
502 |

The .map() method creates a new array with the result of calling a function for each array element.

503 |
504 |
505 |

[1, 2, 3].map(number =>(number*2));

506 |
507 |
508 | 509 | 510 | 511 | 512 | 513 | 514 | 515 | 516 | 517 | 518 | 519 | 520 | 521 |
[1, 2, 3]The array we want to map over
.map()The method we use in order to create a new array after a function has been called for every item in the array.
(number => (number*2))The function that will be executed for each single item in the array. Each item is now called "number", so we say: get "number", then return number * 2, and push that result in a new array.
522 |
523 |
524 |
525 | ) 526 | }, 527 | { 528 | id: 14, 529 | name: ".pop()", 530 | description: "Removes the last element of an array, and returns that element.", 531 | goal: "change", 532 | dataType: "array", 533 | image: "https://image.ibb.co/c0MtPF/Screen_Shot_2017_09_10_at_14_01_59.png", 534 | URL: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop", 535 | hash: "gGYeaG", 536 | explanation: ( 537 |
538 |

The .pop() method removes the last element of the array, and returns that element.

539 |
540 |
541 |

[4, 5, 6, 7, 5].pop();

542 |
543 |
544 | 545 | 546 | 547 | 548 | 549 | 550 | 551 | 552 | 553 |
[4, 5, 6, 7, 5]The array from which we want the last item.
.pop()The method we use in order to remove the last element and return this.
554 |
555 |
556 |
557 | ) 558 | }, 559 | { 560 | id: 15, 561 | name: ".push()", 562 | description: "Adds new elements to the end of an array, and returns the new length.", 563 | goal: "change", 564 | dataType: "array", 565 | image: "https://image.ibb.co/gVNHjF/Screen_Shot_2017_09_10_at_14_12_01.png", 566 | URL: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push?v=b", 567 | hash: "xXKWVw", 568 | explanation: ( 569 |
570 |

The .push() adds new elements to the end of an array, and returns the new length. If you add console.log(), it will return the new array.

571 |
572 |
573 |

let numbers = [1, 2, 3];

574 |

numbers.push(4);

575 |

console.log(numbers);

576 |
577 |
578 | 579 | 580 | 581 | 582 | 583 | 584 | 585 | 586 | 587 | 588 | 589 | 590 | 591 | 592 | 593 | 594 | 595 |
[1, 2, 3]The array we want to add an element to.
.push()The method we use in order to add an element to the array.
4The element we want to add to the array.
console.log(numbers)The console.log(numbers) will return the array, without console.log(numbers) it will return the length.
596 |
597 |
598 |
599 | ) 600 | }, 601 | { 602 | id: 16, 603 | name: ".reduce()", 604 | description: "Reduce the values of an array to a single value (going left-to-right).", 605 | goal: "change", 606 | dataType: "array", 607 | image: "https://image.ibb.co/inVgpQ/Screen_Shot_2017_09_19_at_17_26_01.png", 608 | URL: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce?v=b", 609 | hash: "LzNWgV", 610 | explanation: ( 611 |
612 |

The .reduce() method reduces the values of an array to a single value (going left-to-right).

613 |
614 |
615 |

let numbers = [1, 2, 3];

616 |

numbers.reduce((previous, current) => (previous + current));

617 |
618 |
619 | 620 | 621 | 622 | 623 | 624 | 625 | 626 | 627 | 628 | 629 | 630 | 631 | 632 |
[1, 2, 3]The array with the values we want to have reduced.
.reduce()The method we use in order to reduce the elemnts to a single value
(previous + current)This means that for every item in the array, it will grab that item and adds the value of the next item to that. After that has happened, it will go to the next item and do the exact same.
633 |
634 |
635 |
636 | ) 637 | }, 638 | { 639 | id: 17, 640 | name: ".reverse()", 641 | description: "Reverses the order of the elements in an array.", 642 | goal: "change", 643 | dataType: "array", 644 | image: "https://image.ibb.co/d4XCUQ/Screen_Shot_2017_09_20_at_17_32_32.png", 645 | URL: "https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse", 646 | hash: "eGOMzw", 647 | explanation: ( 648 |
649 |

The .reverse() method returns the array reversed

650 |
651 |
652 |

['USA', 'Canada', 'France', 'Germany'].reverse();

653 |
654 |
655 | 656 | 657 | 658 | 659 | 660 | 661 | 662 | 663 | 664 |
['USA', 'Canada', 'France', 'Germany']The array that we want to have reversed.
.reverse()The method we use in order to reverse the array.
665 |
666 |
667 |
668 | ) 669 | }, 670 | { 671 | id: 18, 672 | name: ".shift()", 673 | description: "Removes the first element of an array, and returns that element.", 674 | goal: "change", 675 | dataType: "array", 676 | image: "https://image.ibb.co/ck4f4F/Screen_Shot_2017_09_10_at_16_13_53.png", 677 | URL: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/shift", 678 | hash: "PJYRpQ", 679 | explanation: ( 680 |
681 |

The .shift() method returns the first element of the array.

682 |
683 |
684 |

[1, 2, 3, 4].shift();

685 |
686 |
687 | 688 | 689 | 690 | 691 | 692 | 693 | 694 | 695 | 696 |
[1, 2, 3, 4]The array from which we want the first item.
.shift()The method we use in order to get the first element and return this.
697 |
698 |
699 |
700 | ) 701 | }, 702 | { 703 | id: 19, 704 | name: ".slice()", 705 | description: "Selects a part of an array, and returns the new array", 706 | goal: "change", 707 | dataType: "array", 708 | image: "https://image.ibb.co/g3OBpQ/Screen_Shot_2017_09_20_at_17_31_13.png", 709 | URL: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice", 710 | hash: "pWzLPB", 711 | explanation: ( 712 |
713 |

The .slice() method selects a part of an array, and returns this part as new array.

714 |
715 |
716 |

['apple', 'banana', 'mango', 'lemon'].slice(0, 2);

717 |
718 |
719 | 720 | 721 | 722 | 723 | 724 | 725 | 726 | 727 | 728 | 729 | 730 | 731 | 732 |
['apple', 'banana', 'mango', 'lemon']The array we want to have a part of.
.slice()The method we use in order to get a certain part of the array.
(0, 2)The 0 stands for the first index where the "cut" should begin, the 2 is the end index, which is not included.
733 |
734 |
735 |
736 | ) 737 | }, 738 | { 739 | id: 20, 740 | name: ".some()", 741 | description: "Checks if any of the elements in an array pass a test.", 742 | goal: "check", 743 | dataType: "array", 744 | image: "https://image.ibb.co/c9ZV4F/Screen_Shot_2017_09_10_at_16_32_11.png", 745 | URL: "https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Global_Objects/Array/some", 746 | hash: "veBRZJ", 747 | explanation: ( 748 |
749 |

The .some() checks if any of the elements in an array passes a test.

750 |
751 |
752 |

[10, 30, 45, 20, 40].some(x => x > 50);

753 |
754 |
755 | 756 | 757 | 758 | 759 | 760 | 761 | 762 | 763 | 764 | 765 | 766 | 767 | 768 |
[10, 30, 45, 20, 40]The array we want to have checked.
.some()The method we use in order to check if any of the values in the array passes the test
(x => x > 50)This is our "test". This basically says: check every single item in the array(x), and is this item's value more than 50? Then return true.
769 |
770 |
771 |
772 | ) 773 | }, 774 | { 775 | id: 21, 776 | name: ".sort()", 777 | description: "Sorts the elements of an array.", 778 | goal: "change", 779 | dataType: "array", 780 | image: "https://image.ibb.co/ft1UWv/Screen_Shot_2017_09_10_at_16_37_50.png", 781 | URL: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort", 782 | hash: "aLoYyd", 783 | explanation: ( 784 |
785 |

The .sort() method sorts the array alphabetically and numerically.

786 |
787 |
788 |

[10, 30, 45, 20, 40].sort();

789 |
790 |
791 | 792 | 793 | 794 | 795 | 796 | 797 | 798 | 799 | 800 |
[10, 30, 45, 20, 40]The array we want to sort.
.sort()The method we use in order to sort the array.
801 |
802 |
803 |
804 | ) 805 | }, 806 | { 807 | id: 22, 808 | name: ".splice()", 809 | description: "Adds/Removes elements from an array", 810 | goal: "change", 811 | dataType: "array", 812 | image: "https://image.ibb.co/msvLMv/Screen_Shot_2017_09_10_at_17_03_14.png", 813 | URL: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice", 814 | hash: "yzBKzd", 815 | explanation: ( 816 |
817 |

The .splice() adds and/or removes elements frmo an array.

818 |
819 |
820 |

[10, 30, 45, 20, 40].sort();

821 |
822 |
823 | 824 | 825 | 826 | 827 | 828 | 829 | 830 | 831 | 832 |
[10, 30, 45, 20, 40]The array we want to sort.
.sort()The method we use in order to sort the array.
833 |
834 |
835 |
836 | ) 837 | }, 838 | { 839 | id: 23, 840 | name: ".toString()", 841 | description: "Converts an array to a string, and returns the result.", 842 | goal: "change", 843 | dataType: "array", 844 | image: "https://image.ibb.co/khprTa/Screen_Shot_2017_09_10_at_17_11_47.png", 845 | URL: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/toString", 846 | hash: "jGNzzR", 847 | explanation: ( 848 |
849 |

The .toString() method converts an array into a string.

850 |
851 |
852 | ['Hello', 'World'].toString(); 853 |
854 |
855 | 856 | 857 | 858 | 859 | 860 | 861 | 862 | 863 | 864 |
['Hello', 'World]The array we want to have converted to a string.
.toString() The method we use in order to convert an array into a string.
865 |
866 |
867 |
868 | ) 869 | }, 870 | { 871 | id: 24, 872 | name: ".unshift()", 873 | description: "Adds new elements to the beginning of an array.", 874 | goal: "change", 875 | dataType: "array", 876 | image: "https://image.ibb.co/nBk1uF/Screen_Shot_2017_09_10_at_17_15_18.png", 877 | URL: "https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift", 878 | hash: "NaKYzo", 879 | explanation: ( 880 |
881 |

The .unshift() method adds a new element to the beginning of the array. It's the opposite of the .shift() method

882 |
883 |
884 |

let numbers = [1, 2, 3, 4, 5];

885 |

numbers.unshift(9);

886 |

console.log(numbers)

887 |
888 |
889 | 890 | 891 | 892 | 893 | 894 | 895 | 896 | 897 | 898 | 899 | 900 | 901 | 902 | 903 | 904 | 905 | 906 | 907 | 908 | 909 | 910 |
numbersThe name of the array we want to add a value to.
[1, 2, 3, 4, 5] The array we want to add a value to.
.unshift() The method we use in order to add its arguments value to the beginning of the array.
9The value we want to add to the array.
console.log(numbers)If you don't console log the array, it will return the new length of the array instead of the actual array.
911 |
912 |
913 |
914 | ) 915 | }, 916 | { 917 | id: 25, 918 | name: ".concat()", 919 | description: "Joins two or more strings, and returns a new joined strings", 920 | goal: "join", 921 | dataType: "string", 922 | image: "https://image.ibb.co/n88VYk/Screen_Shot_2017_09_20_at_18_17_30.png", 923 | URL: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/concat", 924 | hash: "dVbmqz", 925 | explanation: ( 926 |
927 |

The .concat() joins two or more strings, and returns the new string.

928 |
929 |
930 |

'Hello'.concat('World')

931 |
932 |
933 | 934 | 935 | 936 | 937 | 938 | 939 | 940 | 941 | 942 | 943 | 944 | 945 | 946 |
'Hello'The array we already have, and want to add a value to.
.concat() The method we use in order to concatenate both strings.
'World'The string we want to concatenate to our original string. By default, there is no space inbetween the words. If you want to have a space, or any other character, you have to add that to the string in the method's argument.
947 |
948 |
949 |
950 | ) 951 | }, 952 | { 953 | id: 26, 954 | name: ".endsWith()", 955 | description: "Checks whether a string ends with specified string/characters", 956 | goal: "check", 957 | dataType: "string", 958 | image: "https://image.ibb.co/jzraG5/Screen_Shot_2017_09_20_at_18_10_24.png", 959 | URL: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith", 960 | hash: "NaKYOJ", 961 | explanation: ( 962 |
963 |

The .endsWith() method checks whether a string ends with the word or characters given in its argument.

964 |
965 |
966 | "Dogs are cute".endsWith("cute"); 967 |
968 |
969 | 970 | 971 | 972 | 973 | 974 | 975 | 976 | 977 | 978 | 979 | 980 | 981 | 982 |
"Dogs are cute"The string we want to have checked.
.endsWith() The method we use in order to check whether a string ends with the given argument.
"cute" Our given argument, if the string ends with this word, it will return true, otherwise it will return false.
983 |
984 |
985 |
986 | ) 987 | }, 988 | { 989 | id: 27, 990 | name: ".includes()", 991 | description: "Checks whether a string contains the specified string/characters", 992 | goal: "check", 993 | dataType: "string", 994 | image: "https://image.ibb.co/gftMuF/Screen_Shot_2017_09_10_at_18_42_37.png", 995 | URL: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes", 996 | hash: "bobMNy", 997 | explanation: ( 998 |
999 |

The .includes() method checks whether a string includes the word or characters given in its argument.

1000 |
1001 |
1002 | "Dogs are cute".includes("cute"); 1003 |
1004 |
1005 | 1006 | 1007 | 1008 | 1009 | 1010 | 1011 | 1012 | 1013 | 1014 | 1015 | 1016 | 1017 | 1018 |
"Dogs are cute"The string we want to have checked.
.includes() The method we use in order to check whether a string includes the given argument.
"cute" Our given argument, if the string contains with this word, it will return true, otherwise it will return false.
1019 |
1020 |
1021 |
1022 | ) 1023 | }, 1024 | { 1025 | id: 28, 1026 | name: ".repeat()", 1027 | description: "Returns a new string with a specified number of copies of an existing string.", 1028 | goal: "change", 1029 | dataType: "string", 1030 | image: "https://image.ibb.co/h6Rjtk/Screen_Shot_2017_09_20_at_18_12_46.png", 1031 | URL: "https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Global_Objects/String/repeat", 1032 | hash: "jGNxbE", 1033 | explanation: ( 1034 |
1035 |

The .repeat() method checks repeats a string the amount of times that's specified in its argument

1036 |
1037 |
1038 | "Hello".repeat(2); 1039 |
1040 |
1041 | 1042 | 1043 | 1044 | 1045 | 1046 | 1047 | 1048 | 1049 | 1050 | 1051 | 1052 | 1053 | 1054 |
HelloThe value we want to have repeated.
.repeat() The method we use in order to repeat a value.
2The amount of times we want to repeat the value.
1055 |
1056 |
1057 |
1058 | ) 1059 | }, 1060 | { 1061 | id: 29, 1062 | name: ".replace()", 1063 | description: "Searches a string for a specified value, or a regular expression, and returns a new string where the specified values are replaced.", 1064 | goal: "change", 1065 | dataType: "string", 1066 | image: "https://image.ibb.co/g7LNeQ/Screen_Shot_2017_09_20_at_18_15_36.png", 1067 | URL: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace", 1068 | hash: "XerqXp", 1069 | explanation: ( 1070 |
1071 |

The .replace() method replaces specified value in the string, and returns a new string where the specified value is replaced.

1072 |
1073 |
1074 | "Dogs are cute".replace("cute", "adorable"); 1075 |
1076 |
1077 | 1078 | 1079 | 1080 | 1081 | 1082 | 1083 | 1084 | 1085 | 1086 | 1087 | 1088 | 1089 | 1090 | 1091 | 1092 | 1093 | 1094 |
"Dogs are cute"The string in which we want to replace a certain value.
.replace() The method we use in order to replace a value
"cute"The original value that we want to replace in the string.
"adorable"The value we want to replace the original value with.
1095 |
1096 |
1097 |
1098 | ) 1099 | }, 1100 | { 1101 | id: 30, 1102 | name: ".slice()", 1103 | description: "Extracts a part of a string and returns a new string.", 1104 | goal: "change", 1105 | dataType: "string", 1106 | image: "https://image.ibb.co/mb8X1v/Screen_Shot_2017_09_10_at_20_31_19.png", 1107 | URL: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/slice", 1108 | hash: "QqLrEw", 1109 | explanation: ( 1110 |
1111 |

The .slice() method extracts a part of a string and returns a new string.

1112 |
1113 |
1114 | "Hello World".slice(1, 5); 1115 |
1116 |
1117 | 1118 | 1119 | 1120 | 1121 | 1122 | 1123 | 1124 | 1125 | 1126 | 1127 | 1128 | 1129 | 1130 | 1131 | 1132 | 1133 | 1134 |
"Hello World"The string we want to extract a certain part from.
.slice() The method we use in order to extract a certain part of the string.
1The begin index of the extracted part
5The end index of the extracted part WHICH IS NOT INCLUDED.
1135 |
1136 |
1137 |
1138 | ) 1139 | }, 1140 | { 1141 | id: 31, 1142 | name: ".split()", 1143 | description: "Splits a string into an array of substrings", 1144 | goal: "change", 1145 | dataType: "string", 1146 | image: "https://image.ibb.co/gJWfoa/Screen_Shot_2017_09_10_at_20_33_04.png", 1147 | URL: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split", 1148 | hash: "veBjKz", 1149 | explanation: ( 1150 |
1151 |

The .split() method splits a string into an array or substring.

1152 |
1153 |
1154 | 'Hello World'.split(' '); 1155 |
1156 |
1157 | 1158 | 1159 | 1160 | 1161 | 1162 | 1163 | 1164 | 1165 | 1166 |
'Hello World'The string we want to have converted to an array.
.split(' ') The method we use in order to split a string into an array.
1167 |
1168 |
1169 |
1170 | ) 1171 | }, 1172 | { 1173 | id: 32, 1174 | name: ".startsWith()", 1175 | description: "Checks whether a string begins with specified characters.", 1176 | goal: "check", 1177 | dataType: "string", 1178 | image: "https://image.ibb.co/mUUa4F/Screen_Shot_2017_09_10_at_20_37_45.png", 1179 | URL: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith", 1180 | hash: "YrKLpO", 1181 | explanation: ( 1182 |
1183 |

The .startsWith() method checks whether a string begins with the word or characters given in its argument.

1184 |
1185 |
1186 | "Dogs are cute".startsWith("Dogs"); 1187 |
1188 |
1189 | 1190 | 1191 | 1192 | 1193 | 1194 | 1195 | 1196 | 1197 | 1198 | 1199 | 1200 | 1201 | 1202 |
"Dogs are cute"The string we want to have checked.
.startsWith() The method we use in order to check whether a string starts with the given argument.
"Dogs" Our given argument, if the string starts with this word (and the uppercase D), it will return true, otherwise it will return false.
1203 |
1204 |
1205 |
1206 | ) 1207 | }, 1208 | { 1209 | id: 33, 1210 | name: ".substr()", 1211 | description: "Extracts the characters from a string, beginning at a specified start position, and has a specified length.", 1212 | goal: "change", 1213 | dataType: "string", 1214 | image: "https://image.ibb.co/fD6irv/Screen_Shot_2017_09_10_at_20_41_08.png", 1215 | URL: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substr", 1216 | hash: "WZeJpb", 1217 | explanation: ( 1218 |
1219 |

The .substr() returns the characters from a string, beginning at a specified start position, and has a specified length

1220 |
1221 |
1222 | "Hello World".substr(1, 4); 1223 |
1224 |
1225 | 1226 | 1227 | 1228 | 1229 | 1230 | 1231 | 1232 | 1233 | 1234 | 1235 | 1236 | 1237 | 1238 | 1239 | 1240 | 1241 | 1242 |
"Hello World"The string we want to extract a certain part from.
.substr() The method we use in order to extract a certain part of the string.
1The begin index of the extracted part
4The length of our extracted part
1243 |
1244 |
1245 |
1246 | ) 1247 | }, 1248 | { 1249 | id: 34, 1250 | name: ".substring()", 1251 | description: "Extracts the characters from a string, between two specified indices.", 1252 | goal: "change", 1253 | dataType: "string", 1254 | image: "https://image.ibb.co/dFqKgv/Screen_Shot_2017_09_11_at_08_51_42.png", 1255 | URL: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substring", 1256 | hash: "aLoGJL", 1257 | explanation: ( 1258 |
1259 |

The .substring() returns the characters from a string between two specified indices.

1260 |
1261 |
1262 | "Hello World".substring(1, 4); 1263 |
1264 |
1265 | 1266 | 1267 | 1268 | 1269 | 1270 | 1271 | 1272 | 1273 | 1274 | 1275 | 1276 | 1277 | 1278 | 1279 | 1280 | 1281 | 1282 |
"Hello World"The string we want to extract a certain part from.
.substr() The method we use in order to extract a certain part of the string.
1The begin index of the extracted part
4The end index of the extracted part
1283 |
1284 |
1285 |
1286 | ) 1287 | }, 1288 | { 1289 | id: 35, 1290 | name: ".toLowerCase()", 1291 | description: "Converts a string to lowercase letters.", 1292 | goal: "change", 1293 | dataType: "string", 1294 | image: "https://image.ibb.co/n73mBv/Screen_Shot_2017_09_11_at_08_58_46.png", 1295 | URL: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase", 1296 | hash: "OxLZpY", 1297 | explanation: ( 1298 |
1299 |

The .toLowerCase() method converts a string to lowercase letters.

1300 |
1301 |
1302 | "Hello World"..toLowerCase();; 1303 |
1304 |
1305 | 1306 | 1307 | 1308 | 1309 | 1310 | 1311 | 1312 | 1313 | 1314 |
"Hello World"The string we want to convert to all lowercase letters.
.toLowerCase() The method we use in order to convert a string to lowercase.
1315 |
1316 |
1317 |
1318 | ) 1319 | }, 1320 | { 1321 | id: 36, 1322 | name: ".toUpperCase()", 1323 | description: "Converts a string to uppercase letters.", 1324 | goal: "change", 1325 | dataType: "string", 1326 | image: "https://image.ibb.co/hv021v/Screen_Shot_2017_09_11_at_08_56_18.png", 1327 | URL: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase", 1328 | hash: "yzBjbJ", 1329 | explanation: ( 1330 |
1331 |

The .toUpperCase() method converts a string to uppercase letters.

1332 |
1333 |
1334 | "Hello World"..toUpperCase();; 1335 |
1336 |
1337 | 1338 | 1339 | 1340 | 1341 | 1342 | 1343 | 1344 | 1345 | 1346 |
"Hello World"The string we want to convert to all uppercase letters.
.toLowerCase() The method we use in order to convert a string to uppercase.
1347 |
1348 |
1349 |
1350 | ) 1351 | }, 1352 | { 1353 | id: 37, 1354 | name: ".trim()", 1355 | description: "Removes whitespace from both ends of a string.", 1356 | goal: "change", 1357 | dataType: "string", 1358 | image: "https://image.ibb.co/kf9LYk/Screen_Shot_2017_09_20_at_18_21_19.png", 1359 | URL: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim", 1360 | hash: "zEOjwd", 1361 | explanation: ( 1362 |
1363 |

The .trim() method removes whitespace from both ends of a string.

1364 |
1365 |
1366 | ' Hello World '.trim(); 1367 |
1368 |
1369 | 1370 | 1371 | 1372 | 1373 | 1374 | 1375 | 1376 | 1377 | 1378 |
'Hello World'The string we want to have the white space removed from.
.trim() The method we use in order to remove the white space.
1379 |
1380 |
1381 |
1382 | ) 1383 | }, 1384 | { 1385 | id: 38, 1386 | name: ".indexOf()", 1387 | description: "Returns the position of the first found occurrence of a specified value in a string.", 1388 | goal: "check", 1389 | dataType: "string", 1390 | image: "https://image.ibb.co/cO4Y8a/Screen_Shot_2017_09_10_at_18_49_28.png", 1391 | URL: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf", 1392 | hash: "qPWYdV", 1393 | explanation: ( 1394 |
1395 |

The .indexOf() method method returns the position of the first found occurrence of a specific character in a string.

1396 |
1397 |
1398 | 'Hello World'.indexOf('Hello')'; 1399 |
1400 |
1401 | 1402 | 1403 | 1404 | 1405 | 1406 | 1407 | 1408 | 1409 | 1410 | 1411 | 1412 | 1413 | 1414 |
'Hello World'The string we want check.
.indexOf()The method we use in order to find the index of a specific character or word, given in its argument.
.indexOf()The word we want to get the index returned of.
1415 |
1416 |
1417 |
1418 | ) 1419 | }, 1420 | ]; 1421 | 1422 | export default METHODS; 1423 | -------------------------------------------------------------------------------- /src/components/App/index.js: -------------------------------------------------------------------------------- 1 | // Dependencies 2 | import React, { Component } from 'react'; 3 | import filter from 'lodash/filter'; 4 | import includes from 'lodash/includes'; 5 | // Externals 6 | import Navbar from '../Navbar'; 7 | import Results from '../Results'; 8 | import Footer from '../Footer'; 9 | // Internals 10 | import METHODS from './METHODS'; 11 | import './styles.scss'; 12 | 13 | 14 | class App extends Component { 15 | constructor(props) { 16 | super(props); 17 | this.state = { 18 | filteredMethods: METHODS, 19 | }; 20 | } 21 | 22 | filterMethods = (filterOptions) => { 23 | let filteredMethods = METHODS; 24 | 25 | // Check if any filter options are enabled. 26 | if (includes(filterOptions, true)) { 27 | const { array, string, other, join, check, find, change } = filterOptions; 28 | if (array) { 29 | filteredMethods = filter(filteredMethods, ['dataType', 'array']) 30 | } 31 | if (string) { 32 | filteredMethods = filter(filteredMethods, ['dataType', 'string']) 33 | } 34 | if (other) { 35 | filteredMethods = filter(filteredMethods, ['dataType', 'other']) 36 | } 37 | if (join) { 38 | filteredMethods = filter(filteredMethods, ['goal', 'join']) 39 | } 40 | if (check) { 41 | filteredMethods = filter(filteredMethods, ['goal', 'check']) 42 | } 43 | if (find) { 44 | filteredMethods = filter(filteredMethods, ['goal', 'find']) 45 | } 46 | if (change) { 47 | filteredMethods = filter(filteredMethods, ['goal', 'change']) 48 | } 49 | } 50 | this.setState({ filteredMethods }); 51 | } 52 | 53 | render() { 54 | return ( 55 |
56 |
57 |

Note: This application is not built for smaller devices.

58 |
59 |
60 | 61 |
62 |
63 | 64 |
65 |
66 |
67 | ); 68 | } 69 | } 70 | 71 | export default App; 72 | -------------------------------------------------------------------------------- /src/components/App/styles.css: -------------------------------------------------------------------------------- 1 | div.explanation { 2 | width: 65vw; 3 | background-color:rgba(255, 255, 255, 0.1); 4 | margin: 2em 0em; 5 | padding: 1em; 6 | border-radius: 10px; 7 | } 8 | 9 | #explanation-text { 10 | font-size: 20px; 11 | } 12 | 13 | #red { 14 | color: rgb(170, 16, 47); 15 | } 16 | 17 | #pink { 18 | color: rgb(205, 104, 104); 19 | } 20 | 21 | #orange { 22 | color: rgb(255, 135, 68); 23 | } 24 | 25 | #lightpurple { 26 | color: rgb(126, 62, 80); 27 | } 28 | 29 | #green { 30 | color: rgb(45, 184, 80); 31 | } 32 | 33 | div.explanation p { 34 | margin: 1em 0; 35 | font-size: 20px; 36 | } 37 | 38 | div.code-example code { 39 | font-size: 20px; 40 | color: white; 41 | } 42 | 43 | div.code-example p { 44 | margin: 0; 45 | font-size: 20px; 46 | } 47 | 48 | div.code-explanation { 49 | margin-top: 2em; 50 | } 51 | 52 | div.code-explanation p { 53 | font-size: 20px; 54 | } 55 | 56 | div.code-explanation code { 57 | font-size: 20px; 58 | } 59 | 60 | .code-explanation { 61 | display: flex; 62 | justify-content: center; 63 | align-items: center; 64 | } 65 | 66 | th { 67 | background-color: rgba(0, 0, 0, 0.4); 68 | padding: .5em; 69 | width: 30%; 70 | font-weight: normal; 71 | } 72 | 73 | td { 74 | background-color: rgba(0, 0, 0, 0.2); 75 | padding: .5em; 76 | width: 70%; 77 | font-family: 'Source Sans Pro', sans-serif; 78 | color: white; 79 | font-size: 20px; 80 | } 81 | 82 | .results-app { 83 | width: 85vw; 84 | margin-left: 15vw; 85 | } 86 | 87 | .warning-text { 88 | height: 0em; 89 | width: 0em; 90 | color: transparent; 91 | background-color: transparent; 92 | } 93 | 94 | @media screen and (max-width: 850px) { 95 | .warning-text { 96 | color: red; 97 | background-color: black; 98 | height: 5em; 99 | width: 100vw; 100 | margin: 0; 101 | font-family: 'Source Sans Pro', sans-serif; 102 | display: flex; 103 | justify-content: center; 104 | align-items: center; 105 | font-size: 18px; 106 | text-align: center; 107 | } 108 | } 109 | -------------------------------------------------------------------------------- /src/components/App/styles.scss: -------------------------------------------------------------------------------- 1 | html { 2 | text-align: center; 3 | background: url('https://images.pexels.com/photos/247791/pexels-photo-247791.png?w=940&h=650&auto=compress&cs=tinysrgb'); 4 | background-attachment: fixed; 5 | background-repeat: no-repeat; 6 | background-size: cover; 7 | } 8 | 9 | .App { 10 | width: 100vw; 11 | height: 100vh; 12 | } 13 | -------------------------------------------------------------------------------- /src/components/Footer/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './styles.css'; 3 | 4 | const Footer = () => ( 5 |
6 |

© 2017 Lydia Hallie

7 |
8 | ) 9 | 10 | export default Footer; 11 | -------------------------------------------------------------------------------- /src/components/Footer/styles.css: -------------------------------------------------------------------------------- 1 | .footer { 2 | width: 100%; 3 | height: 3em; 4 | background-color: black; 5 | color: rgba(255, 255, 255, 0.7); 6 | display: flex; 7 | justify-content: center; 8 | align-items: center; 9 | font-family: 'Source Sans Pro', sans-serif; 10 | font-size: 1em; 11 | position: absolute; 12 | bottom: 0px; 13 | } 14 | -------------------------------------------------------------------------------- /src/components/Navbar/components/MethodsList/index.js: -------------------------------------------------------------------------------- 1 | // Dependencies 2 | import React from 'react'; 3 | import PropTypes from 'prop-types'; 4 | import map from 'lodash/map'; 5 | import { Link } from 'react-router-dom'; 6 | 7 | 8 | const MethodsList = (props) => ( 9 |
10 |
{props.label}
11 | {map(props.methods, (method, index)=> ( 12 | 13 |

{method.name}

14 | 15 | ))} 16 |
17 | ); 18 | 19 | MethodsList.propTypes = { 20 | label: PropTypes.string.isRequired, 21 | methods: PropTypes.arrayOf(PropTypes.shape({ 22 | id: PropTypes.number.isRequired, 23 | name: PropTypes.string.isRequired, 24 | })).isRequired, 25 | }; 26 | 27 | export default MethodsList; 28 | -------------------------------------------------------------------------------- /src/components/Navbar/index.js: -------------------------------------------------------------------------------- 1 | // Dependencies 2 | import React, { Component } from 'react'; 3 | import PropTypes from 'prop-types'; 4 | import filter from 'lodash/filter'; 5 | // Externals 6 | import METHODS from '../App/METHODS'; 7 | // Internals 8 | import MethodsList from './components/MethodsList'; 9 | const stringMethods = filter(METHODS, ['dataType', 'string']); 10 | const arrayMethods = filter(METHODS, ['dataType', 'array']); 11 | 12 | 13 | class Navbar extends Component { 14 | static propTypes = { 15 | filterMethods: PropTypes.func.isRequired, 16 | }; 17 | 18 | constructor(props) { 19 | super(props); 20 | this.state = { 21 | filterOptions: { 22 | array: false, 23 | string: false, 24 | other: false, 25 | check: false, 26 | find: false, 27 | join: false, 28 | change: false, 29 | }, 30 | }; 31 | } 32 | 33 | updateFilter = (key) => { 34 | const { filterOptions } = this.state; 35 | filterOptions[key] = !filterOptions[key]; 36 | this.props.filterMethods(filterOptions); 37 | this.setState({ filterOptions }); 38 | } 39 | 40 | render() { 41 | const { updateFilter } = this; 42 | const { filterOptions } = this.state; 43 | const { array, string, other, check, find, join, change } = filterOptions; 44 | 45 | return ( 46 |
47 |
48 | 54 | 60 | 66 |
67 |
68 | 74 | 80 | 86 | 92 |
93 | 97 | 101 |
102 | ) 103 | } 104 | } 105 | 106 | export default Navbar; 107 | -------------------------------------------------------------------------------- /src/components/Results/index.js: -------------------------------------------------------------------------------- 1 | // Dependencies 2 | import React from 'react'; 3 | import { Link } from 'react-router-dom'; 4 | import map from 'lodash/map'; 5 | // Internals 6 | import './styles.css'; 7 | 8 | 9 | const Results = ({ methods }) => ( 10 |
11 |
12 | {map(methods, (method)=> ( 13 |
14 |
15 | 16 |

{method.name}

17 | 18 |

{method.description}

19 | {method.name} 20 |

Documentation

21 |
22 |
23 | ))} 24 |
25 |
26 | ); 27 | 28 | export default Results; 29 | -------------------------------------------------------------------------------- /src/components/Results/styles.css: -------------------------------------------------------------------------------- 1 | .results-wrapper, .results, .result, .method-details, .navbar { 2 | display: flex; 3 | align-items: center; 4 | height: 100vh; 5 | overflow: scroll; 6 | } 7 | 8 | .results-wrapper, .result, .method-details, .navbar { 9 | flex-direction: column; 10 | } 11 | 12 | .results, .method-details { 13 | justify-content: center; 14 | } 15 | 16 | .results { 17 | flex-wrap: wrap; 18 | overflow-x: hide; 19 | } 20 | 21 | .result { 22 | background: rgba(0, 0, 0, 0.8); 23 | border-radius: 20px; 24 | color: white; 25 | height: 30em; 26 | justify-content: space-around; 27 | margin: 1em; 28 | width: 35em; 29 | } 30 | 31 | .results-wrapper { 32 | width: 85vw; 33 | } 34 | 35 | a, button, h2, h5, .method-details h1 { 36 | font-family: 'Raleway', sans-serif; 37 | } 38 | 39 | .navbar p, p a, .method-details h4 { 40 | font-family: 'Source Sans Pro', sans-serif; 41 | color: rgba(255, 255, 255, 0.5); 42 | } 43 | 44 | a, p:hover, p a:hover, h2, h5 { 45 | color: white; 46 | } 47 | 48 | .method-details h1 { 49 | border-bottom: 1px solid #3a3a3a; 50 | padding: .5em; 51 | margin: 0; 52 | } 53 | 54 | a, p a { 55 | text-decoration: none; 56 | cursor: pointer; 57 | } 58 | 59 | p a:hover, button, .methods p, .methods p:hover { 60 | transition: 0.5s; 61 | cursor: pointer; 62 | } 63 | 64 | p a { 65 | color: rgba(255, 255, 255, 0.5); 66 | transition: 0.5s; 67 | } 68 | 69 | .navbar { 70 | background-color: black; 71 | height: 100vh; 72 | overflow: scroll; 73 | position: fixed; 74 | width: 12em; 75 | } 76 | 77 | h4 { 78 | color: rgba(255, 255, 255, 0.8); 79 | font-size: 20px; 80 | } 81 | 82 | h5 { 83 | font-size: 18px; 84 | } 85 | 86 | button { 87 | background-color: rgba(255, 255, 255, 0.2); 88 | border: 1px solid black; 89 | color: rgba(255, 255, 255, 0.4); 90 | font-size: 16px; 91 | font-weight: 200; 92 | height: 3em; 93 | width: 10em; 94 | } 95 | 96 | button:hover { 97 | background-color: rgba(255, 255, 255, 0.6); 98 | transition: 0.5s; 99 | } 100 | 101 | button:focus { 102 | background-color: grey; 103 | outline: none; 104 | } 105 | 106 | button:disabled { 107 | background-color: #404144; 108 | color: #282828; 109 | } 110 | 111 | .methods p { 112 | font-size: 18px; 113 | margin: 1em 0; 114 | } 115 | 116 | .methods { 117 | border-bottom: 1px solid grey; 118 | width: 7em; 119 | } 120 | 121 | .button-row { 122 | border-bottom: 1px solid grey; 123 | padding: 1em; 124 | } 125 | -------------------------------------------------------------------------------- /src/components/showMethod/index.js: -------------------------------------------------------------------------------- 1 | // Dependencies 2 | import React from 'react'; 3 | import { Link } from 'react-router-dom'; 4 | import Codepen from 'react-codepen'; 5 | import find from 'lodash/find'; 6 | // Externals 7 | import App from '../App'; 8 | import METHODS from '../App/METHODS'; 9 | // Internals 10 | import './styles.css'; 11 | 12 | 13 | const showMethod = ({ match }) => { 14 | const method = find(METHODS, ['id', parseInt(match.params.id, 10)]); 15 | 16 | return ( 17 |
18 |
19 |
20 |
21 | 22 |

Back

23 | 24 |
25 |

{method.name}

26 | {method.name} 27 |
{method.explanation}
28 |
29 |

Try it yourself! Copy the code and paste it in your console.

30 |
31 | 32 |
33 |

Documentation

34 |
35 |
36 | ); 37 | } 38 | 39 | export default showMethod; 40 | -------------------------------------------------------------------------------- /src/components/showMethod/styles.css: -------------------------------------------------------------------------------- 1 | .show-method-wrapper { 2 | width: 100vw; 3 | display: flex; 4 | justify-content: center; 5 | align-items: center; 6 | } 7 | 8 | .show-method { 9 | display: flex; 10 | flex-direction: column; 11 | align-items: center; 12 | justify-content: center; 13 | background-color: rgba(0, 0, 0, 0.8); 14 | width: 70em; 15 | height: 100%; 16 | border-left: 4px solid black; 17 | border-right: 4px solid black; 18 | } 19 | 20 | .show-method-header { 21 | display: flex; 22 | justify-content: center; 23 | align-items: center; 24 | flex-direction: column; 25 | } 26 | 27 | .show-method-header h1 { 28 | color: white; 29 | font-family: 'Raleway', sans-serif; 30 | border-bottom: 1px solid #3a3a3a; 31 | padding: .5em; 32 | width: 10em; 33 | } 34 | 35 | .back-btn { 36 | margin: 1em; 37 | padding: 1em; 38 | border-radius: 30px; 39 | width: 100%; 40 | font-family: 'Source Sans Pro', sans-serif; 41 | height: 1em; 42 | display: flex; 43 | justify-content: flex-start; 44 | } 45 | 46 | .back-btn p { 47 | margin: 0; 48 | background-color: rgba(255, 255, 255, 0.1); 49 | padding: .5em; 50 | border-radius: 30px; 51 | width: 4em; 52 | } 53 | 54 | .show-method p { 55 | color: rgba(255, 255, 255, 0.8); 56 | font-family: 'Source Sans Pro', sans-serif; 57 | } 58 | 59 | .codepen-wrapper { 60 | height: 15em; 61 | width: 30em; 62 | margin: 3em; 63 | } 64 | 65 | #result-link { 66 | color: transparent; 67 | height: 0em; 68 | width: 0em; 69 | } 70 | 71 | .description { 72 | margin: 1em; 73 | } 74 | 75 | .show-method p{ 76 | margin-top: 2em; 77 | margin-bottom: -2em; 78 | } 79 | 80 | #documentation { 81 | margin-bottom: 1em; 82 | } 83 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './components/App'; 5 | import showMethod from './components/showMethod'; 6 | import registerServiceWorker from './registerServiceWorker'; 7 | import { BrowserRouter, Route, Switch } from 'react-router-dom'; 8 | 9 | ReactDOM.render(( 10 | 11 | 12 | 13 | 14 | 15 | 16 | ), document.getElementById('root')); 17 | registerServiceWorker(); 18 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/registerServiceWorker.js: -------------------------------------------------------------------------------- 1 | // In production, we register a service worker to serve assets from local cache. 2 | 3 | // This lets the app load faster on subsequent visits in production, and gives 4 | // it offline capabilities. However, it also means that developers (and users) 5 | // will only see deployed updates on the "N+1" visit to a page, since previously 6 | // cached resources are updated in the background. 7 | 8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy. 9 | // This link also includes instructions on opting out of this behavior. 10 | 11 | const isLocalhost = Boolean( 12 | window.location.hostname === 'localhost' || 13 | // [::1] is the IPv6 localhost address. 14 | window.location.hostname === '[::1]' || 15 | // 127.0.0.1/8 is considered localhost for IPv4. 16 | window.location.hostname.match( 17 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 18 | ) 19 | ); 20 | 21 | export default function register() { 22 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 23 | // The URL constructor is available in all browsers that support SW. 24 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location); 25 | if (publicUrl.origin !== window.location.origin) { 26 | // Our service worker won't work if PUBLIC_URL is on a different origin 27 | // from what our page is served on. This might happen if a CDN is used to 28 | // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374 29 | return; 30 | } 31 | 32 | window.addEventListener('load', () => { 33 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 34 | 35 | if (!isLocalhost) { 36 | // Is not local host. Just register service worker 37 | registerValidSW(swUrl); 38 | } else { 39 | // This is running on localhost. Lets check if a service worker still exists or not. 40 | checkValidServiceWorker(swUrl); 41 | } 42 | }); 43 | } 44 | } 45 | 46 | function registerValidSW(swUrl) { 47 | navigator.serviceWorker 48 | .register(swUrl) 49 | .then(registration => { 50 | registration.onupdatefound = () => { 51 | const installingWorker = registration.installing; 52 | installingWorker.onstatechange = () => { 53 | if (installingWorker.state === 'installed') { 54 | if (navigator.serviceWorker.controller) { 55 | // At this point, the old content will have been purged and 56 | // the fresh content will have been added to the cache. 57 | // It's the perfect time to display a "New content is 58 | // available; please refresh." message in your web app. 59 | console.log('New content is available; please refresh.'); 60 | } else { 61 | // At this point, everything has been precached. 62 | // It's the perfect time to display a 63 | // "Content is cached for offline use." message. 64 | console.log('Content is cached for offline use.'); 65 | } 66 | } 67 | }; 68 | }; 69 | }) 70 | .catch(error => { 71 | console.error('Error during service worker registration:', error); 72 | }); 73 | } 74 | 75 | function checkValidServiceWorker(swUrl) { 76 | // Check if the service worker can be found. If it can't reload the page. 77 | fetch(swUrl) 78 | .then(response => { 79 | // Ensure service worker exists, and that we really are getting a JS file. 80 | if ( 81 | response.status === 404 || 82 | response.headers.get('content-type').indexOf('javascript') === -1 83 | ) { 84 | // No service worker found. Probably a different app. Reload the page. 85 | navigator.serviceWorker.ready.then(registration => { 86 | registration.unregister().then(() => { 87 | window.location.reload(); 88 | }); 89 | }); 90 | } else { 91 | // Service worker found. Proceed as normal. 92 | registerValidSW(swUrl); 93 | } 94 | }) 95 | .catch(() => { 96 | console.log( 97 | 'No internet connection found. App is running in offline mode.' 98 | ); 99 | }); 100 | } 101 | 102 | export function unregister() { 103 | if ('serviceWorker' in navigator) { 104 | navigator.serviceWorker.ready.then(registration => { 105 | registration.unregister(); 106 | }); 107 | } 108 | } 109 | --------------------------------------------------------------------------------