We Keep Coding

Dry-er Way of Writing a Bunch of If Else Statements

I have a variable placement that can be set to the following values: top, top-left, top-right, bottom, bottom-left, bottom-right, right, right-top, right-bottom, left, left-top, left-bottom.
I have another variable const trigger = triggerRef.current.getBoundingClientRect(); so I can determine where the trigger element is, and based on that, set the placement variable accordingly.
I am currently using a lot of if else statements. For instance:
if (placement === "top" && trigger.top < 75 && windowWidth - trigger.right > 75 && trigger.left > 175)
{ placement = "bottom";
} else if ( placement === "top" && windowWidth - trigger.right < 75 && windowHeight - trigger.bottom > 75 && trigger.top < 75)
{ placement = "left-top"; }
...and the code goes on and on
What's a "DRY-er" way of doing this?

Consolidate the logic in these tests and only check once. Assign a variable if instead of repeating the same calculations:
if (placement === "top" && trigger.top < 75 ) {
const triggerFromWidth = windowWidth - trigger.right;
if (triggerFromWidth > 75 && trigger.left > 175) {
placement = "bottom";
} else if (triggerFromWidth < 75 && windowHeight - trigger.bottom > 75) {
placement = "left-top";
}
}

Check if element is in viewport doesn't work properly

I've got three elements - every element is hidden from the start. If user scrolls onto them, they show up. I wrote a function that checks if element named bubbles is inside viewport. If it is, then function should show the rest of the elements.
But it doesn't. Element boxes is higher than element bubbles, and it also fires a function. But it shouldn't. I have no idea where the problem is.
document.addEventListener("scroll", checkViewport);
function checkViewport() {
var bubbles = document.getElementsByClassName("bubble-chat");
var boxes = document.getElementsByClassName("boxes");
var avatar = document.getElementsByClassName("msg-avatar");
for (let i = 0; i < avatar.length; i++) {
var bounding = bubbles[i].getBoundingClientRect();
if (
bounding.top >= 0 &&
bounding.left >= 0 &&
bounding.right <= (window.innerWidth || document.documentElement.clientWidth) &&
bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight)
) {
avatar[i].style.opacity = "1";
bubbles[i].style.opacity = "1";
(function(i) {
setTimeout(function() {
bubbles[i].style.display = "none";
boxes[i].style.opacity = "1";
}, 3000);
})(i);
}
}
}

you should also consider the scrolling positioning as the bounding box is relative to that.
Fixed code:
bounding.top >= document.documentElement.scrollTop &&
bounding.left >= 0 &&
bounding.right <= (window.innerWidth || document.documentElement.clientWidth) &&
bounding.bottom <= document.documentElement.scrollTop + (window.innerHeight || document.documentElement.clientHeight)

Well, I feel stupid. The code was okay all the time. I just commented one of the msg-text divs, and turns out, that it was the reason for the code to break.

How to compare Negative numbers in javascript

I want to compare validation range in between -180 to 180 .
If number is less than -180 and greater than 180 then it should show error.
I have written below code for this -
if((markerPoint[0] && parseInt(markerPoint[0],10) < -180 || parseInt(markerPoint[0],10) > 180)) {
this.latlngError.push("Invalid coordinates");
} else {
this.isLanLngValid = true;
}
But this is returning incorrect comparison.

I want to compare validation range in between -180 to 180
For number between -180 and 180 the number must be greater then -180 and less then 180, so change the comparison.
if(markerPoint[0] && parseInt(markerPoint[0],10) > -180 && parseInt(markerPoint[0],10) < 180) {

try this JsFiddle
var answer = prompt("type a number");
func();
function func() {
if (answer>=-180&&answer<=180) {
alert("Yes! We made it!");
} else {
answer = prompt("Invalid try agian");
func();
}
}

Replace below code it will work for sure.
if(markerPoint[0]>=-180 && markerPoint[0]<=180)

One problem with your code is that in JavaScript && has higher precedence than ||. (See the table here.) Thus, the logic is evaluated as if it were parenthesized:
if (
(markerPoint[0] && parseInt(markerPoint[0],10) < -180)
||
parseInt(markerPoint[0],10) > 180)
{
You can use parentheses to change that:
if(markerPoint[0] && (parseInt(markerPoint[0],10) < -180 || parseInt(markerPoint[0],10) > 180)) {
Then the if test will pass if markerPoint[0] is a truthy value and if it evaluates to something outside the range [-180, 180].

You can use Math.abs() instead:
if (markerPoint[0] && Math.abs(parseInt(markerPoint[0],10)) > 180)
Edit: As noted by #TedHopp, the visible issue with your current code seems to be operator precedence. && has higher precedence than ||. Using Math.abs() bypasses the issue.
If that doesn't solve the problem, then more code needs to be supplied for debugging.

How to add one more condition in this if block?

How to add one more condition in this if block ??
I want to run in the if block only if the quantity_traded value is greater than 800 and also less than 20000
This is my code
var difference = -3000;
var quantity_traded = 800 ;
var stockprice = 300;
if (difference >= -4000 && quantity_traded >= 800 && stockprice>=300)
{
alert('include');
}
else
{
alert('dont include');
}
https://jsfiddle.net/2ok0fcax/
Could you please let me know how to match the quantity_traded value is greater than 800 and also less than 20000 condition

just add quantity_traded < 20000 to your list of conditions
if (difference >= -4000 && quantity_traded >= 800 && stockprice>=300 quantity_traded < 20000) {
...
}
https://jsfiddle.net/2ok0fcax/1/

Change font size depending on number of characters and resolution

I want some script for my app to change the font-size of a title depending on number of characters and the resolution, so to use different font-sizes in the script depending on window resolution and the number of characters of the title.
This is what I have right now:
$(document).ready(function () {
$(".boxes.concierto h2.nombreartista span a").each(function () {
var numChars = $(this).text().length;
if ((numChars >= 1) && (numChars < 20)) {
$(this).css("font-size", "20px");
}
else if ((numChars >= 20) && (numChars < 30)) {
$(this).css("font-size", "18px");
$(this).css("line-height", "20px");
}
else if ((numChars >= 30) && (numChars < 60)) {
$(this).css("font-size", "15px");
$(this).css("line-height", "18px");
}
else if ((numChars >= 100) && (numChars < 140)) {
$(this).css("font-size", "0.9em");
}
else {
$(this).css("font-size", "0.8em");
}
});
});
I have tried to add:
if($(window).width() >= 1300){
// do your stuff
}
at the begining and end of my script but is not working.
Any idea how can I join this two functions correctly?
Thank you so much

you probably want to create a condition where either the number of characters or the resolution change the text size.
use the or-operator || in your if condition
if ( ((numChars >= 20) && (numChars < 30)) || $(window).width() >= 1300 ) {
$(this).css("font-size", "20px");
}
a better way
the conditions might get quite complex. a better way would be to setup a formula like:
var textSize = 1/numChars * $(window).width() * factor;
if you want the text size to change in steps you can do something like this:
var stepSize = 3;
var steppedTextSize = Math.floor(textSize/stepSize) * stepSize;
the steppedTextSize will have values in increments of 3. like: 12, 15, 18, ...