DevMagic · anderrf · Jun 9, 2021 · Jun 9, 2021 · Jun 9, 2021 · Jun 9, 2021
diff --git a/Assets/logo-devmagic.png b/Assets/logo-devmagic.png
diff --git a/project/index.html b/project/index.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DevMagic</title>
+    <link rel="stylesheet" href="./styles/landing.css">
+    <script src="./scripts/landing.js" type="module"></script>
+</head>
+<body>
+    <header>
+        <a href="">
+            <img src="/Assets/logo-devmagic.png" alt="DevMagic">
+        </a>
+    </header>
+    <main>
+        <div class="shortener-container">
+            <div class="shortener-content">
+                <h1>Encurte seus links.</h1>
+                <p>Links são longos. Encurte os links que você deseja compartilhar, e acompanhe enquanto viajam através da internet.</p>
+                <form class="shortener-form" id="shorten-form">
+                    <input type="url" name="txt-link" id="txt-link" placeholder="Cole o seu link aqui">
+                    <button id="btn-cancel">x</button>
+                    <button type="button" id="btn-link" data-action="shorten">ENCURTAR</button>
+                </form>
+            </div>
+        </div>
+        <div class="top-five-container">
+            <div class="top-five-content">
+                <h2>TOP 5</h2>
+                <div class="top-link-list">
+                </div>
+            </div>
+            <div class="triangle"></div>
+        </div>
+        <div class="hits-container">
+            <div class="hits-content">
+                <h2>HITS</h2>
+                <span>35.731.571</span>
+                <p>Cliques em links</p>
+            </div>
+        </div>
+    </main>
+    <footer>
+        <div class="icon-Chaordic">
+            <a href="http://chaordic.com.br">
+                <img src="/Assets/logo-chaordic.png" alt="Chaordic">
+            </a>
+        </div>
+        <div class="icon-Facebook-Twitter">
+            <a href="http://twitter.com">
+                <img src="/Assets/icon-twitter.png" alt="Twitter">
+            </a>
+            <a href="http://facebook.com">
+                <img src="/Assets/icon-facebook.png" alt="Facebook">
+            </a>
+        </div>
+    </footer>
+</body>
+</html>
diff --git a/project/scripts/landing.js b/project/scripts/landing.js
@@ -0,0 +1,18 @@
+//Import other JS files used for landing page
+import {fetchUrls} from './topFive.js';
+import {changeForm, verifyButtonAction} from './shortener.js';
+
+//Prevents form from submiting
+document.querySelector('#shorten-form').addEventListener("submit", ev => {ev.preventDefault()});
+
+//Verifies button condition on clicking
+document.querySelector('#btn-link').addEventListener("click", verifyButtonAction);
+
+//Erases shortened link
+document.querySelector('#btn-cancel').addEventListener("click", function(){changeForm("shorten")});
+
+//Functions activated on page loading
+window.addEventListener("load", function(){
+    changeForm("shorten");
+    fetchUrls();
+});
diff --git a/project/scripts/shortener.js b/project/scripts/shortener.js
@@ -0,0 +1,111 @@
+//Validates if a given string is a valid URL, demands full path
+function validateURL(link) 
+{
+    let url;
+    try {
+      url = new URL(link);
+    } catch (_) {
+      return false;  
+    }
+
+    return (url.protocol === "http:" || url.protocol === "https:");
+}
+
+//Makes a shortened link, based on example's structure
+function makeShortLink(link)
+{
+    const alphabet = "abcdefghijklmnopqrstuvwxyz";
+    link = "http://chr.dc/";
+    for(let x = 0; x < 6; x++)
+    {
+        link += alphabet[Math.floor(Math.random() * alphabet.length)];
+    }
+    return link;
+}
+
+//Adds animation to the form
+function animateFade()
+{
+    let formItems = document.querySelectorAll('.shortener-form input, .shortener-form button');
+    removeFade();
+    for(let item of formItems)
+    {
+        //#btn-cancel receives partial fading, other receive total fading
+        item.classList.add(item.id == "btn-cancel" ? "animate-fade-partial" : "animate-fade-total");
+    }
+}
+
+//Removes animation from the form
+function removeFade()
+{
+    let formItems = document.querySelectorAll('.shortener-form input, .shortener-form button');
+    for(let item of formItems)
+    {
+        item.className = '';
+    }
+}
+
+//Changes input and button text and actions for the received action
+export function changeForm(action)
+{
+    let txtLink = document.querySelector('#txt-link');
+    let btnLink = document.querySelector('#btn-link');
+    let btnCancel = document.querySelector('#btn-cancel');    
+    if(action === "shorten")
+    {
+        txtLink.placeholder = "Cole o seu link aqui";
+        txtLink.value = "";
+        btnCancel.style.display = "none";
+        btnLink.innerText = "ENCURTAR";
+        btnLink.dataset.action = "shorten";
+    }
+    else if(action === "copy")
+    {
+        txtLink.placeholder = "";
+        btnLink.innerText = "COPIAR";
+        btnLink.dataset.action = "copy";
+        btnCancel.style.display = "initial";
+        setTimeout(removeFade, 500);
+    }
+}
+
+//Gets a link, then returns the shortened version
+function shortenLink()
+{
+    let link = document.querySelector('#txt-link');
+    if(validateURL(link.value))
+    {
+        animateFade();
+        setTimeout(() => {
+            link.value = makeShortLink(link.value);
+            changeForm("copy");
+        }, 500);
+    }
+    else
+    {
+        link.value = "";
+        link.placeholder = "Insira um link válido e completo!";
+    }
+}
+
+//Copies shortened link to the user's clipboard
+function copyLink()
+{
+    let link = document.querySelector('#txt-link').value;
+    navigator.clipboard.writeText(link)
+        .then(changeForm("shorten"));
+}
+
+//Check if the button is ready for shorten or for copying
+export function verifyButtonAction()
+{
+    let btnLink = document.querySelector('#btn-link');
+    if(btnLink.dataset.action === "shorten")
+    {
+        shortenLink();
+    }
+    else if(btnLink.dataset.action === "copy")
+    {
+        copyLink();
+    }
+}
diff --git a/project/scripts/topFive.js b/project/scripts/topFive.js
@@ -0,0 +1,51 @@
+//Add the top 5 urls to the page
+function listTopFive(tops)
+{
+    let list = document.querySelector('.top-link-list');
+    list.innerHTML = "";
+    for(let top of tops)
+    {
+        list.innerHTML += `
+            <div>
+                <p><a href="${top.url}">${top.shortUrl}</a></p>
+                <p>${top.hits}</p>
+            </div>
+        `;
+    }
+}
+
+//Selects the top 5 urls by hits
+function fillTopFive(allURLs)
+{
+    let top = [];
+    let qtTop = 0;
+    while(qtTop < 5 && allURLs.length >= 5)
+    {
+        for(let url of allURLs)
+        {
+            if(url === allURLs[0])
+            {
+                top.push(url);
+            }
+            else
+            {
+                if(url.hits > top[qtTop].hits)
+                {
+                    top[qtTop] = url;
+                }
+            }
+        }
+        allURLs.splice(allURLs.lastIndexOf(top[qtTop]), 1);
+        qtTop++;
+    }
+    //console.log(top);
+    listTopFive(top);
+}
+
+//Fetches url array
+export function fetchUrls()
+{
+    fetch('../../Assets/urls.json')
+        .then(resp => {return resp.json()})
+        .then(data => {fillTopFive(data)});
+}
diff --git a/project/styles/animations.css b/project/styles/animations.css
@@ -0,0 +1,34 @@
+/*Fade animation*/
+/*Fading in the middle of animation*/
+@keyframes fade-total{
+    50%{
+        color: rgba(0, 0, 0, 0);
+    }
+
+    100%{
+        color: rgba(1);
+    }
+}
+
+/*Fade-in from the start*/
+@keyframes fade-partial{
+    0%{
+        color: rgba(0, 0, 0, 0);
+    }
+
+    100%{
+        color: rgba(1);
+    }
+}
+
+.animate-fade-total{
+    animation-name: fade-total;
+    animation-duration: 1000ms;
+    animation-fill-mode: backwards;
+}
+
+.animate-fade-partial{
+    animation-name: fade-partial;
+    animation-duration: 1000ms;
+    animation-fill-mode: backwards;
+}