1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Release GSC RGBa Generator (Source)

Discussion in 'Web Development' started by vRice, Jul 31, 2017.

  1. vRice

    vRice Active Member

    52
    82
    18
    Credits:
    506
    I'd like to begin by crediting Please login or register to view links or downloads! for the original idea. The only reason I created one myself is because I need to learn a lot of jQuery before I go back to uni in September. I've tried to make it look relatively decent and formatted the back-end to make sure it's readable.

    Preview:
    Please login or register to view links or downloads!

    Source Files:
    HTML & jQuery
    HTML:
    <!DOCTYPE html>
    
    <!--
            RGBA Generator by vRice
            Original Idea by thahitcrew
    -->
    
    <html>
        <title>RGB Slider</title>
       
        <link rel="stylesheet" type="text/css" href="style.css" />
        <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
       
        <!-- Importing the jQuery file for scripts -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script>
            $(document).ready(function(e) {
                /*
                    Set some variables to be used throughout
               
                    [0] = Slider
                    [1] = Value
                    [2] = Border
                    [3] = Preview
                    [4] = Header
                */
               
                var element = [];
               
                element[0] = document.getElementsByClassName('slider');
                element[1] = document.getElementsByClassName('value');
                element[2] = document.getElementsByClassName('colour-container');
                element[3] = document.getElementById('preview');
                element[4] = document.getElementById('header');
               
                /*
                    Credit to Onur Yildirim from StackOverflow
                    https://stackoverflow.com/questions/35969656/how-can-i-generate-the-opposite-color-according-to-current-color
                */
               
                function invertColor(hex, bw) {
                    if (hex.indexOf('#') === 0) {
                        hex = hex.slice(1);
                    }
    
                    if (hex.length === 3) {
                        hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
                    }
                    if (hex.length !== 6) {
                        throw new Error('Invalid HEX color.');
                    }
                    var r = parseInt(hex.slice(0, 2), 16),
                        g = parseInt(hex.slice(2, 4), 16),
                        b = parseInt(hex.slice(4, 6), 16);
                    if (bw) {
                        return (r * 0.299 + g * 0.587 + b * 0.114) > 186
                            ? '#000000'
                            : '#FFFFFF';
                    }
    
                    r = (255 - r).toString(16);
                    g = (255 - g).toString(16);
                    b = (255 - b).toString(16);
    
                    return "#" + padZero(r) + padZero(g) + padZero(b);
                }
               
                /*
                    Sets the colours and changes the HTML to display the information
                */
               
                function setColour(){
                    var newVal = [];
                    var RGB = "RGB";
                    var hexVal = "#";
                    var tempVal;
                   
                    for(i = 0; i < 3; i++){
                        tempVal = element[0][i].value;
                        newVal[i] = parseFloat((tempVal / 255).toFixed(2));
                        hexVal += fillSpace(parseInt(element[0][i].value, 10).toString(16));
                   
                        element[1][i].value = RGB[i] + " " + element[0][i].value;
                    }
                   
                    $('#preview h5:nth-child(1)').text('RGB (' + newVal[0] + ', ' + newVal[1] + ', ' + newVal[2] + ')');
                    element[3].style.color = invertColor(hexVal, true);
                   
                    for(i = 0; i < 4; i++){
                        element[2][i].style.borderColor = hexVal;
                    }
                   
                    element[3].style.backgroundColor = hexVal;
                    element[3].style.borderColor = hexVal;
                    element[4].style.backgroundColor = hexVal;
                    element[4].style.color = invertColor(hexVal, true);
                }
               
                /*
                    Sets the alpha and changes the HTML to display the information
                */
               
                function setAlpha(){
                    var value = element[0][3].value;
                    var tempVal;
                   
                    tempVal = element[0][3].value;
                    element[3].style.opacity = tempVal / 100;
                    element[1][3].value = "A " + tempVal;
                   
                    $('#preview h5:nth-child(2)').text('ALPHA (' + (value / 100) + ')');
                }
               
                /*
                    When the page loads, generate a random colour to make it funky
                */
               
                element[0][3].value = Math.floor(Math.random() * 100);
               
                for(i = 0; i < 3; i++){
                    element[0][i].value = Math.floor(Math.random() * 255);
                }
               
                /*
                    Pad out the RGB value to make the HEX code valid
                */
               
                function fillSpace(int){
                    return ((int.length < 2) ? ("0" + int) : int);
                }
               
                /*
                    Add events for all of the RGBa sliders
                */
               
                element[0][3].addEventListener('mousemove', function(){
                    setAlpha();
                }, false);
               
                for(i = 0; i < 3; i++){
                    element[0][i].addEventListener('mousemove', function(){
                        setColour();
                    }, false);
                }
               
                setColour();
                setAlpha();
            });
        </script>
       
        <body>
            <div id="header">
                <p>GSC RGBA GENERATOR</p>
            </div>
           
            <div id="container">
                <div id="red-container" class="colour-container">
                    <div class="colour-info">
                        <h5>
                            <output class="value">R 0</output>
                        </h5>
                    </div>
                    <input class="slider" type="range" min="0" max="255" id="b" step="1" value="0">
                </div>
    
                <div id="green-container" class="colour-container">
                    <div class="colour-info">
                        <h5>
                            <output class="value">G 0</output>
                        </h5>
                    </div>
                    <input class="slider" type="range" min="0" max="255" id="b" step="1" value="0">
                </div>
    
                <div id="blue-container" class="colour-container">
                    <div class="colour-info">
                        <h5>
                            <output class="value">B 0</output>
                        </h5>
                    </div>
                    <input class="slider" type="range" min="0" max="255" id="b" step="1" value="0">
                </div>
               
                <div id="alpha-container" class="colour-container">
                    <div class="colour-info">
                        <h5>
                            <output class="value">A 0</output>
                        </h5>
                    </div>
                    <input class="slider" type="range" min="0" max="100" id="b" step="1" value="100">
                </div>
    
                <div id="preview">
                    <!--
                        Preview windoe for the colour
                    -->
                    <h5></h5>
                    <h5></h5>
                </div>
               
                <div id="info">
                    <h5><a href="http://kyleminto.uk/portfolio">by Kyle Minto</a></h5>
                </div>
            </div>
        </body>
    </html>
    
    CSS
    Code:
    *{
        padding: 0px;
        margin: 0px;
        font-family: "Raleway";
        font-feature-settings: "lnum" 1;
    }
    
    * p, * h5{
        transition: 1s;
    }
    
    body{
        background-color: #ececec;
    }
    
    #header{
        padding: 15px;
        color: white;
        background-color: rgb(25, 125, 150);
    }
    
    #header p{
        font-weight: bold;
        margin-left: 50px;
    }
    
    #preview{
        width: 315px;
        height: 70px;
        display: inline-block;
        border: 1px solid;
        text-align: center;
        vertical-align: middle;
        color: white;
    }
    
    #preview h5{
        margin-top: 11px;
    }
    
    .colour-container{
        background-color: white;
        width: 100%;
        margin: 5px 0px;
        border: 1px solid rgb(25, 125, 150);
    }
    
    #container{
        margin: 50px auto;
        width: 315px;
    }
    
    #info a{
        text-decoration: none;
        color: black;
        padding: 0px;
        transition: .5s;
    }
    
    #info a:hover{
        padding: 0px 15px;
    }
    
    .colour-info{
        display: inline-block;
        padding: 30px 15px;
    }
    
    .slider{
        display: inline-block;
        float: right;
        padding: 27px 0px;
        margin-right: 15px;
        width: 70%;
    }
    
    #red-container{
        color: red;
    }
    
    #green-container{
        color: green;
    }
    
    #blue-container{
        color: blue;
    }
    

    Please login or register to view links or downloads!
     
    Last edited: Aug 4, 2017
    TryRed, Candy and CabCon like this.
  2. CabCon

    CabCon Head Administrator Staff Member

    3,307
    2,003
    263
    Credits:
    73,310
    Good job :y:! It looks quite good (also your portfolio site and logos :handok:)
    The only criticism in my opinion is that the slider max/min got space: [​IMG]
    I personally would remove this space, it's a bit confusing.
     
    vRice and Candy like this.
  3. vRice

    vRice Active Member

    52
    82
    18
    Credits:
    506
    Yeah that's the padding for the slider elements, I'll probably change it to margin though which means the spaces will be no more! haha

    EDIT - The website has been updated, a couple of little back-end changes and the front-end has been redesigned a little!
     
    Last edited: Aug 4, 2017
    CabCon likes this.
  4. CabCon

    CabCon Head Administrator Staff Member

    3,307
    2,003
    263
    Credits:
    73,310
    Good job, now it's better. :y:
     
    vRice likes this.
  5. Candy

    Candy NOSTALGIC Donator

    482
    352
    238
    Credits:
    2,678
    Tho I wont use this to be honest, I do like the look of it. Good work.
     
    vRice likes this.
  6. Freezee

    Freezee Trial Moderator Staff Member

    66
    91
    118
    Credits:
    351
    Very great work, very useful and will help many people. Will be using it for my menus :wink:
     
    CabCon and vRice like this.
  7. VerTical

    VerTical Head Member Donator

    936
    1,206
    253
    Credits:
    2,667
    Cool!
     
    CabCon likes this.
  8. TryRed

    TryRed Member

    13
    9
    8
    Credits:
    70
    I tried to use it on my smartphone and it didn't worked... Do you know why? (I have the OnePlus One)
     
    CabCon likes this.
  9. vRice

    vRice Active Member

    52
    82
    18
    Credits:
    506
    Ayy OnePlus buddies, I've got the OnePlus 3!

    I'm unsure why it doesn't work though, this was a quick project and I didn't make the website dynamic so it's only for desktops at the moment unfortunately!
     
    CabCon likes this.
  10. CabCon

    CabCon Head Administrator Staff Member

    3,307
    2,003
    263
    Credits:
    73,310
    Got the One. :smile: OnePlus buddies!
     
    vRice likes this.

Share This Page