├── README.md ├── Screen Shot 2018-03-12 at 6.12.48 AM.png └── wutang ├── img └── wu.gif ├── index.html ├── js └── scripts.js ├── server.js ├── style.css └── wu.png /README.md: -------------------------------------------------------------------------------- 1 | # Wu-Tang Clan Name Generator 2 | Whenever I start to layout my program and goal with psuedo code, I like to ask myself 3 questions: the first is - what can the user do, the second is - what can the user see, and the third is - what does the user expect? In this case, this project was a timed challenge and the user is given survey questions that end up randomly generating a name based on the user's responses to the survey questions. To make the activity a bit more fun, the idea was to generate a Wu-Tang Clan name. 3 | 4 | **Generate your Wu-Tang name here:** https://karina001.github.io/WuTangNameGenerator/ 5 | 6 | ![alt tag](https://github.com/karina001/WuTangNameGenerator/blob/master/Screen%20Shot%202018-03-12%20at%206.12.48%20AM.png) 7 | 8 | ## How It's Made: 9 | 10 | **Tech used:** HTML, CSS, JavaScript 11 | 12 | This app leveraged the simple use of a form and its inputs, to get user information, evaluate this information and return a random string. This app mainly incorporates a lof of Javascript with minimal HTML / CSS. 13 | 14 | ## Optimizations 15 | When I have more time, I'd like to refactor this code to fit ES6+ standards and make it fullstack with node JS. 16 | 17 | ## Examples: 18 | Take a look at other examples that I have in my own portfolio: 19 | 20 | **Spanish Colors Memory Game:** https://github.com/karina001/spanishColorsMemoryGame 21 | 22 | **WuTangClan Name Generator:** https://github.com/karina001/toDoList 23 | 24 | **Speech Recognition App:** https://github.com/karina001/speechRecognitionApp 25 | -------------------------------------------------------------------------------- /Screen Shot 2018-03-12 at 6.12.48 AM.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/girl4tech/WuTangNameGenerator/7f83c52b0b9eebf6bba876b20dcb04f4d262d506/Screen Shot 2018-03-12 at 6.12.48 AM.png -------------------------------------------------------------------------------- /wutang/img/wu.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/girl4tech/WuTangNameGenerator/7f83c52b0b9eebf6bba876b20dcb04f4d262d506/wutang/img/wu.gif -------------------------------------------------------------------------------- /wutang/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |

Wu-Tang Name Generator

13 |
14 | 15 | 16 | 17 | 18 | 20 |
21 | generate 22 |
23 | 24 |
25 |
26 |

27 |

28 |
29 | 30 | 31 | -------------------------------------------------------------------------------- /wutang/js/scripts.js: -------------------------------------------------------------------------------- 1 | document.addEventListener("DOMContentLoaded" , () => { 2 | //variables and data 3 | const generate = document.getElementById("gen"); 4 | const inputs = document.getElementsByTagName("input"); 5 | const firstName = document.getElementById("name"); 6 | const lastName = document.getElementById("name2"); 7 | const wuTangMembers = [ 8 | "Black", 9 | "Killah", 10 | "Masta", 11 | "Big", 12 | "Ol Dirty", 13 | "Doctah", 14 | "Crazy", 15 | "Angry" 16 | ]; 17 | const lastNames = [ 18 | "Shootah", 19 | "Child", 20 | "Warrior", 21 | "Man", 22 | "The Chef", 23 | "Bastard", 24 | "Priest" 25 | ]; 26 | //logic 27 | generate.addEventListener("click" , () => { 28 | for(let i = 0; i < inputs.length; i++){ 29 | if(inputs[i].value !== ""){ 30 | let randomFirstName = wuTangMembers[Math.round(Math.random()* (wuTangMembers.length - 1))]; 31 | let randomLastName = lastNames[Math.round(Math.random()* (lastNames.length - 1))]; 32 | firstName.innerHTML = randomFirstName; 33 | lastName.innerHTML = randomLastName; 34 | } 35 | } 36 | }); 37 | }); 38 | 39 | -------------------------------------------------------------------------------- /wutang/server.js: -------------------------------------------------------------------------------- 1 | //server set up 2 | const http = require('http'); 3 | const fs = require('fs'); 4 | http.createServer(function (req, res) { 5 | fs.readFile('index.html', function(err, data) { 6 | res.writeHead(200, {'Content-Type': 'text/html'}); 7 | res.write(data); 8 | res.end(); 9 | }); 10 | }).listen(8000); 11 | -------------------------------------------------------------------------------- /wutang/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: rgb(12,12,12); 3 | font-family: 'Bowlby One SC', cursive; 4 | } 5 | 6 | form, 7 | h1, 8 | img, 9 | #gen, 10 | #names { 11 | position: absolute; 12 | } 13 | 14 | form { 15 | top: 39.9%; 16 | width:20%; 17 | margin:5% 60%; 18 | } 19 | 20 | html { 21 | font-size: 24px; 22 | } 23 | 24 | h1, 25 | #names { 26 | margin: 0; 27 | } 28 | 29 | h1 { 30 | color: rgb(255,204,1); 31 | font-size: 2.5rem; 32 | letter-spacing: 1px; 33 | position: absolute; 34 | left: 25%; 35 | } 36 | 37 | h2 { 38 | color: white; 39 | } 40 | 41 | img { 42 | position: absolute; 43 | left: 37%; 44 | } 45 | 46 | input { 47 | border-radius: 3px; 48 | display: block; 49 | margin-top: 10px; 50 | height: 100px; 51 | width: 600px; 52 | } 53 | 54 | #gen { 55 | border: 5px solid rgb(255,204,1); 56 | border-radius: 10px; 57 | color: rgb(255,204,1); 58 | height: 50px; 59 | margin-top: 25px; 60 | padding-top: 15px; 61 | left: 33%; 62 | text-align: center; 63 | width: 200px; 64 | } 65 | 66 | 67 | #gen:hover { 68 | background-color: rgb(255,204,1); 69 | color: rgb(12,12,12); 70 | cursor: pointer; 71 | } 72 | 73 | #names { 74 | top: 110%; 75 | left: 45%; 76 | } 77 | -------------------------------------------------------------------------------- /wutang/wu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/girl4tech/WuTangNameGenerator/7f83c52b0b9eebf6bba876b20dcb04f4d262d506/wutang/wu.png --------------------------------------------------------------------------------