Scribd
Upload
17 views30 pages

SAkshi Web

Uploaded by

Karan Rana
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
17 views30 pages

SAkshi Web

Uploaded by

Karan Rana
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/ 30

Problem Statement :-

II. Create an html file named as “4Style_sheet.html”, Include the external style sheet with
necessary tag.
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
border:3px solid red;
background-color: yellow;
color: green;
padding: 10px 10px 10px 10px;
}
nav{
color:red;
}
#one{
border: 2px dotted red;
background-color: pink;
color:purple;
}
#two{
color:red;
}
ol{
border:5px dashed blue;
color:red;

Name: Sakshi Lingwal Sec: C Roll no.: 56 University roll no.: 2019064
background-color:greenyellow;
padding: 10px 10px 10px 10px;
}
span{
text-transform: capitalize;
text-emphasis:bold ;
}
</style>
</head>
<body>
<h1 align="center">This Is My Stylish Website</h1>
<nav>
<a href = "dbms/index.htm">Home</a> |
<a href = "mongodb/index.htm">Backgrounds</a> |
<a href = "mysql/index.htm">Lists</a> |
<a href = "plsql/index.htm">Id vs Classes</a> |
</nav>
<p id="one"> This website is about me!</p>
<p id="two"> My Top Three Favourite Things To Do.</p>
<ol type="1">
<li> <span>T</span>ravel</li>
<li> <span>E</span>at ice cream</li>
<li> <span>R</span>ead a book</li>
</ol>
</body>
</html>

Name: Sakshi Lingwal Sec: C Roll no.: 56 University roll no.: 2019064
*****OUTPUT*****

Name: Sakshi Lingwal Sec: C Roll no.: 56 University roll no.: 2019064
Exp No. 9: Input Output In JavaScript
Aim: To create an HTML page to explain input and output using a calculator with the
use of various predefined functions and objects in JavaScript.
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}

