Code Preview

These are snippets of code from the core of this project. Features such as animations and dynamic DOM changes are not included here.

//sunset hills algorithm
function sunsetHills(buildingHeights) {
    let sunsetHillsOutput = new Array();
    let highestBuilding = 0;

    //loop through array
    for (i = 0; i < buildingHeights.length; i++) {

        //is there a building taller than this building? If so, no sunlight. Otherwise, sunlight.
        if (buildingHeights[i] <= highestBuilding) {
            sunsetHillsOutput.push(false);
            continue;
        }
        //This is the tallest building so far, so we add it to the variable "highest building" for reference
        highestBuilding = buildingHeights[i];

        sunsetHillsOutput.push(true);
    }

    //output will be an array of booleans
    return sunsetHillsOutput;
}

    <div class="content content-centered">
            <div class="container full-height" id="content-container">
                <div class="row text-center">
                    <div class="col">
                        <h1>Sunset Hills</h1>
                        <p>Enter a value for the height of each building to see which building can see the sunset.</p>
                    </div>
                </div>
                <div class="row bottom-buffer input-row">
                    <div class="col-lg-2 offset-lg-1 col-sm-12">
                        <input type="text" class="building-input input-string"/>
                    </div>
                    <div class="col-lg-2 col-sm-12">
                        <input type="text" class="building-input input-string"/>
                    </div>
                    <div class="col-lg-2 col-sm-12">
                        <input type="text" class="building-input input-string"/>
                    </div>
                    <div class="col-lg-2 col-sm-12">
                        <input type="text" class="building-input input-string"/>
                    </div>
                    <div class="col-lg-2 col-sm-12">
                        <input type="text" class="building-input input-string"/>
                    </div>
                </div>
                <div class="row">
                    <div class="col-3">
                        <img src="Images/sun.svg" />
                    </div>
                    <div class="col">
                        <div class="buildings-container" id="buildings-container">
                            <div class="building"></div>
                            <div class="building"></div>
                            <div class="building"></div>
                            <div class="building"></div>
                            <div class="building"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    .buildings-container {
    height:30rem;
    width: 100%;
    white-space: nowrap;
}

.building {
    transition: height 0.3s ease-out;
    transform-origin: bottom;
    color: #202529;
    display: inline-block;
    vertical-align: bottom;
    width: 18%;
    margin-left: 1%;
    margin-right: 1%;
}

.sun {
    background-color: #fcd088;
}
.no-sun {
    background-color: #8a7148;
}