Scribd
Upload
2 views34 pages

Web Tech Lab File

The document outlines a series of experiments involving programming tasks using HTML, CSS, and JavaScript, as well as Django. Each experiment includes objectives, steps, and source code for various applications such as swapping numbers, calculating exponentiation, checking even/odd numbers, calculating factorials, and managing sessions. Additionally, it covers creating a registration form with input validation and connecting to an SQL database.

Uploaded by

rajatsinghtomar1100
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
2 views34 pages

Web Tech Lab File

The document outlines a series of experiments involving programming tasks using HTML, CSS, and JavaScript, as well as Django. Each experiment includes objectives, steps, and source code for various applications such as swapping numbers, calculating exponentiation, checking even/odd numbers, calculating factorials, and managing sessions. Additionally, it covers creating a registration form with input validation and connecting to an SQL database.

Uploaded by

rajatsinghtomar1100
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/ 34

Experiment 1

Objective: Write a program to swap two numbers without taking a temporary variable.
Technology Used: Javascript, Html
Step:
1. Open a text editor and create an HTML file.
2. Inside the body section, add two input fields for entering numbers (num1
and num2)
3. Include a button to trigger the swapping operation.
4. Write a JavaScript function (Swapnumbers) that reads values from input
fields, swaps them, and updates the result paragraph.
5. Inside the Swapnumbers function, use the mathematical approach to swap
the numbers without using a temporary variable.
6. Save the file with an HTML extension.
Source code:
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Swap Numbers</title>
<script>
function swapNumbers() {
var num1 = parseFloat(document.getElementById("num1").value);
var num2 = parseFloat(document.getElementById("num2").value);

num1 = num1 + num2;


num2 = num1 - num2;
num1 = num1 - num2;

document.getElementById("result").innerHTML = "After swapping: Number 1 = " +


num1 + ", Number 2 = " + num2;
}
</script>
</head>
<body>
<h2>Swap Numbers</h2>
<p>
<label for="num1">Enter Number 1:</label>
<input type="number" id="num1">
</p>
<p>
<label for="num2">Enter Number 2:</label>
<input type="number" id="num2">
</p>
<button onclick="swapNumbers()">Swap</button>

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

Output:
Experiment 2
Objective: Write a program to find Exponentiation (power of a number)
Technology Used: Javascript, Html, CSS
Step:
1. Create an HTML file with input fields for base and exponent, a calculation
button, and a result area.
2. Embed JavaScript code to calculate exponentiation using the Math.pow()
function when the button is clicked.
3. Allow users to input base and exponent values, click the "Calculate"
button, and view the result on the web page.
4. Save the file with an HTML extension and open it in a web browser to use
the simple exponentiation calculator.
Source Code:
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exponentiation Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px; }
#container {
width: 300px;
margin: 0 auto;
}
input {
width: 100%;
padding: 8px;
margin-bottom: 10px;
box-sizing: border-box;
}
button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
#result {
margin-top: 20px;
}
</style>
</head>
<body>
<div id="container">
<h2>Exponentiation Calculator</h2>
<label for="base">Enter Base:</label>
<input type="number" id="base" placeholder="Enter base">
<label for="exponent">Enter Exponent:</label>
<input type="number" id="exponent" placeholder="Enter exponent">
<button onclick="calculateExponentiation()">Calculate</button>
<div id="result"></div>
</div>

<script>
function calculateExponentiation() {
var base = parseFloat(document.getElementById("base").value);
var exponent = parseFloat(document.getElementById("exponent").value);
var result = Math.pow(base, exponent);
document.getElementById("result").innerHTML = "Result: " + result;
}
</script>

</body>
</html>
Output:

Experiment 3
Objective: Write a program to find whether the number is even or odd.
Technology Used: Javascript, Html, CSS
Source Code:
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Even/Odd Checker</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}

