Web Development is a very cool skill that I love learning!
I love making websites because all I have to do is reload the page to see the changes I have made!
diff --git a/css/exercises/styles.css b/css/exercises/styles.css index 3b88bed453..3008d6961e 100644 --- a/css/exercises/styles.css +++ b/css/exercises/styles.css @@ -1 +1,18 @@ -/* Start adding your styling below! */ +body { + background-color: yellow; +} +p { + color: green; +} +h1 { + font-size: 36px; +} +.center{ + text-align: center; +} +#cool-text{ + color: blue; +} +#orderedlist{ + color: pink; +} \ No newline at end of file diff --git a/data-and-variables/exercises/data-and-variables-exercises.js b/data-and-variables/exercises/data-and-variables-exercises.js index 6433bcd641..26e38d62fa 100644 --- a/data-and-variables/exercises/data-and-variables-exercises.js +++ b/data-and-variables/exercises/data-and-variables-exercises.js @@ -1,11 +1,24 @@ // Declare and assign the variables below - +let nameOfSpaceShuttle = "Determination"; +let shuttleSpeedMph = 17500; +let distanceToMarsKm = 225000000; +let distanceToMoonKm = 384400; +const milesPerKilometer = .621; // Use console.log to print the 'typeof' each variable. Print one item per line. - +console.log(typeof(nameOfSpaceShuttle)); +console.log(typeof(shuttleSpeedMph)); +console.log(typeof(distanceToMarsKm)); +console.log(typeof(distanceToMoonKm)); +console.log(typeof(milesPerKilometer)); // Calculate a space mission below - +let milesToMars = distanceToMarsKm * milesPerKilometer; +let hoursToMars = milesToMars/shuttleSpeedMph; +let daysToMars = hoursToMars/24; // Print the results of the space mission calculations below - +console.log(nameOfSpaceShuttle + " will take " + daysToMars + " days to reach Mars."); // Calculate a trip to the moon below - -// Print the results of the trip to the moon below \ No newline at end of file +let milesToMoon = distanceToMoonKm * milesPerKilometer; +let hoursToMoon = milesToMoon/shuttleSpeedMph; +let daysToMoon = hoursToMoon/24; +// Print the results of the trip to the moon below +console.log(nameOfSpaceShuttle + " will take " + daysToMoon + " days to reach the Moon."); \ No newline at end of file diff --git a/data-and-variables/exercises/package-lock.json b/data-and-variables/exercises/package-lock.json new file mode 100644 index 0000000000..8f84d79bed --- /dev/null +++ b/data-and-variables/exercises/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "exercises", + "lockfileVersion": 3, + "requires": true, + "packages": {} +} diff --git a/dom-and-events/exercises/script.js b/dom-and-events/exercises/script.js index de6b630519..97d4b267e5 100644 --- a/dom-and-events/exercises/script.js +++ b/dom-and-events/exercises/script.js @@ -3,8 +3,24 @@ function init () { const button = document.getElementById("liftoffButton"); const paragraph = document.getElementById("statusReport"); - // Put your code for the exercises here. - + button.addEventListener('click', event => { + paragraph.innerHTML = 'Houston, we have liftoff!'; + }); + + function abortFunc() { + let abortMission = window.confirm("Are you sure you want to abort the mission?"); + if (abortMission){ + paragraph.innerHTML = 'Mission aborted! Space shuttle returning home'; + } + } + missionAbort.addEventListener('click', abortFunc); + + missionAbort.addEventListener("mouseover", event => { + missionAbort.style.backgroundColor = "red"; + }) + missionAbort.addEventListener("mouseout", event => { + missionAbort.style.backgroundColor = ""; + }) } window.addEventListener("load", init); diff --git a/dom-and-events/studio/scripts.js b/dom-and-events/studio/scripts.js index 45c9b3a9d1..35bfb3b511 100644 --- a/dom-and-events/studio/scripts.js +++ b/dom-and-events/studio/scripts.js @@ -1,2 +1,79 @@ // Write your JavaScript code here. + // Remember to pay attention to page loading! +window.addEventListener("load", function() { + + let rocket = document.getElementById("rocket"); + rocket.style.position = "absolute"; + rocket.style.bottom = "0px"; + rocket.style.left = "270px"; + + let status = document.getElementById("flightStatus"); + let background = document.getElementById("shuttleBackground"); + let shuttleHeight = document.getElementById("spaceShuttleHeight"); + const takeOff = document.getElementById("takeoff"); + + takeOff.addEventListener('click', event =>{ + let response = window.confirm("Confirm that the shuttle is ready for takeoff."); + if (response){ + status.innerHTML = "Shuttle in flight."; + background.style.backgroundColor= "blue"; + shuttleHeight.innerHTML = "10000"; + rocket.style.bottom = parseInt(rocket.style.bottom) + 10 + "px"; + } + }); + const land = document.getElementById("landing"); + landing.addEventListener("click", function(){ + window.alert("The shuttle is landing. Landing gear engaged."); + status.innerHTML = "The shuttle has landed."; + background.style.backgroundColor = "green"; + innerHeight.innerHTML = "0"; + rocket.style.bottom = "0px"; + + }); + + const up = document.getElementById("up"); + const down = document.getElementById("down"); + const right = document.getElementById("right"); + const left = document.getElementById("left"); + + const abort = document.getElementById("missionAbort"); + abort.addEventListener("click", function(){ + let toAbort = window.confirm("Confirm that you want to abort the mission."); + if (toAbort){ + status.innerHTML = "Mission aborted."; + background.style.backgroundColor = "red"; + height.innerHTML = "0"; + rocket.style.bottom = "0px"; + rocket.style.left = "270px"; + } + }); + + up.addEventListener("click", function(){ + if (status.innerHTML === "Shuttle in flight." && parseInt(shuttleHeight.innerHTML) < 250000){ + rocket.style.bottom = parseInt(rocket.style.bottom) + 10 + "px"; + shuttleHeight.innerHTML = parseInt(shuttleHeight.innerHTML) + 10000; + } + }); + + down.addEventListener("click", function(){ + if (status.innerHTML === "Shuttle in flight." && parseInt(shuttleHeight.innerHTML) !== 0){ + rocket.style.bottom = parseInt(rocket.style.bottom) - 10 + "px"; + shuttleHeight.innerHTML = parseInt(shuttleHeight.innerHTML) - 10000; + } + }); + + right.addEventListener("click", function(){ + if (status.innerHTML === "Shuttle in flight."){ + rocket.style.left = parseInt(rocket.style.left) + 10 + "px"; + } + }); + + left.addEventListener("click", function(){ + if (status.innerHTML === "Shuttle in flight."){ + rocket.style.left = parseInt(rocket.style.left) - 10 + "px"; + } + }); + + +}); \ No newline at end of file diff --git a/more-on-functions/studio/part-one-find-minimum-value.js b/more-on-functions/studio/part-one-find-minimum-value.js index 4fa8c129d0..43e9a7d4ac 100644 --- a/more-on-functions/studio/part-one-find-minimum-value.js +++ b/more-on-functions/studio/part-one-find-minimum-value.js @@ -1,5 +1,13 @@ //1) Create a function with an array of numbers as its parameter. The function should iterate through the array and return the minimum value from the array. Hint: Use what you know about if statements to identify and store the smallest value within the array. - +function findMin (array){ + let minVal = array[0]; + for (let i = 0; i < array.length; i++){ + if (array[i] < minVal){ + minVal = array[i]; + } + } + return minVal; +} //Sample arrays for testing: let nums1 = [5, 10, 2, 42]; let nums2 = [-2, 0, -10, -44, 5, 3, 0, 3]; @@ -7,4 +15,4 @@ let nums3 = [200, 5, 4, 10, 8, 5, -3.3, 4.4, 0]; //Using one of the test arrays as the argument, call your function inside the console.log statement below. -console.log(/* your code here */); +console.log(findMin(nums3)); diff --git a/more-on-functions/studio/part-three-number-sorting-easy-way.js b/more-on-functions/studio/part-three-number-sorting-easy-way.js index bfa9748a32..03d4f6c06d 100644 --- a/more-on-functions/studio/part-three-number-sorting-easy-way.js +++ b/more-on-functions/studio/part-three-number-sorting-easy-way.js @@ -4,5 +4,7 @@ let nums2 = [-2, 0, -10, -44, 5, 3, 0, 3]; let nums3 = [200, 5, 4, 10, 8, 5, -3.3, 4.4, 0]; //Sort each array in ascending order. +console.log(nums2.sort(function(a, b){return a - b})); //Sort each array in descending order. +console.log(nums2.reverse()); \ No newline at end of file diff --git a/more-on-functions/studio/part-two-create-sorted-array.js b/more-on-functions/studio/part-two-create-sorted-array.js index bc362a3101..4be6711acc 100644 --- a/more-on-functions/studio/part-two-create-sorted-array.js +++ b/more-on-functions/studio/part-two-create-sorted-array.js @@ -19,7 +19,14 @@ function findMinValue(arr){ 6) Be sure to print the results in order to verify your code.*/ //Your function here... - +function arraySort(array){ + let sortedArray = []; + while (array.length > 0){ + sortedArray.push(findMinValue(array)); + array.splice(array.indexOf(findMinValue(array)), 1); + } + return sortedArray; +} /* BONUS MISSION: Refactor your sorting function to use recursion below: */ @@ -27,3 +34,5 @@ function findMinValue(arr){ let nums1 = [5, 10, 2, 42]; let nums2 = [-2, 0, -10, -44, 5, 3, 0, 3]; let nums3 = [200, 5, 4, 10, 8, 5, -3.3, 4.4, 0]; + +console.log(arraySort(nums3)); diff --git a/objects-and-math/exercises/ObjectExercises.js b/objects-and-math/exercises/ObjectExercises.js index 9a50cbdecc..5b9a4e0dd7 100644 --- a/objects-and-math/exercises/ObjectExercises.js +++ b/objects-and-math/exercises/ObjectExercises.js @@ -2,23 +2,86 @@ let superChimpOne = { name: "Chad", species: "Chimpanzee", mass: 9, - age: 6 + age: 6, + astronautID: 1, + move: function(){ + return Math.round(Math.random()*10); + } }; let salamander = { name: "Lacey", species: "Axolotl Salamander", mass: 0.1, - age: 5 + age: 5, + astronautID: 2, + move: function(){ + return Math.round(Math.random()*10); + } }; // After you have created the other object literals, add the astronautID property to each one. - +let superChimpTwo = { + name: "Brad", + species: "Chimpanzee", + mass: 11, + age: 6, + astronautID: 3, + move: function(){ + return Math.round(Math.random()*10); + } +}; +let superBeagle = { + name: "Leroy", + species: "Beagle", + mass: 14, + age: 5, + astronautID: 4, + move: function(){ + return Math.round(Math.random()*10); + } +}; +let superTardigrade = { + name: "Almina", + species: "Tardigrade", + mass: .0000000001, + age: 1, + astronautID: 5, + move: function(){ + return Math.round(Math.random()*10); + } +}; // Add a move method to each animal object // Create an array to hold the animal objects. - +let animals = [superChimpOne, salamander, superChimpTwo, superBeagle, superTardigrade]; // Print out the relevant information about each animal. +function crewReports (animal){ + console.log(`${animal.name} is a ${animal.species}. They are ${animal.age} years old +and ${animal.age} kilograms. Their ID is ${animal.astronautID}.` + ) +} +for (i = 0; i < animals.length; i++){ + crewReports(animals[i]); +} // Start an animal race! +function fitnessTest(animals){ + let raceResults = [], numSteps, turns; + for (i = 0; i < animals.length; i++){ + numSteps = 0; + turns = 0; + while(numSteps<20){ + numSteps = numSteps + animals[i].move(); + turns++; + } + raceResults.push(`${animals[i].name} took ${turns} turns to take 20 steps.`); + } + return raceResults; +} + +let raceResults = fitnessTest(animals); +for (i = 0; i < raceResults.length; i++){ + console.log(raceResults[i]); +} diff --git a/user-input-with-forms/exercises/index.html b/user-input-with-forms/exercises/index.html index 00a01b39ed..5655360f24 100644 --- a/user-input-with-forms/exercises/index.html +++ b/user-input-with-forms/exercises/index.html @@ -8,7 +8,24 @@ - +