The User Maldito's Web

async function Search(){
    const siteInfo = "https://weirdscifi.ratiosemper.com/neocities.php?sitename=";

    //Search This Site And Give Me All The Info.
    //I will wait for you, okay?
    let theInfo = await GetSiteInfo(siteInfo, username);
    
    //You found it for real?
    if (theInfo.success) {
        //Let's Show The Data =D
        SetCounterInfo(theInfo);
    }
}
                            

To make a search ("request"), you have to use the keyword fetch (can be multitasking, a perfect synonym: asyncronous with Promises) like this:

//Telling that the function is "asynchronous"
async function GetSiteInfo(urlSite, username){
    //Making a Web Mould Of All the data I need is more EZ (and more just in case)
    let yourWebsiteData = {
        success: false,
        views: 0,
        hits: 0,
        created: "",
        updated: "",
        domain: "",
        tags: [],
    }

    //Search this and Wait until I respond, please
    await fetch(urlSite + username)
    .then(resp => {
        //If there is answer, Yey!
        if (resp.ok) {
            // console.log("Yey, I found you!");
            //Go to the next ".then" with the data
            return resp.json();
        }
        else{
            throw new Error("You have NOT been found :c");
        }
    })
    .then(data => {
        //If the data is retrived nice, perfect!
        if (data.result == "success") {
            const separatorDate = "/";
            let created = new Date(data.info.created_at);
            let updated = new Date(data.info.last_updated);

            //Let's put the data into the Mould
            yourWebsiteData.success = true;
            yourWebsiteData.name = data.info.sitename;
            yourWebsiteData.views = data.info.views;
            yourWebsiteData.hits = data.info.hits;
            yourWebsiteData.created = created;
            yourWebsiteData.updated = updated;
            yourWebsiteData.domain = data.info.domain;
            yourWebsiteData.tags = data.info.tags;

            console.log("I have your website data, jiji");
            // console.log(yourWebsiteData);
        }
    })
    //".catch" can catch an error and handle it appropriately c=
    .catch(error => console.error(error));

    //return the data I get
    return yourWebsiteData;
}
                            

function SetCounterInfo(webData){
    //Search this Id on the HTML (to write the data)
    let viewBox = document.querySelector("#views");
    let createdBox = document.querySelector("#created");
    let updatedBox = document.querySelector("#updated");

    //if the user selected 0 -> default view (1234)
    let views = webData.views;
    switch (viewSelector) {
        case 1:
            views = BetterViewsInfo(webData.views);
            //Let's transform it into this 1.234 
        break;
        case 2:
            views = BestViewInfo(webData.views);
            //Fancy, let's do it like Youtube 
        break;

        //If is -1 or other thing, Don't Show Anything
        case -1:
            views = "";
        break;
    }

    let betterCreatedDate = "";
    let betterUpdatedDate = "";

    //REMEMBER: -1 means hide the result / data
    if (createdType != -1) {
        betterCreatedDate = BetterDateInfo(webData.created, createdType);
    }
    if (updatedType != -1) {
        betterUpdatedDate = BetterDateInfo(webData.updated, updatedType);
    }

    //If the value is MORE THAN 0, show the result with proud
    if (viewSelector > 0) {
        viewBox.innerText ="My views: " + views;
    }
    if (createdType >= 0) {
        createdBox.innerText = 'Created: ' + betterCreatedDate;
    }
    if (updatedType >= 0) {
        updatedBox.innerText = `Updated: ${betterUpdatedDate}`;
    }
    // console.log("Write it down");
}
                            

I explain how this works in the script TnT, but I'll do it again.

