cheatsheet.md

Building Interactive Sites

These are my notes, solutions, ect from the Building Interactive Websites Exam 2 in Codecademy's Full Stack Course.

const students = [
  { name: "Paisley Parker", gpa: 4.0 },
  { name: "Lake Herr", gpa: 3.2 },
  { name: "Promise Lansing", gpa: 3.9 },
  { name: "Friar Park", gpa: 2.8 },
  { name: "Mason Amitie", gpa: 3.49 }
]

function getDeansList(studentList) {
  let deansList = [];
  for(let i = 0; i < students.length; i++) {
    if (students[i].gpa >= 3.5) {
      deansList.push(studentList[i])
    }
  }

  return deansList;
}

console.log(getDeansList(students))

Use your knowledge of the DOM and event handlers to create an event handler that does the following when the “here” button, with an id of #colorBtn, is clicked:

Changes the background color of the document body.
Displays the randomly generated background color value inside of the paragraph element with an id of #randomColorText. Don’t worry—we’ve added this element to the HTML page for you.

// Generate a random hexadecimal string
const generateBackgroundColor = () => {
  const hexadecimals = '0123456789ABCDEF';
  let randomHexString = '#';
  for (let i = 0; i < 6; i++) {
    const randomHexChar = hexadecimals[Math.floor(Math.random() * hexadecimals.length)];
    randomHexString += randomHexChar;
  };
  return randomHexString;
};

// Grab the element with ID #colorBtn from the DOM
const colorBtn = document.querySelector('#colorBtn');

// Change the background color and display the color on the page
const changeColor = () => {
    const randomBackgroundColor = generateBackgroundColor();
  document.body.style.backgroundColor = randomBackgroundColor;
  document.querySelector('#randomColorText').innerHTML = randomBackgroundColor;
}

// Write your event handler here
colorBtn.addEventListener('click', changeColor);

Palindrome question

function checkPalindrome(str) {
  
  var len = str.length;
  var half = Math.floor(len / 2);

  
  for(var i= 0; i < half; i++){
    if(str[i] !== str[len - 1]) {
      return `The word or sentence, "${str}", is not a palindrome.`;
    }else {
       return `The word or sentence, "${str}", is a palindrome!`;
  }
    
}
     
}

checkPalindrome('may a moody baby doom a yam');
checkPalindrome('eye')

partySize input

<!DOCTYPE html>
<html>
  <head>
    <title>Friendsgiving RSVP Form</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1 id="rsvpHeader">Friendsgiving RSVP</h1>
    <form>
      <label for="firstName" id="firstNameLabel">First Name</label>
      <input type="text" id="firstName" required>
      <br>
      <label for="lastName" id="lastNameLabel">Last Name</label>
      <input type="text" id="lastName" required>
      <br>
      <label for="partySize" id="partySizeLabel">How many individuals will be in your party?</label>
      <!-- Add your input field here. -->
      <input type="number" id="partySize" min="1" max="3" required>
      <br>
      <input type="submit" id="submitBtn" value="RSVP">
    </form>
  </body>
</html>

CodeLikeAGirl29/cheatsheet.md

Building Interactive Sites

Palindrome question

partySize input