Web Development - Colorfun

This is a project created for gaining hands-on practice with HTML and CSS mostly. It is like a game where each user can interact with different boxes and each will respond differently. So, let's see the base HTML.

<!DOCTYPE html>
<html lang="en">

<!-- Head Section & Favicon -->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="./style.css" type="text/css" rel="stylesheet">
    <!-- <link href="./mobstyle.css" type="text/css" rel="stylesheet"> -->
    <title>Colorfun</title>
    <link rel="apple-touch-icon" sizes="180x180" href="./assets/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="./assets/favicon/favicon-16x16.png">
    <link rel="manifest" href="./assets/favicon/site.webmanifest">
    <link rel="mask-icon" href="./assets/favicon/safari-pinned-tab.svg" color="#5bbad5">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">
</head>
<body>
    <!-- Logo Section -->
    <header>
        <img id="logo" src="./assets/colorfun.png" alt="Logo">
    </header>

    <main> 
        <!-- First Box Section -->
        <div class="box" id="a">A</div>
        <div class="box" id="b">B</div>
        <div class="box" id="c">C</div>
        <div class="box" id="d">D</div>
        
        <!-- Second Box Section -->
        <div class="box" id="e">E</div>
        <div class="box" id="f">F</div>
        <div class="box" id="g">G</div>
        <div class="box" id="h">H</div>

    </main>
    
    <!-- Buttons -->
    <footer>
        <input type="submit" value="HEX Generator" onclick="generateColor()">
        <input type="submit" value="Reset" onclick="reset()"> </br>
        <span class="colorRange">Red</span><input type="range" min="0" max="255" class="slider" id="sred"> </br>
        <span class="colorRange">Green</span><input type="range" min="0" max="255" class="slider" id="sgreen"> </br>
        <span class="colorRange">Blue</span><input type="range" min="0" max="255" class="slider" id="sblue"> </br>  
        <p id="hidden">Something has vanished!</p>
        <p id="notice">"Play around with the boxes. Have some fun with it!"</p>
        <p id="author">Created with ❤️ and Enthusiasm by <a href="https://github.com/mariosdaskalas" target="_blank"><span>@mariosdaskalas</span></a></p>
    </footer>
</body>

<!-- JS File -->
<script src="./main.js"></script>
</html>

The HTML is pretty straightforward and simple. We create a bunch of Divs with different id's, 2 buttons, and a slider that responds according to the logic of the JS file. Now, let's see the CSS.

/* Mobile first styles go first */

/* Desktop styles go second */

body {
    background-color: #212B1E;
    height: 900px;
}
@media screen and (min-width: 913px) {
    body {
        background-color: #212B1E;
        height: 1000px;
}
}
header {
    text-align: center;
    margin: 0 auto;
}
@media screen and (min-width: 913px) {
    header {
        text-align: center;
        margin: 0 auto;
}
}
#logo {
    width: 300px;
    height: 90px;
}
@media screen and (min-width: 913px) {
    #logo {
        width: 400px;
        height: 120px;
    }
}
main {
    display: grid;
    grid-template-columns: repeat(2, 100px);
    grid-template-rows: repeat(4, 100px);
    grid-gap: 0.5rem;
    justify-content: center;
    margin-top: 1rem;
    height: 470px;
}
@media screen and (min-width: 913px) {
    main {
        display: grid;
        grid-template-columns: repeat(4, 250px);
        grid-template-rows: repeat(4, 250px);
        grid-gap: 1.5rem;
        justify-content: center;
        margin-top: 1rem;
        height: 550px;
}
}
.box {
    background-color: white;
    border: 1px solid grey;
    border-radius: 0.3rem;
    text-align: center;
    cursor: pointer;
    font-size: 150%;
    display: flex;
    justify-content: center;
    align-items: center;
}
@media screen and (min-width: 913px) {
    .box {
        background-color: white;
        border: 1px solid grey;
        border-radius: 0.3rem;
        text-align: center;
        cursor: pointer;
        font-size: 150%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
@media only screen and (min-width: 913px) {
    footer {
        text-align: center;
    }
}
footer {
    text-align: center;
}
input[type=submit] {
    padding: 10px;
    border-radius: 0.5rem;
    font-style: italic;
    margin: 0 0.5rem;
    cursor: pointer;
    margin-bottom: 1rem;
}
.input[type=submit]:hover {
    cursor: pointer;
}
.colorRange {
    color: white;
    padding: 10px;
    font-size: 100%;

}
@media screen and (min-width: 913px) {
    .colorRange {
        color: white;
        font-size: 110%;
    }
}
input[type=range] {
    width: 80%;
}
@media screen and (min-width: 913px) {
    input[type=range] {
        width: 20%;
    }
}
#hidden {
    color: red;
    font-style: italic;
    font-size: 120%;
    display: none;
}
/* Animations */
@keyframes transla {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(1deg);
    }
    50% {
        transform: rotate(2deg);
    }
    75% {
        transform: rotate(2.5deg);
    }
    100% {
        transform: rotate(3deg);
    }
}
#b:hover {
    animation-name: transla;
    animation-duration: 2.5s;
}
/* Animations */
@keyframes translc {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(10deg);
    }
    50% {
        transform: rotate(25deg);
    }
    75% {
        transform: rotate(45deg);
    }
    100% {
        transform: rotate(90deg);
    }
}
#c:hover {
    animation-name: translc;
    animation-duration: 2.5s;
}
/* Animations */
@keyframes transle {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-45deg);
    }
    50% {
        transform: rotate(-90deg);
    }
    75% {
        transform: rotate(-45deg);
    }
    100% {
        transform: rotate(90deg);
    }
}
#e:hover {
    animation-name: transle;
    animation-duration: 2.5s;
}
#g:hover {
    border-radius: 100%;
}
#notice {
    color: red;
    font-style: italic;
    font-size: 120%;
}
#author {
    text-align: center;
    font-size: 90%;
    background-color: rgb(236, 232, 232);
    margin: 0 auto;
    width: 100%;
    height: 2.5rem;
    position: relative;
    border-radius: 1rem;
}
@media screen and (min-width: 913px) {
    #author {
    text-align: center;
    font-size: 110%;
    background-color: rgb(236, 232, 232);
    margin: 0 auto;
    width: 45%;
    height: 1.7rem;
    position: relative;
    border-radius: 1rem;
}
}
a, a:visited {
    color: black;
}
a:hover {
    font-style: italic;
    font-weight: bold;
    font-size: 110%;
}

