├── webpack.config.js ├── .gitignore ├── client ├── color1.cur.png ├── othercolor.png ├── colorfulcursor.png ├── 404.html ├── styles.css ├── index.html └── index.js ├── README.md ├── package.json └── server ├── server.js └── controller.js /webpack.config.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | config.json 3 | .DS_Store -------------------------------------------------------------------------------- /client/color1.cur.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sammyb1rd/compliment-generator/HEAD/client/color1.cur.png -------------------------------------------------------------------------------- /client/othercolor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sammyb1rd/compliment-generator/HEAD/client/othercolor.png -------------------------------------------------------------------------------- /client/colorfulcursor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sammyb1rd/compliment-generator/HEAD/client/colorfulcursor.png -------------------------------------------------------------------------------- /client/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 404 8 | 9 | 10 | Yo! Sorry, can't find the page you're looking for. 11 | 12 | Go Home? 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # compliment-generator 2 | Simple 'Random' Compliment Generator 3 | 4 | //create db with arrays of various compliments/pep talk 5 | 6 | //set up backend to deliver requests to postman 7 | 8 | //install node/webpack/express other stuff to make sure things are working 9 | 10 | //have some sort of front end to display compliments 11 | 12 | 13 | //technical or stretch or question 14 | can you redirect 15 | 16 | //wednesday 17 | set up html file to include buttons to generate phrase 18 | //will need fetch request somewhere 19 | 20 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "compliment-generator", 3 | "version": "1.0.0", 4 | "description": "Simple 'Random' Compliment Generator", 5 | "main": "./server/server.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "start": "nodemon ./server/server.js" 9 | }, 10 | "author": "Sam Goldenberg", 11 | "license": "ISC", 12 | "bugs": { 13 | "url": "https://github.com/sammyb1rd/compliment-generator/issues" 14 | }, 15 | "homepage": "https://github.com/sammyb1rd/compliment-generator#readme", 16 | "dependencies": { 17 | "concurrently": "^7.5.0", 18 | "express": "^4.18.2", 19 | "node": "^19.1.0", 20 | "nodemon": "^2.0.20" 21 | }, 22 | "devDependencies": { 23 | "eslint": "^8.27.0" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /client/styles.css: -------------------------------------------------------------------------------- 1 | /* 2 | main midnight green eagle green: #114b5f, 3 | second queen blue: #456990, 4 | third nyanza: #E4FDE1, 5 | fourth fiery rose: #F45B69, 6 | fifth wine: #6B2737, 7 | */ 8 | 9 | body { 10 | color: #E4FDE1; 11 | background-color: #114b5f; 12 | padding: 10px; 13 | font-family: sans-serif; 14 | display: flex; 15 | flex-flow: column; 16 | /* align-items: center; */ 17 | } 18 | 19 | body:hover { 20 | cursor: url(color1.cur.png), url(colorfulcursor.png) auto; 21 | } 22 | 23 | #displayBox, #displayBoxSection1, #displayBoxSaved { 24 | background-color: #456990; 25 | margin: 10px; 26 | padding: 5px; 27 | font-size: 24px; 28 | color: #E4FDE1; 29 | margin: 10px; 30 | border: 2px solid #F45B69; 31 | border-radius: 5px; 32 | } 33 | 34 | button { 35 | margin: 15px; 36 | padding: 5px; 37 | font-size: 16px; 38 | font-weight: 800; 39 | color: #E4FDE1; 40 | background-color: #F45B69; 41 | border: 1px solid #6B2737; 42 | border-radius: 5px; 43 | } 44 | 45 | button:hover { 46 | background-color: #6B2737; 47 | cursor: pointer; 48 | } 49 | 50 | 51 | 52 | #displayBoxSection1 { 53 | display: flex; 54 | } 55 | 56 | #2 { 57 | font-style: italic; 58 | color: #a5da9f; 59 | } 60 | 61 | #section2Random, #section4Random { 62 | color: #a5da9f; 63 | } 64 | 65 | #section1Random, #section3Random { 66 | color: #E4FDE1; 67 | } 68 | 69 | #displayBoxSaved { 70 | min-height: 24px; 71 | } 72 | 73 | #saveSection, #saveComplete { 74 | color: #6B2737; 75 | background-color: #E4FDE1; 76 | } 77 | 78 | #saveSection:hover, #saveComplete:hover { 79 | color: #E4FDE1; 80 | background-color: #6B2737; 81 | cursor: pointer; 82 | } 83 | 84 | 85 | 86 | 87 | /* 88 | taken off package.json 89 | "repository": { 90 | "type": "git", 91 | "url": "git+https://github.com/sammyb1rd/compliment-generator.git" 92 | }, 93 | "keywords": [ 94 | "compliment", 95 | "generator", 96 | "fun", 97 | "simple" 98 | ],*/ -------------------------------------------------------------------------------- /client/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Compliment Generator 8 | 9 | 10 | 11 | 12 |

