Ex 1: Type Conversion in JavaScript

Aim:
To write a script to perform type conversion of values using JavaScript.

Procedure:
 Pass a value of String type and convert it to Number type
 Pass a Boolean type value and convert it to Number type
 Pass a value of Number type and convert it to String type
 Pass a Boolean type value and convert it to String type
 Pass a value of Number type and convert it to Boolean type
 Pass a String type value and convert it to Boolean type

Coding:
String Conversion
let value = true;
alert(typeof value);
value = String(value);
alert(typeof value);

Numeric Conversion
letstr = "123";
alert(typeofstr);
letnum = Number(str);
alert(typeofnum);

BooleanConversion
alert( Boolean(1) );
alert( Boolean(0) );
alert( Boolean("hello"));
alert( Boolean("") );

Result:
Thus the type conversion has been done successfully.
Ex 2: Date, Day and Time functions in JavaScript
Aim:
To write a script to display dates, time and day using JavaScript Date Time
functions.

Procedure:
 Get today’s date using Date( ) function
 Display the date with arguments such as year, month, day, hours, minutes,
seconds and milliseconds.
 Display a date using Date String argument

Coding:
const d1 = new Date( );
document.write(‘Todays date is ’+d1);
// Tue Jan 02 2024 14:19:55 GMT+0530 (India Standard Time)

new Date(date string);

const d2 = new Date("2022-03-25");
document.write(‘Using date string:’+d2);
// Fri Mar 25 2022 05:30:00 GMT+0530 (India Standard Time)

new Date(year,month,day,hours,minutes,seconds,ms);
const d3 = new Date(2018, 11, 24, 10, 33, 30, 0);
document.write(‘7 arguments:’+d3);
//Mon Dec 24 2018 10:33:30 GMT+0530 (India Standard Time)

new Date(year,month,day,hours,minutes,seconds);
const d4 = new Date(2018, 11, 24, 10, 33, 30);
document.write(‘6 arguments:’+d4);
//Mon Dec 24 2018 10:33:30 GMT+0530 (India Standard Time)

new Date(year,month,day,hours,minutes);
const d5 = new Date(2018, 11, 24, 10, 33);
document.write(‘5 arguments:’+d5);
//Mon Dec 24 2018 10:33:00 GMT+0530 (India Standard Time)

new Date(year,month,day,hours);
const d6 = new Date(2018, 11, 24, 10);
document.write(‘4 arguments:’+d6);
//Mon Dec 24 2018 10:00:00 GMT+0530 (India Standard Time)

new Date(year,month,day);
const d7 = new Date(2018, 11, 24);
document.write(‘3 arguments:’+d7);
//Mon Dec 24 2018 00:00:00 GMT+0530 (India Standard Time)

new Date(year,month);
const d8 = new Date(2018, 11);
document.write(‘2 arguments:’+d8);
//Sat Dec 01 2018 00:00:00 GMT+0530 (India Standard Time)

Result:
Thus the type conversion has been done successfully.

Ex 3: Finding Leap Year using JavaScript

Aim:
To write a script to find whether the given year is Leap year or not

Procedure:
 Get any year from the user.
 Write a user-defined function to find the given year is leap year or not.
 Divide the year by 4.
 Determine whether the year is leap year or not using the remainder value.

Coding:
function checkLeapYear(year)
{
if ((year % 4 ==0 ) && (year % 100 !=0 ) || (year % 400 ==0 ))
{
console.log(year + ' is a leap year');
}
else
{
console.log(year + ' is not a leap year');
}
}
const year = prompt('Enter a year:');
checkLeapYear(year);

Result:
Thus the given is either leap year or not has been found successfully.

Ex 4: Random number generation

Aim:
 To write a script to generate random number

Procedure:
 Generate random number using random( ) function
 Display the values along with various operations

Coding:
let x = Math.random();
// Math.random() returns a random number between 0 (inclusive) and 1
(exclusive): 0.19570247303881672

let x = Math.random() * 10;

// Math.random()*10 returns a random number between 0 and 10:
0.08118544865440613

let x = Math.random() * 100;

//Math.random()*100 returns a random number between 0 and 100:
99.76092606188381

let x = Math.floor((Math.random() * 10) + 1);

// Math.random()*10 returns a random number between 0 and 10: 4

let x = Math.floor((Math.random() * 100) + 1);

// Math.random()*100 returns a random number between 0 and 100: 85

Result:
Thus the random numbers have been generated using built-in function.

Ex 5: Styling tables using Bootstrap

Aim:
 To style a table and make it responsive using Bootstrap

Including Bootstrap:

<table class="table table-dark">

<table class="table thead-dark">
<table class="table tbody-dark">
<table class="table table-light">
<table class="table thead-light">
<table class="table tbody-light">
<table class="table tbody-striped">
<table class="table table-striped table-dark">
<table class="table table-bordered">
<table class="table table-bordered table-dark">
<table class="table table-hover">
<table class="table table-hover table-dark">
<table class="table table-sm">
<table class="table table-sm table-dark">
Contextual classes:
On rows:
<tr class="table-active">...</tr>
<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
On cells:
<td class="table-active">...</td>
<td class="table-primary">...</td>
<td class="table-secondary">...</td>
<td class="table-success">...</td>
<td class="table-danger">...</td>
<td class="table-warning">...</td>
<td class="table-info">...</td>
For background:
On rows:
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>
On cells:
<td class="bg-primary">...</td>
<td class="bg-success">...</td>
<td class="bg-warning">...</td>
<td class="bg-danger">...</td>
<td class="bg-info">...</td>
Responsive tables:
<div class="table-responsive-sm/table-responsive-md/table-responsive-lg/table-
responsive-xl">
<table class="table">
...
</table>
</div>

