Lab Practical Submission
Date: 04/02/24
Roll No. and Name: 22BCE305 ROSHNI PANKAJKUMAR RANA
Course Code and Name: 2CS201 FULL STACK WEB DEVELOPMENT
Practical-7:
Demonstrate how to create a custom directive and how to use it through
HTML web pages.:
I. Create a custom directive to transform text to uppercase when clicked.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Custom Directive Example</title>
<link rel="stylesheet" href="style7a.css">
<script
src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<div id="app" class="center-container">
<p v-uppercase>Hello, this text will be uppercased
when clicked!</p>
<button @click="changeTextColor">Change Text
Color</button>
</div>
<script src="app.js"></script>
</body>
</html>
II. Creating a Dynamic List with Vue.js.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Dynamic List Example with Custom Directive</title>
<script
src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f8dada;
#app {
max-width: 600px;
margin: 50px auto;
padding: 20px;
background-color: #db6363;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
h2 {
text-align: center;
color: #333;
ul {
list-style-type: none;
padding: 0;
li {
margin-bottom: 8px;
padding: 10px;
background-color: #f0f0f0;
border-radius: 4px;
input[type="text"] {
padding: 8px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
margin-right: 8px;
button {
padding: 8px 16px;
font-size: 16px;
background-color: #a12836;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
button:hover {
background-color: #741c27;
</style>
</head>
<body>
<h2>Add Items to the following list!</h2>
<div id="app">
<ul v-list="items"></ul>
<div>
<input type="text" v-model="newItem" placeholder="Add
new item">
<button @click="addItem">Add Item</button>
</div>
</div>
<script>
Vue.directive('list', {
bind(el, binding) {
const ul = document.createElement('ul');
binding.value.forEach(item => {
const li = document.createElement('li');
li.textContent = item;
ul.appendChild(li);
});
el.appendChild(ul);
},
update(el, binding) {
const ul = el.querySelector('ul');
ul.innerHTML = '';
binding.value.forEach(item => {
const li = document.createElement('li');
li.textContent = item;
ul.appendChild(li);
});
});
new Vue({
el: '#app',
data: {
items: ['Science', 'Math', 'English'], // Initial
list of items
newItem: '' // New item to be added
},
methods: {
addItem() {
if (this.newItem.trim() !== '') {
this.items.push(this.newItem.trim());
this.newItem = ''; // Clear the input field after
adding
}
}
});
</script>
</body>
</html>
III. Custom Directive Create a directive that formats and displays dates in a
human readable format.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Custom Directive for Date Formatting</title>
<style>
/* Apply modern styles to the body */
body {
font-family: 'Times New Roman', sans-serif;
background: linear-gradient(to top, #aaefd2,#ffffff,
#aaefd2); /* Gradient background */
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
/* Style the container */
.container {
text-align: center;
}
/* Style the paragraph */
.custom-date {
font-size: 24px;
color: #333;
margin-top: 20px;
animation: fadeIn 1s ease-in-out;
}
/* Fade-in animation */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>
</head>
<body>
<div class="container">
<h1>Custom Directive for Date Formatting</h1>
<p class="custom-date" v-format-date> <!-- Apply the
custom directive -->
<!-- The content will be manipulated by the custom
directive -->
</p>
</div>
<script
src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
// Define the custom directive named 'format-date'
Vue.directive('format-date', {
// When the bound element is inserted into the DOM...
inserted: function(el) {
// Get the current date
const currentDate = new Date();
// Format the date into a human-readable format
const formattedDate = formatDate(currentDate);
// Update the element's content with the formatted date
el.textContent = formattedDate;
}
});
// Helper function to format the date
function formatDate(date) {
const options = { year: 'numeric', month: 'long', day:
'numeric' };
return date.toLocaleDateString('en-US', options);
}
// Create a new Vue instance
new Vue({
el: '.container'
});
</script>
</body>
</html>