.calculator {
background-color: #fff;
border-radius: 8px;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.input, .output {

Name: Sakshi Lingwal Sec: C Roll no.: 56 University roll no.: 2019064
margin-bottom: 10px;
}

input[type="button"] {
width: 50px;
height: 50px;
font-size: 18px;
margin: 5px;
border: none;
cursor: pointer;
border-radius: 4px;
outline: none;
}

input[type="button"]:hover {
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="calculator">
<div class="input">
<input type="text" id="display" readonly>
</div>
<div class="output">
<input type="button" value="=" onclick="calculate()">
</div>
<div class="buttons">
<input type="button" value="1" onclick="appendToDisplay('1')">
<input type="button" value="2" onclick="appendToDisplay('2')">

Name: Sakshi Lingwal Sec: C Roll no.: 56 University roll no.: 2019064
<input type="button" value="3" onclick="appendToDisplay('3')">
<input type="button" value="+" onclick="appendToDisplay('+')">
<br>
<input type="button" value="4" onclick="appendToDisplay('4')">
<input type="button" value="5" onclick="appendToDisplay('5')">
<input type="button" value="6" onclick="appendToDisplay('6')">
<input type="button" value="-" onclick="appendToDisplay('-')">
<br>
<input type="button" value="7" onclick="appendToDisplay('7')">
<input type="button" value="8" onclick="appendToDisplay('8')">
<input type="button" value="9" onclick="appendToDisplay('9')">
<input type="button" value="*" onclick="appendToDisplay('*')">
<br>
<input type="button" value="0" onclick="appendToDisplay('0')">
<input type="button" value="." onclick="appendToDisplay('.')">
<input type="button" value="/" onclick="appendToDisplay('/')">
<input type="button" value="C" onclick="clearDisplay()">
</div>
</div>

<script>
function appendToDisplay(value) {
document.getElementById('display').value += value;
}

function clearDisplay() {
document.getElementById('display').value = '';
}

function calculate() {

Name: Sakshi Lingwal Sec: C Roll no.: 56 University roll no.: 2019064
try {
var result = eval(document.getElementById('display').value);
document.getElementById('display').value = result;
} catch (error) {
document.getElementById('display').value = 'Error';
}
}
</script>
</body>
</html>

Name: Sakshi Lingwal Sec: C Roll no.: 56 University roll no.: 2019064
*****OUTPUT*****

Name: Sakshi Lingwal Sec: C Roll no.: 56 University roll no.: 2019064
Aim:
II. To create an HTML page to explain input and output using a scientific calculator
with the use of various predefined functions and objects in JavaScript.
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<style>
*{
padding: 0;
margin: 5px;
text-align: center;
}
body {
background-color:white;
}
.calculator {
width: 350px;
height: 320px;
background-color: #c0c0c0;
box-shadow: 0px 0px 0px 10px #666;
border: 5px solid black;
border-radius: 10px;
}
#display {
width: 320px;
height: 40px;
text-align: right;

Name: Sakshi Lingwal Sec: C Roll no.: 56 University roll no.: 2019064
background-color: black;
border: 3px solid white;
font-size: 18px;
left: 2px;
top: 2px;
color: #7fff00;
}
.btnTop{
color: white;
background-color: #6f6f6f;
font-size: 14px;
margin: auto;
width: 50px;
height: 25px;
}
.btnNum {
color: white;
background-color: black;
font-size: 14px;
margin: auto;
width: 50px;
height: 25px;
}
.btnMath {
color: white;
background-color: lightblue;
font-size: 14px;
margin: auto;
width: 50px;
height: 25px;

Name: Sakshi Lingwal Sec: C Roll no.: 56 University roll no.: 2019064
}
.btnOpps {
color: white;
background-color: #ff9933;
font-size: 14px;
margin: auto;
width: 50px;
height: 25px;
}
</style>
<title>Scientific Calculator</title>
</head>
<body>
<form name="sci-calc">
<table class="calculator" cellspacing="0" cellpadding="1">
<tr>
<td colspan="5"><input id="display" name="display" value="0" size="28"
maxlength="25"></td>
</tr>
<tr>
<td><input type="button" class="btnTop" name="btnTop" value="C"
onclick="this.form.display.value= 0 "></td>
<td><input type="button" class="btnTop" name="btnTop" value="<--"
onclick="deleteChar(this.form.display)"></td>
<td><input type="button" class="btnTop" name="btnTop" value="="
onclick="if(checkNum(this.form.display.value)) { compute(this.form) }"></td>
<td><input type="button" class="btnOpps" name="btnOpps" value="&#960;"
onclick="addChar(this.form.display,'3.14159265359')"></td>
<td><input type="button" class="btnMath" name="btnMath" value="%" onclick="
percent(this.form.display)"></td>
</tr>
<tr>

Name: Sakshi Lingwal Sec: C Roll no.: 56 University roll no.: 2019064
<td><input type="button" class="btnNum" name="btnNum" value="7"
onclick="addChar(this.form.display, '7')"></td>
<td><input type="button" class="btnNum" name="btnNum" value="8"
onclick="addChar(this.form.display, '8')"></td>
<td><input type="button" class="btnNum" name="btnNum" value="9"
onclick="addChar(this.form.display, '9')"></td>
<td><input type="button" class="btnOpps" name="btnOpps" value="x&#94;"
onclick="if(checkNum(this.form.display.value)) { exp(this.form) }"></td>
<td><input type="button" class="btnMath" name="btnMath" value="/"
onclick="addChar(this.form.display, '/')"></td>
<tr>
<td><input type="button" class="btnNum" name="btnNum" value="4"
onclick="addChar(this.form.display, '4')"></td>
<td><input type="button" class="btnNum" name="btnNum" value="5"
onclick="addChar(this.form.display, '5')"></td>
<td><input type="button" class="btnNum" name="btnNum" value="6"
onclick="addChar(this.form.display, '6')"></td>
<td><input type="button" class="btnOpps" name="btnOpps" value="ln"
onclick="if(checkNum(this.form.display.value)) { ln(this.form) }"></td>
<td><input type="button" class="btnMath" name="btnMath" value="*"
onclick="addChar(this.form.display, '*')"></td>
</tr>
<tr>
<td><input type="button" class="btnNum" name="btnNum" value="1"
onclick="addChar(this.form.display, '1')"></td>
<td><input type="button" class="btnNum" name="btnNum" value="2"
onclick="addChar(this.form.display, '2')"></td>
<td><input type="button" class="btnNum" name="btnNum" value="3"
onclick="addChar(this.form.display, '3')"></td>
<td><input type="button" class="btnOpps" name="btnOpps" value="&radic;"
onclick="if(checkNum(this.form.display.value)) { sqrt(this.form) }"></td>
<td><input type="button" class="btnMath" name="btnMath" value="-"
onclick="addChar(this.form.display, '-')"></td>
</tr>
<tr>

Name: Sakshi Lingwal Sec: C Roll no.: 56 University roll no.: 2019064
<td><input type="button" class="btnMath" name="btnMath" value="&#177"
onclick="changeSign(this.form.display)"></td>
<td><input type="button" class="btnNum" name="btnNum" value="0"
onclick="addChar(this.form.display, '0')"></td>
<td><input type="button" class="btnMath" name="btnMath" value="&#46;"
onclick="addChar(this.form.display, '&#46;')"></td>
<td><input type="button" class="btnOpps" name="btnOpps" value="x&#50;"
onclick="if(checkNum(this.form.display.value)) { square(this.form) }"></td>
<td><input type="button" class="btnMath" name="btnMath" value="+"
onclick="addChar(this.form.display, '+')"></td>
</tr>
<tr>
<td><input type="button" class="btnMath" name="btnMath" value="("
onclick="addChar(this.form.display, '(')"></td>
<td><input type="button" class="btnMath" name="btnMath" value=")"
onclick="addChar(this.form.display,')')"></td>
<td><input type="button" class="btnMath" name="btnMath" value="cos"
onclick="if(checkNum(this.form.display.value)) { cos(this.form) }"></td>
<td><input type="button" class="btnMath" name="btnMath" value="sin"
onclick="if(checkNum(this.form.display.value)) { sin(this.form) }"></td>
<td><input type="button" class="btnMath" name="btnMath" value="tan"
onclick="if(checkNum(this.form.display.value)) { tan(this.form) }"></td>
</tr>
</tabel>
</form>
<script>
function addChar(input, character) {
if(input.value == null || input.value == "0")
input.value = character
else
input.value += character
}

function cos(form) {

Name: Sakshi Lingwal Sec: C Roll no.: 56 University roll no.: 2019064
form.display.value = Math.cos(form.display.value);
}

function sin(form) {
form.display.value = Math.sin(form.display.value);
}

function tan(form) {
form.display.value = Math.tan(form.display.value);
}

function sqrt(form) {
form.display.value = Math.sqrt(form.display.value);
}

function ln(form) {
form.display.value = Math.log(form.display.value);
}

function exp(form) {
form.display.value = Math.exp(form.display.value);
}

function deleteChar(input) {
input.value = input.value.substring(0, input.value.length - 1)
}
var val = 0.0;
function percent(input) {
val = input.value;
input.value = input.value + "%";

Name: Sakshi Lingwal Sec: C Roll no.: 56 University roll no.: 2019064
}

function changeSign(input) {
if(input.value.substring(0, 1) == "-")
input.value = input.value.substring(1, input.value.length)
else
input.value = "-" + input.value
}

function compute(form) {
form.display.value = eval(form.display.value);
}

function square(form) {
form.display.value = eval(form.display.value) * eval(form.display.value)
}

function checkNum(str) {
for (var i = 0; i < str.length; i++) {
var ch = str.charAt(i);
if (ch < "0" || ch > "9") {
if (ch != "/" && ch != "*" && ch != "+" && ch != "-" && ch != "."
&& ch != "(" && ch!= ")" && ch != "%") {
alert("invalid entry!")
return false
}
}
}
return true
}
</script>

Name: Sakshi Lingwal Sec: C Roll no.: 56 University roll no.: 2019064
</body>
</html>

*****OUTPUT*****

Name: Sakshi Lingwal Sec: C Roll no.: 56 University roll no.: 2019064
Exp No. 10: Window Object methods alert() , prompt() , confirm(), open(),
close() , print().
Aim: To create an html page to explain the use of various predefined functions in
window object in java script.
Create an html page named as “window.html” and within the script tag.
1. Use different window object.
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Window Object Methods</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
.container {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.box {
border: 1px solid #ccc;
padding: 20px;
border-radius: 5px;
}
h2 {
margin-top: 0;

Name: Sakshi Lingwal Sec: C Roll no.: 56 University roll no.: 2019064
}
</style>
</head>
<body>
<h1>Window Object Methods</h1>
<div class="container">
<div class="box">
<h2>alert()</h2>
<button onclick="showAlert()">Show Alert</button>
</div>
<div class="box">
<h2>prompt()</h2>
<button onclick="showPrompt()">Show Prompt</button>
</div>
<div class="box">
<h2>confirm()</h2>
<button onclick="showConfirm()">Show Confirm</button>
</div>
<div class="box">
<h2>open()</h2>
<button onclick="openWindow()">Open Window</button>
</div>
<div class="box">
<h2>print()</h2>
<button onclick="printPage()">Print Page</button>
</div>
<div class="box">
<h2>close()</h2>
<button onclick="closeWindow()">Close Window</button>
</div>

Name: Sakshi Lingwal Sec: C Roll no.: 56 University roll no.: 2019064
</div>

<script>
function showAlert() {
window.alert("This is an alert message!");
}

function showPrompt() {
var userInput = window.prompt("Enter your name:", "John Doe");
if (userInput !== null) {
window.alert("Hello, " + userInput + "!");
}
}

function showConfirm() {
var result = window.confirm("Are you sure you want to proceed?");
if (result) {
window.alert("You clicked OK!");
} else {
window.alert("You clicked Cancel!");
}
}

function openWindow() {
var newWindow = window.open("https://www.amazon.com", "_blank",
"width=600,height=400");
if (newWindow) {
newWindow.focus();
}
}

Name: Sakshi Lingwal Sec: C Roll no.: 56 University roll no.: 2019064
function printPage() {
window.print();
}

function closeWindow() {
window.close();
}
</script>
</body>
</html>

*****OUTPUT*****

Name: Sakshi Lingwal Sec: C Roll no.: 56 University roll no.: 2019064
Name: Sakshi Lingwal Sec: C Roll no.: 56 University roll no.: 2019064
Name: Sakshi Lingwal Sec: C Roll no.: 56 University roll no.: 2019064
Exp No. 11: Event Handling - Background Color Change
Aim: To create an html page to change the background color for every click of a button
using JavaScript.
Problem Statement:
1. Create a html page named as changebackground_color.html
2. Define a method named as random_color() which is to be called when you click on the
body. This method should generate random number, which is used to set the background
color.
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Background Color</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
transition: background-color 0.5s ease;
}
#changeColorBtn {
padding: 10px 20px;
font-size: 16px;
border: none;
cursor: pointer;

Name: Sakshi Lingwal Sec: C Roll no.: 56 University roll no.: 2019064
background-color: #007bff;
color: #fff;
border-radius: 5px;
outline: none;
}
#changeColorBtn:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<button id="changeColorBtn" onclick="changeBackgroundColor()">Change Background
Color</button>

