Scribd
Upload
110 views28 pages

Web Technology Slips

Uploaded by

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

Web Technology Slips

Uploaded by

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

WEB TECHNOLOGY

SLIP-2

1.

<html>

<head>

<title>Multiplication Table</title>

</head>

<body>

<script>

var num = prompt("Enter a number:");

for (let i = 1; i <= 10; i++)

document.write(`${num} x ${i} = ${num * i} <br>`);

</script>

</body>

</html>

2.

<html>

<head>

<title>Working With Tables</title>

<style>

th

color:orange;

td
{

color:red;

body

background-color:yellow;

</style>

</head>

<body>

<table border=2 align=center>

<tr>

<th rowspan=2>Book_No</th>

<th rowspan=2>Book_Name</th>

<th colspan=2>Price</th>

</tr>

<tr>

<th>Rs</th>

<th>Paise</th>

</tr>

<tr>

<td>101</td>

<td>DBMS</td>

<td>200</td>

<td>50</td>

</tr>

<tr>

<td>102</td>

<td>C-Prog</td>

<td>200</td>

<td>50</td>
</tr>

<tr>

<td>103</td>

<td>JAVA</td>

<td>300</td>

<td>00</td>

</tr>

<tr>

<td>104</td>

<td>PHP</td>

<td>250</td>

<td>50</td>

</tr>

<tr>

<td>105</td>

<td>ASP</td>

<td>100</td>

<td>00</td>

</tr>

</table>

</body>

</html>

SLIP-4

1.

<html>

<head>

<title>Armstrong Number Checker</title>

</head>

<body>
<h1>Armstrong Number Checker</h1>

<p>Enter a number:</p>

<input type="number" id="inputNumber">

<button onclick="checkArmstrong()">Check</button>

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

<script>

function checkArmstrong()

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

let sum = 0;

let num = inputNumber;

while (num > 0)

const digit = num % 10;

sum =sum+ (digit * digit * digit);

num = parseInt(num / 10);

if (sum === parseInt(inputNumber))

document.getElementById("result").innerHTML = `${inputNumber} is an Armstrong number`;

else

document.getElementById("result").innerHTML = `${inputNumber} is not an Armstrong number`;

</script>

</body>

</html>

2.
2.

<html>

<head>

<title>RNC BYTCO</title>

<style>

body

background-image:url(itachi.jpg);

</style>

<link rel="stylesheet" href="1.css">

</head>

<body>

<div>

<h1>RNC BYTCO</h1>

<p>NASHIK ROAD</p>

</div>

<h3 class="color">COURSE OFFERED</h3>

<h4 class="color">BBA</h4>

<h5 class="color">BCA</h5>

<h6 class="color">BCS</h6>

<marquee class="color">css stands for cascading style sheet</marquee>

<img src="eren.jpg"width=10% height="10%">

</body>

</html>

1.CSS

div

{
color:yellow;

font-size:40px;

margin:0 auto;

text-align:center;

.color

color:red;

font-size:12px;

SLIP-6

1.

<html>

<head>

<title>Prime Number</title>

</head>

<body>

<h1>Prime Number </h1>

<p>Enter a number:</p>

<input type="number" id="n">

<button onclick="Prime()">Check</button>

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

<script>

function Prime()

const inputNumber = document.getElementById("n").value;

let prime = true;

if (inputNumber == 1)

{
prime = false;

else if (inputNumber > 1)

for (let i = 2; i < inputNumber; i++) {

if (inputNumber % i == 0) {

prime = false;

break;

else

prime = false;

if (prime)

document.getElementById("result").innerHTML = `${inputNumber} is a prime number`;

else

document.getElementById("result").innerHTML = `${inputNumber} is not a prime number`;

</script>

</body>

</html>

2.

<html>

<head>
<title>Calendar</title>

<style>

table

border-collapse: collapse;

td

padding: 10px;

border: 1px solid #ddd;

text-align: center;

th

padding: 10px;

border: 1px solid #ddd;

background-color: #f2f2f2;

text-align: center;

color: #333;

.weekday {

background-color: #ddd;

color: #333;

.holiday {

background-color: #f00;

color: #fff;

</style>

</head>

<body>
<div>

<h1>Advertisement Image</h1>

<img src="advertisement.jpg" alt="Advertisement Image">

</div>

<div>

<h1>Calendar</h1>

<table>

<thead>

<tr>

<th colspan="7">Month Name, Year</th>

</tr>

<tr>

<th class="weekday">Sun</th>

<th class="weekday">Mon</th>

<th class="weekday">Tue</th>

<th class="weekday">Wed</th>

<th class="weekday">Thu</th>

<th class="weekday">Fri</th>

<th class="weekday">Sat</th>

</tr>

</thead>

<tbody>

<tr>

<td class="holiday">1</td>

<td>2</td>

<td>3</td>

<td>4</td>

<td>5</td>

<td>6</td>

<td class="holiday">7</td>

</tr>
<tr>

<td>8</td>

<td>9</td>

<td>10</td>

<td>11</td>

<td>12</td>

<td>13</td>

<td class="holiday">14</td>

</tr>

<tr>

<td>15</td>

<td>16</td>

<td>17</td>

<td>18</td>

<td>19</td>

<td>20</td>

<td class="holiday">21</td>

</tr>

<tr>

<td>22</td>

<td>23</td>

<td>24</td>

<td>25</td>

<td>26</td>

<td>27</td>

<td class="holiday">28</td>

</tr>

<tr>

<td>29</td>

<td>30</td>

<td class="holiday">31</td>
<td></td>

<td></td>

<td></td>

<td></td>

</tr>

</tbody>

</table>

</div>

</body>

</html>

SLIP-8

1.

<html>

<head>

<title>Character Count Checker</title>

</head>

<body>

<h1>Character Count Checker</h1>

<p>Enter a string:</p>

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

<p>Enter a character:</p>

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

<button onclick="countChar()">Count</button>

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

<script>

function countChar()

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


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

let count = 0;

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

if (inputString[i] === inputChar)

count++;

document.getElementById("result").innerHTML = `The character ${inputChar} appears ${count}


times in the string`;

</script>

</body>

</html>

2.

<html>

<head>

<title>Myself</title>

<style>

body

background-color:pink;

div

color:red;

text-align:center;

font-size:20px;

font-family:Arial;
}

marquee

color:orange;

font-size:15px;

</style>

</head>

<body>

<div>

<h1>Sujal Vora</h1>

<h2>Shital Vora</h2>

<h3>Aaishwarya Vora</h3>

<h4>Sejal Vora</h4>

</div>

<marquee>Happy Family</marquee>

<img src="eren.jpg" width="20%" height="20%">

</body>

</html>

SLIP-10

1.

<html>

<head>

<title>Factors</title>

</head>

<body>

<h1>Factors</h1>

<p>Enter a number:</p>

<input type="number" id="n">

<button onclick="Factors()">Display Factors</button>


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

<script>

function Factors()

const number = parseInt(document.getElementById("n").value);

let factors = [];

for (let i = 1; i <= number; i++)

if (number % i === 0)

factors.push(i);

let result = "";

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

result += factors[i] + " ";

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

</script>

</body>

</html>

2.

<!DOCTYPE html>

<html>

<head>

<title>List</title>

</head>

<body>

<h1>List</h1>
<ol type="1" style="color:yellow">

<li>DYP

<ul type="disc" style="color:red">

<li>Courses</li>

<ul type="square" style="color:orange;font-size:20px;">

<li>BCS</li>

<li>BCA</li>

</ul>

</ul>

</li>

<li>Indira

<ul type="disc" style="color:red">

<li>Courses</li>

<ul type="square"style="color:orange;font-size:20px;">

<li>BCA</li>

<li>MCs</li>

</ul>

</ul>

</li>

<li>ATSS

<ul type="disc" style="color:red">

<li>Courses</li>

<ul type="square" style="color:orange;font-size:20px;">

<li>BBA</li>

<li>BCS</li>

</ul>

</ul>

</li>

</ol>

</body>

</html>
SLIP-11

1.

<html>

<head>

<title>Character at Specified Position</title>

</head>

<body>

<h1>Character at Specified Position</h1>

<p>Enter a string:</p>

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

<p>Enter a position:</p>

<input type="number" id="p">

<button onclick="Character()">Character</button>

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

<script>

function Character() {

const string = document.getElementById("s").value;

const position = parseInt(document.getElementById("p").value);

const resultElement = document.getElementById("result");

if(position < 1 || position > string.length)

resultElement.innerText = "Invalid position";

else

const character = string.charAt(position - 1);

resultElement.innerText = `Character at position ${position}: ${character}`;

}
</script>

</body>

</html>

2.

<html>

<head>

<link rel="stylesheet" href="2.css">

</head>

<body>

<li class="blue">Non Flowering Plants

<ul type=circle>

<li>Fern</li>

<li>Spore</li>

</ul>

</li>

<li class="blue">Flowering Plants

<ul type=square>

<li>Lily</li>

<li>Rose</li>

<ol type="1">

<li>Red Rose</li>

<li>Pink Rose</li>

</ol>

</li>

</ul>

</li>

</body>

</html>
2.css

ul{

color:green;

font-size:20px;

font-size:arial;

ol{

color:red;

font-size:20px;

font-family:sans-serif;

.blue{

color:blue;

font-size:20px;

font-family:serif;

body{

background-color:yellow;

SLIP-15

1.

<html>

<head>

<title>Current Date and Time</title>

</head>

<body>

<h1>Welcome to my website!</h1>

<p>Today is <span id="day"></span>, <span id="date"></span> <span id="month"></span> <span


id="year"></span>.</p>

<p>The time is <span id="time"></span>.</p>


<p id="greeting"></p>

<script>

var now = new Date();

var daysOfWeek = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday",


"Saturday"];

var dayOfWeek = daysOfWeek[now.getDay()];

var date = now.getDate();

var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September",
"October", "November", "December"];

var month = months[now.getMonth()];

var year = now.getFullYear();

var hours = now.getHours();

var minutes = now.getMinutes();

var seconds = now.getSeconds();

document.getElementById("day").innerHTML = dayOfWeek;

document.getElementById("date").innerHTML = date;

document.getElementById("month").innerHTML = month;

document.getElementById("year").innerHTML = year;

document.getElementById("time").innerHTML = hours + ":" + minutes + ":" + seconds;

var greeting;

if (hours < 12)

greeting = "Good morning!";

else if (hours < 18)

greeting = "Good afternoon!";

else

greeting = "Good evening!";

}
document.getElementById("greeting").innerHTML = greeting;

</script>

</body>

</html>

2.

<html>

<head>

<title>NASHIK</title>

<style>

body

background-color:pink;

</style>

</head>

<body>

<h1 style="color:blue;font-size:50px;">NASHIK</h1>

<h2>LANDMARKS</h2>

<h3 style="color:red;font-size:30px;">ISKCON TEMPLE</h3>

<h4 style="color:orange;font-size:20px;">RAMKUND</h4>

<h5 style="color:yellow;font-size:12px;">GANGA GHAT</h5>

<marquee>WONDERFUL PLACE TO VISIT</marquee>

<img src="eren.jpg"width=10% height="10%">

</body>

</html>

SLIP-16

1.

<html>
<head>

<title>Sentence Transformation</title>

</head>

<body>

<h1>Sentence Transformation</h1>

<p>Enter a sentence:</p>

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

<button onclick="transformSentence()">Transform</button>

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

<script>

function transformSentence()

const sentence = document.getElementById("sentenceInput").value;

let transformedSentence = "";

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

const char = sentence.charAt(i);

if (char === " ")

transformedSentence = transformedSentence+"*";

else if (!isNaN(parseInt(char)))

transformedSentence = transformedSentence+ "?";

else

transformedSentence = transformedSentence+char;

document.getElementById("result").innerText = transformedSentence;
}

</script>

</body>

</html>

2.

<html>

<head>

<title>List</title>

</head>

<body>

<ul type="disc" style="color:red;font-size:20px;">

<li>Honda

<ul type="square" style="color:green;font-size:20px;">

<li>petrol</li>

<ol>

<li>)Honda City</li>

<li>)Brio</li>

</ol>

<li>Diesel

<ol>

<li>)Amaze</li>

<li>)Brio</li>

</ol>

</ul>

</ul>

<ul type="disc" style="color:orange;font-size:20px;">

<li>Maruti Suzuki

<ul type="square"style="color:yellow;font-size:20px;">

<li>petrol</li>
<ol>

<li>)Swift</li>

<li>)Ritz</li>

