Merge pull request #12 from paperstreetco/clear_button

added copy button and new url button as well as themes/css
loujr · Dec 29, 2023 · 539ac47 · 539ac47
2 parents f85f469 + bf7397b
commit 539ac47
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 5 deletions.
diff --git a/__pycache__/webapp.cpython-310.pyc b/__pycache__/webapp.cpython-310.pyc
diff --git a/templates/index.html b/templates/index.html
@@ -24,7 +24,12 @@
             border: none;
             border-radius: 5px;
         }
-        button {
+        #shorten_button {
+            background-color: #008000;
+            color: #fff;
+            cursor: pointer;
+        }
+        #clear_button {
             background-color: #333;
             color: #fff;
             cursor: pointer;
@@ -35,9 +40,16 @@
     <div id="content">
         <h1>URL Shortener</h1>
         <form method="POST" action="{{ url_for('index') }}">
-            <input type="text" name="long_url" placeholder="Enter the long URL">
-            <button type="submit">Shorten</button>
+            <input id="url_input" type="text" name="long_url" placeholder="Enter the long URL">
+            <button id="shorten_button" type="submit">Shorten</button>
+            <button type="button" id="clear_button">Clear</button>
         </form>
     </div>
+
+    <script>
+        document.querySelector('#clear_button').addEventListener('click', function() {
+            document.querySelector('#url_input').value = '';
+        });
+    </script>
 </body>
 </html>
diff --git a/templates/short_url.html b/templates/short_url.html
@@ -24,7 +24,7 @@
             border: 1px solid #333;
             border-radius: 5px;
         }
-        #copy_button {
+        #copy_button, #clear_button {
             padding: 10px 20px;
             border: none;
             border-radius: 5px;
@@ -38,7 +38,8 @@
     <div id="content">
         <h1>Shortened URL:</h1>
         <a id="short_url" href="{{ short_url }}">{{ short_url }}</a>
-        <button id="copy_button">Copy</button>
+        <button id="copy_button" style="background-color: #0b57ad;">Copy</button>
+        <button id="clear_button" type="button" onclick="window.location.href='{{ url_for('index') }}'">New URL</button>
     </div>
 
     <script>