code.html

<!doctype html>
<html lang="en" class="h-100">

<head>
    <title>App Name: A Coding Project By Mike Lee</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <script src="https://kit.fontawesome.com/5db21ba9c6.js" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="/css/site.css">
    <link rel="icon" type="image/png" href="img/favicon-32x32.png">    
    <link rel="stylesheet" href="css/prism.css">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Tomorrow:wght@700&display=swap" rel="stylesheet">
</head>

<body class="d-flex flex-column h-100">


<!-- NAV SECTION -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top">
    <div class="container-fluid">
        <a class="navbar-brand" href="#"><img src="img/REWINDLogo-small.JPG" class="d-inline-block align-text-top" height="25px"><span class="styleFont"> REWIND</span></a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse"
            aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
            <ul class="navbar-nav me-auto mb-2 mb-md-0">
                <li class="nav-item">
                    <a class="nav-link" href="index.html">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="app.html">The App</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="code.html">The Code</a>   
                </li>
                <li class="nav-item">
                    <a class="nav-link" target="_blank" href="#">Git Repo</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" target="_blank" href="#">Portfolio</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<!-- MAIN SECTION -->
<main class="flex-shrink-0">
    <div class="container py-5 px-5 mt-5">
        <h2 class="border-1 border-bottom border-dark">The Code for REWIND</h2>
        <div class="row row-cols-1 row-cols-lg-2">
            <div class="col-lg-8">
                <pre class="line-numbers">
                    <code class="language-javascript">

function getValue(){
document.getElementById("alert").classList.add("invisible");
let userString = document.getElementById("userString").value;
let revString = reverseString(userString);
displayString(revString);
}

function reverseString(userString){
    let revString = [];
    for (let index = userString.length - 1; index >= 0; index--) {
        revString.push(userString[index]);
    }
    return revString.join('');
}

function displayString(revString){
    document.getElementById("msg").innerHTML = `${revString}`;

    document.getElementById("alert").classList.remove("invisible");
}
                    </code>
                </pre>
            </div>
            <div class="col-lg-4">
                <br>
                <h5>getValue - Controller Function</h5>
                <p>This block of code is the controller for the application. It retrieves the user's text from the DOM, and then executes the next two functions.</p>
                <br><br>
                <h5>reverseString - Logic Function</h5>
                <p>This block of code contains the logic of the application. Using a for loop, each character of the user's text is reversed, pushed into an array, and then returned as a re-joined string.</p>
                <br><br>
                <h5>displayString - View Function</h5>
                <p>This block of code adds the reversed text to the appropriate place in the DOM & then removes the "invisible" class to allow the User to see their reversed text.</p>
            </div>
        </div>
    </div>
</main>

<!-- FOOTER SECTION -->
<footer class="footer mt-auto py-3 sticky-footer">
    <div class="container-fluid">
        <div class="row row-cols-sm-1 row-cols-lg-3 gy-2">
            <div class="col d-flex align-items-center justify-content-start text-light">
                <div>
                    <span class="text-muted">&copy;2021 Mike Lee (mike@mlee.tech)</span>
                </div>
            </div>
            <div class="col d-flex align-items-center justify-content-center">
                <!-- <a href="https://mlee-tech.netlify.app/" target="_blank" style="color: white; text-decoration: none;"> -->
                <img src="/img/mLogoTransparent.png" height="50px" alt="Mike Lee Tech">
                <h6 style="color: white;">MLee.Tech</h6>
                <!-- </a> -->
            </div>
            <div class="col d-flex align-items-center justify-content-end">
                <div class="row">
                    <div class="col"><a href="#" target="_blank" class="social"><i class="fab fa-linkedin fa-2x text-muted"></i></a></div>
                    <div class="col"><a href="#" target="_blank" class="social"><i class="fab fa-github fa-2x text-muted"></i></a></div>
                </div>
            </div>
        </div>
        
    </div>
</footer>

 <!-- Bootstrap JS -->
 <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
 integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
 integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous">
</script>
<script src="js/site.js"></script>
<script src="js/prism.js"></script>
<script>
    Prism.plugins.NormalizeWhitespace.setDefaults({
        'remove-trailing': true,
        'remove-indent': true,
        'left-trim': true,
        'right-trim': true
    })  
</script>
</body>

</html>