REMOTE CONTROL CAR LEAGUE (RCCL)

In Summer 2023 I was enrolled in web design classes. The final project for my Information Sciences & Technology (IST) class was to create an example online shopping website. I chose to create a fictional remote controlled (RC) car league website that hosts competitions as well as an online store.

This learning opportunity allowed me to understand proper website layout and composition as well as to explore HTML, CSS, and JavaScript. One of the major concepts the course taught me was how to style websites using both HTML and CSS. I utilized CSS for the class projects to enforce that website style is visually consistent and the underlaying source code is concise and maintainable. I also learned how to add interactive elements using Javascript as demonstrated through the example competition sign-up page on the website. The RC car images were designed to enlarge on hover within the shop pages as another project requirement. Considerations were also implemented to resize page elements appropriately when the browser window is larger or smaller.

Knowing the fundamentals of website design is a valuable skill since even if a site is largely created using a drag-and-drop design application, there is always the potential that certain aspects of a webpage might require developer intervention at the source code level. Below is a good example where I wanted to showcase my project source code in this HTML page, but desired something more stylized than just inserting plain text or document links. I was able to utilize the hilite.me website to help generate HTML code snippets that I then manually embedded as custom HTML within my webpage here.

Launch Website

Website example images generated by IMG2GO AI Art Generator

RCCL WEBSITE SOURCE CODE

Press [SHIFT]+[Mousewheel] to scroll left and right.

style.css

/*
style.css                                                                                                                               
© 2023 Brenton Vavrek
*/

body {
    background-color: rgb(184, 236, 255);
}
/*sets basic container element*/
#container {
    text-align: center;
    border: solid;
    border-color: #F64B2C;
    border-width: 5px;
    background-color: rgb(23, 23, 94);
}
/*sets container for links*/
.linkContainer {
    text-align: center;
    border: solid;
    border-color: #F64B2C;
    border-width: 5px;
    background-color: rgb(23, 23, 94);
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-around;
}
/*header and paragraph mods*/
h1 {
    font-size: 55pt;
    font-family: 'Monoton', serif;
    color: #F64B2C;
}

h2 {
    font-size: 40pt;
    font-family: 'Kelly Slab', serif;
    color: #F64B2C;
    text-align: center;
}

h3 {
    font-size: 25pt;
    font-family: 'Kelly Slab', serif;
    color: #F64B2C;
    text-align: center;
}

p {
    font-size: 18pt;
    font-family: 'Kelly Slab', serif;
}
/*styles footer*/
footer {
    background-color: #F64B2C;
    color: ivory;
    position:fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
    font-size: 15pt;
    justify-content: center;
    padding: 20px;
}
.element { pointer-events: none; }
/*styles links*/
a:link {
    font-size: 30pt;
    font-family: 'Kelly Slab', serif;
    color: blanchedalmond;
}

a:visited {
    color: lightcoral;
}

a:hover {
    color: ivory;
}

a:active {
    color: blueviolet;
}
/*creates container for some text elements*/
.textContainer {
    border: dashed;
    border-color: #F64B2C;
}

.textContainer p{
    padding-left: 1%;
    padding-right: 1%;
}
/*centers text*/
#center {
    text-align: center;
}
/*creates container for image*/
.imgContainer {
    height: 400px;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    left: auto;
    right: auto;
}
/*seperate image container for track images*/
.trackContainer {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 40%;
}
/*container for input elements*/
.inputContainer {
    height: 200px;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    left: auto;
    right: auto;
}
/*box classes for the shop images*/
.box {
    width: 275px;
    height: 275px;
    display: block;
}

.box img {
    border: solid;
    border-color: #F64B2C;
    border-width: 5px;
    max-width: 100%;
    height: auto;
    width: auto;
}
/*increases image size on hover*/
.box img:hover {
    -webkit-transform:scale(1.2);
    transform:scale(1.2);
}
/*makes hidden text appear*/
.text {
    color:#F64B2C;
    position: relative;
    font-size: 20pt;
    font-family: 'Kelly Slab', Serif;
    background-color: rgb(23, 23, 94);
    border: solid;
    text-align: center;
}

.overlay {
    opacity: 0;
    transition: .5s ease;
}

#box1:hover .overlay {
    opacity: 1;
}

#box2:hover .overlay {
    opacity: 1;
}

#box3:hover .overlay {
    opacity: 1;
}

#box4:hover .overlay {
    opacity: 1;
}
/*styles table for shop*/
table {
    width: 90%;
    border: solid;
    border-color:#F64B2C;
    background-color: rgb(23, 23, 94);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    font-size: 16pt;
    font-family: 'Kelly Slab', serif;
}

td {
    color: ivory;
    border: solid 2px;
    border-color:#F64B2C;
    text-align: center;
}

th {
    color:#F64B2C;
}
/*styles input elements*/
input {
    font-size: 20pt;
    font-family: 'Kelly Slab', serif;
}

