├── index.html ├── style.css └── script.js /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Double sign and signup form 8 | 9 | 10 | 11 |
12 |
13 |

Converting Centimeter to Inches

14 |
15 | 16 |
17 |
18 | 19 |
20 |
21 | 22 |
23 |
24 |
25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | 2 | * { 3 | padding: 0; 4 | margin: 0; 5 | box-sizing: border-box; 6 | } 7 | 8 | #page { 9 | background: linear-gradient(rgb(30, 136, 224), rgb(72, 225, 72), rgb(173, 125, 173)); 10 | height: 100vh; 11 | display: flex; 12 | } 13 | 14 | .container { 15 | border: 1px solid black; 16 | width: 60%; 17 | position: relative; 18 | text-align: center; 19 | left: 280px; 20 | top: 200px; 21 | height: 400px; 22 | } 23 | 24 | .input { 25 | margin-bottom: 40px; 26 | } 27 | 28 | .input input { 29 | width: 200px; 30 | height: 40px; 31 | background: transparent; 32 | border: 2px solid white; 33 | padding: 20px; 34 | border-radius: 20px; 35 | font-size: 18px; 36 | } 37 | 38 | 39 | h1 { 40 | margin: 30px 150px; 41 | width: 600px; 42 | } 43 | 44 | .btn { 45 | margin: 20px 150px; 46 | } 47 | 48 | .btn button:hover { 49 | cursor: pointer; 50 | } 51 | 52 | input { 53 | width: 200px; 54 | height: 20px; 55 | } 56 | 57 | .btn button { 58 | width: max-content; 59 | padding: 15px; 60 | border-radius: 20px; 61 | border: none; 62 | background-color: rgb(89, 83, 83); 63 | color: white; 64 | font-size: 15px; 65 | } 66 | 67 | #result { 68 | margin: 30px 150px; 69 | background: transparent; 70 | height: 20px; 71 | width: 500px; 72 | margin-left: 190px; 73 | border: none; 74 | } 75 | 76 | @media screen and (max-width:500px) { 77 | 78 | 79 | #page .container h1 { 80 | color: rgb(9, 9, 9); 81 | font-size: 15px; 82 | position: relative; 83 | left: -320px; 84 | } 85 | 86 | #page { 87 | 88 | height: 100vh; 89 | display: flex; 90 | width: 100%; 91 | border: 2px solid red; 92 | } 93 | 94 | .container { 95 | border: 1px solid black; 96 | width: 80%; 97 | position: relative; 98 | text-align: center; 99 | left: 35px; 100 | top: 20px; 101 | height: 400px; 102 | } 103 | 104 | .input { 105 | margin-bottom: 40px; 106 | } 107 | 108 | .input input { 109 | width: 200px; 110 | height: 0px; 111 | background: transparent; 112 | border: 2px solid white; 113 | padding: 20px; 114 | border-radius: 20px; 115 | font-size: 18px; 116 | } 117 | 118 | .btn { 119 | margin: 20px 0px; 120 | } 121 | 122 | .btn button:hover { 123 | cursor: pointer; 124 | } 125 | 126 | .btn button { 127 | width: max-content; 128 | padding: 10px; 129 | border-radius: 20px; 130 | border: none; 131 | background-color: rgb(89, 83, 83); 132 | color: white; 133 | font-size: 12px; 134 | } 135 | 136 | #result { 137 | background: transparent; 138 | height: 20px; 139 | width: 500px; 140 | margin-left: -120px; 141 | border: none; 142 | } 143 | } 144 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | //Arthmetic operators 2 | /* 3 | let a=50; 4 | let b =51; 5 | let c1,c2,c3,c4; 6 | 7 | c1=a+b; 8 | c2=a-b; 9 | c3=a*b; 10 | c4=a**b; 11 | c2=++a; 12 | c1=--b; 13 | console.log(c1); 14 | console.log(c2); 15 | console.log(c3); 16 | console.log(c4); 17 | 18 | */ 19 | 20 | //Arthmetic Assignment Operators 21 | 22 | /* 23 | let x=15; 24 | x=x+10; 25 | console.log(x); 26 | 27 | x+=50; 28 | console.log(x); 29 | 30 | x-=10; 31 | console.log(x); 32 | 33 | x*=20; 34 | console.log(x); 35 | 36 | x/=3; 37 | console.log(x); 38 | */ 39 | 40 | 41 | // Math functions 42 | /* 43 | 44 | let c; 45 | c=Math.PI; 46 | console.log(c); 47 | 48 | c=Math.E; 49 | console.log(c); 50 | 51 | 52 | c=Math.round(5.8); 53 | console.log(c); 54 | 55 | c=Math.round(5.2); 56 | console.log(c); 57 | 58 | 59 | c=Math.floor(5.2); 60 | console.log(c); 61 | 62 | 63 | c=Math.ceil(5.2); 64 | console.log(c); 65 | 66 | 67 | c=Math.sqrt(5.2); 68 | console.log(c); 69 | 70 | 71 | c=Math.abs(-5.2); //convert the negative number into positive number 72 | console.log(c); 73 | 74 | 75 | c=Math.trunc(5.254); /// ithu ena panum nah decimal values ah remove panitu whole number ah kudukum 76 | console.log(c); 77 | 78 | 79 | c=Math.pow(2,5);// first given number and secind value is power value 80 | console.log(c); 81 | 82 | c=Math.min(5.2,10,.2,100,125); // show the minimum values in the list 83 | console.log(c); 84 | 85 | 86 | c=Math.max(5.2,11,0.2,548,78956);// show the maximum value in the list 87 | console.log(c); 88 | 89 | 90 | c=Math.random(); // it give the random number to the values 91 | console.log(c); 92 | 93 | 94 | c=Math.floor((Math.random()*10+1)); // give the random number but only in the range that we given it 95 | console.log(c); 96 | 97 | 98 | c=Math.sign(-5.2);// it is use to tell the sign of the integer 99 | console.log(c); 100 | 101 | */ 102 | 103 | 104 | 105 | // Sample program to test 106 | /* 107 | let price = 50000; 108 | let product = "Iphone"; 109 | let tax = 3265.5; 110 | console.log(product); 111 | var totalamount= price+tax; 112 | console.log(totalamount); 113 | */ 114 | 115 | // second sample program 116 | 117 | /* 118 | var fruitname="Apple"; 119 | var count=50; 120 | var price=5500; 121 | let total=count*price; 122 | console.log(fruitname); 123 | console.log(total); 124 | */ 125 | 126 | 127 | //incremnet operators 128 | /* 129 | a=10; 130 | b=a++; 131 | console.log(b);// the output will be 10 only bcoz whenever the a met the a only then the answer become 11 otherwise (a) value will be 10 132 | 133 | // but if we increment the operators like ++a means the output will be 11 bcoz (a) value athutha (a) value ah pakuthukula ++increment value met panitu tha varuthu so (a) value automatically incremnet aakirum 134 | a=10; 135 | b=++a; 136 | console.log(b); 137 | */ 138 | 139 | /* 140 | let a="Rohtih"; 141 | let b="Ragavender"; 142 | function Sum(){ 143 | sum=a + b; 144 | console.log(sum); 145 | } 146 | Sum(); 147 | */ 148 | 149 | 150 | // sample function excersies 151 | /* 152 | let factor="Kamal"; 153 | let fplayer="Dhoni"; 154 | let fmovie="Anbe sivam"; 155 | function fav(){ 156 | console.log("Favourite Actor:",factor); 157 | console.log("Favourite Actor:",fplayer); 158 | console.log("Favourite Actor:",fmovie); 159 | } 160 | fav(); 161 | */ 162 | 163 | 164 | // sample Area of Triangle program 165 | 166 | /* 167 | 168 | function area(length,breadth){ 169 | c=length*breadth; 170 | console.log("The area of triangle is :",c); 171 | } 172 | let length=50; 173 | let breadth=20; 174 | area(50,20); 175 | */ 176 | 177 | // condition statements 178 | 179 | //Eaxmple 1 for if condition: 180 | /* 181 | let rain = true; 182 | if (rain) { 183 | console.log("Take an umbrella"); 184 | } else { 185 | console.log("Enjoy the sunshine"); 186 | } 187 | */ 188 | 189 | 190 | //Example 2 for if condition: 191 | 192 | /* 193 | let homework=true; 194 | if(homework){ 195 | console.log("Great job"); 196 | } 197 | else{ 198 | console.log("Finish your work before playing"); 199 | } 200 | */ 201 | 202 | //Example 3 for if conditions 203 | 204 | /* 205 | var cookiesleft=true 206 | if(cookiesleft){ 207 | console.log("would you like a cookie"); 208 | } 209 | else{ 210 | console.log("Time to brake more cookie"); 211 | } 212 | */ 213 | 214 | //Logical conditons AND,OR,NOT 215 | //AND- Any one false appear all condition would be false 216 | //OR-Any one true is enough 217 | 218 | //Example for logical condition 219 | 220 | /* 221 | 222 | let mark=45; 223 | if (mark>=35 && mark<=55) 224 | { 225 | console.log("Student is pass the exam"); 226 | } 227 | 228 | if(mark>=55){ 229 | console.log("Students is obtain good marks"); 230 | } 231 | 232 | if(mark<=35){ 233 | console.log("Student is fail in the exam"); 234 | } 235 | 236 | */ 237 | 238 | 239 | // if else example program 240 | /* 241 | var seasonYear = "summer"; 242 | if (seasonYear == "Spring") { 243 | console.log("Enjoy the blooming flower"); 244 | } 245 | 246 | if (seasonYear == "summer") { 247 | console.log("Have fun in the sun"); 248 | } 249 | 250 | if (seasonYear == "autumn" || "Fall") { 251 | console.log("Admire the colourful leaves"); 252 | } 253 | 254 | if (seasonYear == "winter") { 255 | console.log("Bundle up and stay warm"); 256 | } 257 | 258 | */ 259 | 260 | 261 | /* 262 | let hours=new Date(); 263 | let hrs=hours.getHours(); 264 | alert(hours) 265 | */ 266 | 267 | 268 | 269 | /* 270 | let mark = prompt('Enter the Grade'); 271 | switch(mark){ 272 | case 'S': 273 | document.write("Super Grade"); 274 | break; 275 | case 'A': 276 | document.write("Excellent Grade"); 277 | break; 278 | case 'B': 279 | document.write("Good Grade"); 280 | break; 281 | case 'C': 282 | document.write("Pass Grade"); 283 | break; 284 | case 'E': 285 | document.write("Fail"); 286 | break; 287 | default: 288 | document.write('undefine'); 289 | } 290 | */ 291 | 292 | /* 293 | let i =5; 294 | for(let i =1;i<=10;i++){ 295 | document.write('Number is :',i); 296 | } 297 | */ 298 | 299 | /* 300 | let i=5; 301 | for(let i=1;i<=25;i++){ 302 | if(i%2==0){ 303 | document.write("
",i) 304 | } 305 | } 306 | */ 307 | 308 | /* 309 | let iboss= confirm("Are you boss of this company") 310 | alert(iboss) 311 | */ 312 | 313 | /* 314 | 315 | const n = 5; 316 | for (let i = 0; i < n; i++) { 317 | let row = ''; //ithu vanthu aintha pattern print pana use aakum 318 | for (let j = 0; j < n; j++) { 319 | if (i === 0 || i === 4 || j === 4) { 320 | row += '* '; 321 | }else{ 322 | row += ' '; 323 | } 324 | } 325 | console.log(row); 326 | } 327 | */ 328 | 329 | 330 | /* 331 | const p = prompt("Enter the size of the pattern"); 332 | for (let i = 0; i < p; i++) { 333 | let row = ''; 334 | for (let j = 0; j < p; j++) { 335 | if (i==4||i+j==4||i==0) { 336 | row = row + '* '; 337 | } else { 338 | row = row + ' '; 339 | } 340 | } 341 | document.write(row); 342 | } 343 | */ 344 | 345 | /* 346 | let a =15; 347 | let i=0; 348 | while(i<=a){ 349 | console.log(i); 350 | i++; 351 | } */ 352 | 353 | /* 354 | const person1 = { 355 | name: 'Rohith', 356 | age: 23 357 | } 358 | 359 | const person2 = { 360 | name: 'Manju', 361 | age: 25 362 | } 363 | 364 | function Person(name, age) { 365 | console.log(name) 366 | console.log(age) 367 | } 368 | 369 | Person(person1.name, person1.age) 370 | Person(person2.name, person2.age) 371 | 372 | */ 373 | 374 | function convert(){ 375 | let cmVal=Number(document.getElementById('input').value) 376 | let inchVal=cmVal/2.54 377 | let result=document.getElementById('result') 378 | result.innerHTML=inchVal 379 | } --------------------------------------------------------------------------------