From c04167fe5986770a05bbd8579d593dfd4524e994 Mon Sep 17 00:00:00 2001 From: ddewzy Date: Tue, 11 Aug 2020 12:50:03 -0700 Subject: [PATCH 01/16] conditional exersizes --- dalene/CodeCademy/JS/magic8Ball.js | 37 ++++++++++++++++++++++++++++++ dalene/CodeCademy/JS/raceDay.js | 15 ++++++++++++ 2 files changed, 52 insertions(+) create mode 100644 dalene/CodeCademy/JS/magic8Ball.js create mode 100644 dalene/CodeCademy/JS/raceDay.js diff --git a/dalene/CodeCademy/JS/magic8Ball.js b/dalene/CodeCademy/JS/magic8Ball.js new file mode 100644 index 00000000..360597b7 --- /dev/null +++ b/dalene/CodeCademy/JS/magic8Ball.js @@ -0,0 +1,37 @@ +let userName = "Dalene"; +if (userName === "") { + console.log(`Hello, ${userName}`); +} else { + console.log("Hello!"); +} +let userQuestion = "Will I make it?"; +console.log(`${userName} asked: ${userQuestion}`); +const randomNumber = Math.floor(Math.random() * 8); +let eightBall = ""; +switch (randomNumber) { + case 0: + eightBall = "It is certain"; + break; + case 1: + eightBall = "It is decidedly so"; + break; + case 2: + eightBall = "Reply hazy try again"; + break; + case 3: + eightBall = "Cannot predict now"; + break; + case 4: + eightBall = "Do not count on it"; + break; + case 5: + eightBall = "My sources say no"; + break; + case 6: + eightBall = "Outlook not so good"; + break; + case 7: + eightBall = "Signs point to yes"; + break; +} +console.log(`Magic Eight Ball answered: ${eightBall}`); diff --git a/dalene/CodeCademy/JS/raceDay.js b/dalene/CodeCademy/JS/raceDay.js new file mode 100644 index 00000000..de93afe8 --- /dev/null +++ b/dalene/CodeCademy/JS/raceDay.js @@ -0,0 +1,15 @@ +let raceNumber = Math.floor(Math.random() * 1000); +let adultEarly = "true"; +let age = 18; +if (adultEarly && age > 18) { + raceNumber += 1000; +} +if (adultEarly && age > 18) { + console.log(`${raceNumber} will start at 9:30am. `); +} else if (!adultEarly && age > 18) { + console.log(`${raceNumber} will start at 11:00am. `); +} else if (age < 18) { + console.log(`${raceNumber} will start at 12:30pm.`); +} else { + console.log("See registration desk!"); +} From c1f18ff2409a77ec2597e687dceedc93d9c39984 Mon Sep 17 00:00:00 2001 From: ddewzy Date: Tue, 11 Aug 2020 15:01:18 -0700 Subject: [PATCH 02/16] functions --- dalene/CodeCademy/JS/functions.js | 54 +++++++++++++++++++++++++++++++ 1 file changed, 54 insertions(+) create mode 100644 dalene/CodeCademy/JS/functions.js diff --git a/dalene/CodeCademy/JS/functions.js b/dalene/CodeCademy/JS/functions.js new file mode 100644 index 00000000..e8c227e6 --- /dev/null +++ b/dalene/CodeCademy/JS/functions.js @@ -0,0 +1,54 @@ +function getReminder() { + console.log("Water the plants."); +} +function greetInSpanish() { + console.log("Buenas Tardes."); +} + +function sayThanks() { + console.log("Thank you for your purchase! We appreciate your business."); +} +sayThanks(); + +function sayThanks(name) { + console.log( + "Thank you for your purchase " + name + "! We appreciate your business." + ); +} +sayThanks("Cole"); + +function makeShoppingList(item1 = "milk", item2 = "bread", item3 = "eggs") { + console.log(`Remember to buy ${item1}`); + console.log(`Remember to buy ${item2}`); + console.log(`Remember to buy ${item3}`); +} + +function monitorCount(rows, columns) { + return rows * columns; +} +const numOfMonitors = monitorCount(5, 4); +console.log(numOfMonitors); +function costOfMonitors(rows, columns) { + return monitorCount(rows, columns) * 200; +} +const totalCost = costOfMonitors(5, 4); +console.log(totalCost); + +const plantNeedsWater = function (day) { + if (day === "Wednesday") { + return true; + } else { + return false; + } +}; +console.log(plantNeedsWater("Tuesday")); + +const plantNeedsWater = (day) => { + if (day === "Wednesday") { + return true; + } else { + return false; + } +}; + +const plantNeedsWater = (day) => (day === "Wednesday" ? true : false); From e3a333a276c1ba0e3875a866f92cb757fda16c71 Mon Sep 17 00:00:00 2001 From: ddewzy Date: Fri, 14 Aug 2020 16:39:08 -0700 Subject: [PATCH 03/16] 8-14 --- dalene/CodeCademy/JS/functions.js | 19 ++ dalene/CodeCademy/JS/rockpaperscissors.js | 62 ++++++ dalene/CodeCademy/JS/sleepCalc.js | 54 +++++ .../number-guesser-starting/game.js | 99 +++++++++ .../number-guesser-starting/index.html | 67 ++++++ .../number-guesser-starting/script.js | 6 + .../number-guesser-starting/style.css | 195 ++++++++++++++++++ 7 files changed, 502 insertions(+) create mode 100644 dalene/CodeCademy/JS/rockpaperscissors.js create mode 100644 dalene/CodeCademy/JS/sleepCalc.js create mode 100644 dalene/CodeCademy/number-guesser-starting/game.js create mode 100644 dalene/CodeCademy/number-guesser-starting/index.html create mode 100644 dalene/CodeCademy/number-guesser-starting/script.js create mode 100644 dalene/CodeCademy/number-guesser-starting/style.css diff --git a/dalene/CodeCademy/JS/functions.js b/dalene/CodeCademy/JS/functions.js index e8c227e6..31415f54 100644 --- a/dalene/CodeCademy/JS/functions.js +++ b/dalene/CodeCademy/JS/functions.js @@ -52,3 +52,22 @@ const plantNeedsWater = (day) => { }; const plantNeedsWater = (day) => (day === "Wednesday" ? true : false); + +const canIVote = (age) => { + if (age >= 18) { + return true; + } else { + age < 18; + return false; + } +}; +console.log(canIVote(19)); // Should print true + +const agreeOrDisagree = (agree, disagree) => { + if (agree === disagree) { + return "You agree!"; + } else { + return "You disagree!"; + } +}; +console.log(agreeOrDisagree("yep", "yep")); diff --git a/dalene/CodeCademy/JS/rockpaperscissors.js b/dalene/CodeCademy/JS/rockpaperscissors.js new file mode 100644 index 00000000..00e1fa0b --- /dev/null +++ b/dalene/CodeCademy/JS/rockpaperscissors.js @@ -0,0 +1,62 @@ +const getUserChoice = (userInput) => { + userInput = userInput.toLowerCase(); + if ( + userInput === "rock" || + userInput === "paper" || + userInput === "scissors" || + userInput === "bomb" + ) { + return userInput; + } else { + console.log("error"); + } +}; +const getComputerChoice = () => { + const randomNumber = Math.random(Math.floor() * 3); + switch (randomNumber) { + case 0: + return "rock"; + case 1: + return "paper"; + case 2: + return "scissors"; + } +}; +const determineWinner = (userChoice, computerChoice) => { + if (userChoice === computerChoice) { + return "Tie Game!"; + } + if (userChoice === "rock") { + if (computerChoice === "paper") { + return "Computer Won"; + } else { + return "You Won"; + } + } + if (userChoice === "paper") { + if (computerChoice === "scissors") { + return "Computer Won"; + } else { + return "You Won"; + } + } + if (userChoice === "scissors") { + if (computerChoice === "rock") { + return "Computer Won"; + } else { + return "You Won"; + } + } + if (userChoice === "bomb") { + return "You Won"; + } +}; +const playGame = () => { + const userChoice = getUserChoice("bomb"); + const computerChoice = getComputerChoice(); + console.log(`You threw ${userChoice}`); + console.log(`Computer threw ${computerChoice}`); + console.log(determineWinner(userChoice, computerChoice)); +}; +playGame(); +//computerChoice keeps throwing undefined diff --git a/dalene/CodeCademy/JS/sleepCalc.js b/dalene/CodeCademy/JS/sleepCalc.js new file mode 100644 index 00000000..9591c0a2 --- /dev/null +++ b/dalene/CodeCademy/JS/sleepCalc.js @@ -0,0 +1,54 @@ +const getSleepHours = (day) => { + switch (day) { + case "monday": + return 9; + break; + case "tuesday": + return 10; + break; + case "wednesday": + return 9; + break; + case "thursday": + return 10; + break; + case "friday": + return 9; + break; + default: + return "Error!"; + } +}; + +const getActualSleepHours = () => + getSleepHours("monday") + + getSleepHours("tuesday") + + getSleepHours("wednesday") + + getSleepHours("thursday") + + getSleepHours("friday"); + +console.log(getSleepHours("tuesday")); +console.log(getActualSleepHours()); + +const getIdealSleepHours = () => { + let idealHours = 9; + return idealHours * 5; +}; +console.log(getIdealSleepHours()); + +const calculateSleepDebt = () => { + const actualSleepHours = getActualSleepHours(); + const idealSleepHours = getIdealSleepHours(); + if (actualSleepHours === idealSleepHours) { + console.log("You got the Perfict amount of Sleep!"); + } else if (actualSleepHours > idealSleepHours) { + console.log( + "You got " + (idealSleepHours - actualSleepHours) + " Extra Sleep!" + ); + } else if (actualSleepHours < idealSleepHours) { + console.log("You need more Sleep!"); + } else { + console.log("Error!"); + } +}; +calculateSleepDebt(); diff --git a/dalene/CodeCademy/number-guesser-starting/game.js b/dalene/CodeCademy/number-guesser-starting/game.js new file mode 100644 index 00000000..fa0c6c38 --- /dev/null +++ b/dalene/CodeCademy/number-guesser-starting/game.js @@ -0,0 +1,99 @@ +let target; + +const humanGuessInput = document.getElementById('human-guess'); + +const roundNumberDisplay = document.getElementById('round-number'); + +const computerGuessDisplay = document.getElementById('computer-guess'); +const humanScoreDisplay = document.getElementById('human-score'); +const computerScoreDisplay = document.getElementById('computer-score'); +const targetNumberDisplay = document.getElementById('target-number'); +const computerWinsDisplay = document.getElementById('computer-wins'); + +const guessButton = document.getElementById('guess'); +const nextRoundButton = document.getElementById('next-round') + +guessButton.addEventListener('click', () => { + // Generate the target value + target = generateTarget(); + // Retrieve the player's guess + const currentHumanGuess = humanGuessInput.value; + // Make a random 'computer guess' + const computerGuess = Math.floor(Math.random() * 10); + + // Display the computer guess and the target + computerGuessDisplay.innerText = computerGuess; + targetNumberDisplay.innerText = target; + + // Determine if the human or computer wins: + const humanIsWinner = compareGuesses(currentHumanGuess, computerGuess, target) + const winner = humanIsWinner ? 'human' : 'computer' + + // Update the correct score: + updateScore(winner); + + // Display the winner + if (humanIsWinner) { + guessButton.innerText = 'You Win!!!!!'; + guessButton.classList.toggle('winning-text') + } else { + computerWinsDisplay.innerText = 'Computer Wins!!!'; + } + + // winnerDisplay.innerText = humanIsWinner ? 'You win!' : 'Computer wins!'; + + // Display the current scores: + humanScoreDisplay.innerText = humanScore; + computerScoreDisplay.innerText = computerScore; + + // Set the correct disabled state for the buttons + guessButton.setAttribute('disabled', true) + nextRoundButton.removeAttribute('disabled'); +}); + +nextRoundButton.addEventListener('click', () => { + // Increase the round number + advanceRound(); + // Display the new round number + roundNumberDisplay.innerText = currentRoundNumber; + + // Set the correct disabled state for the buttons + nextRoundButton.setAttribute('disabled', true); + guessButton.removeAttribute('disabled'); + + // Reset the guess input box and the target number display: + targetNumberDisplay.innerText = '?'; + guessButton.innerText = 'Make a Guess'; + humanGuessInput.value = ''; + computerGuessDisplay.innerText = '?'; + computerWinsDisplay.innerText = ''; + guessButton.classList.remove('winning-text'); +}); + +const addButton = document.getElementById('add'); +const subtractButton = document.getElementById('subtract'); + +addButton.addEventListener('click', () => { + humanGuessInput.value = +humanGuessInput.value + 1; + handleValueChange(humanGuessInput.value); +}); + +subtractButton.addEventListener('click', () => { + humanGuessInput.value = +humanGuessInput.value - 1; + handleValueChange(humanGuessInput.value); +}); + +const handleValueChange = value => { + if (value > 0 && value <= 9) { + subtractButton.removeAttribute('disabled'); + addButton.removeAttribute('disabled'); + } else if (value > 9) { + addButton.setAttribute('disabled', true); + } else if (value <= 0) { + subtractButton.setAttribute('disabled', true); + } +} + +humanGuessInput.addEventListener('input', function(e) { + handleValueChange(e.target.value); +}); diff --git a/dalene/CodeCademy/number-guesser-starting/index.html b/dalene/CodeCademy/number-guesser-starting/index.html new file mode 100644 index 00000000..690142a5 --- /dev/null +++ b/dalene/CodeCademy/number-guesser-starting/index.html @@ -0,0 +1,67 @@ + + + + + Number Guesser + + + + +
+
+

