Scribd Logo
Upload

Welcome to Scribd!

  • Lab 04

    Uploaded by

    Mushahid khan
    16 views16 pages
    The document contains details of two tasks completed by Mushahid khan for his lab assignment submitted to Sir Haris on 13-03-2024. Task 1 involves creating a mobile image gallery with search functionality using AngularJS. Task 2 involves displaying different shapes like square, circle, triangle etc. that animate on selection using AngularJS.

    Original Description:

    full stack developing using of angular js and differrent approaches

    Original Title

    lab04

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document contains details of two tasks completed by Mushahid khan for his lab assignment submitted to Sir Haris on 13-03-2024. Task 1 involves creating a mobile image gallery with search functionality using AngularJS. Task 2 involves displaying different shapes like square, circle, triangle etc. that animate on selection using AngularJS.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    16 views16 pages

    Lab 04

    Uploaded by

    Mushahid khan
    The document contains details of two tasks completed by Mushahid khan for his lab assignment submitted to Sir Haris on 13-03-2024. Task 1 involves creating a mobile image gallery with search functionality using AngularJS. Task 2 involves displaying different shapes like square, circle, triangle etc. that animate on selection using AngularJS.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 16

    Group Members: Mushahid khan (215195)

    Submitted To: Sir Haris

    Subject: FSD Lab

    Date: 13-03-2024

    Task1:
    <!DOCTYPE html>
    <html ng-app="mobileGalleryApp">
    <head>
    <title>Mobile Image Gallery</title>
    <style>
    body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f2f2f2;
    overflow: hidden; /* Hide overflow to prevent
    vertical scrollbar */
    }

    .container {
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 20px;
    }

    .welcome-message {
    text-align: center;
    font-size: 24px;
    margin-bottom: 20px;
    color: dodgerblue; /* Text color */
    animation: moveVertical 3s infinite alternate,
    changeColor 5s infinite; /* Animation properties */
    }

    @keyframes moveVertical {
    from {
    transform: translateY(0);
    }
    to {
    transform: translateY(50px);
    }
    }

    @keyframes changeColor {
    0% {
    color: dodgerblue; /* Start color */
    }
    50% {
    color: crimson; /* Mid color */
    }
    100% {
    color: dodgerblue; /* End color */
    }
    }

    .mobile {
    width: 100%; /* Full width */
    text-align: center;
    padding: 10px;
    transition: transform 0.3s ease;
    background-color: #fff; /* Background color */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Box
    shadow */
    border-radius: 10px; /* Rounded corners */
    margin-bottom: 20px; /* Spacing between
    mobiles */
    }

    .mobile:hover {
    transform: rotateY(180deg); /* Rotate on hover
    */
    }

    .mobile img {
    max-width: 100%; /* Full width */
    height: auto;
    border-radius: 5px;
    }

    .mobile p {
    margin-top: 10px;
    font-size: 14px;
    color: #555;
    }

    .search-input {
    padding: 8px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 20px;
    }

    .search-input:focus {
    outline: none;
    border-color: dodgerblue;
    }
    </style>
    <script
    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.
    2/angular.min.js"></script>
    <script>
    angular.module('mobileGalleryApp', [])
    .controller('MobileGalleryController', function()
    {
    this.mobiles = [
    {
    name: 'Air University Kamra',
    image: 'Airunikam.jpg',
    description: 'The Air University or AU is a
    public research university located in Islamabad and
    Multan, Pakistan This University is located in kamra .'
    },
    {
    name: 'Comasats',
    image: 'Comsats.jpg',
    description: 'Comsats Attock.'
    },
    {
    name: 'Cust',
    image: 'cust.jpg',
    description: 'Cust University Islambad'
    },
    {
    name: 'UET',
    image: 'uet.jpg',
    description: 'UET LAHORE'
    },

    {
    name: 'Numl',
    image: 'numl.jpg',
    description: 'Numl University Islambad'
    },

    {
    name: 'IQRA',
    image: 'iqra.jpg',
    description: 'Iqra University karachi'
    },

    {
    name: 'UOH',
    image: 'wah.jpg',
    description: 'UOH University of Wahh
    situated in Wahh cantt near hassanabdal'
    },
    {
    name: 'GIK',
    image: 'gik.jpg',
    description: 'GIK Ghulam ishaq khan
    university located in Toppi '
    },

    {
    name: 'pak_austria',
    image: 'austria.jpg',
    description: 'Pak_Austria university
    haripur located in haripur '
    }

    ];
    });
    </script>
    </head>
    <body>
    <div class="welcome-message">Welcome Mushahid
    Search Engine</div>
    <div class="container" ng-
    controller="MobileGalleryController as gallery">
    <input type="text" ng-model="searchQuery"
    placeholder="Search UNi" class="search-input">
    <div class="mobile" ng-repeat="mobile in
    gallery.mobiles | filter:searchQuery">
    <img ng-src="{{mobile.image}}"
    alt="{{mobile.name}}">
    <p>{{mobile.description}}</p>
    </div>
    </div>
    </body>
    </html>
    Output:

    Task02:
    <!DOCTYPE html>
    <html lang="en" ng-app="shapeApp">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shape Display</title>
    <style>
    .shape {
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ccc;
    margin: 20px;
    }

    .square {
    width: 100px;
    height: 100px;
    background-color: red;
    animation: rotateSquare 2s infinite alternate;
    }

    @keyframes rotateSquare {
    from {
    transform: rotate(0deg);
    }
    to {
    transform: rotate(360deg);
    }
    }

    .circle {
    width: 100px;
    height: 100px;
    background-color: blue;
    border-radius: 50%;
    animation: scaleCircle 2s infinite alternate;
    }

    @keyframes scaleCircle {
    from {
    transform: scale(1);
    }
    to {
    transform: scale(1.2);
    }
    }

    .triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid green;
    animation: rotateTriangle 2s infinite alternate;
    }

    @keyframes rotateTriangle {
    from {
    transform: rotate(0deg);
    }
    to {
    transform: rotate(180deg);
    }
    }

    .pentagon {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: purple;
    transform: rotate(72deg);
    animation: rotatePentagon 2s infinite alternate;
    }
    @keyframes rotatePentagon {
    from {
    transform: rotate(0deg);
    }
    to {
    transform: rotate(360deg);
    }
    }

    .hexagon {
    position: relative;
    width: 100px;
    height: 57.74px;
    background-color: orange;
    margin-top: 21.2px;
    animation: scaleHexagon 2s infinite alternate;
    }

    @keyframes scaleHexagon {
    from {
    transform: scale(1);
    }
    to {
    transform: scale(1.2);
    }
    }

    .octagon {
    width: 100px;
    height: 100px;
    background-color: yellow;
    position: relative;
    animation: rotateOctagon 2s infinite alternate;
    }

    .octagon:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-top: 29px solid yellow;
    border-bottom: 29px solid yellow;
    border-left: 29px solid transparent;
    border-right: 29px solid transparent;
    transform: rotate(45deg);
    }

    @keyframes rotateOctagon {
    from {
    transform: rotate(0deg);
    }
    to {
    transform: rotate(360deg);
    }
    }

    .heart {
    position: relative;
    width: 100px;
    height: 90px;
    transform: rotate(45deg);
    background-color: pink;
    animation: beatHeart 1s infinite alternate;
    }

    .heart:before,
    .heart:after {
    position: absolute;
    content: "";
    top: 0;
    width: 100px;
    height: 100px;
    background-color: pink;
    border-radius: 50%;
    }

    .heart:before {
    left: -50px;
    }

    .heart:after {
    left: 0;
    }

    @keyframes beatHeart {
    from {
    transform: scale(1);
    }
    to {
    transform: scale(1.1);
    }
    }

    .star {
    margin-top: 30px;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 80px solid yellow;
    position: relative;
    animation: rotateStar 2s infinite alternate;
    }

    .star:before {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 80px solid yellow;
    position: absolute;
    top: 30px;
    left: -50px;
    content: "";
    }

    @keyframes rotateStar {
    from {
    transform: rotate(0deg);
    }
    to {
    transform: rotate(180deg);
    }
    }

    .diamond {
    width: 100px;
    height: 100px;
    background-color: cyan;
    transform: rotate(45deg);
    animation: rotateDiamond 2s infinite alternate;
    }

    .diamond:before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom: 70px solid cyan;
    transform: translateX(-50%);
    }

    @keyframes rotateDiamond {
    from {
    transform: rotate(0deg);
    }
    to {
    transform: rotate(360deg);
    }
    }
    </style>
    </head>
    <body ng-controller="ShapeController">
    <input type="text" ng-model="selectedShape" placeholder="Enter shape name">

    <div class="shape" ng-if="selectedShape == 'square'">


    <div class="square"></div>
    </div>
    <div class="shape" ng-if="selectedShape == 'circle'">
    <div class="circle"></div>
    </div>

    <div class="shape" ng-if="selectedShape == 'triangle'">


    <div class="triangle"></div>
    </div>

    <div class="shape" ng-if="selectedShape == 'pentagon'">


    <div class="pentagon"></div>
    </div>

    <div class="shape" ng-if="selectedShape == 'hexagon'">


    <div class="hexagon"></div>
    </div>

    <div class="shape" ng-if="selectedShape == 'octagon'">


    <div class="octagon"></div>
    </div>

    <div class="shape" ng-if="selectedShape == 'heart'">


    <div class="heart"></div>
    </div>

    <div class="shape" ng-if="selectedShape == 'star'">


    <div class="star"></div>
    </div>

    <div class="shape" ng-if="selectedShape == 'diamond'">


    <div class="diamond"></div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script>
    angular.module('shapeApp', [])
    .controller('ShapeController', ['$scope', function($scope) {
    $scope.selectedShape = '';

    $scope.$watch('selectedShape', function(newVal, oldVal) {


    if (newVal !== oldVal) {
    $scope.selectedShape = newVal.toLowerCase();
    }
    });
    }]);
    </script>
    </body>
    </html>

    OUTPUT:
    Task3:
    <!DOCTYPE html>
    <html ng-app="mobileGalleryApp">
    <head>
    <title>Mobile Image Gallery</title>
    <style>
    body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f2f2f2;
    overflow: hidden; /* Hide overflow to prevent vertical scrollbar */
    }

    .container {
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 20px;
    }

    .welcome-message {
    text-align: center;
    font-size: 24px;
    margin-bottom: 20px;
    color: dodgerblue; /* Text color */
    animation: moveVertical 3s infinite alternate, changeColor 5s infinite; /* Animation properties
    */
    }

    @keyframes moveVertical {
    from {
    transform: translateY(0);
    }
    to {
    transform: translateY(50px);
    }
    }

    @keyframes changeColor {
    0% {
    color: dodgerblue; /* Start color */
    }
    50% {
    color: crimson; /* Mid color */
    }
    100% {
    color: dodgerblue; /* End color */
    }
    }

    .mobile {
    width: 100%; /* Full width */
    text-align: center;
    padding: 10px;
    transition: transform 0.3s ease;
    background-color: #fff; /* Background color */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Box shadow */
    border-radius: 10px; /* Rounded corners */
    margin-bottom: 20px; /* Spacing between mobiles */
    animation: rotateImage 2s infinite alternate; /* Animation for image */
    }

    @keyframes rotateImage {
    from {
    transform: rotateY(0deg);
    }
    to {
    transform: rotateY(360deg);
    }
    }

    .mobile:hover {
    transform: rotateY(180deg); /* Rotate on hover */
    }

    .mobile img {
    max-width: 100%; /* Full width */
    height: auto;
    border-radius: 5px;
    }

    .mobile p {
    margin-top: 10px;
    font-size: 14px;
    color: #555;
    }

    .search-input {
    padding: 8px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 20px;
    }

    .search-input:focus {
    outline: none;
    border-color: dodgerblue;
    }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script>
    angular.module('mobileGalleryApp', [])
    .controller('MobileGalleryController', function() {
    this.mobiles = [
    {
    name: 'Honda city',
    image: 'car1.jpg',
    description: 'A good shape car with extra horsepower .'
    },
    {
    name: 'honda civic ',
    image: 'car2.jpg',
    description: '10 generation.'
    },
    {
    name: 'honda city 15',
    image: 'car3.jpg',
    description: 'Prosmatic addition'
    },
    {
    name: 'Honda reborn',
    image: 'car4.jpg',
    description: 'honda Reborn 1.8 power Engine'
    },

    {
    name: 'Honda Eagle',
    image: 'car5.jpg',
    description: 'Honda Eagle'
    },

    {
    name: 'IQRA',
    image: 'iqra.jpg',
    description: 'Iqra University karachi'
    },

    {
    name: 'UOH',
    image: 'wah.jpg',
    description: 'UOH University of Wahh situated in Wahh cantt near hassanabdal'
    },

    {
    name: 'GIK',
    image: 'gik.jpg',
    description: 'GIK Ghulam ishaq khan university located in Toppi '
    },

    {
    name: 'pak_austria',
    image: 'austria.jpg',
    description: 'Pak_Austria university haripur located in haripur '
    }

    ];
    });
    </script>
    </head>
    <body>
    <div class="welcome-message">Welcome Mushahid Search Engine</div>
    <div class="container" ng-controller="MobileGalleryController as gallery">
    <input type="text" ng-model="searchQuery" placeholder="Search Uni" class="search-input">
    <div class="mobile" ng-repeat="mobile in gallery.mobiles | filter: {name: searchQuery}:true">
    <img ng-src="{{mobile.image}}" alt="{{mobile.name}}">
    <p>{{mobile.description}}</p>
    </div>
    </div>
    </body>
    </html>
    output:

    You might also like