paypal link added

gulpfile.js

@@ -2,7 +2,7 @@ const gulp = require('gulp'),
 	  connect = require('gulp-connect'),
 	  shell = require('gulp-shell'),
 	  proxy = require('http-proxy-middleware'),
-	  sass = require('gulp-sass'),
+	  sass = require('gulp-sass')(require('sass')),
 	  babel = require('gulp-babel'),
 	  autoPrefix = require('gulp-autoprefixer')
 	  webpack = require('gulp-webpack');
@@ -13,10 +13,6 @@ const paths = {
 	assets:['src/assets/**/*.*']
 }
 
-gulp.task('start',['build','watch','serve']);
-gulp.task('build',['build:scripts','build:styles','copy:assets']);
-gulp.task('watch',['watch:scripts','watch:styles','watch:assets']);
-
 gulp.task('serve',function(){
 	connect.server({
 		root:'dist',
@@ -50,13 +46,17 @@ gulp.task('copy:assets',function(){
 });
 
 gulp.task('watch:scripts',function(){
-	gulp.watch(paths.scripts,['build:scripts']);
+	gulp.watch(paths.scripts, gulp.series('build:scripts'));
 });
 
 gulp.task('watch:styles',function(){
-	gulp.watch(paths.styles,['build:styles']);
+	gulp.watch(paths.styles,gulp.series('build:styles'));
 });
 
 gulp.task('watch:assets',function(){
-	gulp.watch(paths.assets,['copy:assets']);
-});
+	gulp.watch(paths.assets,gulp.series('copy:assets'));
+});
+
+gulp.task('build',gulp.parallel('build:scripts','build:styles','copy:assets'));
+gulp.task('watch',gulp.parallel('watch:scripts','watch:styles','watch:assets'));
+gulp.task('start',gulp.series('build', gulp.parallel('watch','serve')));

package.json

@@ -13,6 +13,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "global": "^4.4.0",
+    "gulp-cli": "^2.3.0",
     "react": "^15.3.2",
     "react-dom": "^15.3.2",
     "react-router": "^2.8.1"
@@ -22,15 +24,16 @@
     "babel-loader": "^6.2.5",
     "babel-preset-es2015": "^6.16.0",
     "babel-preset-react": "^6.16.0",
-    "gulp": "^3.9.1",
+    "gulp": "^4.0.2",
     "gulp-autoprefixer": "^3.1.1",
     "gulp-babel": "^6.1.2",
     "gulp-connect": "^5.0.0",
     "gulp-nodemon": "^2.2.1",
-    "gulp-sass": "^2.3.2",
+    "gulp-sass": "5",
     "gulp-shell": "^0.5.2",
     "gulp-webpack": "^1.5.0",
     "http-proxy-middleware": "^0.17.2",
+    "sass": "^1.38.0",
     "serve": "^1.4.0",
     "webpack": "^1.13.2"
   },

src/scripts/components/main.component.jsx

@@ -10,8 +10,8 @@ class Main extends Component {
 	constructor(){
 		super();
 		this.state = {
-			showForm:true,
-			responseUrl:false
+			showForm:false,
+			responseUrl:"url.com"
 		};
 	}
 
@@ -48,4 +48,4 @@ class Main extends Component {
 	}
 }
 
-export default Main;
+export default Main;

src/scripts/components/resultDisplay.component.jsx

@@ -16,7 +16,13 @@ class ResultDisplay extends Component{
 							<input className="result__input pure-input-1" type="text" value={this.props.responseUrl} onInput={this.preventDefault} onChange={this.preventDefault}></input>
 							<a href={this.props.responseUrl} target="_blank" className="result__show"><h4>Visit it here!</h4></a>
 							<p>To manage hosting costs, your page will be deleted in 72 hours. Use it before then!</p>
-							<button className="pure-button-primary pure-button" onClick={this.props.reload}>Make another!</button>
+							<a href="https://paypal.me/Soren589" className="result__support-cta" target="_blank">
+								<button className="pure-button-primary pure-button">
+									<img src="https://www.paypalobjects.com/webstatic/paypalme/images/social/pplogo384.png" height="25"/>
+									Say Thanks And Support This Project!
+								</button>
+							</a>
+							<button className="button-secondary pure-button" onClick={this.props.reload}>Make another!</button>
 						</div>
 					</div>
 				);
@@ -25,4 +31,4 @@ class ResultDisplay extends Component{
 	}
 }
 
-export default ResultDisplay;
+export default ResultDisplay;

src/scripts/components/sendForm.component.jsx

@@ -1,4 +1,4 @@
-import React, {Component from 'react';
+import React, { Component } from 'react';
 
 import PageService from '../services/pageService.jsx';
 import FormService from '../services/formService.jsx';
@@ -98,7 +98,7 @@ class SendForm extends Component {
 					</fieldset>
 					<button className="pure-button pure-input-1 pure-button-primary" type="submit">Make it!</button>
 				</form>
-			);	
+			);
 		}
 		return el;
 	}

src/styles/partials/__result.scss

@@ -19,7 +19,27 @@
 	&__copy-btn{
 		margin-bottom:5px;
 	}
+
+	&__support-cta {
+		width: 100%;
+		display: block;
+		margin-bottom: 10px;
+		text-decoration: none;
+
+		button {
+			width: 100%;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+
+		img {
+			border-radius: 50%;
+			margin-right: 10px;
+		}
+	}
+
 	@media all and (max-width: 764px){
 		border-radius:0px;
 	}
-}
+}