how to find x and y position in tablet resolution and validate with alert message with user input

Question

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!!)

Answer 1

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">

Answer 2

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.

• Screen: The actual physical screen of your device.
  • window.screen.width or window.screen.height: The actual screen size i.e. full screen size of your device's display. Read
• Window: The whole browser window. Its width/height includes the menubar, bookmarksbar, etc. and viewport.
  • window.outerWidth or window.outerHeight: The size of browser. Read
• Viewport: It is the rectangle area where things are visible to you i.e part of the webpage you're viewing which is currently visible.
  • window.innerWidth or window.innerHeight: returns width/height (in pixels) including scrollbar and borders. Hence probably the size you need. Read
  • x.clientWidth or x.clientHeight: e.g. document.getElementsByTagName('html')[0].clientWidth will return width/height minus the scrollbar, borders, and margins. Read
• Document: The whole webpage. Its width/height can exceed the viewport/window i.e. scrolling vertically/horizontally to see the rest of document on viewport.
  • Depreciated (can't use) window.document.width Read

So having read and understood all this, you can decide which one to use.