</ol>

<li>Diesel

<ol>

<li>)Swift-Desire</li>

</ol>

</ul>

</ul>

</body>

</html>

SLIP-18

1.

<html>

<head>

<title>Odd Numbers</title>

</head>

<body>

<h1>Odd Numbers</h1>

<p>Enter a number:</p>

<input type="number" id="n">

<button onclick="Odd()">Odd Numbers</button>

<ul id="result"></ul>

<script>

function Odd()

const number = parseInt(document.getElementById("n").value);

let list = "";


for (let i = 1; i <= number; i += 2)

list = list+"<li>"+i+"</li>";

document.getElementById("result").innerHTML = list;

</script>

</body>

</html>

2.

<html>

<head>

<title>Working With Tables</title>

<link rel="stylesheet" href="3.css">

</head>

<body>

<table border=2 align=center>

<tr>

<th rowspan=2>Book_No</th>

<th rowspan=2>Book_Name</th>

<th colspan=2>Price</th>

</tr>

<tr>

<th>Rs</th>

<th>Paise</th>

</tr>

<tr>

<td>101</td>

<td>DBMS</td>

<td>200</td>
<td>50</td>

</tr>

<tr>

<td>102</td>

<td>C-Prog</td>

<td>200</td>

<td>50</td>

</tr>

