Design a triangle on the screen. sides can be changed using CSS. User input- X and Y position to place the triangle on the screen size (1024* 768). Validate the user input(X, Y) and if value is higher than screen size, please show Alert message!(Entered value is out of screen!!)
screen.width is your screen width such as 1400.
screen.height is your screen height such as 900.
Use this:
function changePosition(){
let x=document.getElementById('x').value;
let y=document.getElementById('y').value;
if(x>screen.width || y>screen.height){
alert('Error: Wrong input!!');
return false; // stop running code
}
let triangle=document.getElementById('triangle');
triangle.style.left=x+'px';
triangle.style.top=y+'px';
}
div.triangle{
position:absolute; /* free to change element position in screen. */
right:0px;
top:0px;
width:100px;
height:50px;
border:solid 1px black;
}
<div id="triangle" class="triangle"></div>
<input id="x" placeholder="x" type="number">
<input id="y" placeholder="y" type="number">
<input type="button" onclick="changePosition();" value="change pos">
Firstly, one has to know the difference between screen, window, document, and viewport. Each provide a different width/height. I'll break them down briefly.
window.screen.width or window.screen.height: The actual screen size i.e. full screen size of your device's display. Readwindow.outerWidth or window.outerHeight: The size of browser. Readwindow.innerWidth or window.innerHeight: returns width/height (in pixels) including scrollbar and borders. Hence probably the size you need. Readx.clientWidth or x.clientHeight: e.g. document.getElementsByTagName('html')[0].clientWidth will return width/height minus the scrollbar, borders, and margins. Readwindow.document.width ReadSo having read and understood all this, you can decide which one to use.