<script>
function changeBackgroundColor() {
// Generate random RGB color values
var red = Math.floor(Math.random() * 256);
var green = Math.floor(Math.random() * 256);
var blue = Math.floor(Math.random() * 256);

// Apply the random color to the body background


document.body.style.backgroundColor = "rgb(" + red + "," + green + "," + blue + ")";
}
</script>
</body>
</html>

Name: Sakshi Lingwal Sec: C Roll no.: 56 University roll no.: 2019064
*****OUTPUT*****

Name: Sakshi Lingwal Sec: C Roll no.: 56 University roll no.: 2019064
Exp No. 12: Event Handling - calendar for the month and year by combo
box
Aim: To create an html page with 2 combo box populated with month & year, to display
the calendar for the selected month & year from combo box using JavaScript.
Problem Statement:
Create a html file named as “Calendar_month.html”
1. Add two combo box one to display month & another for year and one button.
2. When the button is clicked display the calendar for the selected values.
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calendar Month</title>
<style>
#calendar {
font-family: Arial, sans-serif;
border-collapse: collapse;
width: 100%;
}

#calendar td, #calendar th {


border: 1px solid #ddd;
padding: 8px;
text-align: center;
}

#calendar th {
background-color: #f2f2f2;
}

Name: Sakshi Lingwal Sec: C Roll no.: 56 University roll no.: 2019064
#calendar td:hover {
background-color: #f2f2f2;
}