#container {
width: 300px;
margin: 0 auto;
}
input {
width: 100%;
padding: 8px;
margin-bottom: 10px;
box-sizing: border-box;
}
button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
#result {
margin-top: 20px;
}
</style>
</head>
<body>
<div id="container">
<h2>Even/Odd Checker</h2>
<label for="number">Enter a Number:</label>
<input type="number" id="number" placeholder="Enter a number">
<button onclick="checkEvenOdd()">Check</button>

<div id="result"></div>
</div>
<script>
function checkEvenOdd() {
var number = parseInt(document.getElementById("number").value);
var result = (number % 2 === 0) ? "Even" : "Odd";
document.getElementById("result").innerHTML = "Result: " + result;
}
</script>
</body>
</html>
Output:

Experiment 4
Objective: Write a method fact that takes a number from the user and prints its factorial.
Technology Used: Javascript, Html, CSS
Step:
1. Create an HTML file with input for a number, a calculation button, and a
result area.
2. Apply basic CSS styling for a visually appealing layout with centered
content and styled input and button elements.
3. Embed JavaScript code to calculate the factorial using a recursive function
when the button is clicked.
4. Allow users to input a number, click the "Calculate Factorial" button, and
view the result on the web page.
5. Save the file with an HTML extension and open it in a web browser to use
the simple factorial calculator.
Source Code:
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Factorial Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
#container {
width: 300px;
margin: 0 auto;
}
input {
width: 100%;
padding: 8px;
margin-bottom: 10px;
box-sizing: border-box;
}
button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
#result {
margin-top: 20px;
}
</style>
</head>
<body>
<div id="container">
<h2>Factorial Calculator</h2>
<label for="number">Enter a Number:</label>
<input type="number" id="number" placeholder="Enter a number">
<button onclick="calculateFactorial()">Calculate Factorial</button>
<div id="result"></div>
</div>
<script>
function calculateFactorial() {
var number = parseInt(document.getElementById("number").value);
var result = factorial(number);
document.getElementById("result").innerHTML = "Factorial: " + result;
}
function factorial(n) {
if (n === 0 || n === 1) {
return 1;
} else {
return n * factorial(n - 1);
}
}
</script>
</body>
</html>
Output:
Experiment 5
Objective: WAP to print a hello word in a django framework.
Technology Used: Django, Html
Source Code:
Views.py
from django.shortcuts import render
def hello(request):
context={'title':'print hello word'}
return render(request,'print.html',context)

urls.py
from django.urls import path
from .views import *
urlpatterns = [
path('hello/',hello,name='hello'),
]

myapp/templates/hello.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/boots
trap.min.css" rel="stylesheet" integrity="sha384-
T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstr
ap.bundle.min.js" integrity="sha384-
C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>
<title>{{title}}</title>
</head>
<body>
<h1 class="text-center">Hello Word</h1>

</body>
</html>

Output:

Experiment 6
Objective: Write a program to connectivity with SQL database.
Technology Used: Django, Html
Source Code:
Model.py
from django.db import models

# Create your models here.


class MyModel(models.Model):
name = models.CharField(max_length=255)
age = models.IntegerField()
Run migrations to create the database tables:

python manage.py makemigrations


python manage.py migrate
Views.py
from django.shortcuts import render
def hello(request):
context={'title':'print hello word'}
return render(request,'print.html',context)
Now, you can interact with your database in the Django shell or in your views. To enter
the shell, run:

python manage.py shell

In the Django shell, you can create and retrieve objects from the database:

# Import your model


from myapp.models import MyModel

# Create a new object


obj = MyModel(name='sk', age=21)
obj.save()

# Retrieve objects
objects = MyModel.objects.all()
for obj in objects:
print(obj.name, obj.age)

Experiment 7
Objective: Write a program to manage the session.
Technology Used: Django, Html
Source Code:
myproject/setting.py
set the session in setting.py
SESSION_COOKIE_AGE=20
Views.py
from django.shortcuts import render
urls.py

