JavaScript thingies and widgets

Here are some js widgets and things I made for this site. I'm not an expert in javascript. In fact, I never learned it in my life before making this site. So everything I made here is basically me throwing shit together untill it works. Feel free to use them. I would appreciate if you leave a creadit of you use them

Also sorry for all if else-s...

Fake login form

Small and simple fake login form with one username and password available. You can check it out on site's main page.

HTML code:

    <!--Login box-->
<div>
    <div> Welcome: Guest <br><img  src="img_avatar.png" style="border:1px" ><br>
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" />
            <div>
                <label for="pass">Password:</label>
                <input type="password" id="pass" name="password" minlength="8" required />
            </div>
        <input type="checkbox" id="scales" name="rememberMe"/>
        <label for="rememberMe">Remember me</label>
        <br>
        <input type="submit" style="margin: 8px;" onclick="login()" value="Sign in"/>
        <br>
        <a href=""><small>Forgot your password?</small></a>
    </div>    
</div>

JS code:

function login(){
    var myname = "Username"; //sets a username that the form will accept
    var mypswrd = "password"; //sets a password for a username
        
    uname = document.getElementById('username').value;
    pswrd = document.getElementById('pass').value;
        
    if (myname == uname  && mypswrd == pswrd){
        window.open("INSERT_URL_HERE.html","_self"); //insert a url to which you get redirected after inputting the correct password
    }
    else if (myname != uname && mypswrd == pswrd){
        alert("This username does not exist");
    }
    else if (myname == uname && mypswrd != pswrd){
       alert("Wrong Password.");
    }
    else{
        alert("Incorrect password or username. Please try again");
    }
    }

Fake poll

Polls are quite neat to have, but what if you wanted to have a rigged poll? Here is my version for it. Make a page and insert it as an iframe and enjoy

I tried to emulate the look of old forum polls with CSS but you can customize it as you want

HTML code:

<div class="polltainer">
    <div id="area-to-hide">
        <h3>This is  a poll?</h3>
        <div class="radio">
            <label>
                <input type="radio" name="optionsRadios">
                Answer 1
                </label>
        </div>
        <div class="radio">
            <label>
                <input type="radio" name="optionsRadios">
                Answer 2
            </label>
<!--you can insert as much choises as you want-->
        <br>
            <div class="centeredtext"><button onclick="buttonPress()">Vote</button>  <a href="#" onclick="buttonPress()">View results</a></div><br>
        </div>
    </div>

    <div  id="area-to-show" style="display:none">
        <h3>This is  a poll result?</h3>
        <div><table style="width:100%">
            <tr>
                <td>Answer 1</td>
                <td><div class="pollbar">          </div></td> <!--number of   changes the lenght of the vote bar-->
                <td>(143)</td> <!--this is a number of "votes" that your poll has for this entry-->
            </tr>
            <tr>
                <td>Answer 2</td>
                <td><div class="pollbar">       </div></td>
                <td>(50)</td>
            </tr>
            </table>
            <div class="centeredtext"><br><b>Total votes</b>: 483</div>
        </div>
    </div>
</div>

CSS code:

body{
            font-family: Monospace;
        }
        
        .polltainer {
            border:1px solid #6b4461;
            background-color: whitesmoke;
            height: fit-content;
            
        }
        
        .result {
            line-height: 143%;
        }
        
        .pollResult {
            line-height: 100%;
        }
        
        .centeredtext {
            position:relative; 
            text-align: center;
        }
        
        .pollbar {
            float: left;
            background-color:#ff6ed4ff; /* Poll bar colors! */
            height:8px;
        
        }
        
        .pollname {
            float: left; 
            height:16px;
            background-color:white;
            width:45%;
            margin-bottom:.5rem;
            margin-left:.5rem;
        }
        
        .radio {
            position:relative; 
            left:5px;
        }
        
        h3 {
            position:relative; 
            left:10px;
        }
        
        table {
            padding:.5rem;
            margin-top:.1rem;
        }

JS code:

var area = document.getElementById("area-to-hide");
var area2 = document.getElementById("area-to-show");
            
function buttonPress() {
    area.style.display = "none";
    area2.style.display = "block";
            }

Search bar

Have you ever wanted one of those seach bars that redirect you to the specific pages of your site? Here is my clunky recreation of a search bar that works on my site. It triggers at certain words that you input. For example if you put in search bar on my site "KDD" you'll get to this page!

HTML code:

<label for="search"><h1>Search</h1></label><input type="search" id="srchInput" name="srchInput" onkeypress="clickPress(event)"/><input type="submit" style="margin: 8px;" onclick="srch()" value="Search"/>

JS code:

function srch(){
    var srch1 = ["ketrindarkdragon", "kdd"]; //The [] contain the keywords for search results. You can add more keywords that lead to certain pages
    var srch2 = ["peppina", "peppina ramen"];
    //add more var if you want more page redirections

    srchValue = document.getElementById('srchInput').value;
    if (srch1.includes(srchValue.toLowerCase())){
        window.location.href = "KDDpage.html"; //I kept the pages from my site in the code as an example. Obviously, you should change those to your pages
    }
    else if (srch2.includes(srchValue.toLowerCase())){
        window.location.href = "Wiki/Peppina_Ramen.html";
    }
    //if you have added more var you need add more "if else" cases to the function. don't forget to lable "srch" properly in each case
    else{
        // do nothing
    }
}

Link that randomly leads to one of pre-determined pages

just a link that gets you to a random page from the list of pages that you can set up

HTML code:

<a href="#" onclick=randPage()>Random page</a>

JS code:

function randPage(){
   // Create an array of links to choose from:
    var sites = [
        'URL1.html',
        'URL2.html',
        'URL3.html',
        // you can add more pages
    ];
                
    var i = parseInt(Math.random() * sites.length);
        location.href = sites[i];
}