diff --git a/final project/css/style.css b/final project/css/style.css
index 1b48920..4458f91 100644
--- a/final project/css/style.css
+++ b/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 {
diff --git a/final project/index.html b/final project/index.html
index 2400b2c..74cacbd 100644
--- a/final project/index.html
+++ b/final project/index.html
@@ -38,7 +38,7 @@
Select a Tool:
-
+
diff --git a/final project/js/script.js b/final project/js/script.js
index 5db4e1d..eb4cfd0 100644
--- a/final project/js/script.js
+++ b/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.attr('src', e.target.result);
- img.attr('draggable', 'true');
- img.appendTo('body');
- };
- })(file);
+ reader.onload = (function (file) {
+ return function (e) {
+ var img = $('
![]()
');
+ img.attr('src', e.target.result);
+ img.attr('draggable', 'true');
+ img.appendTo('#collage');
+ };
+ })(file);
- reader.readAsDataURL(file);
+ reader.readAsDataURL(file);
+ }
}
});