From 237d92e8cab2ff3c62f0ce848f96eb63603628ad Mon Sep 17 00:00:00 2001 From: tonezone108 Date: Mon, 28 Oct 2019 15:01:48 -0500 Subject: [PATCH 1/3] Address book --- 07week/AddressBook/index.html | 14 +++++++ 07week/AddressBook/main.js | 78 +++++++++++++++++++++++++++++++++++ 2 files changed, 92 insertions(+) create mode 100644 07week/AddressBook/index.html create mode 100644 07week/AddressBook/main.js diff --git a/07week/AddressBook/index.html b/07week/AddressBook/index.html new file mode 100644 index 000000000..fd982960d --- /dev/null +++ b/07week/AddressBook/index.html @@ -0,0 +1,14 @@ + + + + + + + AddressBook + + + check the console + + + + diff --git a/07week/AddressBook/main.js b/07week/AddressBook/main.js new file mode 100644 index 000000000..1a5aab660 --- /dev/null +++ b/07week/AddressBook/main.js @@ -0,0 +1,78 @@ +let arrayOfUsers = []; + +window.onload = function() { + getUsers(); + + // consolePosts(); + // displayPhotoAndName(); +}; + +const getUsers = () => { + let user; + fetch("https://randomuser.me/api/?results=5") + .then(res => res.json()) + .then(function(jsonpayload) { + console.log(jsonpayload.results); + jsonpayload.results.forEach(function(user, index) { + let li = document.createElement("li"); + let img = document.createElement("img"); + let span = document.createElement("span"); + let ul = document.getElementById("ListOfUsers"); + let button = document.createElement("button"); + button.innerText = "Show my email"; + button.setAttribute("data-email", user.email); + img.setAttribute("src", user.picture.large); + span.innerText = `${user.name.title} ${user.name.first} ${user.name.last}`; + li.appendChild(img); + li.appendChild(span); + li.appendChild(button); + button.addEventListener("click", clickedButtonFunction); + ul.appendChild(li); + }); + }); + + let clickedButtonFunction = function(event) { + var clickedButton = event.target; + console.log("the user was clicked ", clickedButton); + var email = clickedButton.getAttribute("data-email"); + console.log("the email is", email); + var clickedLi = clickedButton.parentElement; + let emailSpan = document.createElement("li"); + emailSpan.innerText = email; + clickedLi.appendChild(emailSpan); + clickedLi.removeChild(clickedButton); + }; + + const consolePosts = () => { + console.log("This is coming too early " + arrayOfUsers); + }; + + const displayPhotoAndName = () => { + //how do I reference an object, within a object, within a array and then store it into a html element? + + const listElement = document.getElementById("users"); + arrayOfUsers.map(user => { + const li = document.createElement("li"); + const button = document.createElement("button"); + button.innerHTML = "More Info"; + button.addEventListener("click", function() { + moreInfo(user.id); + }); + li.appendChild( + document.createTextNode(arrayOfUsers[0].user.name + " - ") + ); + li.appendChild(button); + listElement.append(li); + }); + + // document.getElementById("photo").innerHTML = arrayOfUsers[0]; + }; + + // var wrapper = $("#wrapper"), + // container; + // for (var key in arrayOfUsers) { + // container = $('
'); + // wrapper.append(container); + // container.append('
' + arrayOfUsers[0].picture + "
"); + // container.append('
' + key + "
"); +}; From 61a11495ae52763dea7bf85b0f3f0aa6e768ac64 Mon Sep 17 00:00:00 2001 From: tonezone108 Date: Wed, 30 Oct 2019 00:32:55 -0500 Subject: [PATCH 2/3] Checkpoint 2 Dodgeball --- 07week/CheckPoint2/dogeBall.md | 15 ++ 07week/CheckPoint2/index.html | 29 +++ 07week/CheckPoint2/main.js | 311 +++++++++++++++++++++++++++++++++ 3 files changed, 355 insertions(+) create mode 100644 07week/CheckPoint2/dogeBall.md create mode 100644 07week/CheckPoint2/index.html create mode 100644 07week/CheckPoint2/main.js diff --git a/07week/CheckPoint2/dogeBall.md b/07week/CheckPoint2/dogeBall.md new file mode 100644 index 000000000..c2eabeab5 --- /dev/null +++ b/07week/CheckPoint2/dogeBall.md @@ -0,0 +1,15 @@ +How we doing this: + +There will exist two separate classes. + +One class will make a player by adding to key's and values of people from list of people. + +One class will make a teamate out of a player by adding a key and value for team. + +A function will exits to basically move an entire key and its value from the list of people object, and then into the listOfPlayers array. + +Similarly another function will exist to move a player from the listofPlayers array and into either the redTeam or blueTeam array depening onf what the teammate class assigns to the player. + +The html page will have onclick buttons that will call functions that will remove content from the list of people list and place them into the player and team classes lists. Moving content around and assign people to player or teammate arrays. + +The javascript will basically serve to objects into arrays and then into another, to then be displayed in a new container designated to it while assigning new keys and values to the player object. diff --git a/07week/CheckPoint2/index.html b/07week/CheckPoint2/index.html new file mode 100644 index 000000000..cbc56116c --- /dev/null +++ b/07week/CheckPoint2/index.html @@ -0,0 +1,29 @@ + + + + + + + Dodge Ball + + +
+

List Of People

+
    +
    + +
    +

    Dodge Ball Players

    +
      +
      +
      +

      Blue Team

      +
        +
        +
        +

        Red Team

        +
          +
          + + + diff --git a/07week/CheckPoint2/main.js b/07week/CheckPoint2/main.js new file mode 100644 index 000000000..1a102a4be --- /dev/null +++ b/07week/CheckPoint2/main.js @@ -0,0 +1,311 @@ +"use strict"; +const arrOfPeople = [ + //intial object storing the players. + { + 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" + } +]; + +//following objects will be used to stored the players. +const listOfPlayers = []; +const blueTeam = []; +const redTeam = []; + +//classes will be used to assign new keys and values to the people pushed into it by the called function. +//player class will add more dogeball traits as new keys and values to the person object. +class Player { + constructor( + canThrowBall, + canDodgeBall, + hasPaid, + isHealthy, + yearsExperience, + id, + name, + age, + skillSet, + placeBorn + ) { + this.canThrowBall = canThrowBall; + this.canDodgeBall = canDodgeBall; + this.haspaid = hasPaid; + this.isHealthy = isHealthy; + this.yearsExperience = yearsExperience; + this.id = id; + this.name = name; + this.age = age; + this.skillSet = skillSet; + this.placeBorn = placeBorn; + } +} +// teammate will take a player and assign either red team or blue team as new key and values. +class Teammate { + constructor(redTeam, blueTeam) { + this.redTeam = redTeam; + this.blueTeam = blueTeam; + } +} + +//this function will lay out all the players on the html page when called by clicking on the list players button. +const listPeopleChoices = () => { + const listElement = document.getElementById("people"); + arrOfPeople.map(person => { + const li = document.createElement("li"); + const button = document.createElement("button"); + button.innerHTML = "Make Player"; + button.addEventListener("click", function() { + makePlayer(person.id); + var clickedButton = event.target; + var clickedLi = clickedButton.parentElement; + clickedLi.removeChild(clickedButton); + var clickedLiParent = clickedLi.parentElement; + clickedLiParent.removeChild(clickedLi); + }); + + li.appendChild( + document.createTextNode(person.name + " - " + person.skillSet) + ); + li.appendChild(button); + listElement.append(li); + }); + var clickedButton = event.target; + var clickedLi = clickedButton.parentElement; + clickedLi.removeChild(clickedButton); +}; + +//this function, when called on a event set up by the make player function, +// will take the person and add new dogeball traits to its key and values by calling the player class and then push into the listofPlayers array +const addPlayer = person => { + let newAttributes = new Array(10); + + for (let i = 0; i < newAttributes.length - 1; i++) { + let yesno = Math.random(); + if (yesno > 0.5) { + newAttributes[i] = true; + } else { + newAttributes[i] = false; + } + } + newAttributes[4] = Math.round(Math.random() * 10); + newAttributes[5] = person.id; + newAttributes[6] = person.name; + newAttributes[7] = person.age; + newAttributes[8] = person.skillSet; + newAttributes[9] = person.placeBorn; + + let newPlayer = new Player( + newAttributes[0], + newAttributes[1], + newAttributes[2], + newAttributes[3], + newAttributes[4], + newAttributes[5], + newAttributes[6], + newAttributes[7], + newAttributes[8], + newAttributes[9] + ); + listOfPlayers.push(newPlayer); + console.log(listOfPlayers); +}; + +//this function will take a person from the list of people and move it into the players array while moving content on the html page. +//additionally this function will call the addPlayer function to specifically move the person into the player array and add new attributes. +const makePlayer = id => { + console.log(id); + const listElement = document.getElementById("players"); + arrOfPeople.forEach(person => { + if (person.id == id) { + let whichTeam = ""; + const li = document.createElement("li"); + const buttonBlue = document.createElement("button"); + buttonBlue.innerHTML = "Make Blue Player"; + buttonBlue.addEventListener("click", function() { + var clickedButton = event.target; + var clickedLi = clickedButton.parentElement; + clickedLi.removeChild(clickedButton); + var clickedLiParent = clickedLi.parentElement; + clickedLiParent.removeChild(clickedLi); + whichTeam = "Blue"; + makeTeammate(person.id, whichTeam); + }); + + const buttonRed = document.createElement("button"); + buttonRed.innerHTML = "Make Red Player"; + buttonRed.addEventListener("click", function() { + var clickedButton = event.target; + var clickedLi = clickedButton.parentElement; + clickedLi.removeChild(clickedButton); + var clickedLiParent = clickedLi.parentElement; + clickedLiParent.removeChild(clickedLi); + whichTeam = "Red"; + makeTeammate(person.id, whichTeam); + }); + li.appendChild(buttonBlue); + li.appendChild(buttonRed); + li.appendChild( + document.createTextNode(person.name + " - " + person.skillSet) + ); + listElement.append(li); + addPlayer(person); //adds the person to the player array. + } + }); + console.log(`make Player li ${id} was clicked!`); + console.log("list of players ", listOfPlayers); + + //create code that creats player objects and adds them to the array. +}; + +//This function will be called by a event set up by the makeTeammate function and call the teammate class to add team keys and values to the player object +// and push into respective arrays. +const addTeammate = (person, whichTeam) => { + if (whichTeam == "Red") { + console.log("we found the person"); + person.team = "Red"; + redTeam.push(person); + } else if (whichTeam == "Blue") { + console.log("we found the person"); + person.team = "Blue"; + blueTeam.push(person); + } +}; +const makeTeammate = (id, whichTeam) => { + //make a function to test for blue team and red team. Without manipulating. + if (whichTeam == "Red") { + //make a funciton that that passes id, and whichTeam that then pushes into respective arrays and then test that. Dont forget to make test object. + console.log("on the red team"); + + listOfPlayers.forEach(person => { + const listElement = document.getElementById("red"); + + if (person.id == id) { + const li = document.createElement("li"); + li.appendChild( + document.createTextNode(person.name + " - " + person.skillSet) + ); + listElement.append(li); + console.log(redTeam); + addTeammate(person, whichTeam); + } + }); + } else if (whichTeam == "Blue") { + console.log("on the blue team"); + + listOfPlayers.forEach(person => { + const listElement = document.getElementById("blue"); + if (person.id == id) { + const li = document.createElement("li"); + li.appendChild( + document.createTextNode(person.name + " - " + person.skillSet) + ); + listElement.append(li); + console.log(blueTeam); + addTeammate(person, whichTeam); + } + }); + } +}; +//Some tests +if (typeof describe === "function") { + const assert = require("assert"); + describe("makePlayer()", () => { + let singlePerson = { + id: 3, + name: "Judy Twilight", + age: 35, + skillSet: "fishing", + placeBorn: "Louisville, Kentucky" + }; + + it("should detect a new player", () => { + addPlayer(singlePerson); + assert.equal(listOfPlayers[0].id, 3); + }); + }); + describe("makeTeamate()", () => { + let singlePerson1 = { + id: 3, + name: "Judy Twilight", + age: 35, + skillSet: "fishing", + placeBorn: "Louisville, Kentucky" + }; + let singlePerson2 = { + id: 4, + name: "Cynthia Doolittle", + age: 20, + skillSet: "tic tac toe", + placeBorn: "Pawnee, Texas" + }; + let whichTeam1 = "Red"; + let whichTeam2 = "Blue"; + + it("should detect a new temmate for red", () => { + addTeammate(singlePerson1, whichTeam1); + assert.equal(redTeam[0].team, "Red"); + }); + it("should detect a new temmate for blue", () => { + addTeammate(singlePerson2, whichTeam2); + assert.equal(blueTeam[0].team, "Blue"); + }); + }); +} + +// if (typeof describe === "function") { +// describe("#pigLatin()", () => { +// it("should translate a simple word", () => { +// assert.equal(pigLatin("car"), "arcay"); +// assert.equal(pigLatin("dog"), "ogday"); +// }); +// it("should translate a complex word", () => { +// assert.equal(pigLatin("create"), "eatecray"); +// assert.equal(pigLatin("valley"), "alleyvay"); +// }); +// } +// } From 38d01c9a7ca5295cd5c91a37d08d235e8c90eae5 Mon Sep 17 00:00:00 2001 From: tonezone108 Date: Wed, 30 Oct 2019 00:37:15 -0500 Subject: [PATCH 3/3] Dodgeball --- 07week/CheckPoint2/main.js | 13 ------------- 1 file changed, 13 deletions(-) diff --git a/07week/CheckPoint2/main.js b/07week/CheckPoint2/main.js index 1a102a4be..2a4faf834 100644 --- a/07week/CheckPoint2/main.js +++ b/07week/CheckPoint2/main.js @@ -296,16 +296,3 @@ if (typeof describe === "function") { }); }); } - -// if (typeof describe === "function") { -// describe("#pigLatin()", () => { -// it("should translate a simple word", () => { -// assert.equal(pigLatin("car"), "arcay"); -// assert.equal(pigLatin("dog"), "ogday"); -// }); -// it("should translate a complex word", () => { -// assert.equal(pigLatin("create"), "eatecray"); -// assert.equal(pigLatin("valley"), "alleyvay"); -// }); -// } -// }