jQuery Resize Function | Big Title

Question

For this project, I want to make a big title that stretches across the width of the page. However, it doesn't work and when I resize the page nothing happens to the title.

<!DOCTYPE html>
<html>
<head>
    <title>Big Title</title>
    <link href="https://fonts.googleapis.com/css?

family=Montserrat:300,400,700" rel="stylesheet">
    <script
    src="https://code.jquery.com/jquery-3.2.1.min.js"
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
    crossorigin="anonymous"></script>

<style>
body {
    font-family: 'Montserrat', sans-serif;
    height: 100vh;
    margin: 0;
}

.title {
    text-align: center;
    font-weight: 300;
    font-size: 0px;
    display: inline-block;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
</style>
</head>

<body>
    <h1 class="title">Big&nbsp;Title</h1>

<script>
function resizeTitle(className) {
    var done = false;
    var screenWidth = $(document).width();
    var wantedWidth = screenWidth * 0.8;
    var current;
    var toBe;


    while (done === false) {
        var titleWidth = $(className).width();

        if (titleWidth < wantedWidth) {
            current = parseInt($(className).css("fontSize"));
            console.log("Current: " + current);
            toBe = current + 1;
            toBe = toBe + "px";
            console.log("New: " + toBe);
            $(className).css("fontSize", toBe);
        } else if (titleWidth > wantedWidth) {
            current = parseInt($(className).css("fontSize"));
            console.log("Current: " + current);
            toBe = current - 1;
            toBe = toBe + "px";
            console.log("New: " + toBe);
            $(className).css("fontSize", toBe);
        } else {
            done = true;
        }
    }
}

$(document).ready(function(){
    resizeTitle(".title");

    $(window).resize(function(){
        resizeTitle(".title");
    }); 
});
</script>
</body>
</html>

Welcome to the Treehouse Community

Looking to learn something new?

Ray Karyshyn

Ray Karyshyn

jQuery Resize Function | Big Title