from django.urls import path


from .views import *

urlpatterns = [
path('admin/', admin.site.urls),
path('', index ,name='index'),
path('set/', setsession ,name='setsession'),
path('get/', getsession ,name='getsession'),
]

# Create your views here.


def index(request):
return render(request,'index.html')
def setsession(request):
request.session['name']='sk';
return render(request,'setsession.html')
def getsession(request):
if 'name' in request.session:
name=request.session['name']
request.session.modified = True
return render(request,'getsession.html',{'name':name})
else:
return render(request,'index.html')
def delsession(request):
request.session.flush()
request.session.clear_expired()
return render(request,'delsession.html')
myapp/templates/index.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>
<body>
<h1>Session expired </h1>
</body>
</html>
myapp/templates/setsession.html

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
</head>
<body>
<h4>Set Session...</h4>
</body>
</html>
myapp/templates/getsession.html

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
</head>
<body>
<h4>Get Session</h4>
{{name}} <br>
{{request.session.get_session_cookie_age}} <br>
{{request.session.get_expiry_age}} <br>
{{request.session.get_expiry_date}} <br>
</body>
</html>

myapp/templates/delsession.html

<html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
</head>
<body>
<h4>Session Deleted...</h4>
</body>
</html>
Output:

Experiment 8
Objective: Write a HTML template file to create a simple form with 5 input fields size. Name,
Password, Email, Pincode, Phone No. and a Submit button.
Technology Used: Javascript, Html, CSS
Source Code:
<html>
<head>
<title>Registration Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: lightcoral;
}
.form-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.form-box {
background: yellow;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 5px;
padding: 20px;
width: 400px;
}
.form-box h2 {
text-align: center;
margin-bottom: 20px;
}
.form-box label {
font-weight: bold;
}
.form-box input[type="text"],
.form-box input[type="email"],
.form-box input[type="tel"],
.form-box input[type="password"] {
width: 100%;
padding: 10px;
margin: 5px 0;
border: 1px solid #ccc;
border-radius: 3px;
}
.form-box button {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
margin-top: 10px;
border-radius: 3px;
cursor: pointer;
}
.form-box button:hover {
background-color: #45a049;
}
.error-message {
color: red;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="form-container">
<div class="form-box">
<h2>Registration</h2>
<form id="registration-form">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="telephone">Telephone:</label>
<input type="tel" id="telephone" name="telephone" required pattern="[0-9]{10}"
title="Please enter a 10-digit phone number" required>
<label for="address">Address:</label>
<input type="text" id="address" name="address" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required pattern=".{6,}"
title="Password must be at least 6 characters long" required>
<button type="submit">Register</button>
</form>
<div class="error-message" id="registration-error"></div>
</div>
</div>
<script>
document.getElementById('registration-form').addEventListener('submit',
function(event) {
event.preventDefault();
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const telephone = document.getElementById('telephone').value;
const address = document.getElementById('address').value;
const password = document.getElementById('password').value;
const registrationError = document.getElementById('registration-error');
if (name && email && telephone && address && password) {
registrationError.style.display = 'none';
alert('Registration Successful');
}
else {
registrationError.style.display = 'block';
registrationError.innerText = 'Please fill in all fields';
}
});
</script>
</body>
</html>
Output:
Experiment 9
Objective: WAP to create a views in a Django application framework.
Technology Used: Django
Source Code:
Create a Django project:

django-admin startproject myproject

Create a Django app:

cd myproject

python manage.py startapp myapp

Views.py
from django.http import HttpResponse

def hello_world(request):
return HttpResponse("Hello, World!")

Experiment 10
Objective: WAP to mapping a URL to views in Django application.
Technology Used: Django
Source Code:
Create a Django project:

django-admin startproject myproject

Create a Django app:

cd myproject

python manage.py startapp myapp

Views.py
from django.http import HttpResponse

def hello_world(request):
return HttpResponse("Hello, World!")
urls.py
from django.urls import path
from .views import hello_world

urlpatterns = [
path('hello/', hello_world, name='hello_world'),
]

Output:

Experiment 11
Objective:.
Technology Used: Javascript, Html, CSS
Source Code:
<html>
<head>
<title>Registration Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: lightcoral;
}
.form-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.form-box {
background: yellow;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 5px;
padding: 20px;
width: 400px;
}
.form-box h2 {
text-align: center;
margin-bottom: 20px;
}