button {
    font-size: 15pt;
    font-family: 'Kelly Slab', serif;
    background-color: #F64B2C;
    border: solid;
}
/*list styles*/
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: rgb(23, 23, 94);
    border: solid;
    border-color: #F64B2C;
    left: auto;
    right: auto;
}

ul li {
    list-style-type: none;
    color: white;
    border: solid;
    border-color: #F64B2C;
    text-align: center;
    font-size: 16pt;
    font-family: 'Kelly Slab';
}
/*media screens for responsive design*/
@media screen and (max-width: 1100px) and (min-width: 850px) {

    #stage1{
        display: block;
    }
    #stage2{
        display: none;
    }
    .text {
        font-size: 16px;
    }


}
/*changes for mobile config*/
@media screen and (max-width: 849px) {

    .imgContainer {
        flex-direction: column;
        align-items: center;
        justify-content:flex-start;
        height: auto;
        padding-bottom: 15px;
        padding-top: 15px;
    }
    
    .linkContainer a{
        font-size: 16pt;
    }

    h1 {
        font-size: 25pt;
    }

    h2 {
        font-size: 20pt;
    }
    
    h3 {
        font-size: 16pt;
    }

    #stage1{
        display: none;
        font-size: 10px;
    }
    #stage2{
        display: block;
        font-size: 15px;
    }

    input {
        font-size: 20pt;
    }


}

interact.js

/*
interact.js                                                                                                                               
© 2023 Brenton Vavrek
*/

//Creates listed names for queue list
function makeList (){
    var queue = document.querySelector("#queue").value;
    listNode = document.getElementById('list');
    liNode = document.createElement ("LI");
    liNode.append (queue);
    listNode.append (liNode);
    console.log(listNode);

    //stores names in local storage
    var list = document.getElementById('list').childNodes;
    var SignUpList = [];
    for (var i=0; i < list.length; i++) {
        var arrValue = list[i].innerHTML;
        SignUpList.push(arrValue);
    }
    localStorage.setItem('keepList', JSON.stringify(SignUpList))
    console.log(SignUpList)
}

//loads list names on revisit
window.onload = function(){
    var SignUpList = [];
    var list = document.getElementById('list');
    SignUpList = JSON.parse(localStorage.getItem('keepList'));

    //retrieve names from local storage
    if (SignUpList.length !== 0){
        SignUpList.forEach((item) => {
            let li = document.createElement("li");
            li.innerText = item;
            list.appendChild(li);
        }); 
    }
}

//Clears names from list
function clearList (){
    document.getElementById("list").innerHTML = "";
    localStorage.clear('keepList')
}

index

index.html

<!--
index.html
© 2023 Brenton Vavrek
-->
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="format-detection" content="telephone=no">
    <title>RCCL</title>
    <link rel="stylesheet" href="style.css" type="text/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=Kelly+Slab&amp;family=Monoton&amp;display=swap" rel="stylesheet">
</head>
<body>
    <div id="container">
        <h1>R.C.C.L.</h1>
        <h2>Remote Control Car League</h2>
    </div>
    <div class="linkContainer">
        <a href="index.html">Home</a>
        <a href="shop.html">Shop</a>
        <a href="competitions.html">Competitions</a>
        <a href="maps.html">Tracks</a>
    </div>
    <br>
    <br>
    <div class="textContainer">
        <h2>About us</h2>
        <p>We are the Remote Control Car League (RCCL). This organization was created based on a local interest in the hobby of RC Cars. We began by hosting local competitions with small cash prizes, and have since evolved into a fully legitimized company which offers both competitions and merchandise.</p>
        <p>Competitions are held every other weekend at our own local courses located on property. No prior experience is required to enter, just bring your RC car and have fun! More information is available on our Competitions page.</p>
        <br>
        <p id="center">All in all, the goal of our organization is to encourage people to get together and engage in a friendly environment while enjoying their hobby. Remember to have fun out there and we hope you enjoy yourself.</p>
        <h3>Now, off to the races!</h3>
    </div>
    <br>
    <br>
    <br>
    <footer id="stage2">
        (555) 555-5555 - 1013 Autobahn Rd. Austin, Tx
    </footer>
    <footer id="stage1">
        Contact us at (555)-555-5555 - Visit us at 1013 Autobahn Rd. in Austin, Texas
    </footer>
    
</body>

shop.html

<!DOCTYPE html>
<head>

shop.html

<!--
shop.html
© 2023 Brenton Vavrek
-->
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no">
    <title>RC Shop</title>
    <link rel="stylesheet" href="style.css" type="text/css">
    <link rel="stylesheet" href="style.css" type="text/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=Kelly+Slab&amp;family=Monoton&amp;display=swap" rel="stylesheet">
