Hands-On Project 10-2 (I need help specifically with the JavaScript Portion)Use your code editor to open the project10-02_txt.html and project10-02_txt.js files from the js10 ▶ project02 folder. Enter your name and the date in the comment section of each file and save them as project10-02.html and project10-02.js, respectively.Go to the project10-02.html file in your code editor. Add a script element linked to the project10-02js file. Defer the loading of the script until after the page is loaded. Close the file, saving your changes.Go to the project10-02.js file in your code editor. Below the rotateTan() function add a for loop that iterates through all the pieces in the tans node list. For each piece add an event listener that runs the grabTan() function in response to the pointerdown event.Create the grabTan() function. Within the function do the following:If the Shift key has been pressed down, call the rotateTan() function using the event target and a value of 15 as the parameter values.Otherwise, store the e.clientX and e.clientY values in the eventX and eventY variables. Set the touch-action style to “none”. Increase the zCounter variable by 1 and apply it to the zIndex style of the event target.Add an event listener to run the moveTan() function in response to the pointermove event. Add an event listener to run the dropTan() function in response to the pointerup event.Create the moveTan() function. Within the function calculate the distance horizontally and vertically that the pointer has moved from its initial position and move the event target the that same amount.Create the dropTan() function. Within the function remove that event listeners you created for the pointermove and pointerup events.Save your changes to the file and then load project10-02.html in your browser.Verify that you can drag and drop the seven tangram pieces. Also verify that when you hold down the Shift key and click the pieces they rotate clockwise. Note: The seven pieces are stock in rectangular images with transparent backgrounds that may overlap, so clicking two adjacent pieces might result in either piece being selected.Code Provided:HTML<!DOCTYPE html><html><head>  <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Hands-on Project 10-2</title> <link rel="stylesheet" href="styles.css" /></head><body> <header> <h1> Hands-on Project 10-2 </h1> </header> <section> <h1>Tangrams</h1> <p>Drag and drop the tangram pieces (or <em>tans</em>) below to complete one of the animal shapes. To rotate the piece, hold down the Shift key and click the piece. </p> <div id = "puzzle"> <img src="tan1.png" id="tan1" alt="" draggable="false" /><img src="tan6.png" id="tan6" alt="" draggable="false" /> <img src="tan2.png" id="tan2" alt="" draggable="false" /> <img src="tan3.png" id="tan3" alt="" draggable="false" /> <img src="tan4.png" id="tan4" alt="" draggable="false" /> <img src="tan5.png" id="tan5" alt="" draggable="false" /> <img src="tan7.png" id="tan7" alt="" draggable="false" /> <figure id="figure1"> <img src="chicken.png" alt="" /><br> <figcaption>chicken</figcaption> </figure> <figure id="figure2"> <img src="swan.png" alt="" /><br> <figcaption>swan</figcaption> </figure> </div></section></body></html> JavaScript"use strict";/* JavaScript 7th Edition Chapter 10 Project 10-02 Project to create a drag and drop tangram puzzle Author: Date: Filename: project10-02.js*/// Reference to the tangram puzzle boardlet puzzleBoard = document.getElementById("puzzle");// Counter for the zIndex style of each puzzle piecelet zCounter = 1;let eventX, eventY, tanX, tanY;// Node list representing the tangram pieceslet tans = document.querySelectorAll("div#puzzle > img");// Function to rotate a tan by a specified number of degreesfunction rotateTan(elem, deg) { const obj = window.getComputedStyle(elem, null); const matrix = obj.getPropertyValue("transform"); let angle = 0; if (matrix !== "none") { const values = matrix.split('(')[1].split(')')[0].split(','); const a = values[0]; const b = values[1]; angle = Math.round(Math.atan2(b, a) * (180/Math.PI)); } if (angle < 0) { angle += 360; } let newAngle = angle + deg; elem.style.transform = "rotate(" + newAngle + "deg)";}

