Database System Concepts
7th Edition
ISBN: 9780078022159
Author: Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Publisher: McGraw-Hill Education
expand_more
expand_more
format_list_bulleted
Related questions
Concept explainers
Question
thumb_up100%
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>
<!--
JavaScript 7th Edition
Chapter 10
Hands-on Project 10-2
Author:
Date:
Filename: project10-02.html
-->
<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 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
This question has been solved!
Explore an expertly crafted, step-by-step solution for a thorough understanding of key concepts.
This is a popular solution
Trending nowThis is a popular solution!
Step by stepSolved in 3 steps with 2 images
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.Similar questions
- * IN VISUAL BASICSarrow_forwardFront End Text, Font, and Color Details Colors: · App Background: #222233 (This can be set in the ContextPage tag at the top) · Background color for the options container: #444455 · Background color for the “Receipt” header row: #555566 · Background color for the “Total” row: #555566 · Background color for the receipt body: #444455 · Text color for the Total Amount on Receipt screen: #FFAAAA · App Title Color (“Lenny’s Car Wash): CadetBlue · Button Background Color: #779977 · Button Text Color: White · Error Message Text Color: #FF7777 Font Sizes: · “Lenny’s Car Wash” title: 50 · Header Text for Selection Screen: 25 · “Receipt” text for Receipt Screen: 25 · Body of Receipt: 20 · Total Amount Text: 22 · Error Message Text: 20 Attributes for Specific Text: 2. Lenny’s Car Wash Title: Bold, Italics 3. Buttons: Boldarrow_forwardHTML/CSS JAVASCRIPT please help me answer this question I will give you a good rating Thank you! Given the following word search application, which searches for words in paragraphs, modify it so that it Adds two spans tab within the HTML within the designated new "Illustate" text segments as shown below. Has a new click event which searches the occurrence of the word within all span tabs residing within the first div container , then highlights the text in the span tab which contains the word c) In the same routine, count the number of times ( using a global variable) that the word is found Within the object array loop for span tabs ( where the indexOf statement is located) and after all span tabs are highlighted, send that number to a new html element ( a div, h1, span, p choice is up to you). The count should be continually accumulated and should show the total number of times a word is found in a span tab for all user activated clicks of the search button for…arrow_forward
- Event Listeners Return to the mas_register.js file in your editor. Directly below the initial comment section, insert an event listener for the window load event. Run an anonymous function in response to the event containing the following commands: Call the calcCart() function (which you will create shortly.) Create an onclick event handler for the regSubmit button that runs the sessionTest() function when the button is clicked. Create onblur event handlers for the input boxes with the ids: fnBox, lnBox, groupBox, mailBox, phoneBox, and banquetBox, running the calcCart() function in response to each event. Create an onchange event handler for the sessionBox selection list, running the calcCart() function when the selection list is changed. Create an onclick event handler for the mediaCB check box, running the calcCart() function in response. JavaScript Functions Create the sessionTest() function. The purpose of this function is to provide a validation test for the conference session…arrow_forwardCreate a form that includes a dropdown list with 4 items: Windows 95, Windows XP, Windows NT, Windows 7. The form should contain submit button. Assume this form will use the processing program "formProc.cgi", which is located at www.formprocessing.com/cgi-bin. Form data should be sent to server by "POST".arrow_forwardExcel date fields have the date to the right of the decimal point, and time to the left of the decimal point. True Falsearrow_forward
- Event Listeners Go to the co_credit.js file in your editor. Create an event listener for the window load event that retrieves the field values attached to the query string of the page’s URL. Add the following to the event listener’s anonymous function: Create the orderData variable that stores the query string text from the URL. Slice the orderData text string to remove the first ? character, replace every occurrence of the + character with a blank space, and decode the URI-encoded characters. Split the orderData variable at every occurrence of a & or = character and store the substrings in the orderFields array variable. Write the following values from the orderFields array into the indicated fields of the order form: orderFields[3] into the modelName field orderFields[5] into the modelQty field orderFields[7] into the orderCost field orderFields[9] into the shippingType field orderFields[13] into the shippingCost field orderFields[15] into the subTotal field orderFields[17]…arrow_forwardWith the frmTutorSearch form still open in Design View, use the Title button to add a title to the form. Replace the default title text with Tutor Information Form. (Hint: Do not include the period.) Save and close the frmTutorSearcharrow_forwardA Font structure can have one of four styles: PLAIN, BOLD, ITALIC or UNDERLINED. Create the enumerated type FontStyle with these members. The underlying values are 0, 1, 2 and 4. #ifndef STYLE_H#define STYLE_H ............. #endifarrow_forward
arrow_back_ios
arrow_forward_ios
Recommended textbooks for you
- Database System ConceptsComputer ScienceISBN:9780078022159Author:Abraham Silberschatz Professor, Henry F. Korth, S. SudarshanPublisher:McGraw-Hill Education
Starting Out with Python (4th Edition)Computer ScienceISBN:9780134444321Author:Tony GaddisPublisher:PEARSON
Digital Fundamentals (11th Edition)Computer ScienceISBN:9780132737968Author:Thomas L. FloydPublisher:PEARSON 
C How to Program (8th Edition)Computer ScienceISBN:9780133976892Author:Paul J. Deitel, Harvey DeitelPublisher:PEARSON
Database Systems: Design, Implementation, & Manag...Computer ScienceISBN:9781337627900Author:Carlos Coronel, Steven MorrisPublisher:Cengage Learning
Programmable Logic ControllersComputer ScienceISBN:9780073373843Author:Frank D. PetruzellaPublisher:McGraw-Hill Education
Database System Concepts
Computer Science
ISBN:9780078022159
Author:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Publisher:McGraw-Hill Education
Starting Out with Python (4th Edition)
Computer Science
ISBN:9780134444321
Author:Tony Gaddis
Publisher:PEARSON
Digital Fundamentals (11th Edition)
Computer Science
ISBN:9780132737968
Author:Thomas L. Floyd
Publisher:PEARSON
C How to Program (8th Edition)
Computer Science
ISBN:9780133976892
Author:Paul J. Deitel, Harvey Deitel
Publisher:PEARSON
Database Systems: Design, Implementation, & Manag...
Computer Science
ISBN:9781337627900
Author:Carlos Coronel, Steven Morris
Publisher:Cengage Learning
Programmable Logic Controllers
Computer Science
ISBN:9780073373843
Author:Frank D. Petruzella
Publisher:McGraw-Hill Education