Namaste!
Introduction
Today, we created a tool “Get Screen Resolution | Screen size with html & Javascript “. Then done some work with css.
we created it simply and desogned as a web tool.
Get Screen Resolution | Screen Size YouTube Tutorial
Screen Resolution | Screen Size Tool Source Code Download
Create a blank .html file then
Put below code inside your <body> Your Code Here </body> tag.
.html file code
<div class="container">
<p>Your Screen Resolution</p>
<div id="resolution"></div>
</div>Now, Put below code inside <style> Your Code Here </style> or inside .css file
.css file code
body{
background-color: #3378ff;
}
.container{
width: 350px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
p{
color: rgb(233, 233, 233);
font-size: 18px;
font-weight: 600;
}
#resolution{
position: relative;
width: 300px;
color: #3378ff;
background-color: #fff;
left: 20px;
font-weight: 600;
font-size: 35px;
padding: 25px 0;
border-radius: 8px;
box-shadow: 0 20px 30px rgba(11, 14, 56, 0.151);
}Now, the main code for this tool is Javascript
put this code inside your script file
.js file code
let resolution = document.getElementById("resolution");
resolution.textContent = `${window.screen.width} x ${window.screen.height}`;Thank You!
