finished timer

kmr18006 · Mar 26, 2024 · 4b5335f · 4b5335f
1 parent 827e1b1
commit 4b5335f
Show file tree

Hide file tree

Showing 7 changed files with 381 additions and 0 deletions.
diff --git a/final project/css/style.css 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;
+}
diff --git a/final project/img/cutecat.jpg b/final project/img/cutecat.jpg
diff --git a/final project/index.html b/final project/index.html
@@ -0,0 +1,48 @@
+<!doctype html>
+<html class="no-js" lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Drag & Drop Collage Maker</title>
+  <link rel="stylesheet" href="css/style.css">
+  <link rel="stylesheet" href="https://use.typekit.net/xpy5krv.css">
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
+  <meta name="description" content="Collage maker where you can drag images from you files and move, resize, rotate, move to the front, or delete to create a collage.">
+
+</head>
+
+<body>
+
+  <div class="side">
+    <div class="info">
+        <h1>Drag & Drop Collage Builder</h1>
+        <p class="instructions">Choose any image from your files and drag it onto this page to build a collage.</p>
+    </div>
+    <div class="tools">
+        <h2 style="display: inline-block; margin-right: 20px;">Select a Tool:</h2>
+                <select id="toolchooser">
+                    <option>Move</option>
+                    <option>Resize</option>
+                    <option>Rotate</option>
+                    <option>Bring to Front</option>
+                    <option>Delete</option>
+                </select>
+        <div class="instructions">
+            <p><strong>Moving:</strong> Click and drag an image to move it.</p>
+            <p><strong>Resizing:</strong> Click and drag up on the image to make it <strong>bigger</strong> and click and drag down to make it <strong>smaller</strong>.</p>
+            <p><strong>Rotating:</strong> Click and drag up to rotate image <strong>counter-clockwise</strong> and click and drag down to rotate image <strong>clockwise</strong>.</p>
+            <p><strong>Bring to Front:</strong> Click an image to bring it to the front.</p>
+            <p><strong>Delete:</strong> Click an image to delete it.</p>
+        </div>
+    </div>
+  </div>
+
+  <div class="collage">
+    <img src="img/cutecat.jpg" draggable=false />
+  </div>
+
+  <script src="js/script.js"></script>
+</body>
+
+</html>
diff --git a/final project/js/script.js 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>');
+                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();
+});
diff --git a/week-10/css/style.css 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;
+}
diff --git a/week-10/img/gradient.jpg b/week-10/img/gradient.jpg
diff --git a/week-10/index.html b/week-10/index.html
@@ -0,0 +1,84 @@
+<!doctype html>
+<html class="no-js" lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Stopwatch App</title>
+  <link rel="stylesheet" href="css/style.css">
+  <link rel="stylesheet" href="https://use.typekit.net/xpy5krv.css">
+  <meta name="description" content="Stopwatch app that allows you to time anything whenever you want!">
+</head>
+
+<body>
+
+    <div class="main">
+        <h3>Online Stopwatch</h3>
+        <h1>00:00</h1>
+        <div class="buttons">
+            <button class="start">Start</button>
+            <button class="reset">Reset</button>
+        </div>
+    </div>
+
+    <script>
+
+    let timer;
+    let seconds = 0;
+    let minutes = 0;
+
+    let btn = document.querySelector('button.start');
+    let resetbtn = document.querySelector('button.reset');
+
+    btn.addEventListener('click', function() {
+    if (btn.innerText === "Start") {
+        timer = setInterval(updateStopwatch, 1000);
+        btn.innerText = "Pause";
+
+    } else {
+        clearInterval(timer);
+        btn.innerText = "Start";
+    }
+    })
+
+    resetbtn.addEventListener('click', function() {
+        clearInterval(timer);
+        seconds = 0;
+        minutes = 0;
+        displayTime();
+
+        if (btn.innerText === "Pause") {
+        btn.innerText = "Start";
+
+    }
+
+    })
+
+    function updateStopwatch() {
+        seconds++;
+            if (seconds === 60) {
+                seconds = 0;
+                minutes++;
+            }
+            displayTime();
+    }
+
+    function displayTime() {
+        const display = document.querySelector('h1');
+        const formattedTime = formatTime(minutes) + ':' + formatTime(seconds);
+        display.textContent = formattedTime;
+    }
+
+    function formatTime(time) {
+        if (time < 10) {
+            return '0' + time;
+        } else {
+            return time;
+        }
+    }
+
+    </script>
+
+</body>
+
+</html>