-
Notifications
You must be signed in to change notification settings - Fork 448
Homework #736
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: gh-pages
Are you sure you want to change the base?
Homework #736
Changes from 1 commit
db11778
11c6677
e50e612
16a9609
394fc39
c024479
e0836b6
4d2e3f8
b9a9595
5d6bf24
00f0b15
c90b4d9
ad4dd96
4edb622
3c6f751
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| Created an array of people to choose from of eligible players, with different attributes for each of them. | ||
| Created different classes to hold the attributes and move them from array to array, and display them in the DOM. Created a listPeopleChoices function to create new players and map through the array of people. Creates a button that allows you to make a player that when clicked moves the object to the listOfPlayers array. Once listOfPlayers is created they are given two button options for the red or blue team which when clicked will move them to the selected array. | ||
| step 1: Array of People | ||
| step 2: ARRAY OF PLAYERS | ||
| STEP 3: array of red or blue team | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | ||
| <title>Dodge Ball</title> | ||
| </head> | ||
| <body> | ||
| <div> | ||
| <h4>List Of People</h4> | ||
| <ul id="people"></ul> | ||
| </div> | ||
| <button onclick="listPeopleChoices()">List People</button> | ||
| <div> | ||
| <h4>Dodge Ball Players</h4> | ||
| <ul id="players"></ul> | ||
| </div> | ||
| <div> | ||
| <h4>Blue Team</h4> | ||
| <ul id="blue"></ul> | ||
| </div> | ||
| <div> | ||
| <h4>Red Team</h4> | ||
| <ul id="red"></ul> | ||
| </div> | ||
| <script src='dodgeball.js'></script> | ||
| </body> | ||
| </html> |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,202 @@ | ||
| const arrOfPeople = [ | ||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I really like that you put comments through out. But the indentation could use a little more work. It is not strictly necessary for the code to run, but it would make it easier to read and follow along |
||
| { | ||
| id: 2, | ||
| name: "Charles Young", | ||
| age: 55, | ||
| skillSet: "welding", | ||
| placeBorn: "Omaha, Nebraska" | ||
| }, | ||
| { | ||
| id: 3, | ||
| name: "Judy Twilight", | ||
| age: 35, | ||
| skillSet: "fishing", | ||
| placeBorn: "Louisville, Kentucky" | ||
| }, | ||
| { | ||
| id: 4, | ||
| name: "Cynthia Doolittle", | ||
| age: 20, | ||
| skillSet: "tic tac toe", | ||
| placeBorn: "Pawnee, Texas" | ||
| }, | ||
| { | ||
| id: 5, | ||
| name: "John Willouby", | ||
| age: 28, | ||
| skillSet: "pipe fitting", | ||
| placeBorn: "New York, New York" | ||
| }, | ||
| { | ||
| id: 6, | ||
| name: "Stan Honest", | ||
| age: 20, | ||
| skillSet: "boom-a-rang throwing", | ||
| placeBorn: "Perth, Australia" | ||
| }, | ||
| { | ||
| id: 7, | ||
| name: "Mia Watu", | ||
| age: 17, | ||
| skillSet: "acrobatics", | ||
| placeBorn: "Los Angeles, California" | ||
| }, | ||
| { | ||
| id: 8, | ||
| name: "Walter Cole", | ||
| age: 32, | ||
| skillSet: "jump rope", | ||
| placeBorn: "New Orleans, Louisiana" | ||
| }, | ||
| ] | ||
| //take list of people and create new player instances | ||
| //there should NOT be two teammate classes only one not blueTeammate and redTeammate | ||
| //teammate class which represents a player once they get selected for a team | ||
| //attribute of teammate class should be teamname all teammates have an attribute called team name | ||
| //if you blue your attribute will say blue if youre red your attribute will say red | ||
| const listOfPlayers = [] | ||
| const blueTeam = [] | ||
| const redTeam = [] | ||
|
|
||
| class player { | ||
| constructor(id, name, age, skillSet, placeBorn){ | ||
| this.id = id; | ||
| this.name = name; | ||
| this.age = age; | ||
| this.skillSet = skillSet; | ||
| this.placeBorn = placeBorn; | ||
|
|
||
| //listPeopleChoices | ||
| } | ||
| } | ||
|
|
||
| //the parent class is player, the child is teammate | ||
| class Teammate extends player { | ||
| constructor(id, name, age, skillSet, placeBorn, teamName){ | ||
| super(id, name, age, skillSet, placeBorn);//super calls player constructor | ||
| this.teamName = teamName; | ||
| /*if your a blue teammate you attribute will say blue, | ||
| if you a red teammamte your attribute will say red*/ | ||
| } | ||
| } | ||
| //teammate class should extend the player class | ||
| //Ex: truck extends vehicle | ||
| //every teammate has the same attributes of player plus one more | ||
| //which is which team theyre on | ||
| const listPeopleChoices = () => { | ||
| const listElement = document.getElementById('people') | ||
| arrOfPeople.map(person => { | ||
| //loops through arrOfPeople array | ||
| //creates list item tag | ||
| const li = document.createElement("li") | ||
| //creates button element | ||
| const button = document.createElement("button") | ||
| //text in button reads make player | ||
| button.innerHTML = "Make Player" | ||
| //when the button is clicked... | ||
| button.addEventListener('click', function() {makePlayer(person.id)} ) | ||
| li.appendChild(button) | ||
| li.appendChild(document.createTextNode(person.name + " - " + person.skillSet)) | ||
| listElement.append(li) | ||
| }) | ||
| } | ||
|
|
||
| const makePlayer = (id) => { | ||
| let playerElement = arrOfPeople.find(function(player){ | ||
| //find players with "id" in arrOfPeople | ||
| return player.id == id; | ||
|
|
||
| }); | ||
| //goes through index of arrOfPeople with id | ||
| let index = arrOfPeople.indexOf(playerElement); | ||
| //takes out selected value | ||
| arrOfPeople.splice(index, 1); | ||
| //removes 1 item from arrayOfPeople array | ||
| let newPlayer = new player (playerElement.id, playerElement.name, playerElement.age, playerElement.skillSet, playerElement.placeBorn); | ||
| //creates a new player object | ||
| //adds newPlayer object to listOfPlayers array | ||
| listOfPlayers.push(newPlayer); | ||
| //calls PlayerDisplay function from below | ||
| //PlayerDisplay(); | ||
| console.log(newPlayer) | ||
| PlayerDisplay(); | ||
| }; | ||
|
|
||
| const makeBluePlayer = (player) => { | ||
|
|
||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This would have been the place to create a Teammate instance and have it store the team color. |
||
| blueTeam.push(player); | ||
| //push value into blueTeam array | ||
|
|
||
| let bluePlayer = listOfPlayers.indexOf(player); | ||
| //index of player in listOfPlayers array | ||
| //the indexOf listOfPlayers array is assigned to bluePlayer | ||
| //takes out one item, bluePlayer value from listOfPlayers array | ||
| listOfPlayers.splice(bluePlayer, 1) | ||
| document.getElementById("blue").innerHTML = ""; | ||
| PlayerDisplay(); | ||
| const blueEl = document.getElementById('blue') | ||
| //loops (map) through blueTeam array | ||
| blueTeam.map(players => { | ||
| const li = document.createElement("li"); | ||
| li.appendChild(document.createTextNode(`${players.name} - ${players.id}`)) | ||
| blueEl.append(li); | ||
| }) | ||
| }; | ||
|
|
||
| const makeRedPlayer = (player) => { | ||
| //push value into redTeam array | ||
| redTeam.push(player); | ||
| //indexOf player in listOfPlayers array is assigned to redPlayer | ||
| const redPlayer = listOfPlayers.indexOf(player); | ||
| //take out 1 item, redPlayer of listOfPlayers array | ||
| listOfPlayers.splice(redPlayer, 1) | ||
| document.getElementById("red").innerHTML = ""; | ||
| PlayerDisplay(); | ||
| const redEl = document.getElementById('red'); | ||
|
|
||
|
|
||
| //loops (map) through redTeam array | ||
| redTeam.map(players => { | ||
| const li = document.createElement("li"); | ||
| li.appendChild(document.createTextNode(`${players.name} - ${players.id}`)) | ||
| redEl.append(li); | ||
| }) | ||
| }; | ||
|
|
||
| const PlayerDisplay = () => { | ||
| const listElement = document.getElementById('players') | ||
| listElement.innerHTML = ""; | ||
| //finds the id player and assigns it to list element | ||
| listOfPlayers.map(person => { | ||
| //loops through listOfPlayers array | ||
| //creates "li" tag | ||
| const li = document.createElement("li") | ||
| //li.appendChild(document.createTextNode(`${person.name} - ${person.skillSet}`)) | ||
| listElement.append(li) | ||
| document.getElementById("people").innerHTML = ""; | ||
| listPeopleChoices(); | ||
| //creates button | ||
| const button1 = document.createElement("button") | ||
| //creates button | ||
| const button2 = document.createElement("button") | ||
| //text in "button1" reads blue team | ||
| button1.innerHTML = "Blue Team" | ||
| // text in "button2" reads read team | ||
| button2.innerHTML = "Red Team" | ||
| //when button1 is clicked calls makeBluePlayer function | ||
| button1.addEventListener('click', function() {makeBluePlayer(person)} ) | ||
| li.appendChild(button1) | ||
| //li.appendChild(document.createTextNode(person.id + " - " + person.name)) | ||
| listElement.append(li) | ||
| //when button2 is clicked calls makeRedPlayer function | ||
| button2.addEventListener('click', function() {makeRedPlayer(person)} ) | ||
| li.appendChild(button2) | ||
| li.appendChild(document.createTextNode(person.name + " - " + person.age)) | ||
| listElement.append(li) | ||
| }) | ||
| }; | ||
| //var judy = new player (3, "Judy Twilight", 35, "fishing", "Louisville, Kentucky") | ||
| //console.log(judy); | ||
|
|
||
| /*if your a blue teammate you attribute will say blue, | ||
| if you a red teammamte your attribute will say red*/ | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| { | ||
| "liveServer.settings.port": 5502 | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Document</title> | ||
| </head> | ||
| <body> | ||
|
|
||
| <script src="addressAPI.js"></script> | ||
| </body> | ||
| </html> |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| const getPosts = () => { | ||
| return fetch(`https://randomuser.me/api/`) | ||
| .then(res => res.json()) | ||
| .then(res => console.log(res)) | ||
|
|
||
| } | ||
|
|
||
| console.log(getPosts()); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
One of the requirements was a test plan write up, or some tests. I dont see either of those.