Pashion project • 6 min read

Frontend code including recent games using javascript.

<style>
    .main-header {
        background-image: url("https://joshthinh.github.io/Asian-United-Frontend/images/background.png");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        height: 100vh;
        max-width: 100%;
        float: left;
    }

    .box {
        color: white;
        margin-top: 20px;
        margin-left: 20px;
    }

    .game-button {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .box-center {
        color: white;
        margin: 0;
        text-align: center;
        margin-top: 100px;
    }
    .box-center-header {
        color: white;
        margin: 0;
        text-align: center;
        margin-top: 0px;
    }

    .btn-primary {
        transition: border-width 0.6s linear;
        background-color: transparent; 
        color:white;
        margin:5px;
        font-size: 20px;
    }

    .border-button {
        border: solid 5px white;
        transition: border-width 0.6s linear;
        background-color: transparent; 
        color:white;
        margin:5px;
        margin-top: 0px;
        font-size: 50px;
        display:inline;
    }
    .border-button:hover { border-width: 10px; }
    
  
    .border-button-small {
        border: solid 5px white;
        transition: border-width 0.6s linear;
        background-color: transparent; 
        color:white;
        margin:5px;
        font-size: 25px;
    }
    .border-button-small:hover { border-width: 10px; }
</style>
<header class="second-header">
    <div class="box-center-header">
    <button class="btn-primary-right"  onclick="navigate('https://joshthinh.github.io/Asian-United-Frontend/game.html')">Games</button>
    <button class="btn-primary" onclick="navigate('https://joshthinh.github.io/Asian-United-Frontend/about.html')">About</button>
    <button class="btn-primary-left" onclick="navigate('https://joshthinh.github.io/Asian-United-Frontend/index.html')">Home</button>
    </div>
    <hr>
    <h1>
        <div class="box-center">GAMES</div>
        <div class="box-center">
           
            <button id='battleshipgame' class="border-button" onclick="navigate('https://joshthinh.github.io/Asian-United-Frontend/guess_game.html')"> 
                <a href="guess_game.html">
                <img src="https://joshthinh.github.io/Asian-United-Frontend/images/X.png" alt="Battleship Game" width="50px" height="50px">
            </a>Battleship Game</button>


          
            <button id='funnygame' class="border-button" onclick="navigate('https://joshthinh.github.io/Asian-United-Frontend/feeling-funny.html')">  <a href="https://joshthinh.github.io/Asian-United-Frontend/feeling-funny.html">
                <img src="https://joshthinh.github.io/Asian-United-Frontend/images/Funny.png" alt="Feeling Funny Game" width="50px" height="50px">
            </a>Im Feelin' Funny</button>
          
            <button id='binarygame' class="border-button" onclick="navigate('https://joshthinh.github.io/Asian-United-Frontend/binary_game.html')">
                <a href="https://joshthinh.github.io/Asian-United-Frontend/binary_game.html">
                    <img src="https://joshthinh.github.io/Asian-United-Frontend/images/Binary.png" alt="Binary Game" width="50px" height="50px">
                </a>Binary Game</button>

            </div>
            <div class="box-center">
            <button  id='cookiegame' class="border-button" onclick="navigate('https://joshthinh.github.io/Asian-United-Frontend/CookieClicker.html')"><a href="https://joshthinh.github.io/Asian-United-Frontend/CookieClicker.html">
                <img src="https://joshthinh.github.io/Asian-United-Frontend/images/Cookie.png" alt="Cookie Clicker" width="50px" height="50px">
            </a>Cookie Clicker</button>
           
            <button id='aimgame' class="border-button" onclick="navigate('https://joshthinh.github.io/Asian-United-Frontend/aim_trainer.html')"> <a href="https://joshthinh.github.io/Asian-United-Frontend/aim_trainer.html">
                <img src="https://joshthinh.github.io/Asian-United-Frontend/images/Aim.png" alt="Aim Trainer" width="50px" height="50px">
            </a>Aim Trainer</button>
        </div>
    </h1>
    <div>
        <h1 class="box">Recent Games-></h1>
        <div class="counter">
            <div style="color:white;" id="counter-value"></div>
        </div>
      
    </div>
    <h1>
        <button class="btn btn-primary" id="reset">Reset Recent Games</button>
    </h1>
</header>

<script>
    function navigate(url) {
        window.location.href = url;
    }

const counterValue = document.getElementById(‘counter-value’);

const battleshipgame = document.getElementById(‘battleshipgame’); battleshipgame.addEventListener(‘click’, () => { localStorage.counter = “<button class=’border-button-small’ onclick="navigate(‘https://joshthinh.github.io/Asian-United-Frontend/guess_game.html’)">Battleship Game</button>” + localStorage.counter; counterValue.innerHTML = localStorage.counter; });

const funnygame = document.getElementById(‘funnygame’); funnygame.addEventListener(‘click’, () => { localStorage.counter=”<button class=’border-button-small’ onclick="navigate(‘https://joshthinh.github.io/Asian-United-Frontend/feeling-funny.html’)">Im Feelin’ Funny</button>” +localStorage.counter; counterValue.innerHTML = localStorage.counter; });

const binarygame = document.getElementById(‘binarygame’); binarygame.addEventListener(‘click’, () => { localStorage.counter = “<button id=’binarygame’ class=’border-button-small’ onclick="navigate(‘https://joshthinh.github.io/Asian-United-Frontend/binary_game.html’)">Binary Game</button>” +localStorage.counter; counterValue.innerHTML = localStorage.counter; });

const cookiegame = document.getElementById(‘cookiegame’); cookiegame.addEventListener(‘click’, () => { localStorage.counter= “<button id=’cookiegame’ class=’border-button-small’ onclick="navigate(‘https://joshthinh.github.io/Asian-United-Frontend/CookieClicker.html’)">Cookie Clicker</button>“+localStorage.counter; counterValue.innerHTML = localStorage.counter; });

const aimgame = document.getElementById(‘aimgame’); aimgame.addEventListener(‘click’, () => { localStorage.counter=” <button id=’aimgame’ class=’border-button-small’ onclick="navigate(‘https://joshthinh.github.io/Asian-United-Frontend/aim_trainer.html’)">Aim Trainer</button>“+localStorage.counter; counterValue.innerHTML = localStorage.counter; });

const resetBtn = document.querySelector(‘#reset’);

if(!localStorage.counter){ localStorage.counter = “”; } counterValue.innerHTML = localStorage.counter;

// To reset the counter to zero resetBtn.addEventListener(‘click’, reset);

function reset() { localStorage.counter = “”; counterValue.innerHTML = localStorage.counter; }