Hacks Below

  • Data Type Hacks
  • DOM Hacks

Data Type Hacks

// Object representing Vibha
let vibha = {
    name: "Vibha",
    age: 15,
    currentClasses: ["AP Chem", "AP Calc", "AP Seminar", "AP CSP",],
    interests: ["reading", "baking"],
    favoriteColor: "Purple",
    favoriteArtists: ["Dua Lipa", "Sabrina Carpenter"]
};

// Print the entire object
console.log("Original object:", vibha);

// Manipulate arrays within the object
console.log("Object: mutating the key favoriteColor from purple to blue")
vibha.favoriteColor = "blue"

// Print the modified object and specific changed key
console.log("Modified favoriteColor:", vibha.favoriteColor);

// Perform mathematical operations
let yearsTill18 = 18 - vibha.age;
console.log("Years until Vibha turns 18:", yearsTill18);

let classCount = vibha.currentClasses.length;
console.log("Number of classes Vibha is taking:", classCount);

// Use typeof to determine the types of fields
console.log("Type of name:", typeof vibha.name);
console.log("Type of age:", typeof vibha.age);
console.log("Type of currentClasses:", typeof vibha.currentClasses);

DOM Hacks

%%html

<div style="background-color: #da95f5; padding: 20px; border-radius: 15px;">
	<h2 style="color: black;">AP CSP Students Click Here!</h2>
	<p id="topParagraph" style="color: black;">
	  To properly prepare and excel in this class, there are many resources available to you. Click on the button below!
	</p>
	<button onclick="window.location.href='https://apcentral.collegeboard.org/courses/ap-computer-science-principles';">
	  College Board!
	</button>
  </div>
  
  <p></p>
  
  <div style="background-color: #da95f5; padding: 20px; border-radius: 15px;">
	<h2 style="color: black;">Programming Help</h2>
	<a id="cssLink" href="https://www.w3schools.com/css/">
	  <button class="block"><b>CSS Help</b></button>
	</a>
	<p></p>
	<a id="htmlLink" href="https://www.w3schools.com/html/">
	  <button class="block"><b>HTML Help</b></button>
	</a>
	<p style="color: black;">Use the links above to navigate to the programming language of your choosing!</p>
	<button onclick="switchLinks()">Switch Links</button>
  </div>
  
  <script>
	function switchLinks() {
	  // Get the links
	  let cssLink = document.getElementById('cssLink');
	  let htmlLink = document.getElementById('htmlLink');
	  
	  // Swap the href values
	  let tempHref = cssLink.href;
	  cssLink.href = htmlLink.href;
	  htmlLink.href = tempHref;
	  
	  // Change the innerHTML of the top p tag
	  document.getElementById('topParagraph').innerHTML = "Switched!";
	  
	  // Log the change
	  console.log("Links have been switched!");
	}
  </script>

JavaScript Hacks

%%js
let a = 2;
let b = 7;

if (a > b) {
    console.log("a is greater");
} else if (b > a) {
    console.log("b is greater");
} else {
    console.log("both are equal");
}

let x = 10;
let y = 5;

// Addition
let addition = x + y;
console.log("Addition: " + addition);

// Subtraction
let subtraction = x - y;
console.log("Subtraction: " + subtraction);

// Multiplication
let multiplication = x * y;
console.log("Multiplication: " + multiplication);

// Division
let division = x / y;
console.log("Division: " + division);

// Modulo
let modulo = x % y;
console.log("Modulo: " + modulo);

// Exponentiation
let exponentiation = x ** y;
console.log("Exponentiation: " + exponentiation);