Compliment and Pep Talk Generator

13 |

Brand New Phrase

14 |

15 |

This is a generic pep talk pump up!

16 | 17 |

18 |

Section by Section Phrase

19 |

20 |

These

are

customizable

sections!

21 | 22 | 23 | 24 | 25 | 26 |

27 |

Saved Phrases

28 |

29 |

30 |

31 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /server/server.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | const app = express(); 3 | const path = require('path'); 4 | const PORT = 3000; 5 | 6 | //bring in controller to use on server 7 | 8 | const controller = require('./controller.js'); 9 | 10 | //parses JSON from incoming request 11 | app.use(express.json()); 12 | app.use(express.urlencoded({ extended: true})); 13 | 14 | //could have defined const for different router 15 | //then app.use("new endpoint", newrouter) 16 | //then it would be newrouter.post(same endpoint, different middleware) 17 | //then corresponds to different fetch endpoint in frontend 18 | 19 | //set up routes to serve html (eventually react) 20 | app.get('/', (req, res) => { 21 | res.status(200).sendFile(path.join(__dirname, '../client/index.html')) 22 | }); 23 | //added to see if functionality continues to work? 24 | app.get('/index.html', (req, res) => { 25 | res.status(200).sendFile(path.join(__dirname, '../client/index.html')) 26 | }); 27 | 28 | app.get('/styles.css', (req, res) => { 29 | return res.status(200).sendFile(path.join(__dirname, '../client/styles.css')) 30 | }); 31 | 32 | app.get('/index.js', (req, res) => { 33 | return res.status(200).sendFile(path.join(__dirname, '../client/index.js')) 34 | }); 35 | 36 | //set up post route for when button is clicked 37 | app.post('/', controller.getRandomPhrase, (req, res) => { 38 | return res.status(200).json(res.locals.phrase) 39 | }) 40 | 41 | //redirect everyone back to index.html without changing browser 42 | // app.get('/*', (req, res) => { 43 | // console.log('inside the app.get at wildcard') 44 | // return res.status(200).redirect(path.join(__dirname, '../client/index.html')) 45 | // }) 46 | 47 | //catchall bad requests 48 | app.use('*', (req, res) => { 49 | return res.status(404).sendFile(path.join(__dirname, '../client/404.html')) 50 | }); 51 | 52 | //Global Error Handler 53 | app.use((err, req, res, next) => { 54 | const defaultErr = { 55 | log: 'Express error handler caught unknown middleware error', 56 | status: 400, 57 | message: { err: 'An error occurred'} 58 | }; 59 | const errorObj = Object.assign({}, defaultErr, err); 60 | console.log(errorObj.log); 61 | return res.status(errorObj.status).json(errorObj.message); 62 | }); 63 | 64 | app.listen(PORT, () => { 65 | console.log(`Server listening on port: ${PORT}`); 66 | }); -------------------------------------------------------------------------------- /client/index.js: -------------------------------------------------------------------------------- 1 | //script for index.html to run button 2 | 3 | // window.onload = () => { 4 | const body = document.querySelector('body'); 5 | const displayBox = document.getElementById('displayBox') 6 | const completeRandom = document.getElementById('completeRandom') 7 | // const savedPhraseee = document.getElementById('displayBox').innerText 8 | 9 | console.log('im loaded from server.js') 10 | 11 | function getCompleteRandom(string){ 12 | console.log(string) 13 | console.log('i got clicked') 14 | fetch('/', { 15 | method: 'POST', 16 | headers: { 17 | 'Content-Type': 'application/json', 18 | }, 19 | body: JSON.stringify({howMuch: string, savedPhrase: document.getElementById('displayBox').innerText, savedSections: document.getElementById('1').innerText.concat('_').concat(document.getElementById('2').innerText).concat('_').concat(document.getElementById('3').innerText).concat('_').concat(document.getElementById('4').innerText)}) 20 | }) 21 | // .then(data => console.log(data)) 22 | // .then(data => console.log(data.phrase)) 23 | .then(res => res.json()) 24 | // .then(data => console.log(data)) 25 | // .then(data => console.log(typeof data === 'undefined')) 26 | // // .then(data => JSON.parse(data)) 27 | // .then(data => console.log(data)) 28 | .then(data => { 29 | // console.log(displayBox) 30 | if(data.amount === 'full') { 31 | document.getElementById('displayBox').innerText= data.phrase 32 | console.log('amount returned?', data.amount) 33 | // displayBox.innerText = data.phrase; 34 | } else if (data.amount === 'one') { 35 | document.getElementById('1').innerText= `${data.phrase}` + ` ` 36 | console.log('amount returned?', data.amount) 37 | } else if (data.amount === 'two') { 38 | document.getElementById('2').innerText= ` ${data.phrase} ` + " "; 39 | document.getElementById('2').style.color = '#a5da9f'; 40 | console.log('amount returned?', data.amount) 41 | } else if (data.amount === 'three') { 42 | document.getElementById('3').innerText= data.phrase 43 | console.log('amount returned?', data.amount) 44 | } else if (data.amount === 'four') { 45 | document.getElementById('4').innerText= data.phrase 46 | document.getElementById('4').style.color = '#a5da9f'; 47 | console.log('amount returned?', data.amount) 48 | } else if (data.amount === 'new saved phrase') { 49 | document.getElementById('displayBoxSaved').innerText= data.phrase.concat('\n').concat(document.getElementById('displayBoxSaved').innerText) 50 | console.log('amount returned?', data.amount) 51 | } else if (data.amount === 'new saved Section phrase') { 52 | document.getElementById('displayBoxSaved').innerText= data.phrase.concat('\n').concat(document.getElementById('displayBoxSaved').innerText) 53 | console.log('amount returned?', data.amount) 54 | } 55 | }) 56 | .catch(err => console.log(err)) 57 | } 58 | 59 | 60 | // completeRandom.onClick(getCompleteRandom) 61 | 62 | //} -------------------------------------------------------------------------------- /server/controller.js: -------------------------------------------------------------------------------- 1 | //what requires do i need? 2 | 3 | //what paths? 4 | 5 | //what exports? 6 | 7 | //create bigass object to hold all the stuff 8 | 9 | const options = { 10 | firstWord: ['Champ, ', 'Fact: ', 'Everybody says ', 'Dang...', 'Check it: ', 11 | 'Just saying...', 'Superstar, ', 'Tiger, ', 'Self, ', 'Know this: ', 12 | 'News alert: ', 'Girl, ', 'Ace, ', 'Excuse me but ', 'Experts agree: ', 13 | 'In my opinion, ', 'Hear ye, hear ye:', 'Okay, listen up:'], 14 | secondWord: ['the mere idea of you, ', 'your soul ', 'your hair today ', 'everything you do ', 'your personal style ', 15 | 'every thought you have ', 'that sparkle in your eye ', 'your presence here ', 'what you got going on, ', 'the essential you ', 16 | 'your life\'s journey ', 'that saucy personality ', 'your DNA ', 'that brain of yours ', 'your choice of attire ', 17 | 'the way you roll ', 'whatever your secret is ', 'all of y\'all '], 18 | thirdWord: ['has serious game, ', 'rains magic, ', 'deserves the Nobel Prize, ', 'raises the roof ', 'breeds miracles, ', 19 | 'is paying off big time, ', 'shows mad skills, ', 'just shimmers, ', 'is a national treasure, ', 'gets the party hopping, ', 20 | 'is the next big thing, ', 'roars like a lion, ', 'is a rainbow factory, ', 'is made of diamonds, ', 'makes birds sing, ', 21 | 'should be taught in school, ', 'makes my world go \'round, ', 'is 100% legit, '], 22 | lastWord: ['24/7.', 'can I get an amen?', 'and that\'s a fact.', 'so treat yourself.', 'you feel me?', 23 | 'that\'s just science.', 'would I lie?', 'for reals.', 'mic drop.', 'you hidden gem.', 24 | 'snuggle bear.', 'period.', 'can I get a whoop whoop?', 'now let\'s dance.', 'high five.', 25 | 'say it again!', 'according to CNN.', 'so get used to it.'], 26 | } 27 | //get length of each property 28 | // console.log(options.firstWord.length) 29 | // console.log(options.secondWord.length) 30 | // console.log(options.thirdWord.length) 31 | // console.log(options.lastWord.length) 32 | 33 | const controller = { 34 | makeRandomPhrase: function () { 35 | const oneWord = Math.floor(Math.random() * options.firstWord.length) 36 | const twoWord = Math.floor(Math.random() * options.secondWord.length) 37 | const threeWord = Math.floor(Math.random() * options.thirdWord.length) 38 | const fourWord = Math.floor(Math.random() * options.lastWord.length) 39 | const phrase = options.firstWord[oneWord].concat(options.secondWord[twoWord]).concat(options.thirdWord[threeWord]).concat(options.lastWord[fourWord]) 40 | return phrase; 41 | }, 42 | makeOnePhrase: function() { 43 | const oneWord = Math.floor(Math.random() * options.firstWord.length) 44 | const phrase = options.firstWord[oneWord] 45 | return phrase; 46 | }, 47 | makeTwoPhrase: function() { 48 | const twoWord = Math.floor(Math.random() * options.secondWord.length) 49 | const phrase = options.secondWord[twoWord] 50 | return phrase; 51 | }, 52 | makeThreePhrase: function() { 53 | const threeWord = Math.floor(Math.random() * options.thirdWord.length) 54 | const phrase = options.thirdWord[threeWord] 55 | return phrase; 56 | }, 57 | makeFourPhrase: function() { 58 | const fourWord = Math.floor(Math.random() * options.lastWord.length) 59 | const phrase = options.lastWord[fourWord] 60 | return phrase; 61 | }, 62 | getRandomPhrase: (req, res, next) => { 63 | 64 | const { howMuch, savedPhrase, savedSections } = req.body; 65 | console.log(howMuch) 66 | // console.log(req.params) 67 | //pull anything from request? 68 | if (howMuch === 'full') { 69 | const newRandomPhrase = controller.makeRandomPhrase(); 70 | // if (err) { 71 | // return next({ 72 | // //error message like global: 73 | // log: 'Express error handler caught in controller.getRandomPhrase middlware', 74 | // status: 400, 75 | // message: { err: 'An error has occured in controller.getRandomPhrase'}, 76 | // }); 77 | // } 78 | console.log('sending back a random phrase?!?!!?', newRandomPhrase); 79 | res.locals.phrase = { 80 | phrase: newRandomPhrase, 81 | amount: 'full' 82 | }; 83 | return next(); 84 | } else if (howMuch === 'one') { 85 | const new1Phrase = controller.makeOnePhrase(); 86 | res.locals.phrase = { 87 | phrase: new1Phrase, 88 | amount: 'one' 89 | }; 90 | return next(); 91 | } else if (howMuch === 'two') { 92 | const new2Phrase = controller.makeTwoPhrase(); 93 | res.locals.phrase = { 94 | phrase: new2Phrase, 95 | amount: 'two' 96 | }; 97 | return next(); 98 | } else if (howMuch === 'three') { 99 | const new3Phrase = controller.makeThreePhrase(); 100 | res.locals.phrase = { 101 | phrase: new3Phrase, 102 | amount: 'three' 103 | }; 104 | return next(); 105 | } else if (howMuch === 'four') { 106 | const new4Phrase = controller.makeFourPhrase(); 107 | res.locals.phrase = { 108 | phrase: new4Phrase, 109 | amount: 'four' 110 | }; 111 | return next(); 112 | } else if (howMuch === 'saveCompletely new phrase'){ 113 | console.log('how much to save', howMuch) 114 | console.log('new phrase to save', savedPhrase) 115 | res.locals.phrase = { 116 | phrase: savedPhrase, 117 | amount: 'new saved phrase', 118 | }; 119 | return next(); 120 | } else if (howMuch === 'saveSection new phrase'){ 121 | console.log('how much to save', howMuch) 122 | console.log('new phrase to save', savedSections) 123 | res.locals.phrase = { 124 | phrase: savedSections, 125 | amount: 'new saved Section phrase', 126 | }; 127 | return next(); 128 | } 129 | } 130 | } 131 | 132 | //add semicolon to test LOL;;;; 133 | // console.log(controller.makeRandomPhrase()) 134 | // console.log(controller.makeRandomPhrase()) 135 | // console.log(controller.makeRandomPhrase()) 136 | // console.log(controller.makeRandomPhrase()) 137 | // controller.getRandomPhrase(); 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | //module exports? any exports? 146 | module.exports = controller; --------------------------------------------------------------------------------