HiveBrain v1.2.0
Get Started
← Back to all entries
patternjavascriptMinor

Widget for collecting leads

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
widgetforleadscollecting

Problem

I have JavaScript widget code for collecting leads:



`// Create an immediately invoked functional expression to wrap our code
(function() {

// Define our constructor
this.Widget = function(options) {

this.widgetWrap = null;
this.widgetClose = null;
this.widgetHeaderTitle = null;
this.widgetInput = null;
this.widgetFormInputError = null;
this.widgetFormSubmit = null;
this.titleAnimationInterval = null;
this.overlay = null;
this.formWrap = null;
this.formIframe = null;

this.images = {
close: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAeCAYAAADQBxWhAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABARJREFUeNqkV0tIm0EQ3lSkviIKKoKKD3wmtsVaxYrkgdVSUYrx4sGbp15FrLcKooJepCC9exSPglAqvuKzvp+RSqA+aioEqbZan9OZn+zPJv+f36QOfJDdncy3OzszO78OAFgA8hhhRpQhDIgUhB7xB3GA2EbYEROI3/daI1INPEVMQXAyiyjQsqtF+B4eJnbEEzXbOhX3mhCfPG6U5O7ujo2OjrLx8XG2tbXF9vf32dnZGYuMjGTJycksLy+PmUwmVl5ezkJDQ0Vbu4h3iC9a7rUivovbHRoaAovFAlFRUbQ7vwgPD4eSkhIYGBgA3KRowo1448+9dA8OWdPthsbGRtDpdJpkaqivr4ejoyOR+BDxUo10lmscHx9DVVVV0GQi0N2wt7cnEq/4kr7iK1dXV1BXVyf9MT09HTo7OyXQby2SxMREaGtrg56eHsjNzZXmKisr4fT0VCR+K5J+47Pd3d3SHzBIYHZWPjysr69DVlaWKiEGE8zNzcm629vbEBcXJ621traKpD84aRmfoXugHZNyZmamIgeWl5chIyNDccKJiQmFbnFxsbQeExMDu7u74lINkbbzUVdXl2yMTjoyMqIwtrS0BNnZ2ZJOUlISTE5OKnQWFxchNjZWttXS0iIu9xLpKB9RaoinSEtLg/n5edUTV1dXA+atYm1jYwMMBoOXncLCQlFlgUjl2Oau9SVeWFhQGL+8vFTM7ezsQH5+vsJGdHS0qPaLSG/4KCQkRDVQKHLVTiwKBY/RaPQb3aJ4jbRSIiEhAaam1Gv/ysrKvSklyiMWoFxfX7Pb21vVNZrH/GYBSyDupTy02+2a7l1dXZWjOhD3agYSpcX09LSCBE+umFtbW4OcnByFDb1eL6qdEqkc91QvReWUlBTVe9zc3ASbzQYzMzOq9+t74oKCAq9UJ9IOPmpvb5cVIyIiYHh4WGGUyiFPC0onsVTKrQPOUSXitpqamsTlj0Rq4aODgwOIj4/3WwbphLyYi95QIy4qKpJzlPJXkFpe8J18pqOjQ1KmR5vKGReHw+E3D1NTU6UqxYVqLS/4zc3NIuFP8ZV5zWcvLi6gpqZG+gPdTW9vrwS1APE9Mb1QfX19svutViucnJyIpDbfR/yr+NpUVFQ86BEvLS0Fp9PpFQ5qncML0c3UPTQ0NPwXYW1tLRweHoqEx54nVLUFfeV5aGUZHByUGq6wsDBNIuwCpdTo7++Hm5sbrwJPb+h9LajV04Lm8Akqcfi2srGxMYYRzFwuFzs/P2e4EYYFhWFEM7PZzPBKGKaaaMvpaUE/B9rhf3hgs01l7FmwHT7hOWIuSDLK

Solution

Using CSS to setup your styles, and just giving items classes would cut this whole thing down to maybe a couple dozen lines. You can even do all your animation with CSS, thereby letting the browser just do what it's there to do.

Actually, on a further look to see what this is actually doing -- Unless there's some purpose here that I'm completely missing, and you haven't explained -- there's only about 4 or 5 total lines of code here, the rest is all just simulating things you can do purely in CSS/HTML.

You should absolutely re-think how you're approaching this from square 1. A few lines of HTML, a couple dozen lines of CSS, and 4 or 5 lines of Javascript would do this.

Context

StackExchange Code Review Q#82046, answer score: 2

Revisions (0)

No revisions yet.