1. First, you need this structure (to target and write your website's data):

   <section id="stats-box">
       <article class="stat">
           <p id="views"></p>
           <p id="created"></p>
           <p id="updated"></p>
       </article>
   </section>
                                       

2. Then, put Your Neocities Username. Examples: mine is user-maldito (https://neocities.org/site/user-maldito)

   //Line 7:
   const username = "user-maldito";
                                       

3. Select The Type of View: Default (0), Separator(1 & ","), Fancy(2) or None(-1)

   const viewSelector = 0;
   //Output: 123456
   
   const viewSelector = 1;
   const separator = ' '; 
   //Output: 123 456
   
   const viewSelector = 1;
   const separator = '.'; 
   //Output: 123.456
   
   const viewSelector = 2;
   //Output: 123K
   
   const viewSelector = -1;
   //Output: 
                                       

4. Date Output Variation

   const createdType = -1; //Output: Hidden
   const updatedType = 1; // Output: 19 day(s) ago
   //------
   const createdType = 2; // Output: 2 week(s) ago
   const updatedType = 3; // Output: Less than a Month ago
   //------
   const createdType = 4; // Output: Less than a Year ago
   //putting 0 or other thing will display this:
   const updatedType = 5; // Output: X year(s) Y Month(s) aprox
                                       

1. Grab some things in the page (the form to change the layout and all the CSS styles outside).
2. Then listen if the user select other options and if it's true, do Something (explained in the third point)
3. Also, I need if there is already other layout. Search if it's true.
4. Am I in the Gallery? The gallery have a different layout.
5. Oh, and if my layout isn't there, then let's put the Default Layout (Hacker) in the page. I'll write it somewhere the name to not forget it.

window.onload = () => {
    //Definition of all the Elements of the Web
    DOM.layoutSelect = document.getElementById("changingLayout");   //The Select in the form
    DOM.allLinksCss = document.querySelectorAll("link");    //All links in the HTML right now

    //Listening Events
    DOM.layoutSelect.addEventListener("change", ChangeLayout);

    //Set items
    let localLayout = localStorage.getItem("layoutName");
    let isGallery = window.location.pathname.includes("Online/Gallery/My-Camera-Roll/index.html");
    
    // If we are in my gallery (with that url/link/whatever), wanna load my css gallery super-duper-special
    // If not, go to default layout: hacker
    if ((localLayout == "retro") || (localLayout == "hacker") || (localLayout == "gallery_retro")){
        localLayout = "hacker";
        
        if (isGallery) {
            localLayout = "gallery_retro";
        }
    }

    /* Default Layout: Hacker (Gallery included) */
    if ((localLayout.length == 0) & DOM.allLinksCss.length == 0) {
        localLayout = "hacker";
        
        if (isGallery){
            localLayout = "gallery_retro";
        }
    }

    VerifingNewLayout(localLayout);
    localStorage.setItem("layoutName", localLayout);
};
                            

If the name of the Layout is valid and correct, then change it. How?

1. Take all the CSS tags.
2. Delete the Style (the CSS tags I gather before).
3. Depending of the layout selected, use it (put new CSS tags).
4. Put a funny log if someone is seeing the console command.
5. OPTIONAL: If the user is in the mobile, change something.
6. Remember the name of the Layout!

function VerifingNewLayout(newLayout){
    //Refreshing the definition (of all the links) [necessary]
    DOM.allLinksCss = document.querySelectorAll("link");

    let newLayoutName = "";

    switch (newLayout) {
        case "nothing":
            newLayoutName = "nothing";            
            break;

        case "default":
            NoCSS();
            BootstrapCSS();
            console.log("Default Default Default Default Default :)");
            newLayoutName = "default";
            break;

        case "css_hater":
            NoCSS();
            console.log("CSS Hater Spotted");
            newLayoutName = "css_hater";
            break;

        case "retro":
            NoCSS();
            let message = "Please, don't hack me. I'll do anything, but don't hurt me TnT";
            let isCSSMobile = (window.navigator.userAgent.indexOf("Mobile") != -1);

            if (isCSSMobile) {
                message = "Oh, I see...";
                //Music
                let musicPlayer = document.querySelector("iframe");
                // musicPlayer.width = "90%";
                musicPlayer.height= "152px";
            }
            HackerCSS("hacker");

            console.log(message);
            newLayoutName = "hacker";
            break;

        //Gallery Layout
        case "gallery_retro":
            NoCSS();
            HackerGalleryCSS("hacker");
            BootstrapCSS();
            console.log("STOP HACKING ME! I'M SCARED!! PLS, I'LL DO ANYTHING!!!");
            newLayoutName = "gallery_retro";
            break;

        default:
            newLayoutName = "trolling"; //do the barrel roll? idk
            console.log("So funny touching the code I made, right? C:");
            break;
    }

    
    return newLayoutName;
}
                            

When the user choose another style, we're gonna change it.

//function inside window.onload
    //If the select tag change the value, execute ChangeLayout
    DOM.layoutSelect.addEventListener("change", ChangeLayout);

//function outside window.onload
function ChangeLayout(){
    //Weird form of getting the name of the selected option
    let selectedTheme = DOM.layoutSelect.options[DOM.layoutSelect.selectedIndex].value;
    let layoutName = VerifingNewLayout(selectedTheme);

    localStorage.setItem("layoutName", layoutName);
}