CIT Lab Wiki

Question:

Script failed to load when testing in browser.

Solution:

Used console, saw the name of the javascript file didn’t match the name in the script tag. For each version of TTT, must change the js reference name in HTML file.

Question:

Two classes for one element in JavaScript?

Solution:

• https://stackoverflow.com/questions/17366432/multiple-classes-on-single-element-html
• https://stackoverflow.com/questions/26736587/how-to-add-and-remove-classes-in-js-without-jquery
• ex. nextSquare.classList.add(“red”);

Question:

“Undefined” displaying in stopwatch countdown, instead of minutes/seconds

Solution:

Let variables don’t need “this” when being used within their scope.

Question:

How to prevent default action of an anchor tag?

Solution:

https://stackoverflow.com/questions/265478/preventdefault-on-an-a-tag?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa

Question:

How to delete a task from the list?(object from array?)

Solution:

https://stackoverflow.com/questions/10024866/remove-object-from-array-using-javascript?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa

Question:

How to add style to parent element?

Solution:

https://www.w3schools.com/jsref/prop_node_parentelement.asp

Question:

How to get input from text box?

Solution:

Use value, not innerText or innerHtml.

Question:

How to get coordinates of a mouse pointer?

Solution:

https://www.w3schools.com/jsref/event_clientx.asp

Question:

How to divide canvas image into tiles?

Solution:

• To get the row: math.floor(tile/4)
• to get column: tile%4.
  • * Need this for both source tile and destination tile.
• To clip image and change location on canvas: https://www.w3schools.com/tags/canvas_drawimage.asp

Question:

How do you get the x and y coordinates for drawImage()?

Solution:

• X: Take the column location * tile width.
• Y: Take the row location * tile height.

Question:

How do you get the location of the tile in the tileClick method (when the user clicks on a tile to move it)?

Solution:

• tileClick(e){
• let location = this.windowToCanvas(x,y);
• let colLocation = Math.floor(location.x/this.puzzle.tileWidth);
• console.log(“col” + colLocation);
• let rowLocation = Math.floor(location.y/this.puzzle.tileHeight);
• /*the click event is passed to this method*/

Question:

How to get the weather description and icon?

Solution:

• Go to the network tab in the web developer tools.
• For the icon, getting description is similar: this.state.dates[indexDay].weather[0].icon

Question:

How to add event handler to all the days, so that more details are displayed when clicked on?

Solution:

• Use querySelectorAll or getElementsByClassName to get all the html elements with the class “weather-list-item.”
• Loop through the elements to add an onclick or click event listener.
• Example of code in the loop, weatherItems is the array of elements, x goes from 0 to 6: weatherItems[x].addEventListener(“click”, this.renderCurrentDay.bind(this, x));

Back to the Java Script page