Number Guesser!

+
+ +
+

Round 1

+

Target Number: ?

+
+ +
+
+
+

Computer

+

Score: 0

+
+

?

+

+
+
+
+

You

+

Score: 0

+
+ +
+ + +
+ +
+
+ +
+ +
+ +
+ +
+
+

Step 1

+

Input a number between 0 and 9

+
+
+

Step 2

+

Click "Make a Guess" to submit your guess and see who won the round.

+
+
+

Step 3

+

Click "Next Round" to play again.

+
+
+ + + + + \ No newline at end of file diff --git a/dalene/CodeCademy/number-guesser-starting/script.js b/dalene/CodeCademy/number-guesser-starting/script.js new file mode 100644 index 00000000..05b7751b --- /dev/null +++ b/dalene/CodeCademy/number-guesser-starting/script.js @@ -0,0 +1,6 @@ +let humanScore = 0; +let computerScore = 0; +let currentRoundNumber = 1; + +// Write your code below: + diff --git a/dalene/CodeCademy/number-guesser-starting/style.css b/dalene/CodeCademy/number-guesser-starting/style.css new file mode 100644 index 00000000..f0cdadf6 --- /dev/null +++ b/dalene/CodeCademy/number-guesser-starting/style.css @@ -0,0 +1,195 @@ +* { + font-family: 'Nunito Sans'; + box-sizing: border-box; +} + +body { + margin: 0 auto; + padding: 3px; + background-color: #fff; +} + +.game-container { + max-width: 640px; + margin: 0 auto; + text-align: center; +} + +header { + display: flex; + justify-content: center +} + +.rounds { + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 30px; +} + +.round-label { + font-size: 30px; + font-weight: 700; + margin-bottom: 0px; +} + +.guess { + min-width: 303px; + height: 328px; + display: flex; + flex-direction: column; + align-items: center; + padding: 19px; +} + +.guessing-area { + display: flex; + justify-content: space-around; + align-items: flex-start; + margin-bottom: 60px; +} + +.guess-title { + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + margin-bottom: 20px; +} + +.guess-label { + font-size: 18px; + font-weight: 700; + margin: 0; +} + +.score-label { + font-size: 14px; + font-weight: 700; + margin: 0; +} + +.target-guess { + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; +} + +.computer-guess { + background-color: #ececec; +} + +#computer-guess { + font-size: 50px; + font-weight: 700; + color: #a5a5a5; +} + +.human-guess { + border: 1px solid #979797; +} + +.guess input { + height: 90px; + width: 90px; + font-size: 30px; + text-align: center; + margin: 0 auto; + margin-bottom: 7px; +} + +.number-controls { + font-size: 0; + margin-bottom: 23px; +} + +.number-control { + border: solid 1px #4c7ef3; + display: inline-block; + width: 45px; + height: 35px; + font-size: 24px; + font-weight: 700; + color: #4c7ef3; + cursor: pointer; +} + +.number-controls button[disabled] { + color: #dfdfdf; + cursor: default; +} + +.left { + border-top-left-radius: 22.5px; + border-bottom-left-radius: 22.5px; +} + +.right { + border-top-right-radius: 22.5px; + border-bottom-right-radius: 22.5px; + border-left-width: 0px; +} + +.controls { + display: flex; + justify-content: space-around; +} + +.button { + background-color: #4c7ef3; + color: #fff; + cursor: pointer; +} + +#guess { + padding: 20px; + width: 169px; + height: 59px; + border: none; + font-weight: 700; + font-size: 14px; +} + +input[type=number]::-webkit-inner-spin-button { + -webkit-appearance: none; +} + +#next-round { + width: 179px; + height: 64px; + font-size: 18px; + font-weight: bold; + margin-left: auto; + margin-right: auto; + margin-bottom: 60px; +} + +.button[disabled] { + background-color: #d2d2d2; + color: #a0a0a0; + cursor: default; +} + +.instructions { + background-color: #ececec; + width: 100%; + display: flex; + justify-content: space-around; +} + +.instruction { + width: 180px; + padding: 2px; + text-align: center; +} + +.instructions h3 { + font-size: 14px; +} + + +.winning-text, .winning-text[disabled] { + color: #ec3636; + font-weight: 700; +} \ No newline at end of file From c0476a49b6b2a22dcf8dd069251cc128673aeb3f Mon Sep 17 00:00:00 2001 From: ddewzy Date: Tue, 18 Aug 2020 15:58:08 -0700 Subject: [PATCH 04/16] if & switch --- dalene/CodeCademy/JS/ifSwitch.js | 179 +++++++++++++++++++++++++++++++ dalene/CodeCademy/JS/js.js | 1 - 2 files changed, 179 insertions(+), 1 deletion(-) create mode 100644 dalene/CodeCademy/JS/ifSwitch.js diff --git a/dalene/CodeCademy/JS/ifSwitch.js b/dalene/CodeCademy/JS/ifSwitch.js new file mode 100644 index 00000000..989f14ff --- /dev/null +++ b/dalene/CodeCademy/JS/ifSwitch.js @@ -0,0 +1,179 @@ +// Write your function here: +const lifePhase = (age) => { + if (age >= 0 && age <= 3) { + return "baby"; + } else if (age >= 4 && age <= 12) { + return "child"; + } else if (age >= 13 && age <= 19) { + return "teen"; + } else if (age >= 20 && age <= 64) { + return "adult"; + } else if (age >= 65 && age <= 140) { + return "senior citizen"; + } else { + return "This is not a valid age"; + } +}; +console.log(lifePhase(141)); + +const finalGrade = (m, f, h) => { + if (m < 0 || m > 100 || f < 0 || f > 100 || h < 0 || h > 100) { + return "You have entered an invalid grade."; + } + let sum = (m + f + h) / 3; + if (sum >= 0 && sum <= 59) { + return "F"; + } else if (sum >= 60 && sum <= 69) { + return "D"; + } else if (sum >= 70 && sum <= 79) { + return "C"; + } else if (sum >= 80 && sum <= 89) { + return "B"; + } else if (sum >= 90 && sum <= 100) { + return "A"; + } +}; +console.log(finalGrade(99, 92, 95)); // Should print 'A' + +const reportingForDuty = (rank, lastName) => { + return `${rank} ${lastName} reporting for duty!`; +}; +console.log(reportingForDuty("Private", "Fido")); // Should return 'Private Fido reporting for duty!' + +const rollTheDice = () => { + let die1 = Math.random() * 11 + 1; + let die2 = Math.random() * 11 + 1; + return (die1 >= 2 || die1 <= 12) + (die2 >= 2 || die2 <= 12); +}; +console.log(rollTheDice()); + +const calculateWeight = (earthWeight, planet) => { + switch (planet) { + case "Mercury": + return earthWeight * 0.378; + break; + case "Venus": + return earthWeight * 0.907; + break; + case "Mars": + return earthWeight * 0.377; + break; + case "Jupiter": + return earthWeight * 2.36; + break; + case "Saturn": + return earthWeight * 0.916; + + default: + return "Invalid Planet Entry. Try: Mercury, Venus, Mars, Jupiter, or Saturn."; + } +}; +console.log(calculateWeight(100, "Jupiter")); // Should print 236 + +const truthyOrFalsy = (value) => { + if (value) { + return true; + } + return false; +}; +/* +// As a function declaration: +function truthyOrFalsy(value) { + if (value) { + return true + } else { + return false + } +} +// Using a ternary: +const truthyOrFalsy = value => value ? true : false +*/ + +const numImaginaryFriends = (friends) => Math.round(friends * 0.33); +console.log(numImaginaryFriends(18)); // Should print 6 + +const sillySentence = (adjective, verb, noun) => { + return `I am so ${adjective} because I ${verb} coding! Time to write some more awesome ${noun}!`; +}; +console.log(sillySentence("excited", "love", "functions")); + +const howOld = (age, year) => { + let dateToday = new Date(); + let thisYear = dateToday.getFullYear(); + const yearDifference = year - thisYear; + const newAge = age + yearDifference; + if (newAge < 0) { + return `The year ${year} was ${-newAge} years before you were born`; + } else if (newAge > age) { + return `You will be ${newAge} in the year ${year}`; + } else { + return `You were ${newAge} in the year ${year}`; + } +}; +console.log(howOld(40, 2035)); +console.log(howOld(40, 1975)); +console.log(howOld(40, 1995)); + +const whatRelation = (percentSharedDNA) => { + if (percentSharedDNA === 100) { + return "You are likely identical twins."; + } + if (percentSharedDNA >= 35 && percentSharedDNA <= 99) { + return "You are likely parent and child or full siblings."; + } + if (percentSharedDNA >= 14 && percentSharedDNA <= 34) { + return "You are likely grandparent and grandchild, aunt/uncle and niece/nephew, or half siblings."; + } + if (percentSharedDNA >= 6 && percentSharedDNA <= 13) { + return "You are likely 1st cousins."; + } + if (percentSharedDNA >= 3 && percentSharedDNA <= 5) { + return "You are likely 2nd cousins."; + } + if (percentSharedDNA >= 1 && percentSharedDNA <= 2) { + return "You are likely 3rd cousins"; + } + return "You are likely not related."; +}; +console.log(whatRelation(34)); +// Should print 'You are likely grandparent and grandchild, aunt/uncle and niece/nephew, or half siblings.' +console.log(whatRelation(3)); +// Should print 'You are likely 2nd cousins.' + +const tipCalculator = (quality, total) => { + switch (quality) { + case "bad": + return total * 0.05; + break; + case "ok": + return total * 0.15; + break; + case "good": + return total * 0.2; + break; + case "excellent": + return total * 0.3; + break; + default: + return total * 0.18; + } +}; +console.log(tipCalculator("good", 100)); //should return 20 + +const toEmoticon = (meaning) => { + switch (meaning) { + case "shrug": + return '|_{"}_|'; + case "smiley face": + return ":)"; + case "frowny face": + return ":("; + case "winky face": + return ";)"; + case "heart": + return "<3"; + default: + return "|_(* ~ *)_|"; + } +}; +console.log(toEmoticon("whatever")); diff --git a/dalene/CodeCademy/JS/js.js b/dalene/CodeCademy/JS/js.js index 15ef97d1..a59982ba 100644 --- a/dalene/CodeCademy/JS/js.js +++ b/dalene/CodeCademy/JS/js.js @@ -23,7 +23,6 @@ multiplyMe *= 11; quarterMe /= 4; // These console.log() statements below will help you check the values of the variables. -// You do not need to edit these statements. console.log('The value of levelUp:', levelUp); console.log('The value of powerLevel:', powerLevel); console.log('The value of multiplyMe:', multiplyMe); From eca0b8c6c11defa14dba4dfef62f3cb43a9d8c35 Mon Sep 17 00:00:00 2001 From: ddewzy Date: Thu, 20 Aug 2020 07:48:44 -0700 Subject: [PATCH 05/16] css --- dalene/CodeCademy/CSS/CSS selectors/css.md | 34 +++++++++++++++++++ .../{ => CSS}/CSS selectors/index.html | 0 .../{ => CSS}/CSS selectors/style.css | 0 .../number-guesser-starting/script.js | 4 ++- 4 files changed, 37 insertions(+), 1 deletion(-) create mode 100644 dalene/CodeCademy/CSS/CSS selectors/css.md rename dalene/CodeCademy/{ => CSS}/CSS selectors/index.html (100%) rename dalene/CodeCademy/{ => CSS}/CSS selectors/style.css (100%) diff --git a/dalene/CodeCademy/CSS/CSS selectors/css.md b/dalene/CodeCademy/CSS/CSS selectors/css.md new file mode 100644 index 00000000..ed095156 --- /dev/null +++ b/dalene/CodeCademy/CSS/CSS selectors/css.md @@ -0,0 +1,34 @@ +BOX MODEL: + +- The box model comprises a set of properties used to create space around and between HTML elements. +- The height and width of a content area can be set in pixels or percentage. +- Borders surround the content area and padding of an element. The color, style, and thickness of a border can be set with CSS properties. +- Padding is the space between the content area and the border. It can be set in pixels or percent. +- Margin is the amount of spacing outside of an element’s border. +- Horizontal margins add, so the total space between the borders of adjacent elements is equal to the sum of the right margin of one element and the left margin of the adjacent element. +- Vertical margins collapse, so the space between vertically adjacent elements is equal to the larger margin. +- margin: 0 auto horizontally centers an element inside of its parent content area, if it has a width. +- The overflow property can be set to display, hide, or scroll, and dictates how HTML will render content that overflows its parent’s content area. +- The visibility property can hide or show elements. + +CHANGING THE BOX MODEL: + +- In the default box model, box dimensions are affected by border thickness and padding. +- The box-sizing property controls the box model used by the browser. +- The default value of the box-sizing property is content-box. +- The value for the new box model is border-box. +- The border-box model is not affected by border thickness or padding. + +DISPLAY & POSITIONING: + +- The position property allows you to specify the position of an element in three different ways. +- When set to relative, an element’s position is relative to its default position on the page. +- When set to absolute, an element’s position is relative to its closest positioned parent element. It can be pinned to any part of the web page, but the element will still move with the rest of the document when the page is scrolled. +- When set to fixed, an element’s position can be pinned to any part of the web page. The element will remain in view no matter what. +- The z-index of an element specifies how far back or how far forward an element appears on the page when it overlaps other elements. +- The display property allows you control how an element flows vertically and horizontally a document. + inline elements take up as little space as possible, and they cannot have manually-adjusted width or height. +- block elements take up the width of their container and can have manually-adjusted heights. +- inline-block elements can have set width and height, but they can also appear next to each other and do not take up their entire container width. +- The float property can move elements as far left or as far right as possible on a web page. +- You can clear an element’s left or right side (or both) using the clear property. diff --git a/dalene/CodeCademy/CSS selectors/index.html b/dalene/CodeCademy/CSS/CSS selectors/index.html similarity index 100% rename from dalene/CodeCademy/CSS selectors/index.html rename to dalene/CodeCademy/CSS/CSS selectors/index.html diff --git a/dalene/CodeCademy/CSS selectors/style.css b/dalene/CodeCademy/CSS/CSS selectors/style.css similarity index 100% rename from dalene/CodeCademy/CSS selectors/style.css rename to dalene/CodeCademy/CSS/CSS selectors/style.css diff --git a/dalene/CodeCademy/number-guesser-starting/script.js b/dalene/CodeCademy/number-guesser-starting/script.js index 05b7751b..b4e719fb 100644 --- a/dalene/CodeCademy/number-guesser-starting/script.js +++ b/dalene/CodeCademy/number-guesser-starting/script.js @@ -2,5 +2,7 @@ let humanScore = 0; let computerScore = 0; let currentRoundNumber = 1; -// Write your code below: +const generateTarget = Math.floor(Math.random() * 10) => { + +}; From 37763d2e092bc6b0cd73db925b5a5d38a5b8ce3d Mon Sep 17 00:00:00 2001 From: ddewzy Date: Wed, 26 Aug 2020 11:47:51 -0700 Subject: [PATCH 06/16] css --- dalene/CodeCademy/CSS/CSS selectors/css.md | 27 ++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/dalene/CodeCademy/CSS/CSS selectors/css.md b/dalene/CodeCademy/CSS/CSS selectors/css.md index ed095156..391f3024 100644 --- a/dalene/CodeCademy/CSS/CSS selectors/css.md +++ b/dalene/CodeCademy/CSS/CSS selectors/css.md @@ -32,3 +32,30 @@ DISPLAY & POSITIONING: - inline-block elements can have set width and height, but they can also appear next to each other and do not take up their entire container width. - The float property can move elements as far left or as far right as possible on a web page. - You can clear an element’s left or right side (or both) using the clear property. + +CSS COLOR + +- Hexadecimal or hex colors + Hexadecimal is a number system with has sixteen digits, 0 to 9 followed by “A” to “F”. + Hex values always begin with # and specify values of red, blue and green using hexademical numbers such as #23F41A. + RGB +- RGB colors use the rgb() syntax with one value for red, one value for blue and one value for green. + RGB values range from 0 to 255 and look like this: rgb(7, 210, 50). + HSL +- HSL stands for hue (the color itself), saturation (the intensity of the color), and lightness (how light or dark a color is). +- Hue ranges from 0 to 360 and saturation and lightness are both represented as percentages like this: hsl(200, 20%, 50%) + -You can add opacity to color in RGB and HSL by adding a fourth value, a, which is represented as a percentage. + +CSS TYPOGRAPHY + +- Typography is the art of arranging text on a page. +- Text can appear in any number of weights, with the font-weight property. +- Text can appear in italics with the font-style property. +- The vertical spacing between lines of text can be modified with the line-height property. +- Serif fonts have extra details on the ends of each letter. Sans-Serif fonts do not. +- Fallback fonts are used when a certain font is not installed on a user’s computer. +- Google Fonts provides free fonts that can be used in an HTML file with the tag or the @font-face property. +- Local fonts can be added to a document with the @font-face property and the path to the font’s source. +- The word-spacing property changes how far apart individual words are. +- The letter-spacing property changes how far apart individual letters are. +- The text-align property changes the horizontal alignment of text. From 5be3ef02b85e3218bfdb162ca1c53a35aab2e8c7 Mon Sep 17 00:00:00 2001 From: ddewzy Date: Thu, 27 Aug 2020 11:43:56 -0700 Subject: [PATCH 07/16] fixed --- dalene/femb/calculator/calculator.html | 18 ++-- dalene/femb/calculator/calculator.js | 142 ++++++++++++------------- 2 files changed, 79 insertions(+), 81 deletions(-) diff --git a/dalene/femb/calculator/calculator.html b/dalene/femb/calculator/calculator.html index f1dc73bf..e306a624 100644 --- a/dalene/femb/calculator/calculator.html +++ b/dalene/femb/calculator/calculator.html @@ -4,43 +4,41 @@ Calculator -
-
- 0 -
+
0
- - + +
- +
- +
- +
- +
+ diff --git a/dalene/femb/calculator/calculator.js b/dalene/femb/calculator/calculator.js index 5005e1a3..fb28a749 100644 --- a/dalene/femb/calculator/calculator.js +++ b/dalene/femb/calculator/calculator.js @@ -2,96 +2,96 @@ let runningTotal = 0; let buffer = "0"; let previousOperator = null; -const screen = document.querySelector('.screen'); +const screen = document.querySelector(".screen"); function buttonClick(value) { - if (isNaN(value)) { - //this is not a number - handleSymbol(value); - } else { - //this is a number - handleNumber(value); - } - screen.innerText = buffer; + if (isNaN(value)) { + //this is not a number + handleSymbol(value); + } else { + //this is a number + handleNumber(value); + } + screen.innerText = buffer; } function handleSymbol(symbol) { - switch (symbol) { - case 'C': - buffer = '0'; - runningTotal = 0; - break; - case '=': - if (previousOperator === null) { - //need two numbers to do math - return; - } - flushOperation(parseInt(buffer)); - previousOperator = null; - buffer = runningTotal; - runningTotal = 0; - break; - case '←': - if (buffer.length === 1) { - buffer = '0'; - } else { - buffer = buffer.substring(0, buffer.length - 1); - } - break; - case '+': - case '÷': - case '×': - case '−': - handleMath(symbol); - break; - - } + switch (symbol) { + case "C": + buffer = "0"; + runningTotal = 0; + break; + case "=": + if (previousOperator === null) { + //need two numbers to do math + return; + } + flushOperation(parseInt(buffer)); + previousOperator = null; + buffer = runningTotal; + runningTotal = 0; + break; + case "←": + if (buffer.length === 1) { + buffer = "0"; + } else { + buffer = buffer.substring(0, buffer.length - 1); + } + break; + case "+": + case "÷": + case "×": + case "−": + handleMath(symbol); + break; + } } function handleMath(symbol) { - if (buffer === '0') { - //do nothing - return; - } + if (buffer === "0") { + //do nothing + return; + } - const intBuffer = parseInt(buffer); + const intBuffer = parseInt(buffer); - if (runningTotal === 0) { - runningTotal = intBuffer; - } else { - flushOperation(intBuffer); - } + if (runningTotal === 0) { + runningTotal = intBuffer; + } else { + flushOperation(intBuffer); + } - previousOperator = symbol; + previousOperator = symbol; - buffer = '0'; + buffer = "0"; } function flushOperation(intBuffer) { - if (previousOperator === '+') { - runningTotal += intBuffer; - } else if (previousOperator === '−') { - runningTotal -= intBuffer; - } else if (previousOperator === '×') { - runningTotal *= intBuffer; - } else if (previousOperator === '÷') { - runningTotal /= intBuffer; - } + if (previousOperator === "+") { + runningTotal += intBuffer; + } else if (previousOperator === "−") { + runningTotal -= intBuffer; + } else if (previousOperator === "×") { + runningTotal *= intBuffer; + } else { + runningTotal /= intBuffer; + } } function handleNumber(numberString) { - if (buffer === "0") { - buffer = numberString; - } else { - buffer += numberString; - } + if (buffer === "0") { + buffer = numberString; + } else { + buffer += numberString; + } } -function init () { - document.querySelector('.calc-buttons') - .addEventListener('click', function(event) { - buttonClick(event.target.innerText); - }) +function init() { + document + .querySelector(".calc-buttons") + .addEventListener("click", function (event) { + buttonClick(event.target.innerText); + }); } -init(); \ No newline at end of file +init(); From 0aa4a31a603625722408966c60ad2fd851622697 Mon Sep 17 00:00:00 2001 From: ddewzy Date: Fri, 28 Aug 2020 09:08:32 -0700 Subject: [PATCH 08/16] css --- dalene/CodeCademy/CSS/CSS selectors/css.md | 13 +++++++++++++ dalene/CodeCademy/CSS/mediaQueries.md | 9 +++++++++ 2 files changed, 22 insertions(+) create mode 100644 dalene/CodeCademy/CSS/mediaQueries.md diff --git a/dalene/CodeCademy/CSS/CSS selectors/css.md b/dalene/CodeCademy/CSS/CSS selectors/css.md index 391f3024..a7def351 100644 --- a/dalene/CodeCademy/CSS/CSS selectors/css.md +++ b/dalene/CodeCademy/CSS/CSS selectors/css.md @@ -59,3 +59,16 @@ CSS TYPOGRAPHY - The word-spacing property changes how far apart individual words are. - The letter-spacing property changes how far apart individual letters are. - The text-align property changes the horizontal alignment of text. + +RELATIVE MEASUREMENTS + +- Content on a website can be sized relative to other elements on the page using relative measurements. +- The unit of em sizes font relative to the font size of a parent element. +- The unit of rem sizes font relative to the font size of a root element. That root element is the element. +- Percentages are commonly used to size box-model features, like the width, height, padding, or margin of an element. +- When percentages are used to size width and height, child elements will be sized relative to the dimensions of their parent (remember that parent dimensions must first be set). +- Percentages can be used to set padding and margin. Horizontal and vertical padding and margin are set relative to the width of a parent element. +- The minimum and maximum width of elements can be set using min-width and max-width. +- The minimum and maximum height of elements can be set using min-height and max-height. +- When the height of an image or video is set, then its width can be set to auto so that the media scales proportionally. Reversing these two properties and values will also achieve the same result. +- A background image of an HTML element will scale proportionally when its background-size property is set to cover. diff --git a/dalene/CodeCademy/CSS/mediaQueries.md b/dalene/CodeCademy/CSS/mediaQueries.md new file mode 100644 index 00000000..abba11b5 --- /dev/null +++ b/dalene/CodeCademy/CSS/mediaQueries.md @@ -0,0 +1,9 @@ +MEDIA QUERIES + +- When a website responds to the size of the screen it’s viewed on, it’s called a responsive website. +- You can write media queries to help with different screen sizes. +- Media queries require media features. Media features are the conditions that must be met to render the CSS within a media query. +- Media features can detect many aspects of a user’s browser, including the screen’s width, height, resolution, orientation, and more. +- The and operator requires multiple media features to be true at once. +- A comma separated list of media features only requires one media feature to be true for the code within to be applied. +- The best practice for identifying where media queries should be set is by resizing the browser to determine where the content naturally breaks. Natural breakpoints are found by resizing the browser. From f1e87802c5a6b031bbfe29972ae492d5276bf74f Mon Sep 17 00:00:00 2001 From: ddewzy Date: Mon, 31 Aug 2020 15:20:56 -0700 Subject: [PATCH 09/16] scope --- dalene/CodeCademy/JS/Scope.js | 100 ++++++++++++++++++++++++++++++++++ 1 file changed, 100 insertions(+) create mode 100644 dalene/CodeCademy/JS/Scope.js diff --git a/dalene/CodeCademy/JS/Scope.js b/dalene/CodeCademy/JS/Scope.js new file mode 100644 index 00000000..3a1dda48 --- /dev/null +++ b/dalene/CodeCademy/JS/Scope.js @@ -0,0 +1,100 @@ +const city = "New York City"; +let logCitySkyline = () => { + let skyscraper = "Empire State Building"; + return "The stars over the " + skyscraper + " in " + city; +}; +console.log(logCitySkyline()); + +GLOBAL; +const satellite = "The Moon"; +const galaxy = "The Milky Way"; +const stars = "North Star"; +let callMyNightSky = () => { + return "Night Sky: " + satellite + ", " + stars + ", and " + galaxy; +}; +console.log(callMyNightSky()); + +LOCAL VARIABLES +const logVisibleLightWaves = () => { + const lightWaves = 'Moonlight'; + console.log(lightWaves); +} +logVisibleLightWaves(); +console.log(lightWaves); + +GOOD PRACTICE +const logVisibleLightWaves = () => { + let lightWaves = 'Moonlight'; + let region = 'The Arctic'; + // Add if statement here: + if (region === 'The Arctic') { + let lightWaves = 'Northern Lights'; + console.log(lightWaves); + } + console.log(lightWaves); +}; +logVisibleLightWaves(); + +BAD PRACTICE +const satellite = 'The Moon'; +const galaxy = 'The Milky Way'; +let stars = 'North Star'; +const callMyNightSky = () => { + stars = 'Sirius'; + return 'Night Sky: ' + satellite + ', ' + stars + ', ' + galaxy; +}; +console.log(callMyNightSky()); +console.log(stars); + +// - Scope is the idea in programming that some variables are accessible / inaccessible from other parts of the program. +// - Blocks are statements that exist within curly braces { }. +// - Global scope refers to the context within which variables are accessible to every part of the program. +// - Global variables are variables that exist within global scope. +// - Block scope refers to the context within which variables that are accessible only within the block they are defined. +// - Local variables are variables that exist within block scope. +// - Global namespace is the space in our code that contains globally scoped information. +// - Scope pollution is when too many variables exist in a namespace or variable names are reused. + +// The scope of `random` is too loose + +const getRandEvent = () => { + const random = Math.floor(Math.random() * 3); + if (random === 0) { + return 'Marathon'; + } else if (random === 1) { + return 'Triathlon'; + } else if (random === 2) { + return 'Pentathlon'; + } +}; +// The scope of `days` is too tight +const getTrainingDays = event => { + let days; + if (event === 'Marathon') { + days = 50; + } else if (event === 'Triathlon') { + days = 100; + } else if (event === 'Pentathlon') { + days = 200; + } + return days; +}; +// The scope of `name` is too tight +const logEvent = (name, event) => { + console.log(`${name}'s event is: ${event}`); +}; +name = 'Nala'; +const logTime = (name, days) => { + console.log(`${name}'s time to train is: ${days} days`); +}; +name = 'Nala'; +const event = getRandEvent(); +const days = getTrainingDays(event); +// Define a `name` variable. Use it as an argument after updating logEvent and logTime +logEvent(name, event); +logTime(name, days); +const event2 = getRandEvent(); +const days2 = getTrainingDays(event2); +const name2 = 'Warren'; +logEvent(name2, event2); +logTime(name2, days2); From eb1e242ac009601e339f8da22eed757c27bdd5bd Mon Sep 17 00:00:00 2001 From: ddewzy Date: Mon, 31 Aug 2020 15:21:19 -0700 Subject: [PATCH 10/16] flex box --- dalene/CodeCademy/CSS/flexBox.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 dalene/CodeCademy/CSS/flexBox.md diff --git a/dalene/CodeCademy/CSS/flexBox.md b/dalene/CodeCademy/CSS/flexBox.md new file mode 100644 index 00000000..4d5b5230 --- /dev/null +++ b/dalene/CodeCademy/CSS/flexBox.md @@ -0,0 +1,15 @@ +FLEX BOX + +- display: flex changes an element to a block-level container with flex items inside of it. +- display: inline-flex allows multiple flex containers to appear inline with each other. +- justify-content is used to space items along the major axis. +- align-items is used to space items along the cross axis. +- flex-grow is used to specify how much space (and in what proportions) flex items absorb along the major axis. +- flex-shrink is used to specify how much flex items shrink and in what proportions along the major axis. +- flex-basis is used to specify the initial size of an element styled with flex-grow and/or flex-shrink. +- flex is used to specify flex-grow, flex-shrink, and flex-basis in one declaration. +- flex-wrap specifies that elements should shift along the cross axis if the flex container is not large enough. +- align-content is used to space rows along the cross axis. +- flex-direction is used to specify the major and cross axes. +- flex-flow is used to specify flex-wrap and flex-direction in one declaration. +- Flex containers can be nested inside of each other by declaring display: flex or display: inline-flex for children of flex containers. From 86a96cff9d718836ec239f7ab86bf287aa33da3d Mon Sep 17 00:00:00 2001 From: ddewzy Date: Mon, 31 Aug 2020 15:21:47 -0700 Subject: [PATCH 11/16] delets --- .../CodeCademy/CSS/CSS selectors/index.html | 97 ------------------- dalene/CodeCademy/CSS/CSS selectors/style.css | 51 ---------- dalene/femb/.vscode/launch.json | 23 +++++ 3 files changed, 23 insertions(+), 148 deletions(-) delete mode 100644 dalene/CodeCademy/CSS/CSS selectors/index.html delete mode 100644 dalene/CodeCademy/CSS/CSS selectors/style.css create mode 100644 dalene/femb/.vscode/launch.json diff --git a/dalene/CodeCademy/CSS/CSS selectors/index.html b/dalene/CodeCademy/CSS/CSS selectors/index.html deleted file mode 100644 index bd6cfe32..00000000 --- a/dalene/CodeCademy/CSS/CSS selectors/index.html +++ /dev/null @@ -1,97 +0,0 @@ - - - - - Vacation World - - - - -

Top Vacation Spots

-
By: Stacy Gray
-
Published: 2 Days Ago
- -

- The world is full of fascinating places. Planning the perfect vacation - involves packing up, leaving home, and experiencing something new. -

- -

1. Florence, Italy

-
- A city-size shrine to the Renaissance, Florence offers frescoes, - sculptures, churches, palaces, and other monuments from the richest - cultural flowering the world has known. Names from its dazzling historical - pastDante, Michelangelo, Galileo, Machiavelliare some of the most resonant - of the medieval age. - Learn More. -
Top Attractions
-
    -
  • Museums
    • -
  • Bike Tours
    • -
  • Historical Monuments
    • -
-
- -

2. Beijing, China

-
- A city in the midst of reinventing itself and continuing to build on the - success of the 2008 Summer Olympics, Beijing is a place of frenzied - construction. New housing, new roads, and new sports venues seem to spring - up overnight. At the same time, the capital of the Peoples Republic of - China remains an epicenter of tradition, with the treasures of nearly - 2,000 years as the imperial capital still on viewin the famed Forbidden - City and in the luxuriant pavilions and gardens of the Summer Palace. - Learn More. -
Top Attractions
-
    -
  • Biking
    • -
  • Historical Sites
    • -
  • Restaurants and Dining
    • -
-
- -

3. Seoul, South Korea

-
- The Korean capital is a city of contrasts. Fourteenth-century city gates - squat in the shadow of 21st-century skyscrapers, while the broad Han River - is back-dropped by granite mountains rising in the city center complete - with alpine highways speeding around their contours and temples nestling - among their crags. Fashionable, gadget-laden youths battle for sidewalk - space with fortune-tellers and peddlers, while tiny neighborhoods of - traditional cottages contrast with endless ranks of identical apartments. - Learn More. -
Top Attractions
-
    -
  • Parasailing
    • -
  • Segway Tours
    • -
  • Spas and Resorts
    • -
-
- -

More Desinations

-
    -

  • Jackson Hole, Wyoming

    • -

  • Cape Town, South Africa

    • -

  • La Paz, Bolivia

    • -
- -

- —Best of luck with your travels, and be sure to send pictures and - stories. We"d love to hear them! -

- - diff --git a/dalene/CodeCademy/CSS/CSS selectors/style.css b/dalene/CodeCademy/CSS/CSS selectors/style.css deleted file mode 100644 index 46bd9414..00000000 --- a/dalene/CodeCademy/CSS/CSS selectors/style.css +++ /dev/null @@ -1,51 +0,0 @@ -p { - font-family: Arial; -} - -h1 { - color: maroon; -} - -.title, -.uppercase { - color: teal; - text-transform: uppercase; -} - -.cursive { - font-family: cursive; -} - -.capitalize { - text-transform: capitalize; -} - -.publish-time { - color: gray; -} - -h2.destination { - font-family: cursive; -} - -.description h5 { - color: teal; -} - -h5 { - color: rebeccapurple !important; -} - -h5, -p { - font-family: Georgia; -} -/* CSS can change the look of HTML elements. In order to do this, CSS must select HTML elements, then apply styles to them. -CSS can select HTML elements by tag, class, or ID. -Multiple CSS classes can be applied to one HTML element. -Classes can be reusable, while IDs can only be used once. -IDs are more specific than classes, and classes are more specific than tags. That means IDs will override any styles from a class, and classes will override any styles from a tag selector. -Multiple selectors can be chained together to select an element. This raises the specificity, but can be necessary. -Nested elements can be selected by separating selectors with a space. -The !important flag will override any style, however it should almost never be used, as it is extremely difficult to override. -Multiple unrelated selectors can receive the same styles by separating the selector names with commas. */ diff --git a/dalene/femb/.vscode/launch.json b/dalene/femb/.vscode/launch.json new file mode 100644 index 00000000..3bc9ad33 --- /dev/null +++ b/dalene/femb/.vscode/launch.json @@ -0,0 +1,23 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "name": "Launch Program", + "program": "${workspaceFolder}/app.js", + "request": "launch", + "skipFiles": ["/**"], + "type": "pwa-node" + }, + + { + "type": "node", + "request": "launch", + "name": "Launch Program", + "skipFiles": ["/**"], + "program": "${workspaceFolder}/calculator/calculator.js" + } + ] +} From 2f428b33dce5fe2bca96125416a74a00749af693 Mon Sep 17 00:00:00 2001 From: ddewzy Date: Tue, 1 Sep 2020 15:08:14 -0700 Subject: [PATCH 12/16] arrays --- dalene/CodeCademy/JS/arrays.js | 126 +++++++++++++++++++++++++++++++++ dalene/CodeCademy/JS/loops.js | 0 2 files changed, 126 insertions(+) create mode 100644 dalene/CodeCademy/JS/arrays.js create mode 100644 dalene/CodeCademy/JS/loops.js diff --git a/dalene/CodeCademy/JS/arrays.js b/dalene/CodeCademy/JS/arrays.js new file mode 100644 index 00000000..dda44d46 --- /dev/null +++ b/dalene/CodeCademy/JS/arrays.js @@ -0,0 +1,126 @@ +const hobbies = ["code", "bead", "netflix"]; +console.log(hobbies); + +const famousSayings = [ + "Fortune favors the brave.", + "A joke is a very serious thing.", + "Where there is love there is life.", +]; +let listItem = famousSayings[0]; +console.log(listItem); +console.log(famousSayings[2]); +console.log(famousSayings[3]); + +let groceryList = ["bread", "tomatoes", "milk"]; +groceryList[1] = "avocados"; + +let condiments = ["Ketchup", "Mustard", "Soy Sauce", "Sriracha"]; +const utensils = ["Fork", "Knife", "Chopsticks", "Spork"]; +condiments[0] = "Mayo"; +console.log(condiments); +condiments = ["Mayo"]; +console.log(condiments); +utensils[3] = "Spoon"; +console.log(utensils); + +const objectives = ["Learn a new languages", "Read 52 books", "Run a marathon"]; +console.log(objectives.length); + +const chores = ["wash dishes", "do laundry", "take out trash"]; +chores.push("clean room", "sweep"); +console.log(chores); + +const chores = [ + "wash dishes", + "do laundry", + "take out trash", + "cook dinner", + "mop floor", +]; +chores.pop(); +console.log(chores); + +const groceryList = [ + "orange juice", + "bananas", + "coffee beans", + "brown rice", + "pasta", + "coconut oil", + "plantains", +]; +groceryList.shift(); +console.log(groceryList); +groceryList.unshift("popcorn"); +console.log(groceryList); +console.log(groceryList.slice(1, 4)); +console.log(groceryList); +const pastaIndex = groceryList.indexOf("pasta"); +console.log(pastaIndex); + +const concept = ["arrays", "can", "be", "mutated"]; +function changeArr(arr) { + arr[3] = "MUTATED"; +} +changeArr(concept); +function removeElement(newArr) { + newArr.pop(); + removeElement(concept); + console.log(concept); +} + +const numberClusters = [ + [1, 2], + [3, 4], + [5, 6], +]; +const target = numberClusters[2][1]; + +let secretMessage = [ + "Learning", + "is", + "not", + "about", + "what", + "you", + "get", + "easily", + "the", + "first", + "time,", + "it", + "is", + "about", + "what", + "you", + "can", + "figure", + "out.", + "-2015,", + "Chris", + "Pine,", + "Learn", + "JavaScript", +]; +secretMessage.pop(); +console.log(secretMessage.length); +secretMessage.push("to", "Program"); +secretMessage[7] = "right"; +secretMessage[0] = "Programming"; +secretMessage.splice(6, 5, "know"); +console.log(secretMessage.join()); +//Programming,is,not,about,what,you,know,it,is,about,what,you,can,figure,out.,-2015,,Chris,Pine,,Learn,to,Program + +// - Arrays are lists that store data in JavaScript. +// - Arrays are created with brackets[]. +// - Each item inside of an array is at a numbered position, or index, starting at 0. +// - We can access one item in an array using its index, with syntax like: myArray[0]. +// - We can also change an item in an array using its index, with syntax like myArray[0] = 'new string'; +// - Arrays have a length property, which allows you to see how many items are in an array. +// - Arrays have their own methods, including.push() and.pop(), which add and remove items from an array, respectively. +// - Arrays have many methods that perform different tasks, such as .slice() and.shift(), . +// - Some built -in methods are mutating, meaning the method will change the array, while others are not mutating. +// - Variables that contain arrays can be declared with let or const.Even when declared with const, arrays are still mutable.However, a variable declared with const cannot be reassigned. +// - Arrays mutated inside of a function will keep that change even outside the function. +// - Arrays can be nested inside other arrays. +// To access elements in nested arrays chain indices using bracket notation. diff --git a/dalene/CodeCademy/JS/loops.js b/dalene/CodeCademy/JS/loops.js new file mode 100644 index 00000000..e69de29b From 19e762f06febcb801554ef1b58e03fcd7b439798 Mon Sep 17 00:00:00 2001 From: ddewzy Date: Fri, 4 Sep 2020 09:08:21 -0700 Subject: [PATCH 13/16] Loops --- dalene/CodeCademy/JS/loops.js | 75 +++++++++++++++++++++++++++++++++++ 1 file changed, 75 insertions(+) diff --git a/dalene/CodeCademy/JS/loops.js b/dalene/CodeCademy/JS/loops.js index e69de29b..d9fc9d8e 100644 --- a/dalene/CodeCademy/JS/loops.js +++ b/dalene/CodeCademy/JS/loops.js @@ -0,0 +1,75 @@ +const vacationSpots = ["Alaska", "New York", "Canada"]; +console.log(vacationSpots[0]); +console.log(vacationSpots[1]); +console.log(vacationSpots[2]); + +for (let i = 5; i < 11; i++) { + console.log(i); +} + +for (let counter = 3; counter >= 0; counter--) { + console.log(counter); +} + +const vacationSpots = ["Bali", "Paris", "Tulum"]; +for (let i = 0; i < vacationSpots.length; i++) { + console.log(`I would love to visit ${vacationSpots[i]}`); +} + +// Write your code below +let bobsFollowers = ["Joe", "Marta", "Sam", "Erin"]; +let tinasFollowers = ["Sam", "Marta", "Elle"]; +let mutualFollowers = []; +for (let i = 0; i < bobsFollowers.length; i++) { + for (let j = 0; j < tinasFollowers.length; j++) { + if (bobsFollowers[i] === tinasFollowers[j]) { + mutualFollowers.push(bobsFollowers[i]); + } + } +} + +const cards = ["diamond", "spade", "heart", "club"]; +let currentCard; +while (currentCard != "spade") { + console.log(currentCard); + currentCard = cards[Math.floor(Math.random() * 4)]; +} + +let cupsOfSugarNeeded = 1; +let cupsAdded = 0; +do { + cupsAdded++; +} while (cupsAdded < cupsOfSugarNeeded); + +const rapperArray = ["Lil' Kim", "Jay-Z", "Notorious B.I.G.", "Tupac"]; +for (let i = 0; i < rapperArray.length; i++) { + console.log(rapperArray[i]); + if (rapperArray[i] === "Notorious B.I.G.") { + break; + } +} +console.log("And if you don't know, now you know."); + +const input = "Coding is awesome you"; +const vowels = ["a", "e", "i", "o", "u"]; +const resultArray = []; +for (let i = 0; i < input.length; i++) { + for (let j = 0; j < vowels.length; j++) { + if (input[i] === vowels[j]) { + resultArray.push(vowels[j]); + } + } + if (input[i] === "e" || input[i] === "u") { + resultArray.push(input[i]); + } +} +console.log(resultArray.join("").toUpperCase()); + +// - Loops perform repetitive actions so we don’t have to code that process manually every time. +// - How to write for loops with an iterator variable that increments or decrements +// - How to use a for loop to iterate through an array +// - A nested for loop is a loop inside another loop +// - while loops allow for different types of stopping conditions +// - Stopping conditions are crucial for avoiding infinite loops. +// - do...while loops run code at least once— only checking the stopping condition after the first execution +// - The break keyword allows programs to leave a loop during the execution of its block From dddff3d4e20b2ead349eb8cca3c5e9fb249631be Mon Sep 17 00:00:00 2001 From: ddewzy Date: Fri, 4 Sep 2020 09:08:52 -0700 Subject: [PATCH 14/16] fixed gal2 --- dalene/femb/gal2/.vscode/settings.json | 3 +++ dalene/femb/gal2/gal2index.html | 10 +++++----- dalene/femb/mole/.vscode/settings.json | 3 +++ 3 files changed, 11 insertions(+), 5 deletions(-) create mode 100644 dalene/femb/gal2/.vscode/settings.json create mode 100644 dalene/femb/mole/.vscode/settings.json diff --git a/dalene/femb/gal2/.vscode/settings.json b/dalene/femb/gal2/.vscode/settings.json new file mode 100644 index 00000000..6f3a2913 --- /dev/null +++ b/dalene/femb/gal2/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/dalene/femb/gal2/gal2index.html b/dalene/femb/gal2/gal2index.html index 1e10b929..e887ebe1 100644 --- a/dalene/femb/gal2/gal2index.html +++ b/dalene/femb/gal2/gal2index.html @@ -4,14 +4,13 @@ Swiper Gallery - + +
@@ -57,7 +56,8 @@

