From 8b8bf93fb85c68c82685b9b419862943a86fe39d Mon Sep 17 00:00:00 2001 From: kevinjj30 Date: Tue, 13 Aug 2019 11:14:14 -0500 Subject: [PATCH 1/2] dodgeball commit --- 07week/API.html | 35 ++-- 07week/api.js | 76 +++------ 08week/dodgeball.html | 29 ++++ 08week/dodgeball.js | 284 +++++++++++++++++++++++++++++++++ 09week/hackernews/index.html | 14 -- 09week/hackernews/pokemon.html | 13 ++ 09week/hackernews/pokemon.js | 44 +++++ 09week/hackernews/script.js | 51 ------ 8 files changed, 408 insertions(+), 138 deletions(-) create mode 100644 08week/dodgeball.html create mode 100644 08week/dodgeball.js delete mode 100644 09week/hackernews/index.html create mode 100644 09week/hackernews/pokemon.html create mode 100644 09week/hackernews/pokemon.js delete mode 100644 09week/hackernews/script.js diff --git a/07week/API.html b/07week/API.html index 3cce4d72c..311ebbc1f 100644 --- a/07week/API.html +++ b/07week/API.html @@ -1,22 +1,23 @@ - - + - - Fetch - - + + + + Fetch Address Book - - -

- - +
+ +
+

All Posts

+ +
+ - + + + +http://api.brewerydb.com/v2/{endpoint}/?key=abcdef. + +https://sandbox-api.brewerydb.com/v2/{endpoint}/?key=2c035d98e35443476d5d06e2f9f62d19. \ No newline at end of file diff --git a/07week/api.js b/07week/api.js index 1d2e7cf5a..a00088893 100644 --- a/07week/api.js +++ b/07week/api.js @@ -1,62 +1,26 @@ -// // document.getElementById("getAPI").addEventListener('click', getAPI) -// const ul = document.getElementById("authors"); // Get the list where we will place our authors -// const url = "https://randomuser.me/api/?results=10"; -// let data = { -// name: "Sara" -// }; -// // The parameters we are gonna pass to the fetch function -// let fetchData = { -// method: "POST", -// body: data, -// headers: new Headers() -// }; -// fetch(url, fetchData); -// function createNode(element) { -// return document.createElement(element); // Create the type of element you pass in the parameters -// } - -// function append(parent, el) { -// return parent.appendChild(el); // Append the second parameter(element) to the first one -// } - -// // function getAPI(){ -// fetch("https://randomuser.me/api/") -// .then(res => res.json()) -// .then(data => { -// let authors = data.results; // Get the results -// return authors.map(function(author) { -// // Map through the results and for each run the code below -// let li = createNode("li"), // Create the elements we need -// img = createNode("img"), -// span = createNode("span"); -// img.src = author.picture.medium; // Add the source of the image to be the src of the img element -// span.innerHTML = `${author.name.first} ${author.name.last}`; // Make the HTML of our span to be the first and last name of our author -// append(li, img); // Append all our elements -// append(li, span); -// append(ul, li); -// return authors -// }); -// }); - -// document.getElementById("getAPI").innerHTML = output; - -// document.getElementById("getAPI").addEventListener("click", getAPI); +"use strict"; +function catchError(result) { + if (!result.ok) { + throw Error(result.message); + } + return result; +} function getAPI() { - fetch("https://randomuser.me/api/") - .then((res) => res.json()) - .then((data) => { - let output = "

Api Posts

"; - data.forEach(function(post) { + fetch("https://randomuser.me/api/?results=500") + .then(result => result.json()) + .then(data => { + let output = `

Friends

`; + data.results.forEach(function(user) { output += ` - - - `; + faces + + `; }); - - document.getElementById("input").innerHTML = output; + document.getElementById("container").innerHTML = output; }); } diff --git a/08week/dodgeball.html b/08week/dodgeball.html new file mode 100644 index 000000000..54d0db1f5 --- /dev/null +++ b/08week/dodgeball.html @@ -0,0 +1,29 @@ + + + + + + + Dodge Ball + + +
+

List Of People

+ +
+ +
+

Dodge Ball Players

+ +
+
+

Blue Team

+ +
+
+

Red Team

