Trivia Questions

Round 1 (100 Points each)

  1. FIRST Question

How do you select the first character in a String?

const a = 'Test'

NEXT Question

What is wrong with this counter variable?

const counter = 9

NEXT Question

What type of function is this?

const test = () => {
  // things
}

NEXT Question

What will this CSS Do? 
body{
  background-color: red
}

NEXT Question

Where do you link a css stylesheet in an html document?

<html>
 <head></head>
 <body></body>
</html>

NEXT Question

Explain the difference between single equal vs double equals vs triple equals? 

let a
a = 9
a == 9
a === 9

NEXT Question

What is Z-index do in CSS and why should this close button have a higher z-index thatn the modal?

.modal {
  /* other css */
  z-index: 100;
}

.modal > .closeBtn {
    /* other css */
  z-index : 101;
}

NEXT Question

How do you make a Circle in CSS?

.circle {
  height: ?;
  width: ?;
  border-radius: ?;
}

NEXT Question

How would you make a SubClass? 

class Animal {

}

const myAnimal = new Animal()

// class Pet that is a subClass of Animal

Round 2 (200 Points Each)

NEXT Question

❓ In your own words, what's an array?

const a = [1,2,3]

NEXT Question

❓ What will be the value of the variable color:

const colors = ['red', 'green', 'blue'];
let color = colors[1];


NEXT Question

❓ What's the best METHOD to use to iterate through an entire array?

a.forEach(/*code here*/)

for (var variable of a) {
  //code
}

for (var i = 0; i < a.length; i++) {
  console.log(a[i])
}

NEXT Question

❓ What method is used to copy a number of elements into a new array?

const a = [1,2,3]

NEXT Question

❓ Is the value of 0 (zero) truthy or falsey?

const a = !!0

NEXT Question

❓ Is an empty string truthy or falsey

const a = !!''

NEXT Question

❓ Is an "empty" object (an object with no properties) truthy or falsey?

const a = !!{}

NEXT Question

Do all variables have a data type?

NEXT Question

Is var _save = ''; a valid statement?

NEXT Question

If a variable is not a string, number, boolean, null, undefined or a symbol, it must be an __.

NEXT Question

❓ When an element has a CSS property of display: flex;, that element becomes a flex __.

NEXT Question

❓ When an element has a CSS property of display: flex;, its direct children become flex __.

NEXT Question

❓ What value is the default for the flex-direction property?

NEXT Question

❓ Is it justify-content or align-items that controls the alignment along the cross axis?

NEXT Question

What is the name of the method used to attach event listeners to elements?

NEXT Question

Name three events that might be triggered in the browser.

NEXT Question

What is the argument that JS passes to an event listener when it calls it?

button.addEventListener('click', (whatIsThisCalledHere)=> {
  console.log(whatIsThisCalledHere)
})

NEXT Question

What is the name of the property on the above argument that represents the DOM element that dispatched the event?

NEXT Question

TRIPLE POINTS

Let's say you needed to have an event listener respond to a click event on the <td>s within a <table> - would you have to add event listeners to each <td>? Support your answer.







Round 3 Final Jeopardy

Introduction (By Instructor)

This Introduction section will be read in class by the instructor.

Students will be self-directed beginning with the Instructions & Time Guidelines section below.

GOAL

The goal of this project assessment is to gauge your ability to develop a minimal front-end web application using HTML, CSS & JavaScript, including your ability to:

  • Write HTML that provides the application's overall structure and content.
  • Use CSS to provide styling.

  • Use JavaScript to:

    • Define variables that hold application state, cache DOM elements, etc.
    • Select elements in the DOM.
    • Listen for browser events, such as click, being dispatched by DOM elements.
    • Manipulate a DOM element's content and style.

DEMO

The instructor will now demonstrate the app you will be building.

OVERALL APPLICATION REQUIREMENTS

As you saw, the application's UI consists of:

  • A count display
  • Two buttons ("+" & "-")
  • An <input> element

Use the screenshots below as your "wireframes".

Lastly, the styling does not have to be exact, however, the closer it is to the screenshots, the better!

PROCESS

This assessment is an individual assignment - no collaboration please.

The good news is that it's "open book" - you may reference anything on your computer, Google, use notes, etc.

However, don't spend too much time researching unless you're stuck - do not over-think this application!!!

It is estimated that this project assessment will take 30 to 45 minutes to complete. However, you have up to 1 hour to complete this assessment.

Instructions & Time Guidelines (You've Got This!)

Please follow the following steps in order:

  • STEP 1 - Prepare (≈ 5 minutes)
  • STEP 2 - Set Up the App (≈ 5 minutes)
  • STEP 3 - Implement the App's Requirements (≈ 20 minutes)
  • STEP 4 - Push to Github Enterprise
  • STEP 5 - Bonus

The times above are just estimated guidelines.

Assessment Steps to Complete

STEP 1 - Prepare (5 minutes)

Briefly read through the rest of this assignment to better understand what is required before starting to code.

STEP 2 - Set Up the App (5 minutes)

Be sure to follow best practices when setting up the project:

  • Create a folder named project-1-assessment in your homework folder like you did your project.
  • Create a js and css folder.
  • Touch index.html
  • Touch js/main.js, and include it in index.html such that it runs after the DOM is ready (this is key).
  • Touch css/main.css and link it in your html as well.

STEP 3 - Implement the App's Requirements (40 minutes)

Upon Loading

When the application initially loads, the <input>'s value should be set to 1 and the initial count of 0 is rendered such that the display looks something like this:

When the "+" Button is Clicked

When the "+" button is clicked, the value entered in the <input> is added to the count and the new count value displayed.

For example, if the "+" button is clicked immediately after the app loading, the display should look something like this:

When the "-" Button is Clicked

When the "-" button is clicked, the value entered in the <input> is subtracted from the count and the new count value displayed.

Continuing from the previous example, if the number 200 is typed in the <input> and the "-" button is clicked, the display should look something like this:

Hovering Over the "+" or "-" Button

When the mouse is over the "+" or "-" button, the button should reverse its background and text colors:

Congrats, that's all there is to it!

If you would like to skip Step 4 (Deployment), then show your app to your instructor. If you deploy, slack the link instead.

STEP 4 - Push to your remote just like you did your project and follow the instructions for setting up your app with github pages

Note that the link might take a minute to become active.

Slack the deployed app's link to your instructors - congrats, you are done!

STEP 5 - Bonus

As a bonus, display the count in red if it is a negative value!

Hints

  • Prioritize functionality over layout/styling. Once the functionality is complete, then work on styling to get the UI as close as possible to the wireframes/images (see the below hint for using flexbox for layout).

  • Use CSS flexbox to ease horizontal and vertical centering:

    section {
	display: flex;  /* defaults to row layout */
	justify-content: center;  /* centers items horizontally in row layout */
	align-items: center;  /* centers vertically in row layout */
	/* flex-direction: column; will set layout to column instead of row */
}