How to minimize this jquery code

[sampath_kumar_g]

$(document).ready(function(){

$( "table" ).css( "color", "#222222" );
$( "table" ).css( "font-size", "14.0px" );
$( "table" ).css( "font-family", "Arial , Helvetica , sans-serif" );
$( "div tr:first-child" ).css( "height", "45px" );
$( "div tr:nth-child(2)" ).css( "height", "45px" );
$("#height").css( "height", "24px" );
$("#height-two").css( "height", "24px" );
$("#height-three").css( "height", "24px" );
$("#height-four").css( "height", "24px" );
$("#trheight").css( "height", "17px" );
$("#trheightOne").css( "height", "17px" );

if (window.location.href.indexOf("rightcare") > -1) {
$(".hello a").parent().hide();
}
if (window.location.href.indexOf("screenings") > -1) {
$(".hello").css( "opacity", ".35" );
$(".hello a").parent().addClass("ui-state-disabled");
$('#careoptions').click(function() {
$("#infinity").parent().addClass( "checking" );
$("#validating").css( "display", "block" ).fadeOut(4000);
});
}
if (window.location.href.indexOf("nocondition") > -1) {
$(".hello").css( "opacity", ".35" );
$(".hello a").parent().addClass("ui-state-disabled");
$('#careoptions').click(function() {
$("#infinity").parent().addClass( "checking" );
$("#validating").css( "display", "block" ).fadeOut(4000);
});
}
if (window.location.href.indexOf("nocondition") > -1) {
$(".pageTitle a").hide();
}
if (window.location.pathname === '/content/sdmnew/publishing/careoptionstoolpage.html') {
//var pathname = window.location.pathname;
//console.log("hello", pathname);
$("#condition_input").prepend("<option value='Choose a Condition'>Choose a Condition</option>");
$("#slider-range1").addClass( "ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" );
$("#slider-range1").css( "aria-disabled", "false" );
$("#slider-range1").append("<div class='ui-slider-range ui-widget-header ui-corner-all' style='left: 0%; width: 100%;'></div><a class='ui-slider-handle ui-state-default ui-corner-all' href='#' name='min' value='0' style='left: 0%;'></a><a class='ui-slider-handle ui-state-default ui-corner-all' href='#' name='max' value='100' style='left: 100%;'></a>");
$("#slider-range2").addClass( "ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" );
$("#slider-range2").css( "aria-disabled", "false" );
$("#slider-range2").append("<div class='ui-slider-range ui-widget-header ui-corner-all' style='left: 0%; width: 100%;'></div><a class='ui-slider-handle ui-state-default ui-corner-all' href='#' name='min' value='0' style='left: 0%;'></a><a class='ui-slider-handle ui-state-default ui-corner-all' href='#' name='max' value='100' style='left: 100%;'></a>");
$("#legend1").append("<label id='costLabel$' style='width: 16.6667%; color: blue;'>$</label>");
$("#legend1").append("<label id='costLabel$$' style='width: 33.3333%; color: blue;'>$$</label>");
$("#legend1").append("<label id='costLabel$$$' style='width: 33.3333%; color: blue;'>$$$</label>");
$("#legend1").append("<label id='costLabel$$$$' style='width: 16.6667%; color: blue;'>$$$$</label>");
$("#legend2").append("<label id='timeLabelLow' style='width: 25%; color: blue;'>Low</label>");
$("#legend2").append("<label id='timeLabelMedium' style='width: 50%; color: blue;'>Medium</label>");
$("#legend2").append("<label id='timeLabelHigh' style='width: 25%; color: blue;'>High</label>");
$("#condition_input").prop("selectedIndex", 0).val();

//$("#condition_input").text('Success Stories');
//$("#condition_input").load(location.href + " #condition_input");
//$("#condition_input").focus();

}
});

[Ritesh_Mittal]

Hi @sampath_kumar_g ,

You can use Adobe Granite HTML Library Manager to achieve this.

https://experienceleague.adobe.com/docs/experience-manager-65/developing/introduction/clientlibs.htm...

also, check this thread-

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/aem-6-5-3-publish-html-lib...

[BrianKasingli · Accepted solution]

@sampath_kumar_g 

Your code can be refactored. Why are you writing CSS with Javascript, it seems inefficient?

The code can be refactored here, for example:

1.

$( "table" ).css( "color", "#222222" );
$( "table" ).css( "font-size", "14.0px" );
$( "table" ).css( "font-family", "Arial , Helvetica , sans-serif" );

can be written like:

$("table").css({ "color": "#222222", "font-weight": "14.0px", "font-family": "Arial , Helvetica , sans-serif" });

documentation: https://api.jquery.com/css/

2. I recommend braking up your code into meaningful named methods; which will give other developers in the future more clarity, for example
setTableStyle();

setScreenings();

setNoConditions();

3. remove useless // comments

These are just a few pointers, but I recommend you to take some front-end web development courses online, which will help you write better code. 

[arunpatidar]

Hi,

I would suggested injecting a class to the element and write css in separate css file.

e.g $( "table" ).addClass('mytable');

CSS file exmaple:

.mytable {

color:#222222
font-size:14px;

}
div .mytable tr:first-child{

height:45px

}