<tr>

<td>103</td>

<td>JAVA</td>

<td>300</td>

<td>00</td>

</tr>

<tr>

<td>104</td>

<td>PHP</td>

<td>250</td>

<td>50</td>

</tr>

<tr>

<td>105</td>

<td>ASP</td>

<td>100</td>

<td>00</td>

</tr>

</table>

</body>

</html>

3.css
th

color:orange;

td

color:red;

body

background-color:yellow;

SLIP-19

1.

<html>

<head>

<title>Factorial Calculation</title>

</head>

<body>

<h1>Factorial Calculation</h1>

Enter a number:

<input type="number" id="n">

<button onclick="Factorial()">Calculate</button>

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

<script>

function Factorial() {

var f = document.getElementById("n").value;
let factorial = 1;

for (let i = 1; i <= f; i++)

factorial = factorial * i;

document.getElementById("result").innerHTML = `The factorial of ${f} is ${factorial}`;

</script>

</body>

</html>

2.

<html>

<head>

<title>Travel Plan Booking Form</title>

</head>

<body>

<h1>Travel Plan Booking Form</h1>

<form>

Name:

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

<br>

Address:

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

<br>

Contact Number:

<input type="text" name="contact-no">

<br>

Gender:

<input type="radio" value="Male">Male


<input type="radio" value="Female">Female

<br>

Preffered Season:

<input type="checkbox" id="spring" value="spring">Spring

<input type="checkbox" id="summer" value="summer">Summer

<input type="checkbox" id="winter" value="winter">Winter

<br>

<select id="location" name="location">

<option value="Nashik" value="Nashik">Nashik</option>

<option value="Pune" value="Pune">Pune</option>

<option value="Mumbai" value="Mumbai">Mumbai</option>

</select>

<br>

<input type="submit" value="submit">

<input type="reset" value="reset">

</form>

</body>

</html>

You might also like