1+ < html >
2+ < head >
3+ < meta charset ="UTF-8 ">
4+ < title > DpiCalc</ title >
5+ < link rel ="stylesheet " href ="style.css ">
6+ < script src ='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js '> </ script >
7+ </ head >
8+
9+ < body >
10+ < h1 > Target Pixel Width</ h1 >
11+ < div class ="input ">
12+ < input type ="number " id ="targetPixelWidth " value ="1920 ">
13+ </ div >
14+ < h1 > Target Actual Width (in cm):</ h1 >
15+ < div class ="input ">
16+ < input type ="number " id ="targetActualWidth ">
17+ </ div >
18+
19+ < h1 > Element Pixel Width:</ h1 >
20+ < div class ="input ">
21+ < input type ="number " id ="elementPixelWidth ">
22+ </ div >
23+
24+ < h1 > Element Pixel Height:</ h1 >
25+ < div class ="input ">
26+ < input type ="number " id ="elementPixelHeight ">
27+ </ div >
28+
29+ < button id ="getOutput "> Output</ button >
30+
31+ < h2 > Element Actual Width (in cm)</ h2 >
32+ < ul id ="elementActualWidth ">
33+ < li > no input yet</ li >
34+ </ ul >
35+ < h2 > Element Actual Height (in cm)</ h2 >
36+ < ul id ="elementActualHeight ">
37+ < li > no input yet</ li >
38+ </ ul >
39+ < h2 > Target Dpi</ h2 >
40+ < ul id ="targetDpi ">
41+ < li > no input yet</ li >
42+ </ ul >
43+
44+ < script type ="text/javascript ">
45+ $ ( "#getOutput" ) . click ( function ( ) {
46+ var targetPixelWidthValue = document . getElementById ( 'targetPixelWidth' ) . value ;
47+ var targetActualWidthValue = document . getElementById ( 'targetActualWidth' ) . value ;
48+ var elementPixelWidthValue = document . getElementById ( 'elementPixelWidth' ) . value ;
49+ var elementPixelHeightValue = document . getElementById ( 'elementPixelHeight' ) . value ;
50+
51+ var targetDpi = ( targetPixelWidthValue * 2.54 ) / targetActualWidthValue ;
52+ var elementActualWidth = ( elementPixelWidthValue * 2.54 ) / targetDpi ;
53+ var elementActualHeight = ( elementPixelHeightValue * 2.54 ) / targetDpi ;
54+
55+ var nodeElementActualWidth = document . createElement ( "LI1" ) ;
56+ var textnodeElementActualWidth = document . createTextNode ( elementActualWidth ) ;
57+ nodeElementActualWidth . appendChild ( textnodeElementActualWidth ) ;
58+ var listItem1 = document . getElementById ( "elementActualWidth" ) ;
59+ listItem1 . replaceChild ( nodeElementActualWidth , listItem1 . childNodes [ 1 ] ) ;
60+
61+ var nodeElementActualHeight = document . createElement ( "LI2" ) ;
62+ var textnodeElementActualHeight = document . createTextNode ( elementActualHeight ) ;
63+ nodeElementActualHeight . appendChild ( textnodeElementActualHeight ) ;
64+ var listItem2 = document . getElementById ( "elementActualHeight" ) ;
65+ listItem2 . replaceChild ( nodeElementActualHeight , listItem2 . childNodes [ 1 ] ) ;
66+
67+ var nodetargetDpi = document . createElement ( "LI1" ) ;
68+ var textnodetargetDpi = document . createTextNode ( targetDpi ) ;
69+ nodetargetDpi . appendChild ( textnodetargetDpi ) ;
70+ var listItem3 = document . getElementById ( "targetDpi" ) ;
71+ listItem3 . replaceChild ( nodetargetDpi , listItem3 . childNodes [ 1 ] ) ;
72+ } ) ;
73+ </ script >
74+ </ body >
75+ </ html >
0 commit comments