Need Help with JQuery MVC! URGENT

Question

1.00/5 (2 votes)

See more:

Hello, I have a JQuery/JavaScript MVC project I can't get working at all.
Goal: Create a CSS Border Radius Generator, using only JQuery, CSS and Bootstrap for UI.
Problem: Everything is written properly to my knowledge but still can't get it working. When the User changes a value for a Corner Radius, inside of the input, it updates the box in the middle and reprints the code at the bottom for the User to copy and paste. My issue is that it won't A.) Update the Demo box and B.) Display the CSS Code based on the values.

Here's my code, simply copy and paste into .html file and open in browser, nothing else needed:

HTML

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <style>
            table {
                margin-left: auto;
                margin-right: auto;
                margin-top: 20px;
            } .bl {
                width: 70px;
                float: right;
            } .br {
                width: 70px;
                float: left;
            } #demo_box {
                border: 1px solid #000;
                width: 100px;
                height: 100px;
                margin: 10px;
            } textarea {
                margin: -10px -15px -10px -15px;
                width:  290px;
            }
        </style>
        <script>
            //ViewModal
            var ViewModel = function () {
                function get_radius_top_left()    { return $('#radius_top_left_input'    ).val; }
                function get_radius_top_right()   { return $('#radius_top_right_input'   ).val; }
                function get_radius_bottom_left() { return $('#radius_bottom_left_input' ).val; }
                function get_radius_bottom_right(){ return $('#radius_bottom_right_input').val; }
                function set_radius_top_left(value) {
                    $('#radius_top_left_input').val = value;
                    $('#demo_box').attr('border-top-left-radius',value+'px');
                    $('#demo_box').attr('-webkit-border-top-left-radius',value+'px');
                    $('#demo_box').attr('-moz-border-radius-topleft',value+'px');
                }
                function set_radius_top_right(value) {
                    $('#radius_top_right_input').val = value;
                    $('#demo_box').attr('border-top-right-radius',value+'px');
                    $('#demo_box').attr('-webkit-border-top-right-radius',value+'px');
                    $('#demo_box').attr('-moz-border-radius-topright',value+'px');
                }
                function set_radius_bottom_left(value) {
                    $('#radius_bottom_left_input').val = value;
                    $('#demo_box').attr('border-bottom-left-radius',value+'px');
                    $('#demo_box').attr('-webkit-border-bottom-left-radius',value+'px');
                    $('#demo_box').attr('-moz-border-radius-bottomleft',value+'px');
                }
                function set_radius_bottom_right(value) {
                    $('#radius_bottom_right_input').val = value;
                    $('#demo_box').attr('border-bottom-right-radius',value+'px');
                    $('#demo_box').attr('-webkit-border-bottom-right-radius',value+'px');
                    $('#demo_box').attr('-moz-border-radius-bottomright',value+'px');
                }
                return {
                    get_radius_top_right    : get_radius_top_right   ,
                    set_radius_top_left     : set_radius_top_left    ,
                    get_radius_bottom_right : get_radius_bottom_right,
                    set_radius_bottom_left  : set_radius_bottom_left
                };
            };
            //ViewController
            var ViewController = function ( pModel ) {
                var model = pModel || new ViewModel();
                function update_view() {
                    modal.set_radius_top_left(    modal.get_radius_top_left()    );
                    modal.set_radius_top_right(   modal.get_radius_top_right()   );
                    modal.set_radius_bottom_left( modal.get_radius_bottom_left() );
                    modal.set_radius_bottom_right(modal.get_radius_bottom_right());
                    modal.get_css_code();
                }
                function get_css_code() {
                    var code = '';
                    if (modal.get_radius_top_left() > 0) {
                        code += 'border-top-left-radius: '         + modal.get_radius_top_left() + 'px;\n';//CSS3
                        code += '-webkit-border-top-left-radius: ' + modal.get_radius_top_left() + 'px;\n';//Webkit
                        code += '-moz-border-radius-topleft: '     + modal.get_radius_top_left() + 'px;\n';//Mozilla
                        if (modal.get_radius_top_right() > 0) {
                            code += 'border-top-right-radius: '         + modal.get_radius_top_right() + 'px;\n';//CSS3
                            code += '-webkit-border-top-right-radius: ' + modal.get_radius_top_right() + 'px;\n';//Webkit
                            code += '-moz-border-radius-topright: '     + modal.get_radius_top_right() + 'px;\n';//Mozilla
                            if (modal.get_radius_bottom_left() > 0) {
                                code += 'border-bottom-left-radius: '         + modal.get_radius_bottom_left() + 'px;\n';//CSS3
                                code += '-webkit-border-bottom-left-radius: ' + modal.get_radius_bottom_left() + 'px;\n';//Webkit
                                code += '-moz-border-radius-bottomleft: '     + modal.get_radius_bottom_left() + 'px;\n';//Mozilla
                                if (modal.get_radius_bottom_right() > 0) {
                                    code += 'border-bottom-right-radius: '         + modal.get_radius_bottom_right() + 'px;\n';//CSS3
                                    code += '-webkit-border-bottom-right-radius: ' + modal.get_radius_bottom_right() + 'px;\n';//Webkit
                                    code += '-moz-border-radius-bottomright: '     + modal.get_radius_bottom_right() + 'px;\n';//Mozilla
                                }
                            }
                        }
                    }
                    $('#code').val = code;
                }
                function init() {
                    $('#radius_top_left_input'    ).change(function () { update_view(); });
                    $('#radius_top_right_input'   ).change(function () { update_view(); });
                    $('#radius_bottom_left_input' ).change(function () { update_view(); });
                    $('#radius_bottom_right_input').change(function () { update_view(); });
                }
                return { init: init, model: model };
            };
            //PageLoad
            $(document).ready(function() {
                new ViewController().init();
            });
        </script>   
    </head>
    <body>
        <table class="list-group">
            <thead class="list-group-item">
                <tr><th><h3>Border Radius<br/>Generator CSS</h3></th></tr>
            </thead>
            <tbody class="list-group-item">
                <tr>
                    <td><input id="radius_top_left_input" type="number" class="form-control bl" min="0" title="Element's Top Left Border Radius" alt="Element's Top Left Border Radius" placeholder="4" value="0" autofocus="true" /></td>
                    <td></td>
                    <td><input id="radius_top_right_input" type="number" class="form-control br" min="0" title="Element's Top Right Border Radius" alt="Element's Top Right Border Radius" placeholder="4" value="" /></td>
                </tr>
                <tr>
                    <td></td><td><div id="demo_box"></div></td><td></td>
                </tr>
                <tr>
                    <td><input id="radius_bottom_left_input" type="number" class="form-control bl" min="0" title="Element's Bottom Left Border Radius" alt="Element's Bottom Left Border Radius" placeholder="4" value="" /></td>
                    <td></td>
                    <td><input id="radius_bottom_right_input" type="number" class="form-control br" min="0" title="Element's Bottom Right Border Radius" alt="Element's Bottom Right Border Radius" placeholder="4" value="" /></td>
                </tr>
            </tbody>
            <tfoot class="list-group-item" style="background: #ddd">
                <tr style="margin: 0px;">
                    <td colspan="3"><textarea id="code" class="form-control" rows="3" style="width:  290px" readonly></textarea></td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>

