API tools faq
paste
Advertisement
Guest User

web

a guest
Apr 2nd, 2018
62
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 29.59 KB | None | 0 0
raw download clone embed print report
  1. Web technology Cycle sheet 3
  2. Submitted to :- PROF. Suba Subanti S Rohan Kanotra
  3. 16BIT0115
  4. Q1. Develop a simple HELLO WORLD angular JS application./
  5. SNAPSHOT
  6. CODE
  7. <!DOCTYPE html>
  8. <html>
  9. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <body>
  10. <div ng-app="">
  11. <p>Input something in the name in the box:</p>
  12. <p>Name : <input type="text" ng-model="name" placeholder="Enter name here"></p>
  13. <h1>Hello {{name}}</h1>
  14. </div>
  15. </body> </html>
  16. Q2. Develop a log in and log out application using angular js.
  17.  
  18. SNAPSHOT
  19.  
  20. CODE
  21. Login file
  22. <div ng-controller='loginCtrl'>
  23. <form action="/" id="myLogin">
  24. username:<input type="text" name="username" id="username" ng-
  25. model="username"><br>
  26. password:<input type="password" name="password" id="password" ng-
  27. model="password"><br>
  28. <button type="button" ng-click="submit()">login</button>
  29. </form> </div>
  30. Form file
  31. <!DOCTYPE html>
  32. <html>
  33. <head>
  34. <title>login form</title>
  35. <script src ="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <script src ="angular-route.min.js"></script>
  36. <script src="controller.js"></script> </head>
  37. <body ng-app="mainApp">
  38. <div ng-view></div> </body>
  39. </html>
  40. Controller file
  41. var app = angular.module('mainapp',['ngRoute']);
  42. app.config(function($routeProvider){ $routeProvioder
  43. .when('/',{
  44. templateUrl : 'login.html' })
  45. .when('/dashboard' , { templateUrl : 'dashboard.html'
  46. }) .otherwise({
  47.  
  48. redirectedTo: '/' });
  49. });
  50. app.controller('loginCtrl',function($scope,$location){ $scope.submit = function(){
  51. var uname= $scope.username;
  52. var password = $scope.password;
  53. if($scope.username == 'admin' && $scope.password == 'admin'){
  54. $location.path('/dashboard'); }
  55. }; });
  56. Q3 A student database contain the students information like name, list of subjects registered, grades, CGPA. Develop an angularjs application to extract only the CGPA for the list of students and also order the students based on their CGPA.
  57. SNAPSHOT
  58.  
  59. CODE
  60. <html>
  61. <head>
  62. <title>database of students</title>
  63. </head>
  64. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <body>
  65. <div ng-app="myApp" ng-controller="namesCtrl">
  66. <p><b><em>the cgpa is extracted as follows and is in increasing order</em></b></p>
  67. <ul>
  68. <li ng-repeat="x in names | orderBy:'cgpa' ">
  69. {{x.cgpa}}
  70. </li> </ul>
  71. <p><b><em>the cgpa extracted is in decreasing order</em></b></p> <ul>
  72. <li ng-repeat="x in names | orderBy:'-cgpa' "> {{x.cgpa}}
  73. </li>
  74. </ul>
  75. <h3> the students are :</h3> <ul>
  76. <li ng-repeat="x in names"> {{x.name + ',' + x.cgpa}}
  77. </li> </ul> </div>
  78. <script>
  79. angular.module('myApp', []).controller('namesCtrl', function($scope) {
  80. $scope.names = [ {name:'Jani',cgpa:8.50}, {name:'Carl',cgpa:7.90}, {name:'Margareth',cgpa:9.00}, {name:'Hege',cgpa:8.88}, {name:'Joe',cgpa:9.13}, {name:'Gustav',cgpa:7.89}, {name:'Birgit',cgpa:5.89}, {name:'Mary',cgpa:9.90}, {name:'Kai',cgpa:10.00}
  81. ]; });
  82. </script>
  83.  
  84. Q4
  85. SNAPSHOT
  86.  
  87. CODE
  88. <!DOCTYPE html>
  89. <html>
  90. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <body>
  91. <div ng-app="myapp" ng-controller="ctrl">
  92. <p>Input something in the name in the box:</p>
  93. <p>fName : <input type="text" ng-model="fname" placeholder="Enter fname here"></p> <p>lName : <input type="text" ng-model="lname" placeholder="Enter lname here"></p> <p>fee : <input type="number" ng-model="fee" placeholder="Enter fee here"></p> <p>subjets : <input type="text" ng-model="subjects" placeholder="Enter subjets here"></ p>
  94. <ul>
  95. <li ng-repeat="x in subject | filter:subjects"> {{ x }}
  96. </li> </ul>
  97. Name in Uppercase is : {{fname + " " + lname | uppercase}}<br><br> Name in lowercase is : {{fname + " " + lname | lowercase}}<br><br> fees : {{ fee | currency}}
  98. </div>
  99.  
  100. <script>
  101. var app = angular.module('myapp',[]); app.controller('ctrl',function($scope){
  102. $scope.fname = ""; $scope.lname = ""; $scope.fee = ""; $scope.subject= [
  103. 'math,marks=65', 'physics,marks=70', 'chemistry,marks=72', 'math,marks=87', 'physics,marks=68', 'chemistry,marks=85',
  104. ];
  105. }); </script> </div>
  106. </body> </html>
  107. Q5. Develop an application that displays the following Shopping cart. It should calculate the amount based on the quantity given by the user. When the user clicks the remove button, the particular item should get removed from the cart.
  108. SNAPSHOT
  109.  
  110. CODE
  111. <html>
  112. <head>
  113. <title>Shopping Cart</title>
  114. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  115. </head>
  116. <body>
  117. <div id = "container" ng-app = "myApp" ng-controller = "ctrl" ng-init = "count = 0">
  118. <ul type = "none">
  119. <li ng-repeat = "x in list">
  120. <pre>{{x.fruit}} <input ng-init = "numb = 0" type = "number" ng-model = "numb">$ {{x.cost}} ${{numb*x.cost | number : 2}} <button class = "btnn" ng-click = "remove($index)">REMOVE</button></pre>
  121. </li>
  122. </ul>
  123. </div>
  124. </body>
  125. <script>
  126. var app = angular.module("myApp",[]) app.controller("ctrl",function($scope){
  127. $scope.list = [
  128. {fruit: 'Apple', cost: 3.95}, {fruit: 'Orange', cost: 12.95}, {fruit: 'Pineapple', cost: 6.95}, {fruit: 'Grapes', cost: 5.5}, {fruit: 'Banana', cost: 10.75}, ];
  129. $scope.remove = function(x){
  130. $scope.list.splice(x,1); }
  131. }); </script> </html>
  132. Q6
  133.  
  134. SNAPSHOT
  135. CODE
  136.  
  137. <!DOCTYPE html>
  138. <html>
  139. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <body>
  140. <h2>Validation Example</h2>
  141. <form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate>
  142. <p>Username:<br>
  143. <input type="text" name="user" ng-model="user" required>
  144. <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid "> <span ng-show="myForm.user.$error.required">Username is required.</span> </span>
  145. </p>
  146. <p>Email:<br>
  147. <input type="email" name="email" ng-model="email" required>
  148. <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid"> <span ng-show="myForm.email.$error.required">Email is required.</span>
  149. <span ng-show="myForm.email.$error.email">Invalid email address.</span> </span>
  150. </p>
  151. <p>password:<br>
  152. <input type="password" name="password" ng-model="password" required>
  153. <span style="color:red" ng-show="myForm.password.$dirty && myForm.password. $invalid">
  154. <span ng-show="myForm.password.$error.required">Email is required.</span> <span ng-show="myForm.password.$error.email">Invalid email address.</span> </span>
  155. </p>
  156. <p>
  157. <input type="submit" ng-model="submit"
  158. ng-disabled="myForm.user.$dirty && myForm.user.$invalid || myForm.email.$dirty && myForm.email.$invalid || myForm.password.$dirty && myForm.password.$invalid">
  159. </p>
  160. <h1>{{myForm.user.$valid}}</h1> <h1>{{myForm.email.$valid}}</h1> <h1>{{myForm.password.$valid}}</h1> <br>
  161. <p>this is to predict wheteher we touched the coloumn or not</p> <h1>{{myForm.user.$touched}}</h1> <h1>{{myForm.email.$touched}}</h1> <h1>{{myForm.password.$touched}}</h1>
  162. </br>
  163. <p>this is for pristine</p>
  164.  
  165. <h1>{{myForm.user.$pristine}</h1> <h1>{{myForm.email.$pristine}</h1> <h1>{{myForm.password.$pristine}</h1> <br>
  166. </form>
  167. <script>
  168. var app = angular.module('myApp', []); app.controller('validateCtrl', function($scope) {
  169. $scope.user = ''; $scope.email = ''; $scope.password = '';
  170. }); </script>
  171. </body> </html>
  172.  
  173. b.
  174. <html>
  175. <head>
  176. <title>Home</title>
  177. </head>
  178. <body style = "background-color : #b3ecff">
  179. <br>
  180. <p>
  181. Hi! My name is <b>BUBBA</b> and I live in <b style = "color : Red; font-size : 30px">Red</b><b style = "color : blue; font-size : 30px">nickck</b>
  182. <b style = "color : green; font-size : 30px">ville</b></p><br>
  183. <h1>Redneckville</h1>
  184. <br>
  185. <p>
  186. I am proud to be resident of <b>Rednickville.</b><br>
  187. It is the best place to live in if you are red necked and you are dentally<br>
  188. challenged(that is, your teeth are really bad like mine). Here's what I like<br>
  189. about the place:
  190. <br><br>
  191. <ul type = "square">
  192. <li>It's the middle of nowhere</li>
  193. <li>You don't have to brush your <b style = "color : orange; font-size : 30px">TEETH</b></li> <li>You can always marry a close relative</li>
  194. </ul>
  195. </body>
  196. </html>
  197. c.
  198. <html>
  199. <head>
  200. <title>Bubba</title>
  201. </head>
  202. <body style = "background-color : #b3ecff">
  203. <center>
  204. <p style = "font-family : Amienne; font-size : 60px; color : #0000e6">Bubba's World </center>
  205. </body>
  206. </html>
  207. d.
  208. <html>
  209. <head>
  210. <title>Banner</title>
  211. </head>
  212. <body style = "background-color : #b3ecff">
  213.  
  214. <br><br>
  215. <a href = "C:\Users\iiten\Desktop\study\Web Technology\Lab\home.html" target = "main">HOME</a><br><br>
  216. <a href = "C:\Users\iiten\Desktop\study\Web Technology\Lab\image_gallary.html" target = "main">Photo Gallery</a><br><br>
  217. <a href = "C:\Users\iiten\Desktop\study\Web Technology\Lab\nine.html" target = "main">Links</a><br><br>
  218. </body>
  219. </html>
  220. SCREENSHOT
  221.  
  222. WEB TECHNOLOGY LAB 2 ITE1002
  223. ROH AN K ANOTRA 16BIT0115
  224. Q1 1.
  225. accordingly displays a Good Morning, Good Afternoon or Good Evening message to the user.
  226. Create a program that accepts the time from the system clock and
  227. CODE
  228. <html>
  229. <head>
  230. <title>System Clock</title> <style type = "text/css"> #textbox{
  231. margin : 10px 10px; text-align : right; width : 450px; border-radius : 5px; height : 50px; font-size : 40px
  232.  
  233. } #container{
  234. width : 480px;
  235. border-radius : 5px; background-color : #c6c6c6;
  236. } .button{
  237. width:50px;
  238. height : 50px; border-radius : 180px; margin-right : 20px; margin-left : 20px;
  239. } .button:hover{
  240. border:2px solid white;
  241. background-color : Chartreuse; }
  242. </style>
  243. </head>
  244. <body>
  245. <center>
  246. <div id ="container"> <form name = "greetings">
  247.  
  248. <input id = "textbox" type = "textbox" name = "name" placeholder = "Enter Your Name">
  249. <p id = "rk">The Date is</p>
  250. <p id = "rk1"></p>
  251. <button class = "button" type = "button" onclick = greet_fun()>Click Me</button>
  252. </form> </div> <script>
  253. function greet_fun()
  254. {
  255. var naam = document.forms['greetings']['name'].value; if(naam == "")
  256. {
  257. alert("PLEASE ENTER YOUR NAME IN THE TEXTBOX");
  258. return naam; }
  259. else {
  260. var y = new Date();
  261. var str = ""; document.getElementById('rk1').innerHTML = Date(); var time = y.getHours();
  262. if(time < 12)
  263.  
  264. {
  265. str = "Good Moring!";
  266. str = str + naam; }
  267. else if(time >= 12 & time < 17)
  268. {
  269. str = "Good Afternoon!";
  270. str = str + naam }
  271. else if(time >= 17 & time < 21)
  272. {
  273. str = "Good Evening!";
  274. str = str + naam }
  275. else {
  276. str = str + naam }
  277. return str; }
  278. }
  279. </script> </center> </body>
  280. str = "Good Night!";
  281.  
  282. </html>
  283. screenshots
  284.  
  285. Q2 Develop a simple calculator using Javascript . CODE
  286. <html>
  287. <head> <title>calculator</title> </head>
  288. <body>
  289. <div style="color:#0000FF">
  290. <h3 style = "color: red">SIMPLE CALCULATOR</h3> <form name = "form1">
  291. Enter the First Number<input id = "textbox" type = "textbox" name = "name1" placeholder = "Operator1"><br><br>
  292. Enter the Second Number<input id = "textbox" type = "textbox" name = "name2" placeholder = "Operator2"><br><br>
  293. Select the Operation<select name = "drop"> <option>Select</option>
  294. <option value = "+">+</option>
  295.  
  296. <option value = "-">-</option> <option value = "*">*</option> <option value = "/">/</option> </select>
  297. <p id = "id1"></p>
  298. <p id = "id2"></p>
  299. <button type = "button" onclick = "document.getElementById('id2').innerHTML= fun1()">Submit</button>
  300. </form>
  301. </div>
  302. <script>
  303. function fun1()
  304. {
  305. var o1 = document.forms['form1']['name1'].value;
  306. var o2 = document.forms['form1']['name2'].value;
  307. var operand = document.forms['form1']['drop'].value;
  308. var total;
  309. document.getElementById('id1').innerHTML = "answer is"; if(o1 == "" & o2 == "" )
  310. {
  311. alert("Enter the Numbers to Perform the Operation"); }
  312. else {
  313.  
  314. if(operand == "+")
  315. total = (o1*1) + (o2*1);
  316. else if(operand == "-") total = o1 - o2;
  317. else if(operand == "*")
  318. total = o1 * o2;
  319. else
  320. total = o1 / o2;
  321. return total;
  322. } }
  323. </script> </body> </html>
  324. screenshots
  325.  
  326.  
  327. Q4 Get n values from the user using Input box and store them in arrays. Write an event handling code to calculate the sum of all the elements using Javascript.
  328. CODE
  329. <html>
  330. <head> <title>Array</title> <style type = "text/css"> #textarea{
  331. margin : 10px 10px; text-align : right;
  332. width : 450px; border-radius : 5px; height : 50px;
  333. border : 2px solid blue;
  334.  
  335. font-size : 40px }
  336. #container{
  337. border : 3px dashed black; width : 480px;
  338. border-radius : 5px; background-color : #c6c6c6;
  339. } .btnn{
  340. } .btnn:hover{
  341. border:2px solid white;
  342. background-color : red; }
  343. </style>
  344. </head>
  345. <body>
  346. <center>
  347. <div id = "container"> <form name = "myform">
  348. width:60px;
  349. height : 60px; border-radius : 100px; margin-right : 10px; margin-left : 10px; margin-bottom : 10px;
  350.  
  351. <textarea rows = "20" cols = "40" id = "demo" name = "array" placeholder = "Enter n values seprated by space"></textarea><br><br>
  352. <button class = "btnn" type = "button" onclick = "arr()">Click Me!</button>
  353. </form>
  354. <p id = "dem"></p> </div>
  355. </center>
  356. <script>
  357. function arr(){
  358. var txt = document.forms['myform']['array'].value; var arry = txt.split(" ");
  359. var sum = 0;
  360. for(var i = 0;i < arry.length; i++){
  361. sum += Number(arry[i]);
  362. }
  363. document.getElementById("dem").innerHTML = sum; }
  364. </script> </body> </html>
  365.  
  366. screenshots
  367.  
  368.  
  369. Q5 A mail-order house sells five different products whose retail prices are as
  370. follows: product 1, $2.98; product 2, $4.50; product 3, $9.98; product 4, $4.49; and product 5, $6.87. Write a script that reads a series of pairs of numbers as follows:
  371. 1. Product number 2. Quantity sold for one day
  372. Your program should use a switch statement to determine each product's retail price and should calculate and output HTML that displays the total retail value of all the products sold last week. Use a prompt dialog to obtain the product number and quantity from the user. Use a sentinel-controlled loop to determine when the program should stop looping and display the final results. If the user inputs an invalid product number a proper alert window shall be displayed.
  373. CODE
  374.  
  375. <html>
  376. <head>
  377. <title> Mail Order </title>
  378. <script type="text/javascript">
  379. var q;
  380. var p;
  381. var qty;
  382. var price;
  383. var pno=0;
  384. var ans=0;
  385. var counter=0;
  386. total=0;
  387. document.write("Enter product number for an item, -1 to quit: <br /> 1. Product-1 <br /> 2. Product-2 <br /> 3. product-3 <br /> 4. Product-4 <br /> 5. Product-5"); pno=window.prompt("Enter product number, -1 to Quit");
  388. p=parseInt(pno); while(pno!=-1)
  389. {
  390. switch(p)
  391. {
  392. case 1: price= 2.98;
  393. q= window.prompt("Enter number of quantities sold for product-1:"); qty=parseInt(q);
  394. ans=price*qty;
  395.  
  396. break;
  397. case 2: price= 4.50;
  398. q= window.prompt("Enter number of quantities sold for product-2:"); qty=parseInt(q);
  399. ans=price*qty;
  400. break;
  401. case 3: price= 9.98;
  402. q= window.prompt("Enter number of quantities sold for product-3:"); qty=parseInt(q);
  403. ans=price*qty;
  404. break;
  405. case 4: price= 4.49;
  406. q= window.prompt("Enter number of quantities sold for product-4:"); qty=parseInt(q);
  407. ans=price*qty;
  408. break;
  409. case 5: price= 6.87;
  410. q= window.prompt("Enter number of quantities sold for product-5:"); qty=parseInt(q);
  411. ans=price*qty;
  412. break;
  413. default: window.alert("No proper input, Please try Again");
  414. break;
  415. }
  416. counter=counter+1;
  417. total=total + parseInt(ans);
  418.  
  419. pno=window.prompt("Enter product number, -1 to Quit"); p=parseInt(pno);
  420. }
  421. if(counter!=0)
  422. {
  423. document.writeln( "<h1> Total Sales for Last week is: $" + total + "</h1>" ); }
  424. else
  425. {
  426. window.alert("No product number is entered, Thank you");
  427. }
  428. // -->
  429. </script>
  430. </head>
  431. <body>
  432. <h1>Mail Order</h1>
  433. <hr />
  434. <p>Press F5 or Refresh to load script again.</p>
  435. </body> </html>
  436. screenshots
  437.  
  438.  
  439. Q6 Create a webpage using form text boxes that:
  440. Contains the function Celsius, that returns the Celsius equivalent of a
  441. Fahrenheit temperature, using the calculation:
  442. C = 5.0/9.0 * (F – 32)
  443. Contains the function Fahrenheit that returns the Fahrenheit
  444. equivalent of a Celsius temperature, using the calculation: F = 9.0/5.0 * C + 32
  445.  
  446. Use these functions to write a script that enables the user to enter either a Fahrenheit or a Celsius temperature and displays the Celsius or Fahrenheit equivalent. Your HTML document should contain two buttons ; one to initiate the conversion from Fahrenheit to Celsius and one to initiate the conversion from Celsius to Fahrenheit.
  447. Code
  448. <html>
  449. <head>
  450. <title>conversion of Temperature</title> <style type="text/css">
  451. #textbox{
  452. margin : 10px 10px;
  453. text-align: right;
  454. width : 450px;
  455. border-radius : 5px;
  456.  
  457. height : 50px;
  458. border : 1px dashed blue; font-size : 40px
  459. }
  460. #container{
  461. border : 3px dashed black; width : 480px;
  462. border-radius : 5px; background-color : #c6c6c6;
  463. } .btnn{
  464. } .btnn:hover{
  465. border:2px dashed red;
  466. background-color : Chartreuse; }
  467. </style>
  468. </head>
  469. <body>
  470. <center>
  471. <div id="container"> <h3>Temperature Convertor</h3> <form name = "form1">
  472. margin-right : 20px; margin-left : 20px; margin-bottom : 20px;
  473.  
  474. enter the temp :<input class = "textbox" type = "textbox" name = "temp" ><br>
  475. <p id = "rk"></p>
  476. <p id = "rk1"></p>
  477. <button class = "btnn" type="button" onclick = "document.getElementById(rk).innerHTML= c2f()">for celcius to Fahrenheit</button> <button class = "btnn" type="button" onclick = "document.getElementById(rk1).innerHTML= f2c()">for Fahrenheit to celcius</button> </form>
  478. </div> <script> function c2f() {
  479. var x = document.forms['form1']['temp'].value; var y = ((9.0/5.0)*x)+32;
  480. return y;
  481. }
  482. function f2c()
  483. {
  484. var x = document.forms['form1']['temp'].value; var y = (5.0/9.0)*(x-32);
  485. return y;
  486. } </script> </center> </body> </html>
  487.  
  488. Screenshots
  489. Q8
  490.  
  491. CODE
  492. <html>
  493. <head>
  494. <title>New User Registration Form</title>
  495. <style>
  496. #demo,#demo2,#demo3,#demo4,#demo5,#demo6{
  497. color : red;
  498. }
  499. </style>
  500. </head>
  501. <body>
  502. <form name = "myform" action = "https://www.facebook.com/">
  503. UserName :<input type = "textbox" name = "uname"><span id = "demo"></ span><br><br>
  504. E-Mail Address :<input type = "textbox" name = "id" placeholder = "name@domain.com"><span id = "demo2"></span><br><br>
  505. Date of Birth :<input type = "date" name = "dat">(dd-mm-yyyy)<span id = "demo3"></ span><br><br>
  506. HTML Experience Years : 0<input type = "range" min = "0" max = "100" value = "20" step = "5" onChange = "sliderChange(this.value)">100<br><br>
  507. Number of Children : <input type = "number" placeholder = "0" name = "child"><span id = "demo4"></span><br><br>
  508. Personal Page URL : <input type = "textbox" name = "urla" placeholder = "HTTP:// domain.com"><span id = "demo5"></span><br><br>
  509.  
  510. Registration Renewal Month : <input type = "month" name = "months"><span id = "demo6"></span><br><br>
  511. <button type = "button" onclick = "check()">SUBMIT</button><br><br>
  512. <input type = "reset" value = "CLEAR"><br>
  513. </form>
  514. <p id = "demo1"></p>
  515. <script> function check(){
  516. var naam = document.forms['myform']['uname'].value; var text = "";
  517. if(naam == "")
  518. document.getElementById("demo").innerHTML = "please enter the name"; else
  519. {
  520. var re = /^[a-zA-Z ]{3,20}$/; if(re.test(naam))
  521. text = naam; else
  522. }
  523. alert("Invalid Name Type");
  524. var id = document.forms['myform']['id'].value; if(id == "")
  525.  
  526. document.getElementById("demo2").innerHTML = "please enter the
  527. email"; else
  528. {
  529. var ree = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/; if(!ree.test(id))
  530. alert("Invalid Mail Type");
  531. else{
  532. text += " ";
  533. text += id; }
  534. }
  535. var dt = document.forms['myform']['dat'].value; if(dt == "")
  536. document.getElementById("demo3").innerHTML = "please enter the date"; else{
  537. text += " "; text += dt;
  538. }
  539. var cld = document.forms['myform']['child'].value; if(cld == "")
  540.  
  541. document.getElementById("demo4").innerHTML = " please Enter Number of Children";
  542. else{
  543. if(cld < 0)
  544. alert("Invalid Number of Childs");
  545. else if(cld > 20)
  546. alert("Invalid Number of Childs");
  547. else{
  548. text += " ";
  549. text += cld;
  550. } }
  551. var ul = document.forms['myform']['urla'].value; if(ul == "")
  552. document.getElementById("demo5").innerHTML = "*Enter URL"; else{
  553. var regs = /^http:\/\/[a-z0-9]{3,40}\.com/ if(!regs.test(ul))
  554. alert("Invalid URL") else{
  555.  
  556. s
  557. }
  558. text += ul;
  559. text += " "; text += ul;
  560. var mon = document.forms['myform']['months'].value; if(mon == "")
  561. document.getElementById("demo6").innerHTML = "please Enter Month";
  562. else{
  563. text += " ";
  564. } }
  565. document.getElementById("demo1").innerHTML = text; }
  566. </script>
  567. </body> </html>
  568.  
  569. Screenshots
  570.  
  571. Q10. Develop a web page of your choice using JavaScript event handlers – When a user clicks the mouse
  572. – When a web page has loaded
  573. – When the mouse moves over an element – When an input field is changed
  574. – When an HTML form is submitted
  575. – When a user strokes a key
  576. – Include Blur and focus events.
  577.  
  578. Code
  579. <html>
  580. <head>
  581. <title>EVENT HANDLERS</title> <style>
  582. #container{
  583. border : 3px solid black; width : 480px; border-radius : 5px; background-color : #c6c6c6;
  584.  
  585. }
  586. </style>
  587. </head>
  588. <body style = "background-image : url(fsd1.jpg)" onload = "load()">
  589. <center>
  590. <div id = "container">
  591. <h3>Mouse Over Out Click</h3>
  592. <h1 id = "demo"></h1>
  593. <p onmouseover = "over(this)" onmouseout = "out(this)" onclick = "clk(this)">Click Over Me!</p>
  594. </div><br><br>
  595. <div id = "container"> Enter the Name:
  596.  
  597. <input style = "background-color: Pink" type = "textbox" id = "ii1" name = "ip" onchange = "upc()">
  598. </div>
  599. <br><br>
  600. <div id = "container">
  601. <h3>Form Submit and OnFocus and Blur Events</h3>
  602. <form name = "myform">
  603. UserName:<input type = "text" name = "unm" id = "aa1" onfocus = "f1(this)" onblur = "f2()"><br><br>
  604. Password:<input type = "password" name = "pass"><br><br>
  605. <textarea name = "ta" rows = "8" cols = "40" placeholder = "Enter...."></ textarea><br><br>
  606.  
  607. <button type = "button" name = "sub" onclick = "val()">Press Me!!</button> <br><br>
  608. <p id = "evn"></p>
  609. </form>
  610. </div>
  611. <br><br>
  612. <div id = "container">
  613. <h3>KEY PRESS</h3>
  614. <input type = "text" name = "prs" onkeypress = "press()"><br><br> </div>
  615.  
  616. </center> <script> function load(){
  617. var m = window.prompt("Please Enter Your Name!!");
  618. if(m == "")
  619. alert("Please Enter your Name");
  620. else {
  621. text = "Welcome "; text += m;
  622.  
  623. document.getElementById("demo").innerHTML = text;
  624. }
  625. }
  626. function over(obj) {
  627. text = "Hi! the mouse is over me rohan";
  628. //text += m;
  629. text += "Your Registration Number is 16BIT0115.";
  630.  
  631. obj.innerHTML = text; }
  632. function out(obj) {
  633. text = "Hey! Put mouse over me to see the changes. rohan"; //text += m;
  634. obj.innerHTML = text;
  635. }
  636. function clk(obj) {
  637.  
  638. text = "Now You Have Clicked Over me rohan";
  639. obj.innerHTML = text; }
  640. function upc(){
  641. var l = document.getElementById("ii1");
  642. l.value = l.value.toUpperCase(); }
  643. function val() {
  644. var a = document.forms['myform']['unm'].value;
  645.  
  646. var b = document.forms['myform']['pass'].value; var c = document.forms['myform']['ta'].value; var arr = c.split(",");
  647. var text = "The Even Numbers are <br>"; for(var i = 0;i < arr.length; i++)
  648. {
  649. arr[i] = Number(arr[i]); if(arr[i]%2 == 0)
  650. {
  651. text += arr[i].toString();
  652. text += " "; }
  653.  
  654. }
  655. document.getElementById("evn").innerHTML = text; }
  656. function press() {
  657. alert("You Pressed a Key");
  658. }
  659. function f1(obj) {
  660.  
  661. obj.style.background = "Tomato"; }
  662. function f2() {
  663. var x = document.getElementById("aa1"); x.value = x.value.toUpperCase();
  664. }
  665. </script> </body> </html>
  666.  
  667. SCREENSHOTS
  668.  
  669.  
  670.  
  671. Q3 1. DevelopaJavaScriptcodetoconductquizexamaftervalidatingthe user with login and password.
  672. <html>
  673. <head> <title>Log-In</title> <style>
  674.  
  675. div#test{ border:#000 1px solid; padding:10px 40px 40px 40px; opacity:0} </style>
  676. </head>
  677. <body>
  678. <center>
  679. <div>
  680. <form name = "myform">
  681. UserName :<input type = "textbox" placeholder = "User-Id" name = "user"><br><br> Password :<input type = "password" placeholder = "Password" name = "pass"><br><br>
  682. <button type = "button" onclick = "document.getElementById('demo').innerHTML = myfun()">LOG-IN</button>
  683. <p id = "demo"></p>
  684. </form>
  685. </div>
  686. <h2 id="test_status"></h2> <div id="test"></div>
  687. <p id = 'dem'></p> </center>
  688. <script>
  689. var pos = 0,test,test_status,question,choice,choices,opA,opB,opC,correct = 0; var questions = [
  690. ["What is 10 + 4 ?","10","14","12","B"],
  691. ["What is Caplital of India ?","Delhi","Mumbai","Kolkata","A"],
  692.  
  693. ["Who is PM of India ?","Modi","Kejriwal","Rahul Gandhi","A"], ["What is 12 * 6 ?","60","84","72","C"],
  694. ["What is 22 - 4 ?","10","18","12","B"],
  695. ];
  696. function _(x){
  697. return document.getElementById(x); }
  698. function fetchquestion(){ test = _("test");
  699. if(pos >= questions.length){
  700. test.innerHTML = "<h2>You got "+correct+" of "+questions.length+"
  701. questions correct</h2>";
  702. _("test_status").innerHTML = "Test Completed";
  703. pos = 0; correct = 0; return false;
  704. }
  705. _("test_status").innerHTML = "Question "+(pos+1)+" of "+questions.length; question = questions[pos][0];
  706. opA = questions[pos][1];
  707. opB = questions[pos][2];
  708. opC = questions[pos][3];
  709. test.innerHTML = "<h3>"+question +"</h3>";
  710. test.innerHTML += "<input type = 'radio' name = 'choice' value = 'A'>
  711. "+opA+"<br>";
  712.  
  713. test.innerHTML += "<input type = 'radio' name = 'choice' value = 'B'> "+opB+"<br>";
  714. test.innerHTML += "<input type = 'radio' name = 'choice' value = 'C'> "+opC+"<br><br>";
  715. test.innerHTML += "<button type = 'button' onclick = 'checkAnswer()'>Submit</ button>";
  716. }
  717. function myfun()
  718. {
  719. var username = document.forms['myform']['user'].value; var password = document.forms['myform']['pass'].value; if(username == "" & password == "")
  720. alert("Enter Id and Password"); else if(username == "" & password != "")
  721. alert("Enter User Name"); else if(username != "" & password == "")
  722. else {
  723. alert("Enter Password");
  724. var un = "parth1998@gmail.com";
  725. var pass = "Parth12345";
  726. if(username != un & password != pass)
  727. alert("Wrong User name or Password"); else if(username == un & password != pass)
  728. alert("Wrong Password");
  729. else if(username != un & password == pass)
  730.  
  731. alert("Wrong Input"); else
  732. {
  733. var a = "Welcome! PARTH"; document.getElementById("test").style.opacity = 1; return a;
  734. } }
  735. }
  736. function checkAnswer(){
  737. choices = document.getElementsByName("choice"); for(var i=0; i<choices.length; i++){
  738. if(choices[i].checked){
  739. choice = choices[i].value; }
  740. }
  741. document.getElementById('dem').innerHTML = choices; if(choice == questions[pos][4]){
  742. correct++; }
  743. pos++;
  744. fetchquestion(); }
  745. window.addEventListener("load", fetchquestion, false);
  746.  
  747. </script> </body> </html>
  748. Screenshots
  749.  
  750. Q9 Update the aboutme.html page what you have developed in cyclesheet1 using DOM objects. Incorporate the event handlers wherever necessary.
  751. Code
  752. <!DOCTYPE HTML SYSTEM> <html>
  753. <head> <title>AboutMe</title> </head>
  754. <body style = "background-color :LightGray" onload = "welcome()">
  755. <h1 id = "demo1" style = "text-align:center; color: DodgerBlue" onmouseover = "change(this)" onmouseout = "out(this)">ROHAN KANOTRA</h1>
  756. <h5 name = "add" style = "text-align:center" onmousedown = "addr(this)" onmouseup = "add1(this)">Click to see the Address<u></u></h5>
  757. <div style = "border-style : solid">
  758. <center>
  759. <h3 style = "color : BlueViolet">ABOUT ME</h3>
  760.  
  761. <p>Hi! I am <i style = "color : red">ROHAN KANOTRA</i> studing in II Year VIT University, Vellore. I am 19 years old. Passed my <em>+2</em> from
  762. <u><abbr title = "Central Board of Secondary Education">CBSE Board</abbr></u> in Year
  763. 2016. Went to <b>hansraj public school.</b> I am from <b style = "color : MidnightBlue ">chandigarh, punjab.</b>Love to watch CRICKET and batting
  764. of <u style = "color : MidnightBlue ">VIRAT KOHLI.</u> Will complete my Engineering by MAY, 2020. Recently I am doing my <abbr title = "Bachelor in Technology">
  765. B.Tech.</abbr> in <abbr title = "Information Technology">I.T.</abbr>
  766. </p>
  767. <br>
  768. </center>
  769. </div>
  770. <br>
  771. <div style = "border-style : double">
  772. <center>
  773. <h3 style = "color : BlueViolet">CLASSES</h3>
  774. <p>
  775. <dl>
  776. <dt><b style = "color : Tomato">Web Technology</b></dt>
  777. <dd>Subject in which we study about <b>HTML, CSS, JavaScript</b> etc.<dd> <dt><b style = "color : Orange">DCCN</b></dt>
  778. <dd>Subject related to <b>Communication and Networking</b>.<dd>
  779. <dt><b style = "color : Violet">OSP</b></dt>
  780. <dd>Open Source Programming is a subject related to <b>PHP, HTML, Perl</b> etc.<dd>
  781. </dl>
  782.  
  783. <br> </center> </div> <br>
  784. <div style = "border-style : dotted">
  785. <h3 style = "color : BlueViolet">FAVOURITE MOVIES</h3>
  786. <ol type = "A">
  787. <li><a href = "https://en.wikipedia.org/wiki/Dhoom_2">DHOOM 2</a></li> <li>pK</li>
  788. <li><a href = "https://en.wikipedia.org/wiki/Madras_Cafe">Madras Cafe</a></li> </ol>
  789. <br>
  790. </div>
  791. <br>
  792. <center>
  793. <h3 style = "color : BlueViolet">IMAGES</h3>
  794. <img src = "me.jpg" alt = "ROYAL" style="width:300px;height:300px;" id = "img" onmousedown = "img1()" onmouseup = "img2()">
  795. </center>
  796. <div style = "border-style : dashed">
  797. <h3 style = "color : BlueViolet">CODING SKILLS</h3> <h2>KNOWS</h2>
  798. <ul style = "list-style-type : disc"> <li>PYTHON(Basic)</li>
  799. <li>C</li>
  800. <li>C++</li>
  801.  
  802. <li>SQL</li>
  803. </ul>
  804. <h2>LEARNING</h2>
  805. <ul style = "list-style-type : disc"> <li>JAVA</li>
  806. <li>PHP</li> </ul>
  807. </div>
  808. <br>
  809. <div style = "border-style : solid">
  810. <center>
  811. <h3 style = "color : BlueViolet">NEIGHBOUR</h3>
  812. <p>
  813. Personal identity is the unique identity of persons through time. That is to say, the necessary and sufficient conditions under which a person at one time
  814. and a person at another time can be said to be the same person, persisting through time. The synchronic problem is grounded in the question of what features
  815. or traits characterize a given person at one time.
  816. </center>
  817. </div>
  818. <script>
  819. function change(obj) {
  820. obj.innerHTML = "ROHAN KANOTRA, 16BIT0115.";
  821. obj.style.color = "Tomato"; }
  822. function out(obj)
  823.  
  824. {
  825. obj.innerHTML = "ROHAN KANOTRA" ; obj.style.color = "DodgerBlue";
  826. }
  827. function addr(obj) {
  828. obj.innerHTML = "L-350, Annex L-Block, Men Hostel, VIT UNIVERSITY, Vellore(311001), TAMIL NADU";
  829. obj.style.color = "orange"; }
  830. function add1(obj) {
  831. obj.innerHTML = "Click to see the Address";
  832. obj.style.color = "red"; }
  833. function pic(obj) {
  834. obj.src = url("me.jpg"); }
  835. function img1() {
  836. document.getElementById("img").src = "me1.jpg" }
  837. function img2() {
  838. document.getElementById("img").src = "me.jpg" }
  839. function welcome()
  840.  
  841. {
  842. m = confirm("Are You ROHAN ?"); if(m == true)
  843. alert("Welcome ROHAN!"); else if(m == false)
  844. {
  845. x = prompt("Enter the name"); text = "Welcome "+x+"!!"; alert(text);
  846. } }
  847. </script>
  848. </body> </html>
  849. Screenshots
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!