10

Are there any tools like http://sharpkit.net/Live.aspx that will convert jquery to javascript? I have here methods that I have to convert to javascript and am seeking a little more information that can help me convert the jquery elements to javascript and if there is a tool in www that can help would be appreciated, thanks.

 addClass: function(element, className) {
                //$(element).addClass(className);
                //document.element.addClass(className);
                //element.addClass(className);
                element.(className)

            },
            removeClass: function(element, className) {
                $(element).removeClass(className);
            },
            toggleClass: function(element, className) {
                $(element).toggleClass(className);
            },
            css: function() {
                // read about the arguments object in javascript, very handy....
                // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments
                var element = arguments[0];
                switch(arguments.length) {
                    case 2:
                        $(element).css(arguments[1]);
                        break;
                    case 3:
                        $(element).css(arguments[1], arguments[2]);
                        break;
                    default:
                        throw 'simpleQuery.css() called with bad arguments';
                }
            }

        };


/////////here is the modifications where I need some help with the conversion js to jquery in css portion

(function(exports) {
    'use strict';

    // Your task is to ditch the jQuery from here and just use pure javascript.
    // I'd recommend the Mozilla Web API Docs for Element (and google of course)
    // https://developer.mozilla.org/en-US/docs/Web/API/Element

    exports.simpleQuery = {
        addClass: function(element, className) {
            //$(element).addClass(className);
            //document.element.addClass(className);
            //element.addClass(className);
            element.classList.add(className)

        },
        removeClass: function(element, className) {
            element.classList.remove(className);
        },
        toggleClass: function(element, className) {
            element.classList.toggle(className);
        },
        css: function() {
            // read about the arguments object in javascript, very handy....
            // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments
            var element = arguments[0];
            switch(arguments.length) {
                case 2:
                    $(element).css(arguments[1]);
                    break;
                case 3:
                    $(element).css(arguments[1], arguments[2]);
                    break;
                default:
                    throw 'simpleQuery.css() called with bad arguments';
            }
        }

    };
})(this);
bru02
  • 360
  • 2
  • 10
Cesar Mojarro
  • 147
  • 1
  • 2
  • 9
  • I know but I still would like to find a tool that converts jquery to javascript, would anyone have access to such tool. I have an assignment that I need to convert jquery script to javascript and since I am a novice, I still need too much help in order to understand. – Cesar Mojarro Mar 19 '15 at 17:05
  • 1
    An assignment is all about you doing the job by yourself, not using a tool. The purpose is to learn by doing. Anyway, this question is off-topic here for a bunch of reasons, so I doubt you get any answer. – xlecoustillier Mar 19 '15 at 17:08
  • See [here](http://stackoverflow.com/q/978799/1679537). – xlecoustillier Mar 19 '15 at 17:11
  • i have part of it working i just need help with the jquery in the css portion – Cesar Mojarro Mar 19 '15 at 17:28
  • anyone know how to start debugging to begin where to even code css argument for javascript? – Cesar Mojarro Mar 19 '15 at 20:04
  • Its no tool but maybe helpful to people ending up here. How to do it yourself for a list of common Jquery uses: YouMightNotNeedJquery.com – bets Aug 16 '18 at 09:04
  • please check this [here](http://www.workversatile.com/jquery-to-javascript-converter) – Arshad Shaikh May 06 '21 at 14:48
  • @Arshad Shaikh It didn't work for me. – BarryCap May 27 '21 at 13:20
  • @BarryCap Can you give me snippet so i can test it? – Arshad Shaikh Jun 01 '21 at 18:50
  • @Arshad Shaikh No need. I fixed my issue alone. Ok, I fixed **one** issue… If it pleases you, you can always fix my thing with [this](https://barrycap.com/box) (Ctrl + U to view code). The white circle normally moves with arrow keys. This jQuery code I stole scares me. – BarryCap Jun 02 '21 at 21:23

3 Answers3

0
$(document).ready(function() {
    var waterVolume
    function initialFill(){
        waterVolume = Math.floor(Math.random() * (150000 - 50000 + 1)) + 50000
        initialWidth = $('.resizable_tank').width()
        initialHeight = $('.resizable_tank').height()
        stabilizeWaterPipe(initialWidth,initialHeight)
    }

function stabilizeWaterPipe(currentWidth,currentHeight) {
    stableHeight = $('.resizable_tank_pipe').offset().top + $('.resizable_tank_pipe').height() + 8
    $('.stable_tank_pipe').css({height: (stableHeight-400)+"px", bottom: "-"+(stableHeight-400)+"px"})
    stabilizeCalc(currentWidth,currentHeight)
}

function stabilizeCalc(currentWidth,currentHeight) {
    stableTankWidth = $('.stable_tank').width()
    stableTankHeight = $('.stable_tank').height()
    increasedHeight = parseFloat(currentHeight - stableTankHeight)

    // I'm getting problem here to fill the water and transfer it to the cylinder in which it makes both the cylinder makes equal water level would u pls help me with some code.
}

$('.resizable_tank').resizable({
    handles: 'e,s,se',
    maxWidth: 800,
    minWidth: 180,
    minHeight: 400,
    resize: function(event, ui) {
        var currentWidth = ui.size.width;
        var currentHeight = ui.size.height;
        stabilizeWaterPipe(currentWidth,currentHeight)
    }
})

initialFill()

});
Syfer
  • 4,262
  • 3
  • 20
  • 37
-1

My classmate Ming was able to answer the css portion of the codeblock;

css: function() {
  // read about the arguments object in javascript, very handy....
  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments
  var element = arguments[0];
  switch(arguments.length) {
    case 2:
    var styles = arguments[1];

    for (var property in styles) {
      element.style[property] = styles[property];
    }
    break;
    case 3:
    element.style[arguments[1]] = arguments[2];
    break;
    default:
    throw 'simpleQuery.css() called with bad arguments';
  }
}
Martin54
  • 1,349
  • 2
  • 13
  • 34
Cesar Mojarro
  • 147
  • 1
  • 2
  • 9
-2

try this guid, its explaining how to convert : https://github.com/jackocnr/intl-tel-input/wiki/Converting-jQuery-to-JavaScript

Abd Rmdn
  • 480
  • 4
  • 11