ROLL NUMBER : 22BCE157
SUBJECT : FSWD
PRACTICAL - 7
1_CODE :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Custom Directive - Uppercase Text</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<style>
.uppercase-text {
cursor: pointer;
color: #007bff;
/* Blue color */
}
</style>
</head>
<body>
<div id="app">
<p v-uppercase class="uppercase-text">Click to transform text to
uppercase.</p>
</div>
<script>
Vue.directive('uppercase', {
bind(el) {
el.style.cursor = 'pointer';
el.addEventListener('click', () => {
const text = el.innerText;
el.innerText = text.toUpperCase();
});
}
});
new Vue({
el: '#app'
});
</script>
</body>
</html>
1_OUTPUT :
2_CODE :
<!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>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<style>
/* Styling for the list and list items */
ul {
list-style-type: none;
padding: 0;
}
li {
margin-bottom: 10px;
background-color: #f0f0f0;
padding: 8px;
border-radius: 5px;
}
</style>
</head>
<body>
<div id="app">
<ul v-list="items"></ul>
</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);
}
});
new Vue({
el: '#app',
data: {
items: ['Subject-1', 'Subject-2', 'Subject-3']
}
});
</script>
</body>
</html>
2_OUTPUT :
3_CODE :
<!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>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
#app {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.formatted-date {
font-size: 24px;
color: #333;
background-color: #fff;
padding: 10px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div id="app">
<p v-format-date="date" class="formatted-date"></p>
</div>
<script>
Vue.directive('format-date', {
inserted: function(el, binding) {
const date = binding.value;
const formattedDate = formatDate(date);
el.textContent = formattedDate;
}
});
new Vue({
el: '#app',
data: {
date: '2022-03-05T12:00:00'
}
});
function formatDate(dateString) {
const options = { year: 'numeric', month: 'long', day: 'numeric' };
return new Date(dateString).toLocaleDateString('en-US', options);
}
</script>
</body>
</html>
3_OUTPUT :