.form-box label {
font-weight: bold;
}
.form-box input[type="text"],
.form-box input[type="email"],
.form-box input[type="tel"],
.form-box input[type="password"] {
width: 100%;
padding: 10px;
margin: 5px 0;
border: 1px solid #ccc;
border-radius: 3px;
}
.form-box button {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
margin-top: 10px;
border-radius: 3px;
cursor: pointer;
}
.form-box button:hover {
background-color: #45a049;
}
.error-message {
color: red;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="form-container">
<div class="form-box">
<h2>Registration</h2>
<form id="registration-form">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<label for="password">Password:</label>
<input type="password" id="password" name="password" required pattern="/^(?
=.*[A-Z])(?=.*[!@#$%^&*])[A-Za-z!@#$%^&*\d]{8,}$/" title="Password must be at least 8
characters long,start with a capital letter, and contain at least one symbol (!@#$%^&*)"
required>

<button type="submit">Register</button>
</form>
<div class="error-message" id="registration-error"></div>
</div>
</div>
<script>
document.getElementById('registration-form').addEventListener('submit',
function(event) {
event.preventDefault();

const name = document.getElementById('name').value;


const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
const registrationError = document.getElementById('registration-error');
if (name && email && telephone && address && password) {
registrationError.style.display = 'none';
alert('Registration Successful');
}
else {
registrationError.style.display = 'block';
registrationError.innerText = 'Please fill in all fields';
}
});
</script>
</body>
</html>
Output:
Experiment 12
Objective: Write a Python program to display error messages if the above validations do not
hold.
Technology Used: Javascript, Html, CSS, django
Source Code:
Model.py
from django.db import models
# Create your models here.
class AddRecord(models.Model):
first_name=models.CharField(max_length=200)
password=models.IntegerField()
email=models.EmailField()
Views.py
from django.shortcuts import render
# Create your views here.
def formPage (request):
if request.method =="POST":
first_name=request.POST.get('first_name')
password=request.POST.get('password')
email=request.POST.get('email')
AddRecord.objects.create(
first_name=first_name,
email=email
)
user.set_password(password)
user.save()
messages.info(request,'Account sucessfully created')
return redirect('/log/')
context={'title':'Form'}
return render(request,'index.html',context)
urls.py
from django.urls import path
from .views import *
urlpatterns = [
path('form/',formPage,name='formPage'),
]
myapp/templates/index.html

<html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/boots
trap.min.css" rel="stylesheet" integrity="sha384-
T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstr
ap.bundle.min.js" integrity="sha384-
C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>
<title>{{title}}</title>
<body>

<div class="container">
{% if messages %}
<div class="alert alert-primary">
{% for message in messages %}
{{message}}
{% endfor %}
</div>
{% endif %}
<h1 class="text-center">Form</h1>
<form method="post">
{% csrf_token %}
<h3>Personal Information</h3>
<div class="row">
<div class="col-sm-12">
<label for="first_name">Name</label>
<input type="text" class="form-control"
name="first_name" id="first_name" placeholder="First Name"
oninput="validateFirstName()" autocomplete="off">
<span id="firstNameMessage" style="color:
red;"></span>
</div>
</div>
<h3>Account Information</h3>
<div class="row">
<div class="col-sm-12">
<label for="email">Email</label>
<input type="email" class="form-control" name="email"
id="email" placeholder="Enter Email Id" oninput="validateEmail()"
autocomplete="off">
<span id="emailMessage" style="color: red;"></span>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<label for="password">Password</label>
<input type="password" class="form-control"
id="password" placeholder="Password"
oninput="validatePassword()" autocomplete="off">
<span id="passwordMessage" style="color:
red;"></span>
</div>
<div class="col-sm-6">
<label for="confirmPassword">Password</label>
<input type="password" class="form-control"
name="password" id="confirmPassword" placeholder="Password"
oninput="validatePasswordMatch()" autocomplete="off">
<span id="passwordMatchMessage" style="color:
red;"></span>
</div>
</div>
<br>
<button class="btn btn-primary" type="submit">Submit</button>
</form>
</div>
<script>
function validateFirstName() {
const first_name =
document.getElementById("first_name").value;
const message =
document.getElementById("firstNameMessage");

if (first_name) {
message.textContent = "First Name is valid!";
message.style.color = "green";
} else {
message.textContent = "First Name is required.";
message.style.color = "red";
}
}

function validateEmail() {
const email = document.getElementById("email").value;
const message = document.getElementById("emailMessage");

// Regular expression pattern for a valid email address


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

if (emailPattern.test(email)) {
message.textContent = "Email is valid!";
message.style.color = "green";
} else {
message.textContent = "Please enter a valid email
address.";
message.style.color = "red";
}
}
function validatePassword() {
const password =
document.getElementById("password").value;
const message =
document.getElementById("passwordMessage");
const passwordPattern = /^(?=.*[A-Z])(?=.*[!@#$%^&*])[A-
Za-z!@#$%^&*\d]{8,}$/;

if (passwordPattern.test(password)) {
message.textContent = "Password is strong!";
message.style.color = "green";
} else {
message.textContent = "Password should be at least 8
characters long, start with a capital letter, and contain at
least one symbol (!@#$%^&*).";
message.style.color = "red";
}
}

function validatePasswordMatch() {
const password =
document.getElementById("password").value;
const confirmPassword =
document.getElementById("confirmPassword").value;
const message =
document.getElementById("passwordMatchMessage");

if (password === confirmPassword) {


message.textContent = "Passwords match!";
message.style.color = "green";
} else {
message.textContent = "Passwords do not match.";
message.style.color = "red";
}
}
</script>
</body></html>

Output:
Experiment 13
Objective: Create a form for your college library entering student details for each student in
the college. Validate the form using validators and display error messages.

Technology Used: Django,Html


Source Code:
Model.py
from django.db import models
# Create your models here.
from django import forms
from django.core import validators
class StudentForm(forms.Form):
name = forms.CharField(max_length=100, label='Student Name',
validators=[validators.MinLengthValidator(2)])
roll_number = forms.CharField(max_length=10, label='Roll
Number', validators=[validators.RegexValidator(regex='^[0-9]{2}-
[A-Za-z]{2}-[0-9]{3}$', message='Enter a valid roll number (e.g.,
18-CS-001)')])
email = forms.EmailField(label='Email')
date_of_birth = forms.DateField(label='Date of Birth',
widget=forms.DateInput(attrs={'type': 'date'}))

Views.py
from django.shortcuts import render
from .forms import StudentForm
from django.http import HttpResponse

def student_details(request):
if request.method == 'POST':
form = StudentForm(request.POST)
if form.is_valid():
name = form.cleaned_data['name']
roll_number = form.cleaned_data['roll_number']
email = form.cleaned_data['email']
date_of_birth = form.cleaned_data['date_of_birth']
# Process the data or save it to the database
return HttpResponse(f"Student Details: Name - {name},
Roll Number - {roll_number}, Email - {email}, Date of Birth -
{date_of_birth}")
else:
form = StudentForm()

return render(request, 'student_details.html', {'form':


form})

urls.py
from django.urls import path
from .views import *
urlpatterns = [
path(' student_details/', student_details,name='
student_details'),
]

myapp/templates/index.html

<!DOCTYPE html>
<html>
<head>
<title>Student Details Form</title>
</head>
<body>
<h2>Student Details Form</h2>
<form method="post" action="">
{% csrf_token %}
{{ form.as_p }}
<input type="submit" value="Submit">
</form>
</body>
</html>
Experiment 14
Objective: Write a program to display “Welcome To Radiant” in the form when the “click”
button is clicked. The form title must be web development using python.
Technology Used: Javascript, Html
Source Code:
index.html

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Web Development using Python</title>
<script>
function displayWelcomeMessage() {
// Get the form element and update its content
var form = document.getElementById("welcomeForm");
form.innerHTML = "<h2>Welcome To Radiant</h2>";
}
</script>
</head>
<body>
<form id="welcomeForm">
<h2>Web Development using Python</h2>
<button type="button"
onclick="displayWelcomeMessage()">Click</button>
</form>
</body>
</html>
Output:

Experiment 15
Objective: Write a program that displays a button in green color and it should change into
yellow when the mouse moves over it.
Technology Used: Html,CSS, VSCode
Source Code:
index.html

<html >

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Color Changing Button</title>
<style>
button {
padding: 10px;
font-size: 16px;
cursor: pointer;
}
.green {
background-color: green;
}
.green:hover {
background-color: yellow;
}
</style>
</head>
<body>
<button class="green">Move Mouse Over Me</button>

<script>
// JavaScript to handle mouse events
var button = document.querySelector('button');

button.addEventListener('mouseover', function() {
// Add a class to change the background color to yellow on
mouseover
button.classList.add('green');
});

button.addEventListener('mouseout', function() {
button.classList.remove('green');
});
</script>
</body>
</html>

Output:

Experiment 16
Objective: TO create a "sendSimpleEmail" view to send a simple e-mail.
Technology Used: Javascript, Html, Django, VSCode
Source Code:
myproject/setting.py
EMAIL_HOST='smtp.gmail.com'
EMAIL_USE_TLS=True
EMAIL_PORT=587
EMAIL_HOST_USER="add email id"
EMAIL_HOST_PASSWORD="add password"

View.py
from django.shortcuts import render,redirect
from .utils import *
from django.core.mail import send_mail
from django.conf import settings
# Create your views here.
def send(request):
subject='This is testing email service'
message='This is testing mail service using django'
from_email=settings.EMAIL_HOST_USER

recipient_list=['[email protected]','sumit.22scse2130023
@galgotiasuniversity.edu.in']
send_mail(subject,message,from_email,recipient_list)
return redirect('/')
def index(request):
return render(request,'index.html')

myapp/templates/index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Email Sender</title>
</head>
<body>
<h1>This is Email sender Service</h1>
<a href="/send/">Send</a>
</body>
</html>

Output:
List of Experiments:

1 Write a program to swap two numbers without taking a temporary variable.


2 Exponentiation (power of a number)
3 Write a program to find whether the number is even or odd.
4 Write a method fact that takes a number from the user and prints its factorial.
5 WAP to print a hello word in a django framework.
6 Write a program to connectivity with SQL database.
7 Write a program to manage the session.
8 Write a HTML template file to create a simple form with 5 input fields size. Name,
Password, Email, Pincode, Phone No. and a Submit button.
9 WAP to create a views in a Django application framework.
10 WAP to mapping a URL to views in Django application.
11 Write a Python program to validate Name, Email and Password.
12 Write a Python program to display error messages if the above validations do not hold.
13 Create a form for your college library entering student details for each student in the
college. Validate the form using validators and display error messages.
14 Write a program to display “Welcome To Radiant” in the form when the “click” button is
clicked. The form title must be web development using python.
15. Write a program that displays a button in green color and it should change into yellow
when the mouse moves over it.
16. TO create a "sendSimpleEmail" view to send a simple e-mail.

You might also like