The User Maldito's Website

Proyecto Maldito

Everything have their reason. And the reason of the code is right here.

How do you do the Hover thing?

That's a easy question. Is the main attraction of the website, so it have to be notice. We can make it work for other devices, because, at first, it only works on PC users. See the JS section (To-Do).

HTML

With the attribute tittle you can put an "altenative text". 


<span title="WWW stands for World Wide Web">What is "WWW"?<span>
What is "WWW"?
CSS

With style, we can make it unique and easy to spot to the users. 


a[title]{
    color: red;
    cursor: alias;
}
*[title]:not(a[title]){
    color: lightgreen;
    text-decoration: underline solid 3px pink;
    &:hover{
        color: lightblue;
        text-decoration: none;
    }
}
How your counter works?

Step 1. Copy & Paste ALL my code

Step 2. Follow the instructions

Step 3. If you don't know what to do, keep reading this article.

HTML

Make sure you have a similar HTML structure. The ID are important. 


<article id="stats">
    <p id="views">
        My Views: XXX XXX
    </p>
    <p id="created">
        First Upload: DD-MM-AAAA
    </p>
    <p id="updated">
        Last Updated: DD-MM-AAAA
    </p>
</article>
JS

You ONLY have to CHANGE:

1. Your Username

Just enter your username 


//1. Your name
const username = "dapoyo";
2. Your Views

What you wanna see? 0: Default (12345678 or 13579) / 1: separator (12.345.678 or 13 579) / 2: fancy (12.3 M or 13.5 K) / -1: Hide the Views 


//2. The View Selector
//Example: views = 12.345.678 or 13.579
const viewSelector = 1;
const separator = ',';
//Output: 12,345,678 views or 13,579 views
3. Your Created and Updated Date

The options are:

  • -1: Hide me that stat
  • 1: Show me only the day(s)
  • 2: Show me only the week(s)
  • 3: Show me only the month(s)
  • 4: Show me only the year(s)
  • Other Thing: Full Display

    //3. Created date
    createdType = -1;
    //Output: nothing
    createdType = 2;
    //Output: 34 week(s) ago

    4. Updated date
    const updatedType = 0;
    //Output: 1 Year(s) 3 Month(s) 23 day(s) aprox
    const updatedType = 4;
    //Output: Less than a year