At CSS, we follow the approach of mobile-first design. We use Grid and Flex to display our content. Keyframes are a must to rotate some of our divs. We also add a bit of CSS animations.

Finally, let's see the JS source code.

/* RGB Slider */

let sliderRed = document.getElementById("sred");
sliderRed.addEventListener("input", sliderChange);
let sliderGreen = document.getElementById("sgreen");
sliderGreen.addEventListener("input", sliderChange);
let sliderBlue = document.getElementById("sblue");
sliderBlue.addEventListener("input", sliderChange);

/* Change background colors in real time by slideer */
function sliderChange() {
    console.log(`Red: ${sliderRed.value} / Green : ${sliderGreen.value} / Blue: ${sliderBlue.value}`);
    let rgb = `rgb(${sliderRed.value}, ${sliderGreen.value}, ${sliderBlue.value})`;
    console.log(`RGB: ${rgb}`);
    document.getElementById("a").style.backgroundColor = rgb;
    document.getElementById("f").style.backgroundColor = rgb;
    document.getElementById("c").style.backgroundColor = rgb;
    document.getElementById("h").style.backgroundColor = rgb;
}

/* Reloads the webpage */

function reset() {
    location.reload();
}

/* HEX Color Analysis */

/* Choose a random number */
function rand(min, max) {
    let randomNumber = Math.random() * (max-min) + min;
    return Math.floor(randomNumber);
};

/* Generate hex color code,
   assign background color to a box
*/
function generateColor() {
    let hex = ['A', 'B', 'C', 'D', 'E', 'F', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
    let color = "#";

    for(let i = 0; i <=5 ; i++) {
        let index = rand(0, 15);
        color = color + hex[index];
    }
    console.log(color);
    document.getElementById("e").style.backgroundColor = color;
    document.getElementById("b").style.backgroundColor = color;
    document.getElementById("g").style.backgroundColor = color;
    document.getElementById("d").style.backgroundColor = color;
};

// Set ID's
let a = document.getElementById("a");
let hidden = document.getElementById("hidden");
let d = document.getElementById("d");
let f = document.getElementById("f");
let g = document.getElementById("g");
let h = document.getElementById("h");

/* Checked if element is clicked
   then set properties
*/
a.addEventListener("click", () => {
    a.style.display = "none";
    hidden.style.display = "block";
});

d.addEventListener("click", () => {
    d.innerHTML = "Whoohoo, hidden text has been revealed!";
    d.style.fontSize = "100%";
    d.style.fontStyle = "italic";
});

f.addEventListener("click", () => {
    f.style.opacity = "0.3";
});

g.addEventListener("click", () => {
    g.innerHTML = "💖 💖 💖";
});
h.addEventListener("click", () => {
    h.style.backgroundColor = "black";
});

At first, we add an event listener in our slider to change the color of our div's dynamically. Then, we generate a random color using Math.random() combined with the ability to hide one of our div with the click of a button. That's all! Hope you enjoyed this project.

💡

Github

💡

Live Demo

Tagged in:

Web Development

Web Development - Colorfun

About the Author

Marios Daskalas

Check latest articles from this author:

Web Development - MovieFinz

Web Development - GuessMe

Web Development - Clocked

Comments

Previous Article

Web Development - Random Quote Generator

Next Article

Web Development - Todo List App

Web Development - MovieFinz

Web Development - GuessMe

Web Development - Clocked

Press ESC to close

Or check our Popular Categories...

Like what you read?

Subscribe to our Newsletter

About the Author

Check latest articles from this author:

Comments

Related Articles

Previous Article

Next Article