- + + diff --git a/dalene/femb/mole/.vscode/settings.json b/dalene/femb/mole/.vscode/settings.json new file mode 100644 index 00000000..6f3a2913 --- /dev/null +++ b/dalene/femb/mole/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file From 5a3eb34bf47c168c6b98c51d92b2506ba5320cef Mon Sep 17 00:00:00 2001 From: ddewzy Date: Tue, 8 Sep 2020 14:58:46 -0700 Subject: [PATCH 15/16] higher Order functions --- dalene/CodeCademy/higherOrder.js | 49 ++++++++++++++++++++++++++++++++ 1 file changed, 49 insertions(+) create mode 100644 dalene/CodeCademy/higherOrder.js diff --git a/dalene/CodeCademy/higherOrder.js b/dalene/CodeCademy/higherOrder.js new file mode 100644 index 00000000..74c93c64 --- /dev/null +++ b/dalene/CodeCademy/higherOrder.js @@ -0,0 +1,49 @@ +const checkThatTwoPlusTwoEqualsFourAMillionTimes = () => { + for (let i = 1; i <= 1000000; i++) { + if (2 + 2 != 4) { + console.log("Something has gone very wrong :( "); + } + } +}; +const is2p2 = checkThatTwoPlusTwoEqualsFourAMillionTimes; +is2p2(); +console.log(is2p2.name); + +const checkThatTwoPlusTwoEqualsFourAMillionTimes = () => { + for (let i = 1; i <= 1000000; i++) { + if (2 + 2 != 4) { + console.log("Something has gone very wrong :( "); + } + } +}; +const addTwo = (num) => num + 2; +const timeFuncRuntime = (funcParameter) => { + let t1 = Date.now(); + funcParameter(); + let t2 = Date.now(); + return t2 - t1; +}; +const time2p2 = timeFuncRuntime(checkThatTwoPlusTwoEqualsFourAMillionTimes); +const checkConsistentOutput = (funk, val) => { + let first = funk(val); + let second = funk(val); + if (first === second) { + return first; + } else { + return "This function returned inconsistent results"; + } + checkConsistentOutput(funk, val); +}; + +const fruits = ["mango", "papaya", "pineapple", "apple"]; +fruits.forEach((fruit) => console.log(`I want to eat a ${fruit}.`)); + +// - Abstraction allows us to write complicated code in a way that’s easy to reuse, debug, and understand for human readers + +// - We can work with functions the same way we would any other type of data including reassigning them to new variables + +// - JavaScript functions are first - class objects, so they have properties and methods like any object + +// - Functions can be passed into other functions as parameters + +// - A higher - order function is a function that either accepts functions as parameters, returns a function, or both From 4c216908f883cde4f1c753d934b24a981a580c08 Mon Sep 17 00:00:00 2001 From: ddewzy Date: Fri, 11 Sep 2020 12:42:24 -0700 Subject: [PATCH 16/16] 9-11 --- dalene/BootCamp/9-9.mb | 12 ++++++++ dalene/CodeCademy/JS/itorators.js | 50 +++++++++++++++++++++++++++++++ 2 files changed, 62 insertions(+) create mode 100644 dalene/BootCamp/9-9.mb create mode 100644 dalene/CodeCademy/JS/itorators.js diff --git a/dalene/BootCamp/9-9.mb b/dalene/BootCamp/9-9.mb new file mode 100644 index 00000000..8dff23ca --- /dev/null +++ b/dalene/BootCamp/9-9.mb @@ -0,0 +1,12 @@ +THINGS WE WILL BE LEARNING ABOUT +~Redux ~Node ~AWS ~MongoDB ~DynamoDB ~SQL ~JS stack ~Material UI ~Algorithms ~Data Structure ~Advanced Math Concepts ~Software Architecture ~How to think like a software DEV ~Reasoning ~How to find help ~HTTP ~HTML/CSS +~Functional Components & React Hooks +- ~npx create-react-app app name to start a new front end react app +- allows you to group elements +- Material-UI is a frontend React library it has allot of built in features +- you can test the features on the website and see what they do +- is a good feature to use instead of a style sheet +- Almost all react Components have an onClick method +- Any dependency's added to .JSON will have green bars by them +- You can build the bones of your code & add dummy code +- Create new objects when updating state \ No newline at end of file diff --git a/dalene/CodeCademy/JS/itorators.js b/dalene/CodeCademy/JS/itorators.js new file mode 100644 index 00000000..62cbaeaf --- /dev/null +++ b/dalene/CodeCademy/JS/itorators.js @@ -0,0 +1,50 @@ +const animals = [ + "Hen", + "elephant", + "llama", + "leopard", + "ostrich", + "Whale", + "octopus", + "rabbit", + "lion", + "dog", +]; +const secretMessage = animals.map((animal) => { + return animal[0]; +}); +console.log(secretMessage.join("")); + +const bigNumbers = [100, 200, 300, 400, 500]; +const smallNumbers = bigNumbers.map((bigNumber) => { + return bigNumber / 100; +}); + +const randomNumbers = [375, 200, 3.14, 7, 13, 852]; +const smallNumbers = randomNumbers.filter(function (number) { + if (number < 250) { + return true; + } +}); + +const favoriteWords = [ + "nostalgia", + "hyperbole", + "fervent", + "esoteric", + "serene", +]; +const longFavoriteWords = favoriteWords.filter(function (words) { + if (words.length > 7) { + return true; + } +}); + +const animals = ['hippo', 'tiger', 'lion', 'seal', 'cheetah', 'monkey', 'salamander', 'elephant']; +const foundAnimal = animals.findIndex(animal => { + return animal === 'elephant'; +}); +const startsWithS = animals.findIndex(animal => { + return animal[0] === 's' ? true : false; +}); +