adding economy rate in shortened url

Author: dersonsena

public_html/css/style.css

@@ -149,6 +149,12 @@ div.shortened-url-result button.copy-button {
     width: 100%;
 }
 
-div.shortened-url-result a {
+div.shortened-url-result a span.url-text {
     font-size: 1.7em;
+}
+
+div.shortened-url-result span.badge {
+    position: absolute;
+    margin: -1.6em 1em 1em -3.1em;
+    font-size: 0.9em;
 }

public_html/js/script.js

@@ -85,7 +85,9 @@ $(document).ready(function () {
 
             const $divResult = $('div.shortened-url-result');
             $divResult.css('display', 'flex');
-            $divResult.find('a').attr('href', payload.data.shortened).html(payload.data.shortened);
+            $divResult.find('a').attr('href', payload.data.shortened);
+            $divResult.find('a span.url-text').html(payload.data.shortened);
+            $divResult.find('a span.badge').html(`-${payload.data.economyRate}%`);
             $divResult.find('button').attr('data-url', payload.data.shortened);
         }).fail(function(jqXHR, textStatus, msg) {
             if (jqXHR.status === 400) {

src/Controllers/ShortenUrlController.php

@@ -67,8 +67,8 @@ public function __invoke(Request $request, Response $response, array $args): Res
         }
 
         $stmt = $this->db->prepare(trim("
-                INSERT INTO `urls` (`id`, `uuid`, `long_url`, `short_url_path`, `created_at`)
-                VALUES (:id, :uuid, :long_url, :short_url_path, :created_at)
+                INSERT INTO `urls` (`id`, `uuid`, `long_url`, `short_url_path`, `economy_rate`, `created_at`)
+                VALUES (:id, :uuid, :long_url, :short_url_path, :economy_rate, :created_at)
             "));
 
         $shortUrlPath = substr(sha1(uniqid((string)rand(), true)), 0, 5);
@@ -86,14 +86,17 @@ public function __invoke(Request $request, Response $response, array $args): Res
             break;
         }
 
+        $fullShortenUrl = $this->config['baseUrl'] . '/' . $shortUrlPath;
         $uuid = Uuid::uuid4();
         $createdAt = new DateTimeImmutable();
+        $economyRate = ceil(100 - ((strlen($fullShortenUrl) * 100) / strlen($contents['huge_url'])));
 
         $stmt->execute([
             'id' => $uuid->getBytes(),
             'uuid' => $uuid->toString(),
             'long_url' => $contents['huge_url'],
             'short_url_path' => $shortUrlPath,
+            'economy_rate' => $economyRate,
             'created_at' => $createdAt->format('Y-m-d H:i:s')
         ]);
 
@@ -105,8 +108,9 @@ public function __invoke(Request $request, Response $response, array $args): Res
             'status' => 'success',
             'data' => [
                 'huge' => $contents['huge_url'],
-                'shortened' => $this->config['baseUrl'] . '/' . $shortUrlPath,
-                'created_at' => $createdAt->format(DateTimeInterface::ATOM)
+                'shortened' => $fullShortenUrl,
+                'created_at' => $createdAt->format(DateTimeInterface::ATOM),
+                'economyRate' => $economyRate
             ]
         ]));
 

templates/index.html.twig

@@ -28,7 +28,10 @@
                 </div>
             </form>
             <div class="shortened-url-result">
-                <a href="#" target="_blank">&nbsp;</a>
+                <a href="#" target="_blank">
+                    <span class="url-text">&nbsp;</span>
+                    <span class="badge rounded-pill bg-success">&nbsp;</span>
+                </a>
                 <button data-url="https://glo.bo/2VE6uLN" class="btn btn-light copy-button">
                     <i class="far fa-copy"></i> Copiar
                 </button>