Scribd
Upload
136 views40 pages

4 (A) .Drag and Drop HTML5 API

The document contains code for validating a PAN card number. It includes HTML and CSS code to create a form for entering the PAN card details. The JavaScript code defines a validateform() function that validates the entered PAN card number by checking if it is empty or not. If empty, an alert is displayed asking to enter the PAN number, otherwise the form is submitted.

Uploaded by

vignesh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
136 views40 pages

4 (A) .Drag and Drop HTML5 API

The document contains code for validating a PAN card number. It includes HTML and CSS code to create a form for entering the PAN card details. The JavaScript code defines a validateform() function that validates the entered PAN card number by checking if it is empty or not. If empty, an alert is displayed asking to enter the PAN number, otherwise the form is submitted.

Uploaded by

vignesh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 40

4(a).

Drag and Drop HTML5 API


<html>

<head>

<style>

#div1 {

width: 200px;

height: 300px;

padding: 50px;

border: 10px solid #aaaaaa;

</style>

<script>

function allowDrop(ev) {

ev.preventDefault();

function drag(ev) {

ev.dataTransfer.setData("text", ev.target.id);

function drop(ev) {

ev.preventDefault();

var data = ev.dataTransfer.getData("text");

ev.target.appendChild(document.getElementById(data));

</script>

</head>

<body>

<p>Image Draging using HTML5 API</p>


<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<br>

<img id="drag1" src="1.jpg" draggable="true" ondragstart="drag(event)" width="200"


height="300">

</body>

</html>

4(a).GLocation HTML5 API


<html>
<body>

<p id="demo">Click the button to get your position.</p>

<button onclick="getLocation()">Try It</button>

<div id="mapholder"></div>

<script>
var x = document.getElementById("demo");

function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
var latlon = position.coords.latitude + "," + position.coords.longitude;
var img_url = "https://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&key=AIzaSyBu-
916DdpKAjTmJNIgngS6HL_kDIKU0aU";
document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}

function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
}
</script>

</body>
</html>
OUTPUT:
5. (a)CGPA calculator
<!DOCTYPE HTML>
<HTML>
<head>
<script src="ho.js"></script>
<style>

.r{
border:1px solid;
background: yellow;
height: 20px;
}

.rt{
border:1px solid;
background: lightblue;
height: 20px;
}

section{
margin: 50px;
border: 2px solid;
text-align: center;
width: 400px;
padding: 20px;
background: lightgreen;
}

#error{
color: red;
}
</style>

</head>
<body>
<script>course=[];
mark =[];
chour=[];
tpoint=[];