+ +
+ + + diff --git a/08week/dodgeball.js b/08week/dodgeball.js new file mode 100644 index 000000000..d88e69c4b --- /dev/null +++ b/08week/dodgeball.js @@ -0,0 +1,284 @@ +const arrOfPeople = [ + { + 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" + } + ]; + + const listofPlayers = []; + const blueTeam = []; + const redTeam = []; + + class Player { + constructor(person) { + this.person = person; + this.isPlayer = false; + this.color = null; + } + } + + class BlueTeammate extends Player { + constructor(player) { + super(player.person); + this.color = "blue"; + } + } + + class RedTeammate extends Player { + constructor(player) { + super(player.person); + this.color = "red"; + } + } + + const listPeopleChoices = () => { + const listElement = document.getElementById("people"); + listElement.innerHTML = ""; + arrOfPeople + .filter(person => !person.isPlayer) // filters if a person is a player. + .map(person => { + const li = document.createElement("li"); + const button = document.createElement("button"); + button.innerHTML = "Make a Player"; + button.addEventListener("click", function() { + makePlayer(person.id); //makes the player + }); + li.appendChild(button); + li.appendChild( + document.createTextNode(person.name + " - " + person.skillSet) + ); + listElement.append(li); + }); + }; + + function makePlayer(id, skillSet) { //function that actually makes the player + arrOfPeople.forEach((person, index) => { + if (person.id === id) { + let newplayer = new Player(person); + listofPlayers.push(newplayer); //pushes selected player + newplayer.isPlayer = true; + arrOfPeople.splice(index, 1); + listPlayer(); + listPeopleChoices(); + } + }); + } + + function listPlayer() { + document.getElementById("players").innerHTML = ""; + listofPlayers.map(player => { + const listPlayerEle = document.getElementById("players"); + const li = document.createElement("li"); + const redButton = document.createElement("button"); + redButton.innerHTML = "Red Team"; + const xButton = document.createElement("button"); + xButton.innerHTML = "X"; + xButton.addEventListener("click", function() { + xButton.remove(); + li.remove(); + }); + + redButton.addEventListener("click", function() { + redteam(player.person.id.name); + }); + + li.appendChild(redButton); + + const blueButton = document.createElement("button"); + blueButton.innerHTML = "Blue Team"; + blueButton.addEventListener("click", function() { + blueteam(player.person.id); + }); + + li.appendChild(blueButton); + li.appendChild(document.createTextNode(player.person.name)); + li.appendChild(xButton); + console.log(li, "test"); + listPlayerEle.append(li); + }); + } + + function blueteam(id) { + document.getElementById("blue").innerHTML = ""; + listofPlayers.map(player => { + const listPlayerEle = document.getElementById("blue"); + const li = document.createElement("li"); + const xButton = document.createElement("button"); + xButton.innerHTML = "X"; + xButton.addEventListener("click", function() { + xButton.remove(); + li.remove(); + }); + li.appendChild(document.createTextNode(player.person.name)); + li.appendChild(xButton); + listPlayerEle.append(li); + }); + } + + function redteam(id) { + document.getElementById("red").innerHTML = ""; + listofPlayers.map(player => { + const listPlayerEle = document.getElementById("red"); + const li = document.createElement("li"); + const xButton = document.createElement("button"); + xButton.innerHTML = "X"; + xButton.addEventListener("click", function() { + xButton.remove(); + li.remove(); + }); + li.appendChild(document.createTextNode(player.person.name)); + li.appendChild(xButton); + listPlayerEle.append(li); + }); + } + + // blueTeam.push(listofPlayers[id - 2]); + // const li = document.createElement("li"); + // blueteam.map(player => { + // const blueRoster = document.createElement("li"); + // blueRoster.append(li); + // console.log(blueRoster); + // }); + // } + +// ("use strict"); + +// let assert = require("assert"); + +// let jobTypes = { +// pilot: "MAV", +// mechanic: "Repair Ship", +// commander: "Main Ship", +// programmer: "Any Ship!" +// }; + +// class CrewMember { +// constructor(name, job, specialSkill, ship) { +// this.name = name; +// this.job = job; +// this.specialSkill = specialSkill; +// this.ship = ship; +// } + +// enterShip(shipParm) { +// this.ship = shipParm.name; +// shipParm.crew.push(this); +// } +// } + +// class Ship { +// constructor(name, type, ability, crew) { +// this.name = name; +// this.type = type; +// this.ability = ability; +// this.crew = []; +// } + +// missionStatement() { +// if (this.crew.length > 0) { +// return this.ability; +// } else { +// return "Can't perform a mission yet."; +// } +// } +// } + +// //tests +// if (typeof describe === "function") { +// describe("CrewMember", function() { +// it("should have a name, a job, a specialSkill and ship upon instantiation", function() { +// var crewMember1 = new CrewMember("Rick Martinez", "pilot", "chemistry"); +// assert.equal(crewMember1.name, "Rick Martinez"); +// assert.equal(crewMember1.job, "pilot"); +// assert.equal(crewMember1.specialSkill, "chemistry"); +// assert.equal(crewMember1.ship, null); +// }); + +// it("can enter a ship", function() { +// let mav = new Ship("Mars Ascent Vehicle", "MAV", "Ascend into low orbit"); +// let crewMember1 = new CrewMember("Rick Martinez", "pilot", "chemistry"); +// crewMember1.enterShip(mav); +// assert.equal(crewMember1.ship, "Mars Ascent Vehicle"); +// assert.equal(mav.crew.length, 1); +// assert.equal(mav.crew[0], crewMember1); +// }); +// }); + +// describe("Ship", function() { +// it("should have a name, a type, an ability and an empty crew upon instantiation", function() { +// let mav = new Ship("Mars Ascent Vehicle", "MAV", "Ascend into low orbit"); +// assert.equal(mav.name, "Mars Ascent Vehicle"); +// assert.equal(mav.type, "MAV"); +// assert.equal(mav.ability, "Ascend into low orbit"); +// assert.equal(mav.crew.length, 0); +// }); + +// it("can return a mission statement correctly", function() { +// let mav = new Ship("Mars Ascent Vehicle", "MAV", "Ascend into low orbit"); +// let crewMember1 = new CrewMember("Rick Martinez", "pilot", "chemistry"); +// let hermes = new Ship( +// "Hermes", +// "Main Ship", +// "Interplanetary Space Travel" +// ); +// let crewMember2 = new CrewMember( +// "Commander Lewis", +// "commander", +// "geology" +// ); +// assert.equal(mav.missionStatement(), "Can't perform a mission yet."); +// assert.equal(hermes.missionStatement(), "Can't perform a mission yet."); + +// crewMember1.enterShip(mav); +// assert.equal(mav.missionStatement(), "Ascend into low orbit"); + +// crewMember2.enterShip(hermes); +// assert.equal(hermes.missionStatement(), "Interplanetary Space Travel"); +// }); +// }); +// } diff --git a/09week/hackernews/index.html b/09week/hackernews/index.html deleted file mode 100644 index d8518af73..000000000 --- a/09week/hackernews/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - Hacker News - - -
- - - - - - diff --git a/09week/hackernews/pokemon.html b/09week/hackernews/pokemon.html new file mode 100644 index 000000000..e300c39a1 --- /dev/null +++ b/09week/hackernews/pokemon.html @@ -0,0 +1,13 @@ + + + + + + Fetch Address Book + + +

Pokemon

+ + + + diff --git a/09week/hackernews/pokemon.js b/09week/hackernews/pokemon.js new file mode 100644 index 000000000..e3c2cbd32 --- /dev/null +++ b/09week/hackernews/pokemon.js @@ -0,0 +1,44 @@ +"use strict"; + +// function catchError(result) { +// if (!result.ok) { +// throw Error(result.message); +// } +// return result; +// } + +// function getAPI() { +// fetch("https://pokeapi.co/api/v2/pokemon/ditto/") +// .then(abilities => abilities.json()) +// .then(data => { +// let output = `

Pokemon

`; +// data.abilities.foreach(function(user) { +// output += ` +// +// `; +// }); +// document.getElementById("container").innerHTML = output; +// }); +// } + +var request = new XMLHttpRequest(); + +// Open a new connection, using the GET request on the URL endpoint +request.open("GET", "https://pokeapi.co/api/v2/pokemon/ditto/", true); + +request.onload = function() { + // Begin accessing JSON data here + var data = ability.json; + + data.forEach(abilities => { + // Log each movie's title + console.log(ability.ability); + }); +}; + +// Send request +request.send(); diff --git a/09week/hackernews/script.js b/09week/hackernews/script.js deleted file mode 100644 index b1f4cb20e..000000000 --- a/09week/hackernews/script.js +++ /dev/null @@ -1,51 +0,0 @@ -'use strict'; -// document.getElementById("getText").addEventListener('click', getText) -// document.getElementById("getJson").addEventListener('click', getJson) -document.getElementById("getAPI").addEventListener('click', getAPI) - - -// function getText(){ -// fetch("text.txt") -// .then(function(data) { -// // console.log(data.text()) -// Return data.text() -// }).then(function(res)){ -// document.getElementById("input").innerHTML= output; -// }) - - -// function getJson(){ -// fetch("color.json") -// .then((res)=> res.json()) -// .then((data)=>{ -// let output = '

Color

' -// data.forEach(function(color){ -// output += ' - -//