Scribd
Upload
4 views

css ex_pr

Uploaded by

harshdpatil445
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
4 views

css ex_pr

Uploaded by

harshdpatil445
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/ 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