function displayCourses()
{

total = 0;
totalcredits = 0;
totalpoints = 0;
cn1 = "";
ch1 = "";
cm1 = "";
gr1 = "";
gp1 = "";
tp1 = "";

for (i=0; i<course.length; i++)


{

tpoint[i]=(chour[i] * M2G(mark[i])[1]).toFixed(2);

cn1 = cn1 + course[i] + "\n";


ch1 = ch1 + chour[i] + "\n";
cm1 = cm1 + mark[i] + "\n";
gr1 = gr1 + M2G(mark[i])[0] + "\n";
gp1 = gp1 + M2G(mark[i])[1] + "\n";
tp1 = tp1 + tpoint[i] + "\n";

total = total + parseInt(mark[i]);


totalcredits = totalcredits + parseInt(chour[i]);
totalpoints = totalpoints + parseFloat(tpoint[i]);

}
document.getElementById("cn1").innerText=cn1;
document.getElementById("ch1").innerText=ch1;
document.getElementById("cm1").innerText=cm1;
document.getElementById("gr1").innerText=gr1;
document.getElementById("gp1").innerText=gp1;
document.getElementById("tp1").innerText=tp1;

document.getElementById("t").innerText=total;
document.getElementById("tcr").innerText=totalcredits;
document.getElementById("tpo").innerText=totalpoints.toFixed(2);

document.getElementById("cgpa").innerText="GPA = " +
(totalpoints/totalcredits).toFixed(2);

function refreshElement(){
course=[];
mark =[];
chour=[];
tpoint=[];
displayCourses();

function elementObj(id){
return (document.getElementById(id));
}

function addRecord(){
if (validation() == true)
{
c = document.getElementById("cr").value;
m = document.getElementById("mr").value;
cc = document.getElementById("ch").value;
course[course.length] = c;
mark[mark.length] = m;
chour[chour.length]= cc;
}
displayCourses();
}

function M2G(m){

g = ""
point = 0

if(m<=30){
g="F";
point=1.7;
}
else
if(m<=40){
g="D";
point=2;
}
else
if(m<=50){
g="C";
point=2.3;
}
else
if(m<=60){
g="B";
point=2.7;
}
else
if(m<=70) {
g="A";
point=3;}
else
if(m<=80){
g="A+";
point=3.3;
}
else
if(m<=90) {
g="S";
point=3.7;
}
else
if(m<=100){
g="O";
point=4;
}

gp=[];
gp[0]=g;
gp[1]=point;

return gp;
}

function validation(){
studentmark = parseInt(document.getElementById("mr").value);
coursecredit = parseInt(document.getElementById("ch").value);
if(studentmark<100 && studentmark>=0 && coursecredit>0)
{
document.getElementById("error").innerText= "";
return (true);
}
else
document.getElementById("error").innerText= "Please make sure you enter marks
between 0 and 100 and credit hours 0 or above";
}
</script>
<section>

<h1>GPA Calculator</h1>

<form>
<input type="text" id="cr" placeholder="Course Code"><br>
<input type="number" id="mr" placeholder="Mark"><br>
<input type="number" id="ch" placeholder="Credit Hours">
</form>
<button onclick="addRecord()">Add a record</button><br>
<button onclick="refreshElement()">rest</button>
<center>
<p id="error"><p>
<table>
<tr>
<td class="r" id="cn1"></td>
<td class="r" id="ch1"></td>
<td class="r" id="cm1"></td>
<td class="r" id="gr1"></td>
<td class="r" id="gp1"></td>
<td class="r" id="tp1"></td>

<tr>
<td class="rt" id="Scn">Total Marks</td>
<td class="rt" id="tcr"></td>
<td class="rt" id="t"></td>
<td class="rt"></td>
<td class="rt"></td>
<td class="rt" id="tpo"></td>

</tr>
<tr>
<td class="rt" id="cgpa"></td>

</tr>

</table>

</center>
</section>

<script>

displayCourses();

</script>

</body>

</HTML>

Output:

(b).Quiz
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Quiz</title>
<style>
div#test{ border:#5AB029 3px solid; padding:10px 40px 40px 40px; background-
color:#E5FCE3; width:50%;}
</style>
<script type="text/javascript">
// pos is position of where the user in the test or which question they're up to
var pos = 0, test, test_status, question, choice, choices, chA, chB, chC, correct = 0;
// this is a multidimensional array with 4 inner array elements with 5 elements inside them
// if you don't want answers viewable in the code, then you should use PHP and mySQL
database
var questions = [
["What is 36 + 42", "64", "78", "76", "B"],
["What is 7 x 4?", "21", "27", "28", "C"],
["What is 16 / 4?", "4", "6", "3", "A"],
["What is 8 x 12?", "88", "112", "96", "C"],
];
// this get function is short for the getElementById function
function get(x){
return document.getElementById(x);
}
function renderQuestion(){
test = get("test");
if(pos >= questions.length){
test.innerHTML = "<h2>You got "+correct+" of "+questions.length+" questions
correct</h2>";
get("test_status").innerHTML = "Test completed";
// resets the variable to allow users to restart the test
pos = 0;
correct = 0;
// stops rest of renderQuestion function running when test is completed
return false;
}
get("test_status").innerHTML = "Question "+(pos+1)+" of "+questions.length;
question = questions[pos][0];
chA = questions[pos][1];
chB = questions[pos][2];
chC = questions[pos][3];
test.innerHTML = "<h3>"+question+"</h3>";
// the += appends to the data we started on the line above
test.innerHTML += "<input type='radio' name='choices' value='A'> "+chA+"<br>";
test.innerHTML += "<input type='radio' name='choices' value='B'> "+chB+"<br>";
test.innerHTML += "<input type='radio' name='choices' value='C'> "+chC+"<br><br>";
test.innerHTML += "<button onclick='checkAnswer()'>Submit Answer</button>";
}
function checkAnswer(){
// use getElementsByName because we have an array which it will loop through
choices = document.getElementsByName("choices");
for(var i=0; i<choices.length; i++){
if(choices[i].checked){
choice = choices[i].value;
}
}
// checks if answer matches the correct choice
if(choice == questions[pos][4]){
//each time there is a correct answer this value increases
correct++;
}
// changes position of which character user is on
pos++;
// then the renderQuestion function runs again to go to next question
renderQuestion();
}
window.addEventListener("load", renderQuestion, false);
</script>
</head>
<body>
<h2 id="test_status"></h2>
<div id="test"></div>
</body>
</html>

Output:
6. PAN card validation
<html>

<head>

<style>

form

width:50%;

padding:10px;

border: 10px solid #ccc;

border-radius: 20x;

resize: vertical;

*{

box-sizing: border-box;

input[type=text], select, textarea {

width: 50%;

padding:10px;

border: 1px solid #ccc;


border-radius: 50px;

resize: vertical;

label {

padding: 12px 12px 12px 0;

display: inline-block;

input[type=submit] {

background-color: #4CAF50;

color: white;

padding: 12px 20px;

border: none;

border-radius: 4px;

cursor: pointer;

input[type=submit] {

background-color: #45a049;

</style>

</head>

<body>

<center>

<h1>PANCARD VALIDATION</h1></enter>

<script>

function validateform()

var name=document.myform.name.value;

var password=document.myform.password.value;

if (name==null || name=="")

alert("FirstName can't be blank");


return false;

if(password==null || password=="")

alert("LastName can't be blank");

return false;

if(!isNaN(name))

alert("Please Enter Only Characters");

document.myform.name.select();

return false;

function ValidatePAN() {

var Obj = document.getElementById("textPanNo");

if (Obj.value != "") {

ObjVal = Obj.value;

var panPat = /^([a-zA-Z]{5})(\d{4})([a-zA-Z]{1})$/;

if (ObjVal.search(panPat) == -1) {

alert("Invalid Pan No");

Obj.focus();

return false;

else

alert("Correct Pan No");

return false;

}
</script>

<body bgcolor="skyblue">

<center>

<form name="myform" method="post" action="file.html" onsubmit="return validateform()" >

FirstName:</br> <input type="text" name="name"><br/>

LastName: </br><input type="text" name="password"><br/></br>

<input type="submit" value="register"></br></br>

PANCARD NUMBER:</br><input type="text" ID="textPanNo" MaxLength="10"


onblur="ValidatePAN(this);"></BR></BR>

<input type="button" value="Check" onclick="ValidatePAN();">

</form>

</Center>

</body>

</html>

SCREENSHOT:

FORM VIEW
NAME CHECKING (BLANK)

NAME CHECKING (CHARACTER)


PAN NUMBER CHECKING (INVALID)

PAN NUMBER CHECKING (CORRECT)


FINAL FORM VIEW

7. (a) Registration form


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
background-color: black;
}

*{
box-sizing: border-box;
}

.container {
padding: 16px;
background-color: white;
}

input[type=text], input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}

input[type=text]:focus, input[type=password]:focus {
background-color: #ddd;
outline: none;
}
hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}

.registerbtn {
background-color: #4CAF50;
color: #000000;
padding: 16px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}

.registerbtn:hover {
opacity: 1;
}

a{
color: dodgerblue;
}

.signin {
background-color: #CC9900;
text-align: center;
}
</style>
</head>

<body>
<form action="/action_page.php">
<div class="container">
<h1>Register</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="username"><b>UserName</b></label>
<input type="text" placeholder="Enter UserName" name="UserName" required>

<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required>

<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>

<label for="psw-repeat"><b>Repeat Password</b></label>


<input type="password" placeholder="Repeat Password" name="psw-repeat" required>
<hr>
<p>By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p>

<button tysubpe="mit" class="registerbtn">Register</button>


</div>
<div class="container signin">
<p>Already have an account? <a href="#">Sign in</a>.</p>
</div>
</form>
</body>
</html>

(b).Video player
<html>

<body>

<h1>For playing the video click play</h1>

<button onclick="playVid()" type="button">Play</button>

<button onclick="pauseVid()" type="button">Pause</button>

<video id="myVideo" height="700" width="800">

<source id="mp4_src" src="E:\Songs/7UP Madras Gig - Orasaadha _ Vivek - Mervin ( 720 X 1280
).mp4" type="video/mp4">

</video>
<p>Click the buttons to play or pause the video.</p>

<script>

var x = document.getElementById("myVideo");

function playVid() {

x.play();

function pauseVid() {

x.pause();

</script>

</body>

</html>

8. JSON for bookstore


Json structure
{
"books": [
{
"isbn": "9781593275846",
"title": "Eloquent JavaScript, Second Edition",
"subtitle": "A Modern Introduction to Programming",
"author": "Marijn Haverbeke",
"published": "2014-12-14T00:00:00.000Z",
"category": "Fiction",
"pages": 472,
"description": "JavaScript lies at the heart of almost every modern web application,
from social apps to the newest browser-based games. Though simple for beginners to pick
up and play with, JavaScript is a flexible, complex language that you can use to build full-
scale applications.",
"website": "http://eloquentjavascript.net/"
},
{
"isbn": "9781449331818",
"title": "Learning JavaScript Design Patterns",
"subtitle": "A JavaScript and jQuery Developer's Guide",
"author": "Addy Osmani",
"published": "2012-07-01T00:00:00.000Z",
"category": "Adventure",
"pages": 254,
"description": "With Learning JavaScript Design Patterns, you'll learn how to write
beautiful, structured, and maintainable JavaScript by applying classical and modern design
patterns to the language. If you want to keep your code efficient, more manageable, and
up-to-date with the latest best practices, this book is for you.",
"website": "http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/"
},
{
"isbn": "9781449365035",
"title": "Speaking JavaScript",
"subtitle": "An In-Depth Guide for Programmers",
"author": "Axel Rauschmayer",
"published": "2014-02-01T00:00:00.000Z",
"category": "Comedy",
"pages": 460,
"description": "Like it or not, JavaScript is everywhere these days-from browser to
server to mobile-and now you, too, need to learn the language or dive deeper than you
have. This concise book guides you into and through JavaScript, written by a veteran
programmer who once found himself in the same position.",
"website": "http://speakingjs.com/"
},
{
"isbn": "9781491950296",
"title": "Programming JavaScript Applications",
"subtitle": "Robust Web Architecture with Node, HTML5, and Modern JS Libraries",
"author": "Eric Elliott",
"published": "2014-07-01T00:00:00.000Z",
"category": "Fiction",
"pages": 254,
"description": "Take advantage of JavaScript's power to build robust web-scale or
enterprise applications that are easy to extend and maintain. By applying the design
patterns outlined in this practical book, experienced JavaScript developers will learn how to
write flexible and resilient code that's easier-yes, easier-to work with as your code base
grows.",
"website": "http://chimera.labs.oreilly.com/books/1234000000262/index.html"
},
{
"isbn": "9781593277574",
"title": "Understanding ECMAScript 6",
"subtitle": "The Definitive Guide for JavaScript Developers",
"author": "Nicholas C. Zakas",
"published": "2016-09-03T00:00:00.000Z",
"category": "Comedy",
"pages": 352,
"description": "ECMAScript 6 represents the biggest update to the core of JavaScript in
the history of the language. In Understanding ECMAScript 6, expert developer Nicholas C.
Zakas provides a complete guide to the object types, syntax, and other exciting changes that
ECMAScript 6 brings to JavaScript.",
"website": "https://leanpub.com/understandinges6/read"
},
{
"isbn": "9781491904244",
"title": "You Don't Know JS",
"subtitle": "ES6 & Beyond",
"author": "Kyle Simpson",
"published": "2015-12-27T00:00:00.000Z",
"category": "Adventure",
"pages": 278,
"description": "No matter how much experience you have with JavaScript, odds are you
don’t fully understand the language. As part of the You Don’t Know JS series, this compact
guide focuses on new features available in ECMAScript 6 (ES6), the latest version of the
standard upon which JavaScript is built.",
"website": "https://github.com/getify/You-Dont-Know-
JS/tree/master/es6%20&%20beyond"
},
{
"isbn": "9781449325862",
"title": "Git Pocket Guide",
"subtitle": "A Working Introduction",
"author": "Richard E. Silverman",
"published": "2013-08-02T00:00:00.000Z",
"category": "Adventure",
"pages": 234,
"description": "This pocket guide is the perfect on-the-job companion to Git, the
distributed version control system. It provides a compact, readable introduction to Git for
new users, as well as a reference to common commands and procedures for those of you
with Git experience.",
"website": "http://chimera.labs.oreilly.com/books/1230000000561/index.html"
},
{
"isbn": "9781449337711",
"title": "Designing Evolvable Web APIs with ASP.NET",
"subtitle": "Harnessing the Power of the Web",
"author": "Glenn Block, et al.",
"published": "2014-04-07T00:00:00.000Z",
"category": "Fiction",
"pages": 538,
"description": "Design and build Web APIs for a broad range of clients—including
browsers and mobile devices—that can adapt to change over time. This practical, hands-on
guide takes you through the theory and tools you need to build evolvable HTTP services
with Microsoft’s ASP.NET Web API framework. In the process, you’ll learn how design and
implement a real-world Web API.",
"website": "http://chimera.labs.oreilly.com/books/1234000001708/index.html"
}
]
}
Parsing file in javascript

<!DOCTYPE html>
<html>
<body>

<p>Access an array value of a JSON object.</p>

<p id="demo"></p>

<script>

var bk, x, y;
bk = {
"books":[
{
"isbn": "9781593275846",
"title": "Eloquent JavaScript, Second Edition",
"subtitle": "A Modern Introduction to Programming",
"author": "Marijn Haverbeke",
"published": "2014-12-14T00:00:00.000Z",
"category": "Fiction",
"pages": 472,
"description": "JavaScript lies at the heart of almost every modern web application,
from social apps to the newest browser-based games. Though simple for beginners to pick
up and play with, JavaScript is a flexible, complex language that you can use to build full-
scale applications.",
"website": "http://eloquentjavascript.net/"
},
{
"isbn": "9781449331818",
"title": "Learning JavaScript Design Patterns",
"subtitle": "A JavaScript and jQuery Developer's Guide",
"author": "Addy Osmani",
"published": "2012-07-01T00:00:00.000Z",
"category": "Adventure",
"pages": 254,
"description": "With Learning JavaScript Design Patterns, you'll learn how to write
beautiful, structured, and maintainable JavaScript by applying classical and modern design
patterns to the language. If you want to keep your code efficient, more manageable, and
up-to-date with the latest best practices, this book is for you.",
"website": "http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/"
},
{
"isbn": "9781449365035",
"title": "Speaking JavaScript",
"subtitle": "An In-Depth Guide for Programmers",
"author": "Axel Rauschmayer",
"published": "2014-02-01T00:00:00.000Z",
"category": "Comedy",
"pages": 460,
"description": "Like it or not, JavaScript is everywhere these days-from browser to
server to mobile-and now you, too, need to learn the language or dive deeper than you
have. This concise book guides you into and through JavaScript, written by a veteran
programmer who once found himself in the same position.",
"website": "http://speakingjs.com/"
},
{
"isbn": "9781491950296",
"title": "Programming JavaScript Applications",
"subtitle": "Robust Web Architecture with Node, HTML5, and Modern JS Libraries",
"author": "Eric Elliott",
"published": "2014-07-01T00:00:00.000Z",
"category": "Fiction",
"pages": 254,
"description": "Take advantage of JavaScript's power to build robust web-scale or
enterprise applications that are easy to extend and maintain. By applying the design
patterns outlined in this practical book, experienced JavaScript developers will learn how to
write flexible and resilient code that's easier-yes, easier-to work with as your code base
grows.",
"website": "http://chimera.labs.oreilly.com/books/1234000000262/index.html"
},
{
"isbn": "9781593277574",
"title": "Understanding ECMAScript 6",
"subtitle": "The Definitive Guide for JavaScript Developers",
"author": "Nicholas C. Zakas",
"published": "2016-09-03T00:00:00.000Z",
"category": "Comedy",
"pages": 352,
"description": "ECMAScript 6 represents the biggest update to the core of JavaScript in
the history of the language. In Understanding ECMAScript 6, expert developer Nicholas C.
Zakas provides a complete guide to the object types, syntax, and other exciting changes that
ECMAScript 6 brings to JavaScript.",
"website": "https://leanpub.com/understandinges6/read"
},
{
"isbn": "9781491904244",
"title": "You Don't Know JS",
"subtitle": "ES6 & Beyond",
"author": "Kyle Simpson",
"published": "2015-12-27T00:00:00.000Z",
"category": "Advemture",
"pages": 278,
"description": "No matter how much experience you have with JavaScript, odds are you
don’t fully understand the language. As part of the You Don’t Know JS series, this compact
guide focuses on new features available in ECMAScript 6 (ES6), the latest version of the
standard upon which JavaScript is built.",
"website": "https://github.com/getify/You-Dont-Know-
JS/tree/master/es6%20&%20beyond"
},
{
"isbn": "9781449325862",
"title": "Git Pocket Guide",
"subtitle": "A Working Introduction",
"author": "Richard E. Silverman",
"published": "2013-08-02T00:00:00.000Z",
"category": "Advemture",
"pages": 234,
"description": "This pocket guide is the perfect on-the-job companion to Git, the
distributed version control system. It provides a compact, readable introduction to Git for
new users, as well as a reference to common commands and procedures for those of you
with Git experience.",
"website": "http://chimera.labs.oreilly.com/books/1230000000561/index.html"
},
{
"isbn": "9781449337711",
"title": "Designing Evolvable Web APIs with ASP.NET",
"subtitle": "Harnessing the Power of the Web",
"author": "Glenn Block, et al.",
"published": "2014-04-07T00:00:00.000Z",
"category": "Fiction",
"pages": 538,
"description": "Design and build Web APIs for a broad range of clients—including
browsers and mobile devices—that can adapt to change over time. This practical, hands-on
guide takes you through the theory and tools you need to build evolvable HTTP services
with Microsoft’s ASP.NET Web API framework. In the process, you’ll learn how design and
implement a real-world Web API.",
"website": "http://chimera.labs.oreilly.com/books/1234000001708/index.html"
}
]
};
for (i in bk.books)
{
x = bk.books[i].category;
if(x === "Fiction")
{
y += bk.books[i].title + "<br>";
}
}

document.getElementById("demo").innerHTML = y;

</script>

</body>
</html>
Json validator link :

Copy and paste the json in the link:

Click validate json:


Output:

9.Single page application


<!DOCTYPE html>
<html>
<head>
<title></title>

<link rel="stylesheet" type="text/css" href="poster.css">

<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

<script>
$(document).ready(function(){
$("#onepiece").hide();
$("#avenger").hide();

$(".btn1").submit(function() {
var text = $('#txt_name').val();
if (text == "avenger")
{
$("#onepiece").hide();
$("#avenger").show();
return false;
}
else if (text=="onepiece")
{
$("#avenger").hide();
$("#onepiece").show();
return false;
}
else{
alert("podaga");
$("#adibha").hide();
$("#selva").hide();
}

});
});
</script>
</head>
<body>
<form class="btn1">
<div class="search">
<input type="text" required="required" class="search" id="txt_name"
placeholder="Search for Think..." >
</div>

<div class="search_button">
<button type="submit" class="search_button " value="search"
name="button" id="search">Search</button>
</div>

</form>

<div class="poster1">
<p id="avenger" class="sel"><font face="time new roman" color="red"
size="5">
Marvel Avenger</font>
<img src="avengers.jpg" height="200" width="200">
</p>
</div>

<div class="poster2">
<p id="onepiece" class="adi">
<font face="time new roman" color="red" size="5">
One Piece</font>
<img src="onepiece.jpg" height="200" width="200"></p>
</div>
</body>
</html>

Output:

You might also like