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); + } } });