Posted 18-Jan-16 18:02pm

ShelbyP93

Add a Solution

Comments

ShelbyP93 19-Jan-16 0:55am

Any help at all!

Debojyoti Saha 19-Jan-16 1:44am

You have several errors ... By the way! try the below mentioned code.

Debojyoti Saha 19-Jan-16 8:12am

Please let me know whether it is working or not?

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

**Debojyoti Saha** · Answer 1 · 2016-01-18T19:43:00

table {
margin-left: auto;
margin-right: auto;
margin-top: 20px;
}

.bl {
width: 70px;
float: right;
}

.br {
width: 70px;
float: left;
}

#demo_box {
border: 1px solid #000;
width: 100px;
height: 100px;
margin: 10px;
}

textarea {
margin: -10px -15px -10px -15px;
width: 290px;
}

//Viewmodel
var model;
var ViewModel = function () {
function get_radius_top_left() { return $('#radius_top_left_input').val(); }
function get_radius_top_right() { return $('#radius_top_right_input').val(); }
function get_radius_bottom_left() { return $('#radius_bottom_left_input').val(); }
function get_radius_bottom_right() { return $('#radius_bottom_right_input').val(); }
function set_radius_top_left(value) {
$('#radius_top_left_input').val(value);
$('#demo_box').css('border-top-left-radius', + value + 'px');
$('#demo_box').css('-webkit-border-top-left-radius', + value + 'px');
$('#demo_box').css('-moz-border-radius-top-left', value + 'px');
}
function set_radius_top_right(value) {
$('#radius_top_right_input').val(value);
$('#demo_box').css('border-top-right-radius', value + 'px');
$('#demo_box').css('-webkit-border-top-right-radius', value + 'px');
$('#demo_box').css('-moz-border-radius-topright', value + 'px');
}
function set_radius_bottom_left(value) {
$('#radius_bottom_left_input').val(value);
$('#demo_box').css('border-bottom-left-radius', value + 'px');
$('#demo_box').css('-webkit-border-bottom-left-radius', value + 'px');
$('#demo_box').css('-moz-border-radius-bottomleft', value + 'px');
}
function set_radius_bottom_right(value) {
$('#radius_bottom_right_input').val(value);
$('#demo_box').css('border-bottom-right-radius', value + 'px');
$('#demo_box').css('-webkit-border-bottom-right-radius', value + 'px');
$('#demo_box').css('-moz-border-radius-bottomright',value + 'px');
}
return {
get_radius_top_left: get_radius_top_left,
get_radius_top_right: get_radius_top_right,
set_radius_top_left: set_radius_top_left,
set_radius_top_right: set_radius_top_right,
get_radius_bottom_right: get_radius_bottom_right,
get_radius_bottom_left: get_radius_bottom_left,
set_radius_bottom_right: set_radius_bottom_right,
set_radius_bottom_left: set_radius_bottom_left
};
};
//ViewController
var ViewController = function (pModel) {
model = pModel || new ViewModel();
function update_view() {
model.set_radius_top_left(model.get_radius_top_left());
model.set_radius_top_right(model.get_radius_top_right());
model.set_radius_bottom_left(model.get_radius_bottom_left());
model.set_radius_bottom_right(model.get_radius_bottom_right());
get_css_code();
}
function get_css_code() {
var code = '';
if (model.get_radius_top_left() > 0) {
code += 'border-top-left-radius: ' + model.get_radius_top_left() + 'px;\n';//CSS3
code += '-webkit-border-top-left-radius: ' + model.get_radius_top_left() + 'px;\n';//Webkit
code += '-moz-border-radius-topleft: ' + model.get_radius_top_left() + 'px;\n';//Mozilla
}
if (model.get_radius_top_right() > 0) {
code += 'border-top-right-radius: ' + model.get_radius_top_right() + 'px;\n';//CSS3
code += '-webkit-border-top-right-radius: ' + model.get_radius_top_right() + 'px;\n';//Webkit
code += '-moz-border-radius-topright: ' + model.get_radius_top_right() + 'px;\n';//Mozilla
}
if (model.get_radius_bottom_left() > 0) {
code += 'border-bottom-left-radius: ' + model.get_radius_bottom_left() + 'px;\n';//CSS3
code += '-webkit-border-bottom-left-radius: ' + model.get_radius_bottom_left() + 'px;\n';//Webkit
code += '-moz-border-radius-bottomleft: ' + model.get_radius_bottom_left() + 'px;\n';//Mozilla
}
if (model.get_radius_bottom_right() > 0) {
code += 'border-bottom-right-radius: ' + model.get_radius_bottom_right() + 'px;\n';//CSS3
code += '-webkit-border-bottom-right-radius: ' + model.get_radius_bottom_right() + 'px;\n';//Webkit
code += '-moz-border-radius-bottomright: ' + model.get_radius_bottom_right() + 'px;\n';//Mozilla
}
$('#code').val(code);
}

function init() {
$('#radius_top_left_input').change(function () { update_view(); });
$('#radius_top_right_input').change(function () { update_view(); });
$('#radius_bottom_left_input').change(function () { update_view(); });
$('#radius_bottom_right_input').change(function () { update_view(); });
}
return { init: init, model: model };
};
//PageLoad
$(document).ready(function () {
new ViewController().init();
});

Border RadiusGenerator CSS