diff --git a/final project/css/style.css b/final project/css/style.css new file mode 100644 index 0000000..1b48920 --- /dev/null +++ b/final project/css/style.css @@ -0,0 +1,75 @@ +img +{ + height: 250px; + position: absolute; + padding: 15px; + border-radius: 10px; + background-color: white; + border-style: solid; + border-color: rgb(210, 210, 210); + box-shadow: 0px 0px 10px #d9d9d9; +} + +select { + margin-bottom: 10px; + font-size: 14px; + border-radius: 5px; + border-style: none; + font-family: "proxima-nova", sans-serif; + padding: 10px 20px 10px 20px; + text-align: left; +} +body +{ + display: grid; + grid-template-columns: 2fr 5fr; + margin: 0; +} + +h1 { + font-family: "proxima-nova", serif; + font-weight: 700; + font-style: normal; + font-size: 25px; +} + +h2 { + font-family: "proxima-nova", serif; + font-weight: 700; + font-style: normal; + margin-bottom: 20px; + font-size: 20px; +} + +p { + font-family: "proxima-nova", sans-serif; + font-weight: 400; + font-style: normal; + font-size: 14px; + line-height: 24px; +} + +.side { + background-color: rgb(224, 243, 255); + height: 88vh; + padding: 20px; + margin: 20px; + border-radius: 20px; + +} +.collage { + padding: 30px; + background-color: white; + margin: 20px; + border-style: solid; + border-color: rgb(213, 237, 252); + border-width: 5px; + border-radius: 20px; +} + +.instructions { + background-color: rgba(255, 255, 255, 0.608); + padding: 10px 20px 10px 20px; + border-radius: 10px; + margin-top: 10px; +} \ No newline at end of file diff --git a/final project/img/cutecat.jpg b/final project/img/cutecat.jpg new file mode 100644 index 0000000..6e839f2 Binary files /dev/null and b/final project/img/cutecat.jpg differ diff --git a/final project/index.html b/final project/index.html new file mode 100644 index 0000000..2400b2c --- /dev/null +++ b/final project/index.html @@ -0,0 +1,48 @@ + + + + + + + Drag & Drop Collage Maker + + + + + + + + + +
+
+

Drag & Drop Collage Builder

+

Choose any image from your files and drag it onto this page to build a collage.

+
+
+

Select a Tool:

+ +
+

Moving: Click and drag an image to move it.

+

Resizing: Click and drag up on the image to make it bigger and click and drag down to make it smaller.

+

Rotating: Click and drag up to rotate image counter-clockwise and click and drag down to rotate image clockwise.

+

Bring to Front: Click an image to bring it to the front.

+

Delete: Click an image to delete it.

+
+
+
+ +
+ +
+ + + + + \ No newline at end of file diff --git a/final project/js/script.js b/final project/js/script.js new file mode 100644 index 0000000..5db4e1d --- /dev/null +++ b/final project/js/script.js @@ -0,0 +1,97 @@ + +// holds the object that is currently being dragged +var currentlyDragging; +// holds the curent mode (0=move, 1=resize, 2=rotate) +var mode = 0; +// stores the old y position of the cursor +var oldY; +var maxZ = 1; + +// run when fully loaded +$(window).on('load', function () { + + $(document).on('mousedown', 'img', startDragging); + $(document).on('mousemove', whileDragging); + $(document).on('mouseup', doneDragging); + $('#toolchooser').on('change', changeMode); + +}); + +function startDragging(e) { + e.preventDefault(); + currentlyDragging = $(this); + + if (!currentlyDragging[0].degree) + currentlyDragging[0].degree = 0; + + if (mode == 3) { + currentlyDragging.css("z-index", maxZ); + maxZ++; + } + + else if (mode == 4) { + currentlyDragging.remove(); + } + +} + +function whileDragging(e) { + if (currentlyDragging == null) + return false; + + if (mode == 0) { + var newX = e.pageX - 100; + var newY = e.pageY - 400; + currentlyDragging.css({ 'margin-top': newY + 'px', 'margin-left': newX + 'px' }); + } else if (mode == 1) { + if (e.pageY > oldY) { + currentlyDragging.css({ height: '-=10px', width: '-=10px' }); + } else if (e.pageY < oldY) { + currentlyDragging.css({ height: '+=10px', width: '+=10px' }); + } + oldY = e.pageY; + } else if (mode == 2) { + if (e.pageY > oldY) { + currentlyDragging[0].degree++; + } else if (e.pageY < oldY) { + currentlyDragging[0].degree--; + } + currentlyDragging.css('transform', 'rotate(' + currentlyDragging[0].degree + 'deg)'); + oldY = e.pageY; + } +} + +function doneDragging(e) { + currentlyDragging = null; +} + +function changeMode() { + mode = $(this).prop('selectedIndex'); +} + +$(document).on('drop', function (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(); + + reader.onload = (function (file) { + return function (e) { + var img = $(''); + img.attr('src', e.target.result); + img.attr('draggable', 'true'); + img.appendTo('body'); + }; + })(file); + + reader.readAsDataURL(file); + } +}); + +// Prevents default behavior for drop event +$(document).on('dragover', function (e) { + e.preventDefault(); +}); \ No newline at end of file diff --git a/week-10/css/style.css b/week-10/css/style.css new file mode 100644 index 0000000..858b045 --- /dev/null +++ b/week-10/css/style.css @@ -0,0 +1,77 @@ +body { + font-family: "proxima-nova", sans-serif; + color: white; + display: flex; + justify-content: center; + align-items: center; + margin: 40px; + height: 80vh; +} + +div.main { + background: url("../img/gradient.jpg"); + background-size: cover; + border-radius: 20px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 50%; + height: 50%; + padding: 20px; + box-shadow: 0px 0px 10px, rgb(205, 205, 205); +} +div.buttons { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + padding: 30px; + gap: 30px; +} + +h3 { + font-size: 20px; +} + +h1 { + margin-top: 0px; + margin-bottom: 0px; + font-size: 70px; +} + +button { + padding: 10px 50px 10px 50px; + border-radius: 30px; + border-style: solid; + border-color: white; + background-color: white; + font-family: "proxima-nova", sans-serif; + font-size: 16px; + transition: ease 200ms; +} + +button:hover { + border-color: white; + background-color: rgba(255, 255, 255, 0); + color: white; + transition: ease 200ms; +} + +.pause { + border-color: white; + background-color: rgba(255, 255, 255, 0); + color: white; + padding: 10px 50px 10px 50px; + border-radius: 30px; + transition: ease 200ms; + display: none; +} + +.pause:hover { + border-style: solid; + border-color: white; + background-color: white; + transition: ease 200ms; + color: black; +} \ No newline at end of file diff --git a/week-10/img/gradient.jpg b/week-10/img/gradient.jpg new file mode 100644 index 0000000..b26c4a0 Binary files /dev/null and b/week-10/img/gradient.jpg differ diff --git a/week-10/index.html b/week-10/index.html new file mode 100644 index 0000000..3ef14ae --- /dev/null +++ b/week-10/index.html @@ -0,0 +1,84 @@ + + + + + + + Stopwatch App + + + + + + + +
+

Online Stopwatch

+

00:00

+
+ + +
+
+ + + + + + \ No newline at end of file