Scribd
Upload
4 views

css ex_pr

Uploaded by

harshdpatil445
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

css ex_pr

Uploaded by

harshdpatil445
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 25

1

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iframe tag use</title>
</head>
<body>
<div id="menu">
<ul>
<a href="fruits.html" target="frame3">Fruits</a>
<a href="flower.html" target="frame3">Flower</a>
<a href="cities.html" target="frame3">Cities</a>
</ul>
</div>
<iframe id="frame3" name="frame3" src="" frameborder="2" height="100%" width="100%">This is
a frame</iframe>

<script>
document.querySelectorAll('#menu a').forEach(link =>{

document.getElementById("frame3").innerHTML=this.href;
});

</script>

</body>
</html>
2

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>replacing a word</title>
</head>

<body>

<script>

var str1= "I will Fail";

var ReplacedString=str1.replace('Fail','Pass');

document.write("Old String: "+str1);

document.write("<br>")

document.write("Updated String:"+ReplacedString);

</script>

</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Cookie</title>

</head>

<body>

<!-- //Explain how to read and write cookie value by implementing an example. -->

<button onclick="setCookie()">Set Cookie</button>

<p id="cookieDisplay">Cookie will be displayed here.</p>

<script>

function setCookie() {

document.cookie = "MyName=Hello, Cookie!";


display();

function getCookie(name) {

var cookies = document.cookie.split(';');

for (var i = 0; i < cookies.length; i++) {

var cookie = cookies[i].trim();

if (cookie.startsWith(name + '=')) {

return cookie.substring(name.length + 1);

return "";

function display(){

var cookieValue = getCookie("MyName");

if (cookieValue) {

document.getElementById("cookieDisplay").innerText = "Cookie Value: " + cookieValue;

</script>

</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Validation</title>

</head>
<body>

<p id="vdresult">Registration Form</p>

<form action="">

<label>Enter Name:

<input type="text" id="name" name="name" required>

Enter Email:

<input type="text" id="Email" name="Email" required>

</label>

</form>

<script>

function Validation(){

var nameInput=document.getElementById("name");

var mailInput=document.getElementById("Email");

var validationResult=document.getElementById("vdresult");

var name = nameInput.value.trim();

var Email = mailInput.value.trim();

var mailpattern=/^[a-zA-Z0-9._-]+@[a-zA-z0-9.-]+\.[a-zA-Z]{2,4}$/;

if(name=== ""|| Email=== ""){

vdresult.textContent="Both Name and Email are required";

else if(!Email.match(mailpattern)){

vdresult.textContent="Invalid email address";

else{

vdresult.textContent="Name and email are valid. Form submitted!";

}
</script>

<button onclick="Validation()" value="Submit">Submit</button>

</body>

</html>

<!-- Write a JavaScript function to create Fibonacci series till user defines it. -->

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Fibbonessi</title>

</head>

<body>

<button onclick="startFibbo()">Start Fibbo here</button>

<p id="fibbos">Your series will be displayed here</p>

<script>

function startFibbo() {

let maxNumber = parseInt(prompt("Enter a maximum number:"));

if (isNaN(maxNumber) || maxNumber < 0) {

document.getElementById("fibbos").textContent = "Please Eneter a valid Non editable


number";

return;

let fibSeries = [0, 1];

let nextfib = 1;

while (nextfib <= maxNumber) {

fibSeries.push(nextfib);
nextfib = fibSeries[fibSeries.length - 1] + fibSeries[fibSeries.length - 2];

document.getElementById("fibbos").textContent = "Fibbinessi Series up to:" + maxNumber +


": " + fibSeries.join(", ");

</script>

</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>RadioSelection</title>

</head>

<body>

<script>

function updateOption() {

const fruits = ["Apple", "Banana", "Cherry", "Date"];

const vegetables = ["Carrot", "Broccoli", "Spinach", "Pepper"];

//Get the dropdown element by its ID

const select = document.getElementById("options");

select.innerHTML = "";

// Check which radio button is selected (fruits or vegetables)


const isFruitSelected = document.getElementById("fruits").checked;

const options = isFruitSelected ? fruits : vegetables;

options.forEach(option => {

const opt = document.createElement("option");

opt.value = option;

opt.textContent=option;

select.appendChild(opt);

});

</script>

<script>

updateOption();

</script>

<h1> Select Fruits or vegetables</h1>

<label for="">

<input type="radio" id="fruits" name="category" value="fruits" onclick="


updateOption()"checked>

Fruits

</label>

<label for="">

<input type="radio" id="vegetables" name="category" value="vegetables"


onclick="updateOption()">

Vegetables

</label>

<br>

<br>

<label for="option">Choose an option</label>

<select id="options">

<!-- options will be populated here -->


</select>

</body>

</html>

;;;

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Fruits and Vegetables Selector</title>

<script>

// Function to update the dropdown options based on the selected category

function updateOptions() {

// Arrays containing fruits and vegetables

const fruits = ["Apple", "Banana", "Cherry", "Date"];

const vegetables = ["Carrot", "Broccoli", "Spinach", "Pepper"];

// Get the dropdown element by its ID

const select = document.getElementById("options");

select.innerHTML = ""; // Clear any existing options in the dropdown

// Check which radio button is selected (fruits or vegetables)

const isFruitsSelected = document.getElementById("fruits").checked;

// Choose the appropriate array based on the selected radio button

const options = isFruitsSelected ? fruits : vegetables;


// Loop through the selected options and create dropdown items

options.forEach(option => {

// Create a new option element

const opt = document.createElement("option");

opt.value = option; // Set the value of the option

opt.textContent = option; // Set the displayed text of the option

select.appendChild(opt); // Add the option to the dropdown

});

</script>

</head>

<body>

<h1>Select Fruits or Vegetables</h1>

<!-- Radio buttons to select either Fruits or Vegetables -->

<label>

<input type="radio" id="fruits" name="category" value="fruits" onclick="updateOptions()"


checked>

Fruits

</label>

<label>

<input type="radio" id="vegetables" name="category" value="vegetables"


onclick="updateOptions()">

Vegetables

</label>

<br><br>

<!-- Label and dropdown for selecting an option -->

<label for="options">Choose an option:</label>

<select id="options">
<!-- Options will be populated here -->

</select>

<script>

// Call the function to initialize the dropdown with fruits by default

updateOptions();

</script>

</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Evaluate Checkbox Selection</title>

</head>

<body>

<form action="" name="selection">

<p>

<input type="checkbox" name="HS" id="HS">High School

<input type="checkbox" name="AD" id="AD">Associate Degree

<input type="checkbox" name="BD" id="BD">Backlor Degree

<button onclick="Education()">Check for selections!</button>

</p>

</form>
<script>

function Education(){

var selection="You selected:"

with (document.forms.selection)

if (HS.checked== true) {

selection+="High School";

if(AD.checked == true){

selection+=", Associate Degree";

if(BD.checked ==true){

selection+=", BAchlor Degree";

document.write("Your Selection"+selection);

</script>

</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Registration</title>
</head>

<body>

<form action="">

<label for="name">

Enter your name:

<input type="text" name="name" id="name">

<br>

Enter Your Email Address:

<input type="text" name="Email" id="Email" required placeholder="abc123@gmail.com">

<br>

Gender:

<input type="radio" name="Gender" id="Male">Male

<input type="radio" name="Gender" id="Female"> Female

</label>

</form>

<button type="button" value="submit" onclick="Register()">Register</button>

<h1 id="validation">Registration Result will be Displayed here>>></h1>

<script>

function Register() {

const FullName = document.getElementById("name").value;

const EmailAdd = document.getElementById("Email").value;

const radiosignal = document.getElementsByName("Gender");

var mailpattern = /^[a-zA-Z0-9._-]+@[a-zA-z0-9.-]+\.[a-zA-Z]{2,4}$/;

let selectedGender = "";

for (let radio of radiosignal) {

if (radio.checked) {

selectedGender = radio.value;

break;
}

if (FullName != "" && EmailAdd.match(mailpattern) && selectedGender != "") {

document.getElementById("validation").textContent = "Registration successfull";

else {

document.getElementById("validation").textContent = "Registration Unsuccessfull";

</script>

</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<!-- Status bar is disabled in modern browsers we need to set a proper css to see effects but this is
not like our intention -->

<body>

<p id="scrollingMsg">Status bar will be displayed here....</p>


<script>

let msg = "This is an example of a scrolling message";

let spacer = "...";

let pos = 0; // Starting position

function ScrollMessage() {

// Create the scrolling message

const scrollingText = msg.substring(pos) + spacer + msg.substring(0, pos);

document.getElementById("scrollingMsg").textContent = scrollingText;

// Update position

pos++;

if (pos > msg.length) {

pos = 0; // Reset position

// Call ScrollMessage again after a timeout

setTimeout(ScrollMessage,100);

window.onload = ScrollMessage;

</script>

</body>

</html>

10

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Click n Open</title>

</head>

<body style="background-color: green; color: black;">

<h3>Selct a option to navigate to....</h3>

<select onchange="show(this)" name="selction" id="selction">

<option value="https://www.google.com">Msbte</option>

<option value="https://www.google.com">Google</option>

<option value="https://www.tutorialspoint.com">Tutorials Point</option>

</select>

<script>

function show(select){

window.location.href=select.value;

</script>

</body>

</html>

11

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Email Concealing</title>

</head>

<body>

<label for="email">

Enter your Email address:

<input type="email" name="email" id="email" placeholder="abc123@gmail.com">


</label>

<p id="result"></p>

<button onclick="ConcealEmail()">Conceal</button>

<script>

function ConcealEmail()

const email=document.getElementById("email").value;

const atIndex=email.indexOf('@');

if(atIndex > 2){

const sliced=email.slice(atIndex)

const consealing=email[0] + "****" +sliced;

document.getElementById("result").innerText="Concealedmail:"+consealing;

else

document.getElementById("result").innerText="Email Format is not valid";

</script>

</body>

</html>

12

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Interactive Hover Example</title>

<style>
#hovertext {

margin-bottom: 20px;

font-size: 18px;

font-weight: bold;

</style>

</head>

<body>

<h1>Hover Over the Elements</h1>

<div id="hovertext"

onmouseover="changeText('Hovered over Text Boxes!!')"

onmouseout="changeText('Hover over the boxes for different actions')">

Hover over this text box!

</div>

<div

onmouseover="changeImage('hover.jpg')"

onmouseout="changeImage('default.jpg')">

<img id="img" src="default.jpg" alt="default image" width="200" height="150">

</div>

<script>

function changeText(newText) {

document.getElementById("hovertext").innerHTML = newText;

function changeImage(newImage) {

document.getElementById("img").src = newImage;

</script>
</body>

</html>

13

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body onload="ShowBanners()">

<a href="javascript: ShowLinks()">

<img src="" width="100" height="500" name="ChangeBanner" /></a>

</body>

<script>

MyBanners = new Array('ajp.jpg', 'css.jpg')

banner = 0

MyBannerLinks = new Array('https://www.amazon.in/Advanced-Java-Programming-


Ramaraj/dp/9388005392', 'https://www.amazon.in/CSS-Basic-Fundamental-Guide-Beginners-
ebook/dp/B07DX74TZ2')

function ShowLinks() {

document.location.href = MyBannerLinks[banner]

function ShowBanners() {

if (document.images) {

banner++

if (banner == MyBanners.length) {

banner = 0
}

document.ChangeBanner.src = MyBanners[banner]

setTimeout("ShowBanners()", 3000)

</script>

</html>

13.1

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Banner Advertisement</title>

</head>

<body onload="showBanners()">

<a href="javascript: showLinks()">

<img src="" alt="banner" height="500" width="100" name="ChangeBanner" style="border: 1px


solid black;">

</a>

<script>

const MyBanner = ['ajp.jpg', 'css.jpg'];

const MyBannerLinks = [

'https://www.amazon.in/Advanced-Java-Programming-Ramaraj/dp/9388005392',

'https://www.amazon.in/CSS-Basic-Fundamental-Guide-Beginners-ebook/dp/B07DX74TZ2'

];

let banner = 0;
function showLinks() {

document.location.href = MyBannerLinks[banner];

function showBanners() {

if (document.images) {

banner++;

if (banner >= MyBanner.length) {

banner = 0;

document.ChangeBanner.src = MyBanner[banner];

setTimeout(showBanners, 5000);

</script>

</body>

</html>

14

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Slide Show</title>

<script>

let img_array = ['/college.png', '/logo.jpg', '/profile.jpg', '/speech.jpg', '/university.jpg'];

let img = 0;

function DisplayingImg(num) {
img = img + num;

if (img > img_array.length - 1) {

img = 0;

if (img < 0) {

img = img_array.length - 1;

document.getElementById("slideImg").src = img_array[img]; // Update the src attribute of the


image

window.onload = function() {

document.getElementById("slideImg").src = img_array[img]; // Set initial image on page load

};

</script>

</head>

<body>

<img id="slideImg" src="college.png" alt="Slide Image" width="400" height="220" />

<input type="button" value="Previous" onclick="DisplayingImg(-1)">

<input type="button" value="Next" onclick="DisplayingImg(1)">

</body>

</html>

15

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

<p id="result"></p>

<input type="button" value="Back" onclick="previousPage()">

<input type="button" value="Forward" onclick="NextPage()">

<input type="button" value="go" onclick="go1()">

<script>

//This is function for history properties::::

function NextPage(){

window.history.forward();

function previousPage(){

window.history.back();

function go()

window.history.go1(2);

// let host=window.location.host;

// let protocol=window.location.protocol;

// let port=window.location.port;

// let href=window.location.href;

// let Origin=window.location.origin;

// let pathname=window.location.pathname;

// document.write("Properties are as follows:: "+"Host:"+host+", Protocol:"+protocol+",


Port:"+port+", Href:"+href+", Origin: "+Origin+", Pathaname: "+pathname);

let array = ['host', 'protocol', 'port', 'href', 'origin', 'pathname'];


let result = [];

for (let i = 0; i < array.length; i++) {

result.push(window.location[array[i]]);

let outputString = "Properties are as follows: " +

array.map((prop, index) => `${prop}: ${result[index]}`).join(", ");

// Display the results in the output div

document.getElementById("result").innerText = outputString;

</script>

</body>

</html>

16

<html>

<head>

<title>Getter & Setters</title>

</head>

<body>

<script>

var mycar={

carName: "MG Hector",

get nameCar(){

return this.carName;

},

set nameCar(newName){

return this.carName=newName;

},
};

document.write("Car Name is:"+mycar.carName);

mycar.nameCar = "Bugatti";

document.write("cars new name is:"+mycar.nameCar);

</script>

</body>

</html>

17

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Flowers array</title>

</head>

<body>

<p id="flr"></p>

<script>

let flower=['Mogra', 'Lotus', 'Rose'];

flower.forEach(element => {

document.write(element+", ");

});

</script>

</body>

</ html >

18

<html>

<script>

function calAvg(){
var sub1 = 56;

var sub2 = 66;

var sub3 = 89;

var sub4 = 99;

var sub5 = 78;

var avg = (sub1+sub2+sub3+sub4+sub5)/5;

if(avg >= 90){

document.write("A Grade");

else if(avg >= 80){

document.write("B Grade");

else if(avg >= 70){

document.write("C Grade");

else{

document.write("F Grade");

</script>

<body>

<input type="button" value="Check Average" onclick="calAvg()">

</body>

</html>

You might also like