[Solved] How to translate this JavaScript Code into jQuery?

First off, jQuery is JavaScript.

Most people try not to load it in their projects, to lower the overhead it brings so, usually, the request is the opposite of what you’re asking. One way of reducing this overhead is to load jQuery in its lite form.

But that’s not to say jQuery is all bad.

Besides shorter syntax, the special thing about jQuery, its best and worst feature, depending on where you look from, is that it brings a lot of flexibility to JavaScript and that’s preventing programmers from understanding js limitations. It’s help, but it’s constraint. For example, I never needed to learn closures before coding clean JavaScript, because jQuery would add them silently to my constructs whenever they were needed.

A clearly positive thing about jQuery is it provides quirks and workarounds for a few browser inconsistencies one doesn’t have to and shouldn’t need to know about, much like autoprefixer takes away most of the pain of prefixing CSS.

That being said, here’s what I believe to be a streamlined version of your code, in jQuery. You should only use it if you’re already loading jQuery in your project, IMHO.

$(window).on('mouseup', function(e){
  if (! $(e.target).closest('#dp1').is('#dp1')) {
    $('#dp1').css({
      height: 0,
      width: 0
    })
  }
})