Coding:
<table class="table table-dark">
<thead>
<tr>
<th>S.No</th>
<th>First name</th>
<th>Last name</th>
<th>Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Seetha</td>
<td>Lakshmi</td>
<td>@slakshmi</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thompson</td>
<td>@jacobt</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>Chris</td>
<td>@chrislarry</td>
</tr>
</tbody>
</table>

Result:
Thus the responsive table has been created and styled using Bootstrap.

Ex 6: Working with various buttons of Bootstrap

Aim:
 To create various styles of buttons using Bootstrap
Button styles:
 .btn
 .btn-default
 .btn-primary
 .btn-success
 .btn-info
 .btn-warning
 .btn-danger
 .btn-link
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-default">Default</button>
<a href="#" class="btn btn-info" role="button">Link Button</a>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">
Button sizes:
 .btn-lg
 .btn-sm
 .btn-xs
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>
Button blocks:
<button type="button" class="btn btn-default btn-lg btn-block">Button 1</button>
<button type="button" class="btn btn-primary btn-sm btn-block">Button 2</button>
Active/Disabled Buttons:
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>

Result:
Thus the various styles of buttons have been created using Bootstrap.

Ex 7: Including Panels and Progress bars using Bootstrap

Aim:
To include panels and progress bars using Bootstrap
Panels:
<div class="panel panel-default">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">Panel Content</div>
<div class="panel-footer">Panel Footer</div>
</div>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-default">
<div class="panel-body">Panel Content</div>
</div>
</div>
 panel-default
 panel-primary
 panel-success
 panel-info
 panel-warning
 panel-danger
Progress bar:
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0"
aria-valuemax="100" style="width:70%">
<span class="sr-only">70% Complete</span> </div></div>
With label:
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0"
aria-valuemax="100" style="width:70%"> 70% </div>
</div>
Coloured progress bars:
 progress-bar-success
 progress-bar-info
 progress-bar-warning
 progress-bar-danger
Striped Progress Bars
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped"
role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"
style="width:40%"> 40% Complete (success) </div>
Animated Progress Bar
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-
valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
40%
</div>
</div>

Stacked Progress Bars

<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar"
style="width:40%"> Free Space </div>
<div class="progress-bar progress-bar-warning" role="progressbar"
style="width:10%"> Warning </div>
<div class="progress-bar progress-bar-danger" role="progressbar"
style="width:20%"> Danger </div>
</div>

Result:
Thus the panels and progress bars have been included using Bootstrap.

Ex 8: Displaying list items with Pagination

Aim:
To display list items with pagination using Bootstrap
Including Pagination:
<div class="container">
<h2>Pagination</h2>
<p>The .pagination class provides pagination links:</p>
<ul class="pagination / pagination-sm / pagination-lg">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
</div>
Active or Disabled State
<li class="active" / "disabled"><a href="#">2</a></li>

Breadcrumbs:
Another form for pagination, is breadcrumbs:
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Private</a></li>
<li><a href="#">Pictures</a></li>
<li class="active">Vacation</li>
</ul>

Result:
Thus the list items have been displayed with pagination using Bootstrap.

Ex 9: Including tabs and navigation bars

Aim:
 To include tabs and navigation bars using Bootstrap

Coding:

Result:
Thus the tabs and navigation bars have been included using Bootstrap.

Ex 10: Using Glyphicons in Bootstrap

Aim:
To include icons using Glyphicons in Bootstrap

Coding:

Result:
Thus the Glyphicons have been imported into the web page using Bootstrap.

Ex 11: Aligning video to centre in WordPress

Aim:
To align a video to centre in WordPress

WordPress:
 WordPress is an open-source Content Management System.
 It is based on PHP and MySql and used to create a dynamic website.
 WordPress allows customizing and managing the website from its back-end
content management system.

Usage:
WordPress is widely used for developing
1. E-commerce Websites
2. Educational/Library Websites
3. Personal Websites

Procedure:
HTML Method:

<div style="text-align: center;">

<iframe width="560" height="315"
src="https://www.youtube.com/embed/yourvideoid" frameborder="0"
allowfullscreen></iframe>
</div>
CSS Method:

<iframe class="center-video" width="560" height="315"

src="https://www.youtube.com/embed/yourvideoid" frameborder="0"
allowfullscreen></iframe>

.center-video {
display: block;
margin: 0 auto;
}

Result:
Thus the video has been aligned to centre in WordPress

Ex 13: Creating private post in Wordpress

Aim:
 To create a private post in WordPress

Procedure:
To create a private post in WordPress, the given steps should be followed.
1. Login to WordPress Dashboard: Enter the username and password to access
the admin area of the WordPress website.
2. Navigate to Posts: On the left-hand side of the dashboard, hover over or click
on "Posts" to expand the menu options.
3. Click on "Add New": From the expanded menu under "Posts," click on "Add
New." The post editor screen will appear.
4. Write the Post: Enter the title and content for the post in the provided fields.
The user can also add media, format text, and customize the post.
5. Set Visibility to Private: In the Publish box on the right-hand side of the
screen, locate the "Visibility" option. Click on the "Edit" link next to it.
6. Choose "Private": In the dropdown menu that appears, select "Private." This
setting ensures that only users with appropriate permissions (typically
administrators and editors) can view the post.
7. Publish or Save Draft: If the private post is ready to publish, click the
"Publish" button.
8. Preview (Optional): The preview option is used to display the preview of the
private post to the user.

Result:
Thus the private post has been created in WordPress