</head>
<body>
    <div id="container">
        <h1>Shop</h1>
        <h2>Purchase an RC car at a great price!</h2>
    </div>
    <div class="linkContainer">
        <a href="index.html">Home</a>
        <a href="shop.html">Shop</a>
        <a href="competitions.html">Competitions</a>
        <a href="maps.html">Tracks</a>
    </div>
    <h2 id="center">Featured</h2>
    <div class="imgContainer">
        <div class="box" id="box1"><img src="Blue RC Car.jpg" alt="Blue RC car with black controller next to it"><div class="overlay"><div class="text">Blue Car</div></div></div>
        <div class="box" id="box1"><img src="Red RC Car.png" alt="Blue RC car with black controller next to it"><div class="overlay"><div class="text">Red Car</div></div></div>
        <div class="box" id="box1"><img src="Green RC Car.png" alt="Blue RC car with black controller next to it"><div class="overlay"><div class="text">Green Car</div></div></div>
    </div>
    <br>
    <h2 id="center">Full Catalog</h2>
    <table>
        <tr>
            <th>Model</th>
            <th>Controller</th>
            <th>Comes with Battery</th>
            <th>Price</th>
        </tr>
        <tr>
            <td>Red Car 1</td>
            <td>Advanced Controller</td>
            <td>✓</td>
            <td>$119</td>
        </tr>
        <tr>
            <td>Blue Car 1</td>
            <td>Advanced Controller</td>
            <td>✓</td>
            <td>$119</td>
        </tr>
        <tr>
            <td>Green Car 1</td>
            <td>Advanced Controller</td>
            <td>✓</td>
            <td>$119</td>
        </tr>
        <tr>
            <td>Basic Car 1</td>
            <td>Basic Controller</td>
            <td>X</td>
            <td>$75</td>
        </tr>
        <tr>
            <td>Basic Car 2</td>
            <td>Basic Controller</td>
            <td>X</td>
            <td>$75</td>
        </tr>
        <tr>
            <td>Basic Car 3</td>
            <td>Basic Controller</td>
            <td>X</td>
            <td>$75</td>
        </tr>
    </table>
    <br>
    <br>
    <br>
    <footer id="stage2">
        (555)-555-5555 - 1013 Autobahn Rd. Austin, Tx
    </footer>
    <footer id="stage1">
        Contact us at (555)-555-5555 - Visit us at 1013 Autobahn Rd. in Austin, Texas
    </footer>
    
</body>

competition.html

<!--
competition.html
© 2023 Brenton Vavrek
-->
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no">
    <title>RC Competitions</title>
    <link rel="stylesheet" href="style.css" type="text/css">
    <link rel="stylesheet" href="style.css" type="text/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=Kelly+Slab&amp;family=Monoton&amp;display=swap" rel="stylesheet">
</head>
<body>
    <div id="container">
        <h1>Competitions</h1>
        <h2>Sign up for our competitions below!</h2>
    </div>
    <div class="linkContainer">
        <a href="index.html">Home</a>
        <a href="shop.html">Shop</a>
        <a href="competitions.html">Competitions</a>
        <a href="maps.html">Tracks</a>
    </div>
    <h3>Sign up below for our local competitions!</h3>
    <p id="center">Just type your name in the box below and it will be added to the queue for the next available competition!</p>
    <p id="center">The next competition will take place on Saturday, August 5th.</p>
    <div class="inputContainer">
        <input type="text" id="queue">
        <button onclick="makeList()">Click to enter your name</button>
        <button onclick="clearList()">Click to clear the queue</button>
    </div>
    <ul id="list"></ul>
    <script src="interact.js"></script>
    <br>
    <br>
    <br>
    <br>
    <footer id="stage2">
        (555)-555-5555 - 1013 Autobahn Rd. Austin, Tx
    </footer>
    <footer id="stage1">
        Contact us at (555)-555-5555 - Visit us at 1013 Autobahn Rd. in Austin, Texas
    </footer>
    
</body>

maps.html

<!--
maps.html
© 2023 Brenton Vavrek
-->
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no">
    <title>Track Maps</title>
    <link rel="stylesheet" href="style.css" type="text/css">
    <link rel="stylesheet" href="style.css" type="text/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=Kelly+Slab&amp;family=Monoton&amp;display=swap" rel="stylesheet">
</head>
<body>
    <div id="container">
        <h1>Track Maps</h1>
        <h2>Our tracks, utilized at every competition</h2>
    </div>
    <div class="linkContainer">
        <a href="index.html">Home</a>
        <a href="shop.html">Shop</a>
        <a href="competitions.html">Competitions</a>
        <a href="maps.html">Tracks</a>
    </div>

    <h2 id="center">Crawler Track</h2>
    <p id="center">This track was designed for crawler focused cars. The goal is to climb the mound successfully and with good pacing. Competitions utilizing this track are typically much more casual and slow paced.</p>
    <img src="RC Crawler Track.jpeg" class="trackContainer">
    <br>
    <h2 id="center">Racing Track</h2>
    <p id="center">For those who are more interested in fast pace racing, this track will offer a more competitive and high-octane experience.</p>
    <img src="RC Race Track.jpg" class="trackContainer">
    <br>
    <br>
    <br>
    <br>
    <footer id="stage2">
        (555)-555-5555 - 1013 Autobahn Rd. Austin, Tx
    </footer>
    <footer id="stage1">
        Contact us at (555)-555-5555 - Visit us at 1013 Autobahn Rd. in Austin, Texas
    </footer>
    
</body>