images can move, rotate, change size, bring to front, and delete. how…

…ever, the cursor position is not centered on the image when moving it.

final project/css/style.css

@@ -13,12 +13,22 @@ img
 select {
     margin-bottom: 10px; 
     font-size: 14px;
-    border-radius: 5px;
-    border-style: none;
+    border-radius: 10px;
+    border-width: 3px;
+    border-style: solid;
     font-family: "proxima-nova", sans-serif;
-    padding: 10px 20px 10px 20px;
+    padding: 10px 30px 10px 5px;
     text-align: left;
+    border-color: rgb(224, 243, 255);
 }
+
+select:hover {
+    background-color: rgb(254, 254, 254);
+    border-style: solid;
+    border-width: 3px;
+    border-color: rgb(182, 227, 255);
+}
+
 body
 {
     display: grid;
@@ -65,6 +75,8 @@ p {
     border-color: rgb(213, 237, 252);
     border-width: 5px;
     border-radius: 20px;
+    position: relative; /* Ensure absolute positioning of images relative to this container */
+    overflow: hidden; /* Prevent images from overflowing outside the container */
 }
 
 .instructions {

final project/index.html

@@ -38,7 +38,7 @@
     </div>
   </div>
 
-  <div class="collage">
+  <div class="collage" id="collage">
     <img src="img/cutecat.jpg" draggable=false />
   </div>
 

final project/js/script.js

@@ -69,25 +69,34 @@ function changeMode() {
     mode = $(this).prop('selectedIndex');
 }
 
-$(document).on('drop', function (e) {
-    e.preventDefault();
-    var dt = e.originalEvent.dataTransfer;
-    var files = dt.files;
+$(document).ready(function () {
+    // Event Binding
+    $('#collage').on('drop', droppedImage);
+    $(document).on('dragover', function (e) {
+        e.preventDefault();
+    });
+
+    // Event Handling Logic
+    function droppedImage(e) {
+        e.preventDefault();
+        var dt = e.originalEvent.dataTransfer;
+        var files = dt.files;
 
-    for (var i = 0; i < files.length; i++) {
-        var file = files[i];
-        var reader = new FileReader();
+        for (var i = 0; i < files.length; i++) {
+            var file = files[i];
+            var reader = new FileReader();
 
-        reader.onload = (function (file) {
-            return function (e) {
-                var img = $('<img>');
-                img.attr('src', e.target.result);
-                img.attr('draggable', 'true');
-                img.appendTo('body');
-            };
-        })(file);
+            reader.onload = (function (file) {
+                return function (e) {
+                    var img = $('<img>');
+                    img.attr('src', e.target.result);
+                    img.attr('draggable', 'true');
+                    img.appendTo('#collage');
+                };
+            })(file);
 
-        reader.readAsDataURL(file);
+            reader.readAsDataURL(file);
+        }
     }
 });