Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd Logo
Upload

Welcome to Scribd!

  • 5 views

    Assignment 6

    Uploaded by

    Sameer Singh 1135

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Assignment 6

    Uploaded by

    Sameer Singh 1135
    5 views6 pages

    Original Title

    6

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    5 views6 pages

    Assignment 6

    Uploaded by

    Sameer Singh 1135

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 6

    Assignment-6

    Q1. Write an AJS to input your display the same in uppercase. name in
    lower case and display the same in upper case

    <!DOCTYPE html>
    <html>
    <head>
    <title>Uppercase/Lowercase Converter</title>
    </head>
    <body>
    <label for="nameInput">Enter your name:</label>
    <input type="text" id="nameInput">
    <button onclick="convertText()">Convert</button>
    <br>
    <label for="nameOutput">Name in lowercase:</label>
    <span id="nameOutput"></span>
    <br>
    <label for="uppercaseOutput">Name in uppercase:</label>
    <span id="uppercaseOutput"></span>

    <script>
    function convertText() {
    / Get input value
    var nameInput = document.getElementById('nameInput').value;

    / Convert to lowercase and display


    var nameOutput = document.getElementById('nameOutput');
    nameOutput.textContent = nameInput.toLowerCase();

    / Convert to uppercase and display


    var uppercaseOutput = document.getElementById('uppercaseOutput');
    uppercaseOutput.textContent = nameInput.toUpperCase();
    }
    </script>
    </body>
    </html>
    Output:

    Q2. write an AJS to display the names of those countries from an array
    defined inside a controller that has the letter "i" in it.

    Ans:
    (Index.html)

    <!DOCTYPE html>
    <html ng-app="myApp">
    <head>
    <title>Country Names Filter</title>
    <script
    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    </head>
    <body ng-controller="MainController">
    <div>
    <label>Countries with 'i':</label>
    <ul>
    <li ng-repeat="country in countriesWithI">{{ country }}</li>
    </ul>
    </div>

    <script src="app.js"></script>
    </body>
    </html>
    (App.js)
    angular.module('myApp', [])
    .controller('MainController', function($scope) {
    / Array of countries
    $scope.countries = ["India", "Indonesia", "Ireland", "Italy", "Iran", "Iraq"];

    / Filter countries containing the letter 'i'


    $scope.countriesWithI = $scope.countries.filter(function(country) {
    return country.toLowerCase().indexOf('i') !== -1;
    });
    });

    Output:

    Q3. write an AJS to display the last 10 elements from an array defined
    inside a controller (The array must contain 25 values)

    <!DOCTYPE html>
    <html ng-app="myApp">
    <head>
    <title>Last 10 Elements Display</title>
    <script
    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    </head>
    <body ng-controller="MainController">
    <div>
    <h2>Last 10 Elements:</h2>
    <ul>
    <li ng-repeat="element in lastTenElements">{{ element }}</li>
    </ul>
    </div>

    <script src="app.js"></script>
    </body>
    </html>

    angular.module('myApp', [])
    .controller('MainController', function($scope) {
    / Array of 25 values
    $scope.array = Array.from({ length: 25 }, (_, i) => i + 1);

    / Get the last 10 elements


    $scope.lastTenElements = $scope.array.slice(-10);
    });

    Output:

    Q4. Write an AJS to show how you can filter an array based on user input.

    <!DOCTYPE html>
    <html ng-app="myApp">
    <head>
    <title>Array Filtering</title>
    <script
    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    </head>
    <body ng-controller="MainController">
    <div>
    <label>Filter:</label>
    <input type="text" ng-model="filterText">
    </div>
    <div>
    <h2>Filtered Results:</h2>
    <ul>
    <li ng-repeat="item in filteredArray">{{ item }}</li>
    </ul>
    </div>

    <script src="app.js"></script>
    </body>
    </html>

    angular.module('myApp', [])
    .controller('MainController', function($scope) {
    / Sample array
    $scope.array = ["Apple", "Banana", "Orange", "Grapes", "Watermelon"];

    / Watch for changes in filterText and apply filtering


    $scope.$watch('filterText', function(newVal, oldVal) {if
    (newVal !== oldVal) {
    $scope.filteredArray = $scope.array.filter(function(item) {
    / Case insensitive filtering
    return item.toLowerCase().includes(newVal.toLowerCase());
    });
    }
    });
    });
    Output:

    You might also like