Coded using Java Script. I have provided the javascript code for file project10-02.js

Answered: Hands-On Project 10-2 (I need help…

Database System Concepts

7th Edition

ISBN:9780078022159

Author:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan

Publisher:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan

Chapter1: Introduction

Section: Chapter Questions

Problem 1PE

See similar textbooks

Hands-On Project 10-2 (I need help specifically with the JavaScript Portion)

Use your code editor to open the project10-02_txt.html and project10-02_txt.js files from the js10 ▶ project02 folder. Enter your name and the date in the comment section of each file and save them as project10-02.html and project10-02.js, respectively.
Go to the project10-02.html file in your code editor. Add a script element linked to the project10-02js file. Defer the loading of the script until after the page is loaded. Close the file, saving your changes.
Go to the project10-02.js file in your code editor. Below the rotateTan() function add a for loop that iterates through all the pieces in the tans node list. For each piece add an event listener that runs the grabTan() function in response to the pointerdown event.
Create the grabTan() function. Within the function do the following:
1. If the Shift key has been pressed down, call the rotateTan() function using the event target and a value of 15 as the parameter values.
2. Otherwise, store the e.clientX and e.clientY values in the eventX and eventY variables. Set the touch-action style to “none”. Increase the zCounter variable by 1 and apply it to the zIndex style of the event target.
3. Add an event listener to run the moveTan() function in response to the pointermove event. Add an event listener to run the dropTan() function in response to the pointerup event.
Create the moveTan() function. Within the function calculate the distance horizontally and vertically that the pointer has moved from its initial position and move the event target the that same amount.
Create the dropTan() function. Within the function remove that event listeners you created for the pointermove and pointerup events.
Save your changes to the file and then load project10-02.html in your browser.
Verify that you can drag and drop the seven tangram pieces. Also verify that when you hold down the Shift key and click the pieces they rotate clockwise. Note: The seven pieces are stock in rectangular images with transparent backgrounds that may overlap, so clicking two adjacent pieces might result in either piece being selected.

Code Provided:

HTML

<!DOCTYPE html>

<html>

<head>

<!--

JavaScript 7th Edition

Chapter 10

Hands-on Project 10-2

Author:

Date:

Filename: project10-02.html

-->

<title>Hands-on Project 10-2</title>

</head>

<body>

<h1>

Hands-on Project 10-2

</h1>

</header>

<h1>Tangrams</h1>

<p>Drag and drop the tangram pieces (or <em>tans</em>) below to complete one of the

animal shapes. To rotate the piece, hold down the Shift key and click the piece.

</p>

<figcaption>chicken</figcaption>

</figure>

</figure>

</div>

</section>

</body>

</html>

JavaScript

"use strict";

/* JavaScript 7th Edition

Chapter 10

Project 10-02

Project to create a drag and drop tangram puzzle

Author:

Date:

Filename: project10-02.js

// Reference to the tangram puzzle board

let puzzleBoard = document.getElementById("puzzle");

// Counter for the zIndex style of each puzzle piece

let zCounter = 1;

let eventX, eventY, tanX, tanY;

// Node list representing the tangram pieces

let tans = document.querySelectorAll("div#puzzle > img");

// Function to rotate a tan by a specified number of degrees

function rotateTan(elem, deg) {

const obj = window.getComputedStyle(elem, null);

const matrix = obj.getPropertyValue("transform");

let angle = 0;

if (matrix !== "none") {

const values = matrix.split('(')[1].split(')')[0].split(',');

const a = values[0];

const b = values[1];

angle = Math.round(Math.atan2(b, a) * (180/Math.PI));

}

if (angle < 0) {

angle += 360;

}

let newAngle = angle + deg;

elem.style.transform = "rotate(" + newAngle + "deg)";

}

Expert Solution

Trending now

This is a popular solution!

Step by step

Solved in 3 steps with 2 images

SEE SOLUTION Check out a sample Q&A here

Knowledge Booster

Learn more about

Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.