1

I am currently making a url shortener site where I will be able to shorten links and then get the shortened URL and its unique id stored on the database. This(it isn't wholly ready) is where I have hosted it for testing. Now, when I try adding a slug to it, I get an issue that this does not exist.

enter image description here

I guess this can be done using the .htaccess file, but I have no idea how it works. The task for me could be easier if I specified the slug like mainUrl.com/abc or anything like that, but in my case, the slug can change to anything in this format:

www.mainUrl.com/randomIdOfTheUrl

Also, I have no idea about adding a dynamic slug.

Here is my code

script.js:

function createShortUrl(longUrl, isLoggedIn) {
    const shortUrl = randomString(10);
    set(ref(db, "Urls/" + shortUrl), {
        actualUrl: document.getElementById("link-input").value,
        shortUrl: shortUrl,
    })
        .then(() => {
            const view = document.getElementById("link-preview");
            document.getElementById("link-text-preview").textContent = longUrl;
            document.getElementById("shortened-link").textContent =
                "link.shortly.in/" + shortUrl;
            view.style.display = "flex";
        })
        .catch((error) => {
            alert(
                "Link could not be created due to some issues on our side. Please try again or if it does not work, try again later"
            );
            console.log("Fail: " + error);
        });
}

function randomString(length) {
    var letters = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890"
    var rString = "";
    var i = 0;
    while (i < length) {
        var letterIndex = Math.floor(Math.random() * letters.length);
        var letter = letters.charAt(letterIndex);
        rString = rString + letter;
        i++;
    }
    return rString;
}

and the other one which looks for links and the decides which page to be shown, the main page or the redirecting page.

link-checker.js

const showUrlView = document.getElementById("link-opener");
const mainView = document.getElementById("mainContainer");
const lastUrlSegment = currentUrl.split("/")[currentUrl.split("/").length - 1];
console.log(`Last segment ${lastUrlSegment}`);

const firebaseConfig = {
    apiKey: "AIzaSyCqhOLwA2VJXJNPSmXq7Bfp3lnpMEksljw",
    authDomain: "shorty-eea1d.firebaseapp.com",
    projectId: "shorty-eea1d",
    storageBucket: "shorty-eea1d.appspot.com",
    messagingSenderId: "379580693572",
    appId: "1:379580693572:web:8fa99035bc12cfe03e9011",
};
const db = getDatabase();

initializeApp(firebaseConfig);

const dbref = ref(db);
if (lastUrlSegment == "") {
    mainView.style.display = "block";
} else {
    get(child(dbref, "Urls/" + lastUrlSegment)).then((snapshot) => {
        console.log(snapshot.val());
        if (snapshot.exists()) {
            showUrlView.style.display = "block";
        } else {
            mainView.style.display = "block";
        }
    });
}

also, here is the main body of my HTML so it becomes easy

enter image description here

New contributor
Sambhav Khandelwal is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.
1
  • This is being closed because it appears you already answered this on Stack Overflow here. In the future, please only post questions to one Stack Exchange site. If you'd like to have it migrated to another site, then you can flag it to ask a moderator to migrate it for you.
    – dan
    Aug 6 at 20:29

0

Browse other questions tagged or ask your own question.