#calendar td.selected {
background-color: #337ab7;
color: white;
}
</style>
</head>
<body>
<h2>Calendar Month</h2>
<label for="month">Month:</label>
<select id="month">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<label for="year">Year:</label>
<select id="year">
<!-- Generate years from 2000 to 2100 -->

Name: Sakshi Lingwal Sec: C Roll no.: 56 University roll no.: 2019064
<!-- You can adjust the range as needed -->
<!-- For this example, I'll just show from 2000 to 2100 -->
<!-- You may need to adjust based on your requirements -->
<script>
var yearSelect = document.getElementById("year");
for (var i = 2000; i <= 2100; i++) {
var option = document.createElement("option");
option.text = i;
option.value = i;
yearSelect.add(option);
}
</script>
</select>
<button onclick="displayCalendar()">Show Calendar</button>
<div id="calendarContainer"></div>
<script>
function displayCalendar() {
var selectedMonth = document.getElementById("month").value;
var selectedYear = document.getElementById("year").value;
var date = new Date(selectedYear, selectedMonth - 1, 1);
var daysInMonth = new Date(selectedYear, selectedMonth, 0).getDate();
var firstDayOfMonth = date.getDay();
var daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
var calendar = "<table id='calendar'><tr>";
for (var i = 0; i < 7; i++) {
calendar += "<th>" + daysOfWeek[i] + "</th>";
}
calendar += "</tr><tr>";
for (var i = 0; i < firstDayOfMonth; i++) {
calendar += "<td></td>";

Name: Sakshi Lingwal Sec: C Roll no.: 56 University roll no.: 2019064
}
for (var i = 1; i <= daysInMonth; i++) {
if (date.getDay() == 0 && i != 1) {
calendar += "</tr><tr>";
}
if (i == new Date().getDate() && selectedMonth == new Date().getMonth() + 1
&& selectedYear == new Date().getFullYear()) {
calendar += "<td class='selected'>" + i + "</td>";
}
else {
calendar += "<td>" + i + "</td>";
}
date.setDate(date.getDate() + 1);
}
calendar += "</tr></table>";
document.getElementById("calendarContainer").innerHTML = calendar;
}
</script>
</body>
</html>

Name: Sakshi Lingwal Sec: C Roll no.: 56 University roll no.: 2019064
*****OUTPUT*****

Name: Sakshi Lingwal Sec: C Roll no.: 56 University roll no.: 2019064

You might also like