Penguins - Data Abstraction Homework

Penguins JS Lessons

Download Homework
Submission Google Form for Homework

Data Abstraction Homework

In order to learn this subject of programming well, you have to practice:

Popcorn hack 1: Data Abstraction with functions

Popcorn hack 2: Data abstraction with classes

Final Task: Building a player system using classes and functions

---

Popcorn Hack 1 (Progress Check)

Data abstraction with functions:

Part 1: Edit the Account() function to print out the username and password to the console using console.log().

Part 2: Edit the ChangeUsername() function to accept a newUsername parameter, then set the username variable to the newUsername parameter.

Part 3: Edit the ChangePassword() function to accept a newPassword parameter, then set the password variable to the newPassword parameter.

Part 4: Make the Login() function check if the parameters _username and _password are equal to the username and password variables, then print out if the login succeeded or failed using console.log().

%%html

<div id="outputPH1">Results will appear here:<br></div>

<script>
(() => {
const output = document.getElementById("outputPH1");

// put popcorn hack 1 code here:

let username = "Giuseppe";
let password = "giuseppe_very_awesome_password";

// part 1
function Account() {
	output.innerHTML += "Created account for user: " + username + "<br>";
	output.innerHTML += "Stored password: " + password + "<br><br>";
	console.log("Account() ->", username, password);
}

// part 2
function ChangeUsername(newUsername) {
	username = newUsername;
	output.innerHTML += "Username updated to: " + username + "<br>";
	console.log("ChangeUsername() ->", username);
}

// part 3
function ChangePassword(newPassword) {
	password = newPassword;
	output.innerHTML += "Password updated successfully.<br><br>";
	console.log("ChangePassword() -> (hidden)");
}

// part 4
function Login(_username, _password) {
	if (_username === username && _password === password) {
		output.innerHTML += "Login Successful for " + username + "<br>";
		console.log("Login() -> success");
		return true;
	} else {
		output.innerHTML += "Login: failure - incorrect credentials<br>";
		console.log("Login() -> failure");
		return false;
	}
}

Account();
ChangeUsername("Pranay");
ChangePassword("imHim_41");
Login("Pranay", "imHim_41");

})();
</script>

Results will appear here:

---

Popcorn Hack 2 (Progress Check)

Use the examples provided in the lesson if you’re stuck.

Part 1: Make a class named House

Part 2: Make a constructor for the House class with the parameters cost, age, and size

Part 3: Make an instance of the House class with the name myHouse and fill the parameters with any numbers you want.

Write your code down here:

%%html

<div id="outputPH2">House Info:<br></div>

<script>
(() => {
	const output = document.getElementById("outputPH2");

	class House {
		constructor(cost, age, size) {
			this.cost = cost;
			this.age = age;
			this.size = size;
		}

		showHouse() {
			output.innerHTML += "Cost: $" + this.cost + "<br>";
			output.innerHTML += "Age: " + this.age + " years<br>";
			output.innerHTML += "Size: " + this.size + " sq ft<br><br>";
		}
	}

	let myHouse = new House(500000, 7, 1800);
	myHouse.showHouse();
})();
</script>

House Info:

---

Final task

Part 1: Create 2 variables in the constructor like this: this.variableName = something. These variables will be called: this.positionX, this.velocityX.

Part 2: Create 2 methods called MoveLeft() and MoveRight(),
inside MoveLeft() set ‘this.velocityX’ to -200.
inside MoveRight() set ‘this.velocityX’ to 200.

Part 3: Create a function called UpdatePosition(). Inside this function, add ‘this.velocityX’ to ‘this.positionX’

Part 4: Call each method (MoveLeft(), MoveRight(), UpdatePosition() ), on the player object.

%%html

<h2>HW</h2>

<div id="outputHW">Results will appear here:<br></div>

<script>
(() => {
	const output = document.getElementById("outputHW"); 

	class Player {
		constructor() {
			this.positionX = 0;
			this.velocityX = 0;
		}

		MoveLeft() {
			this.velocityX = -500;
			output.innerHTML += "Moving left, velocityX = " + this.velocityX + "<br>";
		}

		MoveRight() {
			this.velocityX = 100;
			output.innerHTML += "Moving right, velocityX = " + this.velocityX + "<br>";
		}

		UpdatePosition() {
			this.positionX += this.velocityX;
			output.innerHTML += "Updated positionX = " + this.positionX + "<br><br>";
		}
	}

	let player = new Player();

	player.MoveLeft();
	player.UpdatePosition();

	player.MoveRight();
	player.UpdatePosition();
})();
</script>

HW

Results will appear here:

---

Grading

Popcorn Hack 1: Completion gives 0.2 points.

Popcorn Hack 2: Completion gives 0.3 points.

Final Task: Completion gives 0.5 points. Max of 0.02 extra points from extra work relevant to the subject or finishing assignment in a way that shows exceptional comprehension of the lesson.

Make sure to submit your homework deployed link onto the global homework submission google sheet

Submission Google Form for Homework