{"id":1654,"date":"2024-01-23T17:00:11","date_gmt":"2024-01-23T11:30:11","guid":{"rendered":"https:\/\/moodle.sit.ac.in\/blog\/?p=1654"},"modified":"2024-05-13T23:34:37","modified_gmt":"2024-05-13T18:04:37","slug":"angular-js-lab-solution-manual-for-vtu-21csl581-21cbl583","status":"publish","type":"post","link":"https:\/\/moodle.sit.ac.in\/blog\/angular-js-lab-solution-manual-for-vtu-21csl581-21cbl583\/","title":{"rendered":"Angular JS Lab Solution Manual for VTU (21CSL581\/ 21CBL583)"},"content":{"rendered":"\n<p class=\"has-text-align-justify\">In this blog post, you will find solutions for the laboratory subject <strong>Angular JS Lab (21CSL581\/ 21CBL583)<\/strong> course work for the V semester of <strong>VTU<\/strong> university. The solutions to the lab component are coded developed using Angular JS and HTML.   Along with the solutions for each question I have provided samples of program output as well.<\/p>\n\n\n\n<p class=\"has-text-align-justify\"><strong>Syllabus<\/strong><\/p>\n\n\n\n<p>You can find the lab syllabus here.<\/p>\n\n\n\n<div data-wp-interactive=\"core\/file\" class=\"wp-block-file\"><object data-wp-bind--hidden=\"!state.hasPdfPreview\" hidden class=\"wp-block-file__embed\" data=\"https:\/\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/21CSL581_21CBL583.pdf\" type=\"application\/pdf\" style=\"width:100%;height:600px\" aria-label=\"Embed of 21CSL581_21CBL583.\"><\/object><a id=\"wp-block-file--media-fea0e919-414f-4223-b840-cf98046b5bf9\" href=\"https:\/\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/21CSL581_21CBL583.pdf\">21CSL581_21CBL583<\/a><a href=\"https:\/\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/21CSL581_21CBL583.pdf\" class=\"wp-block-file__button wp-element-button\" download aria-describedby=\"wp-block-file--media-fea0e919-414f-4223-b840-cf98046b5bf9\">Download<\/a><\/div>\n\n\n\n<p>Now lets focus on the solutions. Click on the appropriate hyperlink to go to your program of choice.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><a href=\"#P01\" title=\"\">Display Full Name<\/a><\/li>\n\n\n\n<li><a href=\"#P02\" title=\"String Operations\">Shopping List<\/a><\/li>\n\n\n\n<li><a href=\"#P03\" title=\"Stack of Integers \">Calculator<\/a><\/li>\n\n\n\n<li><a href=\"#P04\" title=\"Infix to Postfix Conversion \">Factorial &amp; Square<\/a><\/li>\n\n\n\n<li><a href=\"#P05\" title=\"Stack Applications\">Student Details<\/a><\/li>\n\n\n\n<li><a href=\"#P06\" title=\"Floyds Triangle\">To-do List<\/a><\/li>\n\n\n\n<li><a href=\"#P07\" title=\"Circular Queue\">CRUD Application<\/a><\/li>\n\n\n\n<li><a href=\"#P08\" title=\"Singly Linked List of Student Data\">Login Form<\/a><\/li>\n\n\n\n<li><a href=\"#P09\" title=\"Doubly Linked List of Employee Data\">Employee Details<\/a><\/li>\n\n\n\n<li><a href=\"#P10\" title=\"Polynomial Evaluation and Addition\">Item Collection<\/a><\/li>\n\n\n\n<li><a href=\"#P11\" title=\"Binary Search Tree\">Convert to Upper case<\/a><\/li>\n\n\n\n<li><a href=\"#P12\" title=\"Interface Demo\">Date Display<\/a><\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" id=\"block-bffdd463-a690-4f79-8ec7-f3c9726330ae\"\/>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/10\/CodingAd.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"1024\" height=\"535\" data-src=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/10\/CodingAd.png?resize=1024%2C535&#038;ssl=1\" alt=\"\" class=\"wp-image-1286 lazyload\" data-srcset=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/10\/CodingAd.png?resize=1024%2C535&amp;ssl=1 1024w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/10\/CodingAd.png?resize=300%2C157&amp;ssl=1 300w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/10\/CodingAd.png?resize=768%2C401&amp;ssl=1 768w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/10\/CodingAd.png?w=1200&amp;ssl=1 1200w\" data-sizes=\"(max-width: 1000px) 100vw, 1000px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/535;\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"P01\">Program 01 : Display Full Name<\/h2>\n\n\n\n<p class=\"has-text-align-justify\"><strong>Develop Angular JS program that allows user to input their first name and last name and display their full name. Note: The default values for first name and last name may be included in the program.<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Code<\/h3>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#24292e\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;!DOCTYPE html&gt;\n&lt;html ng-app=&quot;fullNameApp&quot;&gt;\n&lt;head&gt;\n  &lt;title&gt;AngularJS Full Name App&lt;\/title&gt;\n  &lt;script src=&quot;https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.8.2\/angular.min.js&quot;&gt;&lt;\/script&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;div ng-controller=&quot;fullNameCtrl&quot;&gt;\n  &lt;label for=&quot;firstName&quot;&gt;First Name:&lt;\/label&gt;\n  &lt;input type=&quot;text&quot; id=&quot;firstName&quot; ng-model=&quot;firstName&quot; placeholder=&quot;Enter your first name&quot;&gt;\n\n  &lt;label for=&quot;lastName&quot;&gt;Last Name:&lt;\/label&gt;\n  &lt;input type=&quot;text&quot; id=&quot;lastName&quot; ng-model=&quot;lastName&quot; placeholder=&quot;Enter your last name&quot;&gt;\n\n  &lt;p&gt;Your Full Name: {{ getFullName() }}&lt;\/p&gt;\n&lt;\/div&gt;\n\n&lt;script&gt;\n  \/\/ AngularJS application module\n  var app = angular.module('fullNameApp', []);\n\n  \/\/ AngularJS controller\n  app.controller('fullNameCtrl', function ($scope) {\n    \/\/ Default values for first name and last name\n    $scope.firstName = 'Raj';\n    $scope.lastName = 'Kumar';\n\n    \/\/ Function to get the full name\n    $scope.getFullName = function () {\n      return $scope.firstName + ' ' + $scope.lastName;\n    };\n  });\n&lt;\/script&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color: #24292e\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #E1E4E8\">&lt;!<\/span><span style=\"color: #85E89D\">DOCTYPE<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">html<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">html<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-app<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;fullNameApp&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">head<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">title<\/span><span style=\"color: #E1E4E8\">&gt;AngularJS Full Name App&lt;\/<\/span><span style=\"color: #85E89D\">title<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">script<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">src<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.8.2\/angular.min.js&quot;<\/span><span style=\"color: #E1E4E8\">&gt;&lt;\/<\/span><span style=\"color: #85E89D\">script<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">head<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">body<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-controller<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;fullNameCtrl&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">label<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">for<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;firstName&quot;<\/span><span style=\"color: #E1E4E8\">&gt;First Name:&lt;\/<\/span><span style=\"color: #85E89D\">label<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">input<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">type<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;text&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">id<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;firstName&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-model<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;firstName&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">placeholder<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;Enter your first name&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">label<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">for<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;lastName&quot;<\/span><span style=\"color: #E1E4E8\">&gt;Last Name:&lt;\/<\/span><span style=\"color: #85E89D\">label<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">input<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">type<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;text&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">id<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;lastName&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-model<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;lastName&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">placeholder<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;Enter your last name&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">p<\/span><span style=\"color: #E1E4E8\">&gt;Your Full Name: {{ getFullName() }}&lt;\/<\/span><span style=\"color: #85E89D\">p<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">script<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #6A737D\">\/\/ AngularJS application module<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #F97583\">var<\/span><span style=\"color: #E1E4E8\"> app <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> angular.<\/span><span style=\"color: #B392F0\">module<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&#39;fullNameApp&#39;<\/span><span style=\"color: #E1E4E8\">, []);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #6A737D\">\/\/ AngularJS controller<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  app.<\/span><span style=\"color: #B392F0\">controller<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&#39;fullNameCtrl&#39;<\/span><span style=\"color: #E1E4E8\">, <\/span><span style=\"color: #F97583\">function<\/span><span style=\"color: #E1E4E8\"> (<\/span><span style=\"color: #FFAB70\">$scope<\/span><span style=\"color: #E1E4E8\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #6A737D\">\/\/ Default values for first name and last name<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    $scope.firstName <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">&#39;Raj&#39;<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    $scope.lastName <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">&#39;Kumar&#39;<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #6A737D\">\/\/ Function to get the full name<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    $scope.<\/span><span style=\"color: #B392F0\">getFullName<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">function<\/span><span style=\"color: #E1E4E8\"> () {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #F97583\">return<\/span><span style=\"color: #E1E4E8\"> $scope.firstName <\/span><span style=\"color: #F97583\">+<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">&#39; &#39;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">+<\/span><span style=\"color: #E1E4E8\"> $scope.lastName;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    };<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">script<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">body<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">html<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Output<\/h3>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/image-6.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"532\" height=\"279\" data-src=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/image-6.png?resize=532%2C279&#038;ssl=1\" alt=\"\" class=\"wp-image-1755 lazyload\" data-srcset=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/image-6.png?w=532&amp;ssl=1 532w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/image-6.png?resize=300%2C157&amp;ssl=1 300w\" data-sizes=\"(max-width: 532px) 100vw, 532px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 532px; --smush-placeholder-aspect-ratio: 532\/279;\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"P02\">Program 02 : Shopping List<\/h2>\n\n\n\n<p><strong><strong>Develop an Angular JS application that displays a list of shopping items. Allow users to add and remove items from the list using directives and controllers.Note: The default values of items may be included in the program.<\/strong><\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Code<\/h3>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#24292e\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;!DOCTYPE html&gt;\n&lt;html ng-app=&quot;shoppingListApp&quot;&gt;\n&lt;head&gt;\n  &lt;title&gt;AngularJS Shopping List App&lt;\/title&gt;\n  &lt;style&gt;\n    #shoppingListContainer {\n      width: 300px;\n      margin: auto;\n    }\n\n    ul {\n      list-style-type: none;\n      padding: 0;\n    }\n\n    li {\n      margin-bottom: 10px;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    input {\n      margin-right: 10px;\n    }\n  &lt;\/style&gt;\n  &lt;script src=&quot;https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.8.2\/angular.min.js&quot;&gt;&lt;\/script&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;div ng-controller=&quot;shoppingListCtrl&quot; id=&quot;shoppingListContainer&quot;&gt;\n  &lt;h2&gt;Shopping List&lt;\/h2&gt;\n\n  &lt;ul&gt;\n    &lt;li ng-repeat=&quot;item in shoppingItems&quot;&gt;\n      &lt;span&gt;{{ item }}&lt;\/span&gt;\n      &lt;button ng-click=&quot;removeItem($index)&quot;&gt;Remove&lt;\/button&gt;\n    &lt;\/li&gt;\n  &lt;\/ul&gt;\n\n  &lt;div&gt;\n    &lt;label for=&quot;newItem&quot;&gt;Add New Item:&lt;\/label&gt;\n    &lt;input type=&quot;text&quot; id=&quot;newItem&quot; ng-model=&quot;newItem&quot; placeholder=&quot;Enter a new item&quot;&gt;\n    &lt;button ng-click=&quot;addItem()&quot;&gt;Add Item&lt;\/button&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;script&gt;\n  var app = angular.module('shoppingListApp', []);\n\n  app.controller('shoppingListCtrl', function ($scope) {\n    $scope.shoppingItems = ['Sugar', 'Milk', 'Flour'];\n\n    $scope.addItem = function () {\n      if ($scope.newItem) {\n        $scope.shoppingItems.push($scope.newItem);\n        $scope.newItem = '';\n      }\n    };\n\n    $scope.removeItem = function (index) {\n      $scope.shoppingItems.splice(index, 1);\n    };\n  });\n&lt;\/script&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color: #24292e\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #E1E4E8\">&lt;!<\/span><span style=\"color: #85E89D\">DOCTYPE<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">html<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">html<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-app<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;shoppingListApp&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">head<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">title<\/span><span style=\"color: #E1E4E8\">&gt;AngularJS Shopping List App&lt;\/<\/span><span style=\"color: #85E89D\">title<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">style<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #B392F0\">#shoppingListContainer<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">width<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">300<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">margin<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">auto<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #85E89D\">ul<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">list-style-type<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">none<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">padding<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">0<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #85E89D\">li<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">margin-bottom<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">10<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">display<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">flex<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">justify-content<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">space-between<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">align-items<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">center<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #85E89D\">input<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">margin-right<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">10<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;\/<\/span><span style=\"color: #85E89D\">style<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">script<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">src<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.8.2\/angular.min.js&quot;<\/span><span style=\"color: #E1E4E8\">&gt;&lt;\/<\/span><span style=\"color: #85E89D\">script<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">head<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">body<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-controller<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;shoppingListCtrl&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">id<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;shoppingListContainer&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">h2<\/span><span style=\"color: #E1E4E8\">&gt;Shopping List&lt;\/<\/span><span style=\"color: #85E89D\">h2<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">ul<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">li<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-repeat<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;item in shoppingItems&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      &lt;<\/span><span style=\"color: #85E89D\">span<\/span><span style=\"color: #E1E4E8\">&gt;{{ item }}&lt;\/<\/span><span style=\"color: #85E89D\">span<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      &lt;<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-click<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;removeItem($index)&quot;<\/span><span style=\"color: #E1E4E8\">&gt;Remove&lt;\/<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;\/<\/span><span style=\"color: #85E89D\">li<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;\/<\/span><span style=\"color: #85E89D\">ul<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">label<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">for<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;newItem&quot;<\/span><span style=\"color: #E1E4E8\">&gt;Add New Item:&lt;\/<\/span><span style=\"color: #85E89D\">label<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">input<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">type<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;text&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">id<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;newItem&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-model<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;newItem&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">placeholder<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;Enter a new item&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-click<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;addItem()&quot;<\/span><span style=\"color: #E1E4E8\">&gt;Add Item&lt;\/<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;\/<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">script<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #F97583\">var<\/span><span style=\"color: #E1E4E8\"> app <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> angular.<\/span><span style=\"color: #B392F0\">module<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&#39;shoppingListApp&#39;<\/span><span style=\"color: #E1E4E8\">, []);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  app.<\/span><span style=\"color: #B392F0\">controller<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&#39;shoppingListCtrl&#39;<\/span><span style=\"color: #E1E4E8\">, <\/span><span style=\"color: #F97583\">function<\/span><span style=\"color: #E1E4E8\"> (<\/span><span style=\"color: #FFAB70\">$scope<\/span><span style=\"color: #E1E4E8\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    $scope.shoppingItems <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> [<\/span><span style=\"color: #9ECBFF\">&#39;Sugar&#39;<\/span><span style=\"color: #E1E4E8\">, <\/span><span style=\"color: #9ECBFF\">&#39;Milk&#39;<\/span><span style=\"color: #E1E4E8\">, <\/span><span style=\"color: #9ECBFF\">&#39;Flour&#39;<\/span><span style=\"color: #E1E4E8\">];<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    $scope.<\/span><span style=\"color: #B392F0\">addItem<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">function<\/span><span style=\"color: #E1E4E8\"> () {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #F97583\">if<\/span><span style=\"color: #E1E4E8\"> ($scope.newItem) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        $scope.shoppingItems.<\/span><span style=\"color: #B392F0\">push<\/span><span style=\"color: #E1E4E8\">($scope.newItem);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        $scope.newItem <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">&#39;&#39;<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    };<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    $scope.<\/span><span style=\"color: #B392F0\">removeItem<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">function<\/span><span style=\"color: #E1E4E8\"> (<\/span><span style=\"color: #FFAB70\">index<\/span><span style=\"color: #E1E4E8\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      $scope.shoppingItems.<\/span><span style=\"color: #B392F0\">splice<\/span><span style=\"color: #E1E4E8\">(index, <\/span><span style=\"color: #79B8FF\">1<\/span><span style=\"color: #E1E4E8\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    };<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">script<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">body<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">html<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Output<\/h3>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-16-42-31-1.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"532\" height=\"492\" data-id=\"1749\" data-src=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-16-42-31-1.png?resize=532%2C492&#038;ssl=1\" alt=\"\" class=\"wp-image-1749 lazyload\" data-srcset=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-16-42-31-1.png?w=532&amp;ssl=1 532w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-16-42-31-1.png?resize=300%2C277&amp;ssl=1 300w\" data-sizes=\"(max-width: 532px) 100vw, 532px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 532px; --smush-placeholder-aspect-ratio: 532\/492;\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-16-42-49-1.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"532\" height=\"492\" data-id=\"1748\" data-src=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-16-42-49-1.png?resize=532%2C492&#038;ssl=1\" alt=\"\" class=\"wp-image-1748 lazyload\" data-srcset=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-16-42-49-1.png?w=532&amp;ssl=1 532w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-16-42-49-1.png?resize=300%2C277&amp;ssl=1 300w\" data-sizes=\"(max-width: 532px) 100vw, 532px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 532px; --smush-placeholder-aspect-ratio: 532\/492;\" \/><\/a><\/figure>\n<\/figure>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-16-43-11-1.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"532\" height=\"492\" data-id=\"1752\" data-src=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-16-43-11-1.png?resize=532%2C492&#038;ssl=1\" alt=\"\" class=\"wp-image-1752 lazyload\" data-srcset=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-16-43-11-1.png?w=532&amp;ssl=1 532w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-16-43-11-1.png?resize=300%2C277&amp;ssl=1 300w\" data-sizes=\"(max-width: 532px) 100vw, 532px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 532px; --smush-placeholder-aspect-ratio: 532\/492;\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-16-43-20-1.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"532\" height=\"492\" data-id=\"1753\" data-src=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-16-43-20-1.png?resize=532%2C492&#038;ssl=1\" alt=\"\" class=\"wp-image-1753 lazyload\" data-srcset=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-16-43-20-1.png?w=532&amp;ssl=1 532w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-16-43-20-1.png?resize=300%2C277&amp;ssl=1 300w\" data-sizes=\"(max-width: 532px) 100vw, 532px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 532px; --smush-placeholder-aspect-ratio: 532\/492;\" \/><\/a><\/figure>\n<\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"P03\">Program 03 : Calculator<\/h2>\n\n\n\n<p><strong>Develop a simple Angular JS calculator application that can perform basic mathematical operations (addition, subtraction, multiplication, division) based on user input.<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Code<\/h3>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#24292e\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;!DOCTYPE html&gt;\n&lt;html ng-app=&quot;calculatorApp&quot;&gt;\n&lt;head&gt;\n  &lt;title&gt;AngularJS Calculator App&lt;\/title&gt;\n  &lt;style&gt;\n    #calculator {\n      width: 300px;\n      margin: auto;\n      border: 1px solid #ccc;\n      padding: 10px;\n      border-radius: 5px;\n      text-align: center;\n    }\n\n    input {\n      width: 100%;\n      margin-bottom: 10px;\n      font-size: 18px;\n    }\n\n    .row {\n      display: flex;\n      justify-content: space-between;\n    }\n\n    button {\n      width: 23%;\n      padding: 10px;\n      font-size: 16px;\n      margin-bottom: 10px;\n    }\n  &lt;\/style&gt;\n  &lt;script src=&quot;https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.8.2\/angular.min.js&quot;&gt;&lt;\/script&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;div ng-controller=&quot;calculatorCtrl&quot; id=&quot;calculator&quot;&gt;\n  &lt;h2&gt;Simple Calculator&lt;\/h2&gt;\n\n  &lt;input type=&quot;text&quot; ng-model=&quot;display&quot; disabled&gt;\n\n  &lt;div class=&quot;row&quot;&gt;\n    &lt;button ng-click=&quot;appendToDisplay('1')&quot;&gt;1&lt;\/button&gt;\n    &lt;button ng-click=&quot;appendToDisplay('2')&quot;&gt;2&lt;\/button&gt;\n    &lt;button ng-click=&quot;appendToDisplay('3')&quot;&gt;3&lt;\/button&gt;\n    &lt;button ng-click=&quot;performOperation('+')&quot;&gt;+&lt;\/button&gt;\n  &lt;\/div&gt;\n\n  &lt;div class=&quot;row&quot;&gt;\n    &lt;button ng-click=&quot;appendToDisplay('4')&quot;&gt;4&lt;\/button&gt;\n    &lt;button ng-click=&quot;appendToDisplay('5')&quot;&gt;5&lt;\/button&gt;\n    &lt;button ng-click=&quot;appendToDisplay('6')&quot;&gt;6&lt;\/button&gt;\n    &lt;button ng-click=&quot;performOperation('-')&quot;&gt;-&lt;\/button&gt;\n  &lt;\/div&gt;\n\n  &lt;div class=&quot;row&quot;&gt;\n    &lt;button ng-click=&quot;appendToDisplay('7')&quot;&gt;7&lt;\/button&gt;\n    &lt;button ng-click=&quot;appendToDisplay('8')&quot;&gt;8&lt;\/button&gt;\n    &lt;button ng-click=&quot;appendToDisplay('9')&quot;&gt;9&lt;\/button&gt;\n    &lt;button ng-click=&quot;performOperation('*')&quot;&gt;*&lt;\/button&gt;\n  &lt;\/div&gt;\n\n  &lt;div class=&quot;row&quot;&gt;\n    &lt;button ng-click=&quot;appendToDisplay('0')&quot;&gt;0&lt;\/button&gt;\n    &lt;button ng-click=&quot;clearDisplay()&quot;&gt;C&lt;\/button&gt;\n    &lt;button ng-click=&quot;calculateResult()&quot;&gt;=&lt;\/button&gt;\n    &lt;button ng-click=&quot;performOperation('\/')&quot;&gt;\/&lt;\/button&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;script&gt;\n  var app = angular.module('calculatorApp', []);\n\n  app.controller('calculatorCtrl', function ($scope) {\n    $scope.display = '';\n\n    $scope.appendToDisplay = function (value) {\n      $scope.display += value;\n    };\n\n    $scope.clearDisplay = function () {\n      $scope.display = '';\n    };\n\n    $scope.performOperation = function (operator) {\n      $scope.appendToDisplay(' ' + operator + ' ');\n    };\n\n    $scope.calculateResult = function () {\n      try {\n        $scope.display = eval($scope.display);\n      } catch (error) {\n        $scope.display = 'Error';\n      }\n    };\n  });\n&lt;\/script&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color: #24292e\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #E1E4E8\">&lt;!<\/span><span style=\"color: #85E89D\">DOCTYPE<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">html<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">html<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-app<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;calculatorApp&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">head<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">title<\/span><span style=\"color: #E1E4E8\">&gt;AngularJS Calculator App&lt;\/<\/span><span style=\"color: #85E89D\">title<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">style<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #B392F0\">#calculator<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">width<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">300<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">margin<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">auto<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">border<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">1<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">solid<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">#ccc<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">padding<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">10<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">border-radius<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">5<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">text-align<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">center<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #85E89D\">input<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">width<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">100<\/span><span style=\"color: #F97583\">%<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">margin-bottom<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">10<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">font-size<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">18<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #B392F0\">.row<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">display<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">flex<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">justify-content<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">space-between<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">width<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">23<\/span><span style=\"color: #F97583\">%<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">padding<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">10<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">font-size<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">16<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">margin-bottom<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">10<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;\/<\/span><span style=\"color: #85E89D\">style<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">script<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">src<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.8.2\/angular.min.js&quot;<\/span><span style=\"color: #E1E4E8\">&gt;&lt;\/<\/span><span style=\"color: #85E89D\">script<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">head<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">body<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-controller<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;calculatorCtrl&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">id<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;calculator&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">h2<\/span><span style=\"color: #E1E4E8\">&gt;Simple Calculator&lt;\/<\/span><span style=\"color: #85E89D\">h2<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">input<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">type<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;text&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-model<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;display&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">disabled<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">class<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;row&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-click<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;appendToDisplay(&#39;1&#39;)&quot;<\/span><span style=\"color: #E1E4E8\">&gt;1&lt;\/<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-click<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;appendToDisplay(&#39;2&#39;)&quot;<\/span><span style=\"color: #E1E4E8\">&gt;2&lt;\/<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-click<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;appendToDisplay(&#39;3&#39;)&quot;<\/span><span style=\"color: #E1E4E8\">&gt;3&lt;\/<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-click<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;performOperation(&#39;+&#39;)&quot;<\/span><span style=\"color: #E1E4E8\">&gt;+&lt;\/<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;\/<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">class<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;row&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-click<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;appendToDisplay(&#39;4&#39;)&quot;<\/span><span style=\"color: #E1E4E8\">&gt;4&lt;\/<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-click<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;appendToDisplay(&#39;5&#39;)&quot;<\/span><span style=\"color: #E1E4E8\">&gt;5&lt;\/<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-click<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;appendToDisplay(&#39;6&#39;)&quot;<\/span><span style=\"color: #E1E4E8\">&gt;6&lt;\/<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-click<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;performOperation(&#39;-&#39;)&quot;<\/span><span style=\"color: #E1E4E8\">&gt;-&lt;\/<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;\/<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">class<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;row&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-click<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;appendToDisplay(&#39;7&#39;)&quot;<\/span><span style=\"color: #E1E4E8\">&gt;7&lt;\/<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-click<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;appendToDisplay(&#39;8&#39;)&quot;<\/span><span style=\"color: #E1E4E8\">&gt;8&lt;\/<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-click<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;appendToDisplay(&#39;9&#39;)&quot;<\/span><span style=\"color: #E1E4E8\">&gt;9&lt;\/<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-click<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;performOperation(&#39;*&#39;)&quot;<\/span><span style=\"color: #E1E4E8\">&gt;*&lt;\/<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;\/<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">class<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;row&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-click<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;appendToDisplay(&#39;0&#39;)&quot;<\/span><span style=\"color: #E1E4E8\">&gt;0&lt;\/<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-click<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;clearDisplay()&quot;<\/span><span style=\"color: #E1E4E8\">&gt;C&lt;\/<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-click<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;calculateResult()&quot;<\/span><span style=\"color: #E1E4E8\">&gt;=&lt;\/<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-click<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;performOperation(&#39;\/&#39;)&quot;<\/span><span style=\"color: #E1E4E8\">&gt;\/&lt;\/<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;\/<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">script<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #F97583\">var<\/span><span style=\"color: #E1E4E8\"> app <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> angular.<\/span><span style=\"color: #B392F0\">module<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&#39;calculatorApp&#39;<\/span><span style=\"color: #E1E4E8\">, []);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  app.<\/span><span style=\"color: #B392F0\">controller<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&#39;calculatorCtrl&#39;<\/span><span style=\"color: #E1E4E8\">, <\/span><span style=\"color: #F97583\">function<\/span><span style=\"color: #E1E4E8\"> (<\/span><span style=\"color: #FFAB70\">$scope<\/span><span style=\"color: #E1E4E8\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    $scope.display <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">&#39;&#39;<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    $scope.<\/span><span style=\"color: #B392F0\">appendToDisplay<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">function<\/span><span style=\"color: #E1E4E8\"> (<\/span><span style=\"color: #FFAB70\">value<\/span><span style=\"color: #E1E4E8\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      $scope.display <\/span><span style=\"color: #F97583\">+=<\/span><span style=\"color: #E1E4E8\"> value;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    };<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    $scope.<\/span><span style=\"color: #B392F0\">clearDisplay<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">function<\/span><span style=\"color: #E1E4E8\"> () {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      $scope.display <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">&#39;&#39;<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    };<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    $scope.<\/span><span style=\"color: #B392F0\">performOperation<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">function<\/span><span style=\"color: #E1E4E8\"> (<\/span><span style=\"color: #FFAB70\">operator<\/span><span style=\"color: #E1E4E8\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      $scope.<\/span><span style=\"color: #B392F0\">appendToDisplay<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&#39; &#39;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">+<\/span><span style=\"color: #E1E4E8\"> operator <\/span><span style=\"color: #F97583\">+<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">&#39; &#39;<\/span><span style=\"color: #E1E4E8\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    };<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    $scope.<\/span><span style=\"color: #B392F0\">calculateResult<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">function<\/span><span style=\"color: #E1E4E8\"> () {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #F97583\">try<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        $scope.display <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">eval<\/span><span style=\"color: #E1E4E8\">($scope.display);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      } <\/span><span style=\"color: #F97583\">catch<\/span><span style=\"color: #E1E4E8\"> (error) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        $scope.display <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">&#39;Error&#39;<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    };<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">script<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">body<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">html<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Output<\/h3>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-3 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-16-39-32-1.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"532\" height=\"492\" data-id=\"1743\" data-src=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-16-39-32-1.png?resize=532%2C492&#038;ssl=1\" alt=\"\" class=\"wp-image-1743 lazyload\" data-srcset=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-16-39-32-1.png?w=532&amp;ssl=1 532w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-16-39-32-1.png?resize=300%2C277&amp;ssl=1 300w\" data-sizes=\"(max-width: 532px) 100vw, 532px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 532px; --smush-placeholder-aspect-ratio: 532\/492;\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-16-39-44-1.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"532\" height=\"492\" data-id=\"1742\" data-src=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-16-39-44-1.png?resize=532%2C492&#038;ssl=1\" alt=\"\" class=\"wp-image-1742 lazyload\" data-srcset=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-16-39-44-1.png?w=532&amp;ssl=1 532w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-16-39-44-1.png?resize=300%2C277&amp;ssl=1 300w\" data-sizes=\"(max-width: 532px) 100vw, 532px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 532px; --smush-placeholder-aspect-ratio: 532\/492;\" \/><\/a><\/figure>\n<\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"P04\">Program 04 : Factorial &amp; Square<\/h2>\n\n\n\n<p><strong>Write an Angular JS application that can calculate factorial and compute square based on given user input.<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Code<\/h3>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#24292e\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;!DOCTYPE html&gt;\n&lt;html ng-app=&quot;mathApp&quot;&gt;\n&lt;head&gt;\n  &lt;title&gt;AngularJS Math Calculator&lt;\/title&gt;\n  &lt;style&gt;\n    #calculator {\n      width: 300px;\n      margin: auto;\n      border: 1px solid #ccc;\n      padding: 10px;\n      border-radius: 5px;\n      text-align: center;\n    }\n\n    input {\n      width: 100%;\n      margin-bottom: 10px;\n      font-size: 18px;\n    }\n\n    button {\n      width: 48%;\n      padding: 10px;\n      font-size: 16px;\n      margin-bottom: 10px;\n    }\n\n    button:last-child {\n      margin-right: 0;\n    }\n  &lt;\/style&gt;\n  &lt;script src=&quot;https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.8.2\/angular.min.js&quot;&gt;&lt;\/script&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;div ng-controller=&quot;mathCtrl&quot; id=&quot;calculator&quot;&gt;\n  &lt;h2&gt;Math Calculator&lt;\/h2&gt;\n\n  &lt;input type=&quot;number&quot; ng-model=&quot;inputNumber&quot; placeholder=&quot;Enter a number&quot;&gt;\n\n  &lt;div&gt;\n    &lt;button ng-click=&quot;calculateFactorial()&quot;&gt;Factorial&lt;\/button&gt;\n    &lt;button ng-click=&quot;calculateSquare()&quot;&gt;Square&lt;\/button&gt;\n  &lt;\/div&gt;\n\n  &lt;p ng-show=&quot;result !== undefined&quot;&gt;Result: {{ result }}&lt;\/p&gt;\n&lt;\/div&gt;\n\n&lt;script&gt;\n  var app = angular.module('mathApp', []);\n\n  app.controller('mathCtrl', function ($scope) {\n    $scope.inputNumber = '';\n    $scope.result = undefined;\n\n    $scope.calculateFactorial = function () {\n      if ($scope.inputNumber &gt;= 0) {\n        $scope.result = factorial($scope.inputNumber);\n      } else {\n        $scope.result = 'Invalid input';\n      }\n    };\n\n    $scope.calculateSquare = function () {\n      $scope.result = $scope.inputNumber * $scope.inputNumber;\n    };\n\n    function factorial(n) {\n      if (n === 0 || n === 1) {\n        return 1;\n      }\n      return n * factorial(n - 1);\n    }\n  });\n&lt;\/script&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color: #24292e\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #E1E4E8\">&lt;!<\/span><span style=\"color: #85E89D\">DOCTYPE<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">html<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">html<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-app<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;mathApp&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">head<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">title<\/span><span style=\"color: #E1E4E8\">&gt;AngularJS Math Calculator&lt;\/<\/span><span style=\"color: #85E89D\">title<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">style<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #B392F0\">#calculator<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">width<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">300<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">margin<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">auto<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">border<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">1<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">solid<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">#ccc<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">padding<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">10<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">border-radius<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">5<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">text-align<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">center<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #85E89D\">input<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">width<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">100<\/span><span style=\"color: #F97583\">%<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">margin-bottom<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">10<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">font-size<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">18<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">width<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">48<\/span><span style=\"color: #F97583\">%<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">padding<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">10<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">font-size<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">16<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">margin-bottom<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">10<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #B392F0\">:last-child<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">margin-right<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">0<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;\/<\/span><span style=\"color: #85E89D\">style<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">script<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">src<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.8.2\/angular.min.js&quot;<\/span><span style=\"color: #E1E4E8\">&gt;&lt;\/<\/span><span style=\"color: #85E89D\">script<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">head<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">body<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-controller<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;mathCtrl&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">id<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;calculator&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">h2<\/span><span style=\"color: #E1E4E8\">&gt;Math Calculator&lt;\/<\/span><span style=\"color: #85E89D\">h2<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">input<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">type<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;number&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-model<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;inputNumber&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">placeholder<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;Enter a number&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-click<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;calculateFactorial()&quot;<\/span><span style=\"color: #E1E4E8\">&gt;Factorial&lt;\/<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-click<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;calculateSquare()&quot;<\/span><span style=\"color: #E1E4E8\">&gt;Square&lt;\/<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;\/<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">p<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-show<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;result !== undefined&quot;<\/span><span style=\"color: #E1E4E8\">&gt;Result: {{ result }}&lt;\/<\/span><span style=\"color: #85E89D\">p<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">script<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #F97583\">var<\/span><span style=\"color: #E1E4E8\"> app <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> angular.<\/span><span style=\"color: #B392F0\">module<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&#39;mathApp&#39;<\/span><span style=\"color: #E1E4E8\">, []);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  app.<\/span><span style=\"color: #B392F0\">controller<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&#39;mathCtrl&#39;<\/span><span style=\"color: #E1E4E8\">, <\/span><span style=\"color: #F97583\">function<\/span><span style=\"color: #E1E4E8\"> (<\/span><span style=\"color: #FFAB70\">$scope<\/span><span style=\"color: #E1E4E8\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    $scope.inputNumber <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">&#39;&#39;<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    $scope.result <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">undefined<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    $scope.<\/span><span style=\"color: #B392F0\">calculateFactorial<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">function<\/span><span style=\"color: #E1E4E8\"> () {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #F97583\">if<\/span><span style=\"color: #E1E4E8\"> ($scope.inputNumber <\/span><span style=\"color: #F97583\">&gt;=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">0<\/span><span style=\"color: #E1E4E8\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        $scope.result <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">factorial<\/span><span style=\"color: #E1E4E8\">($scope.inputNumber);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      } <\/span><span style=\"color: #F97583\">else<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        $scope.result <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">&#39;Invalid input&#39;<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    };<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    $scope.<\/span><span style=\"color: #B392F0\">calculateSquare<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">function<\/span><span style=\"color: #E1E4E8\"> () {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      $scope.result <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> $scope.inputNumber <\/span><span style=\"color: #F97583\">*<\/span><span style=\"color: #E1E4E8\"> $scope.inputNumber;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    };<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #F97583\">function<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">factorial<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #FFAB70\">n<\/span><span style=\"color: #E1E4E8\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #F97583\">if<\/span><span style=\"color: #E1E4E8\"> (n <\/span><span style=\"color: #F97583\">===<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">0<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">||<\/span><span style=\"color: #E1E4E8\"> n <\/span><span style=\"color: #F97583\">===<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">1<\/span><span style=\"color: #E1E4E8\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        <\/span><span style=\"color: #F97583\">return<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">1<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #F97583\">return<\/span><span style=\"color: #E1E4E8\"> n <\/span><span style=\"color: #F97583\">*<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">factorial<\/span><span style=\"color: #E1E4E8\">(n <\/span><span style=\"color: #F97583\">-<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">1<\/span><span style=\"color: #E1E4E8\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">script<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">body<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">html<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Output<\/h3>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-4 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-55-06.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"532\" height=\"379\" data-id=\"1737\" data-src=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-55-06.png?resize=532%2C379&#038;ssl=1\" alt=\"\" class=\"wp-image-1737 lazyload\" data-srcset=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-55-06.png?w=532&amp;ssl=1 532w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-55-06.png?resize=300%2C214&amp;ssl=1 300w\" data-sizes=\"(max-width: 532px) 100vw, 532px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 532px; --smush-placeholder-aspect-ratio: 532\/379;\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-54-52.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"532\" height=\"379\" data-id=\"1738\" data-src=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-54-52.png?resize=532%2C379&#038;ssl=1\" alt=\"\" class=\"wp-image-1738 lazyload\" data-srcset=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-54-52.png?w=532&amp;ssl=1 532w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-54-52.png?resize=300%2C214&amp;ssl=1 300w\" data-sizes=\"(max-width: 532px) 100vw, 532px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 532px; --smush-placeholder-aspect-ratio: 532\/379;\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-54-29.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"532\" height=\"379\" data-id=\"1736\" data-src=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-54-29.png?resize=532%2C379&#038;ssl=1\" alt=\"\" class=\"wp-image-1736 lazyload\" data-srcset=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-54-29.png?w=532&amp;ssl=1 532w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-54-29.png?resize=300%2C214&amp;ssl=1 300w\" data-sizes=\"(max-width: 532px) 100vw, 532px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 532px; --smush-placeholder-aspect-ratio: 532\/379;\" \/><\/a><\/figure>\n<\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"P05\">Program 05 : Student Details<\/h2>\n\n\n\n<p class=\"has-text-align-justify\"><strong>Develop AngularJS application that displays a details of students and their CGPA. Allow users to read the number of students and display the count. Note: Student details may be included in the program.<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"P05A\">Code<\/h3>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#24292e\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;!DOCTYPE html&gt;\n&lt;html ng-app=&quot;studentApp&quot;&gt;\n&lt;head&gt;\n  &lt;title&gt;AngularJS Student Details&lt;\/title&gt;\n  &lt;style&gt;\n    #studentDetails {\n      display: flex;\n      width: 800px;\n      margin: auto;\n    }\n\n    #inputForm {\n      width: 33.33%;\n      border: 1px solid #ccc;\n      padding: 20px;\n      border-radius: 5px;\n      text-align: center;\n    }\n\n    #displayDetails {\n      width: 66.66%;\n      border: 1px solid #ccc;\n      padding: 20px;\n      border-radius: 5px;\n    }\n\n    input, select {\n      width: 100%;\n      margin-bottom: 10px;\n      font-size: 16px;\n    }\n\n    table {\n      width: 100%;\n      border-collapse: collapse;\n      margin-top: 10px;\n    }\n\n    th, td {\n      border: 1px solid #ddd;\n      padding: 8px;\n      text-align: left;\n    }\n\n    th:nth-child(3), th:nth-child(4), th:nth-child(5) {\n      white-space: nowrap;\n    }\n\n    td:last-child {\n      max-width: 80px; \/* Adjust the max-width as needed *\/\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  &lt;\/style&gt;\n  &lt;script src=&quot;https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.8.2\/angular.min.js&quot;&gt;&lt;\/script&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;div ng-controller=&quot;studentCtrl&quot; id=&quot;studentDetails&quot;&gt;\n  &lt;div id=&quot;inputForm&quot;&gt;\n    &lt;h2&gt;Enter Student Details&lt;\/h2&gt;\n    &lt;form ng-submit=&quot;enterStudentDetails()&quot;&gt;\n      &lt;label for=&quot;studentName&quot;&gt;Name:&lt;\/label&gt;\n      &lt;input type=&quot;text&quot; id=&quot;studentName&quot; ng-model=&quot;newStudent.name&quot; required&gt;\n\n      &lt;label for=&quot;studentSemester&quot;&gt;Semester:&lt;\/label&gt;\n      &lt;input type=&quot;text&quot; id=&quot;studentSemester&quot; ng-model=&quot;newStudent.semester&quot; required&gt;\n\n      &lt;label for=&quot;subject1&quot;&gt;Subject 1:&lt;\/label&gt;\n      &lt;input type=&quot;number&quot; id=&quot;subject1&quot; ng-model=&quot;newStudent.marks.subject1&quot; required&gt;\n\n      &lt;label for=&quot;subject2&quot;&gt;Subject 2:&lt;\/label&gt;\n      &lt;input type=&quot;number&quot; id=&quot;subject2&quot; ng-model=&quot;newStudent.marks.subject2&quot; required&gt;\n\n      &lt;label for=&quot;subject3&quot;&gt;Subject 3:&lt;\/label&gt;\n      &lt;input type=&quot;number&quot; id=&quot;subject3&quot; ng-model=&quot;newStudent.marks.subject3&quot; required&gt;\n\n      &lt;button type=&quot;submit&quot;&gt;Add Student&lt;\/button&gt;\n    &lt;\/form&gt;\n  &lt;\/div&gt;\n\n  &lt;div id=&quot;displayDetails&quot;&gt;\n    &lt;h2&gt;Student Details&lt;\/h2&gt;\n    &lt;p ng-show=&quot;students.length &gt; 0&quot;&gt;Total Students: {{ students.length }}&lt;\/p&gt;\n    \n    &lt;table ng-show=&quot;students.length &gt; 0&quot;&gt;\n      &lt;tr&gt;\n        &lt;th&gt;Name&lt;\/th&gt;\n        &lt;th&gt;Semester&lt;\/th&gt;\n        &lt;th&gt;Subject 1&lt;\/th&gt;\n        &lt;th&gt;Subject 2&lt;\/th&gt;\n        &lt;th&gt;Subject 3&lt;\/th&gt;\n        &lt;th&gt;CGPA&lt;\/th&gt;\n      &lt;\/tr&gt;\n      &lt;tr ng-repeat=&quot;student in students&quot;&gt;\n        &lt;td&gt;{{ student.name }}&lt;\/td&gt;\n        &lt;td&gt;{{ student.semester }}&lt;\/td&gt;\n        &lt;td&gt;{{ student.marks.subject1 }}&lt;\/td&gt;\n        &lt;td&gt;{{ student.marks.subject2 }}&lt;\/td&gt;\n        &lt;td&gt;{{ student.marks.subject3 }}&lt;\/td&gt;\n        &lt;td&gt;{{ calculateCGPA(student.marks) }}&lt;\/td&gt;\n      &lt;\/tr&gt;\n    &lt;\/table&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;script&gt;\n  var app = angular.module('studentApp', []);\n\n  app.controller('studentCtrl', function ($scope) {\n    $scope.newStudent = {};\n    $scope.students = [];\n\n    $scope.enterStudentDetails = function () {\n      $scope.students.push(angular.copy($scope.newStudent));\n      $scope.newStudent = {};\n    };\n\n    $scope.calculateCGPA = function (marks) {\n      var averageMarks = (marks.subject1 + marks.subject2 + marks.subject3) \/ 3;\n      return (averageMarks \/ 10).toFixed(2);\n    };\n  });\n&lt;\/script&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color: #24292e\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #E1E4E8\">&lt;!<\/span><span style=\"color: #85E89D\">DOCTYPE<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">html<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">html<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-app<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;studentApp&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">head<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">title<\/span><span style=\"color: #E1E4E8\">&gt;AngularJS Student Details&lt;\/<\/span><span style=\"color: #85E89D\">title<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">style<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #B392F0\">#studentDetails<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">display<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">flex<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">width<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">800<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">margin<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">auto<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #B392F0\">#inputForm<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">width<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">33.33<\/span><span style=\"color: #F97583\">%<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">border<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">1<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">solid<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">#ccc<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">padding<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">20<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">border-radius<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">5<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">text-align<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">center<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #B392F0\">#displayDetails<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">width<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">66.66<\/span><span style=\"color: #F97583\">%<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">border<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">1<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">solid<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">#ccc<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">padding<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">20<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">border-radius<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">5<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #85E89D\">input<\/span><span style=\"color: #E1E4E8\">, <\/span><span style=\"color: #85E89D\">select<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">width<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">100<\/span><span style=\"color: #F97583\">%<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">margin-bottom<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">10<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">font-size<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">16<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #85E89D\">table<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">width<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">100<\/span><span style=\"color: #F97583\">%<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">border-collapse<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">collapse<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">margin-top<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">10<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #85E89D\">th<\/span><span style=\"color: #E1E4E8\">, <\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">border<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">1<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">solid<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">#ddd<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">padding<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">8<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">text-align<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">left<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #85E89D\">th<\/span><span style=\"color: #B392F0\">:nth-child<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #79B8FF\">3<\/span><span style=\"color: #E1E4E8\">), <\/span><span style=\"color: #85E89D\">th<\/span><span style=\"color: #B392F0\">:nth-child<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #79B8FF\">4<\/span><span style=\"color: #E1E4E8\">), <\/span><span style=\"color: #85E89D\">th<\/span><span style=\"color: #B392F0\">:nth-child<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #79B8FF\">5<\/span><span style=\"color: #E1E4E8\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">white-space<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">nowrap<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #B392F0\">:last-child<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">max-width<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">80<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">; <\/span><span style=\"color: #6A737D\">\/* Adjust the max-width as needed *\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">overflow<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">hidden<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">text-overflow<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">ellipsis<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;\/<\/span><span style=\"color: #85E89D\">style<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">script<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">src<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.8.2\/angular.min.js&quot;<\/span><span style=\"color: #E1E4E8\">&gt;&lt;\/<\/span><span style=\"color: #85E89D\">script<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">head<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">body<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-controller<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;studentCtrl&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">id<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;studentDetails&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">id<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;inputForm&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">h2<\/span><span style=\"color: #E1E4E8\">&gt;Enter Student Details&lt;\/<\/span><span style=\"color: #85E89D\">h2<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">form<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-submit<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;enterStudentDetails()&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      &lt;<\/span><span style=\"color: #85E89D\">label<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">for<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;studentName&quot;<\/span><span style=\"color: #E1E4E8\">&gt;Name:&lt;\/<\/span><span style=\"color: #85E89D\">label<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      &lt;<\/span><span style=\"color: #85E89D\">input<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">type<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;text&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">id<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;studentName&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-model<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;newStudent.name&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">required<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      &lt;<\/span><span style=\"color: #85E89D\">label<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">for<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;studentSemester&quot;<\/span><span style=\"color: #E1E4E8\">&gt;Semester:&lt;\/<\/span><span style=\"color: #85E89D\">label<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      &lt;<\/span><span style=\"color: #85E89D\">input<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">type<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;text&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">id<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;studentSemester&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-model<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;newStudent.semester&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">required<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      &lt;<\/span><span style=\"color: #85E89D\">label<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">for<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;subject1&quot;<\/span><span style=\"color: #E1E4E8\">&gt;Subject 1:&lt;\/<\/span><span style=\"color: #85E89D\">label<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      &lt;<\/span><span style=\"color: #85E89D\">input<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">type<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;number&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">id<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;subject1&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-model<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;newStudent.marks.subject1&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">required<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      &lt;<\/span><span style=\"color: #85E89D\">label<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">for<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;subject2&quot;<\/span><span style=\"color: #E1E4E8\">&gt;Subject 2:&lt;\/<\/span><span style=\"color: #85E89D\">label<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      &lt;<\/span><span style=\"color: #85E89D\">input<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">type<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;number&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">id<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;subject2&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-model<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;newStudent.marks.subject2&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">required<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      &lt;<\/span><span style=\"color: #85E89D\">label<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">for<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;subject3&quot;<\/span><span style=\"color: #E1E4E8\">&gt;Subject 3:&lt;\/<\/span><span style=\"color: #85E89D\">label<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      &lt;<\/span><span style=\"color: #85E89D\">input<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">type<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;number&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">id<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;subject3&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-model<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;newStudent.marks.subject3&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">required<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      &lt;<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">type<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;submit&quot;<\/span><span style=\"color: #E1E4E8\">&gt;Add Student&lt;\/<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;\/<\/span><span style=\"color: #85E89D\">form<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;\/<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">id<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;displayDetails&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">h2<\/span><span style=\"color: #E1E4E8\">&gt;Student Details&lt;\/<\/span><span style=\"color: #85E89D\">h2<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">p<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-show<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;students.length &gt; 0&quot;<\/span><span style=\"color: #E1E4E8\">&gt;Total Students: {{ students.length }}&lt;\/<\/span><span style=\"color: #85E89D\">p<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">table<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-show<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;students.length &gt; 0&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      &lt;<\/span><span style=\"color: #85E89D\">tr<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        &lt;<\/span><span style=\"color: #85E89D\">th<\/span><span style=\"color: #E1E4E8\">&gt;Name&lt;\/<\/span><span style=\"color: #85E89D\">th<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        &lt;<\/span><span style=\"color: #85E89D\">th<\/span><span style=\"color: #E1E4E8\">&gt;Semester&lt;\/<\/span><span style=\"color: #85E89D\">th<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        &lt;<\/span><span style=\"color: #85E89D\">th<\/span><span style=\"color: #E1E4E8\">&gt;Subject 1&lt;\/<\/span><span style=\"color: #85E89D\">th<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        &lt;<\/span><span style=\"color: #85E89D\">th<\/span><span style=\"color: #E1E4E8\">&gt;Subject 2&lt;\/<\/span><span style=\"color: #85E89D\">th<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        &lt;<\/span><span style=\"color: #85E89D\">th<\/span><span style=\"color: #E1E4E8\">&gt;Subject 3&lt;\/<\/span><span style=\"color: #85E89D\">th<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        &lt;<\/span><span style=\"color: #85E89D\">th<\/span><span style=\"color: #E1E4E8\">&gt;CGPA&lt;\/<\/span><span style=\"color: #85E89D\">th<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      &lt;\/<\/span><span style=\"color: #85E89D\">tr<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      &lt;<\/span><span style=\"color: #85E89D\">tr<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-repeat<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;student in students&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        &lt;<\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\">&gt;{{ student.name }}&lt;\/<\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        &lt;<\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\">&gt;{{ student.semester }}&lt;\/<\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        &lt;<\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\">&gt;{{ student.marks.subject1 }}&lt;\/<\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        &lt;<\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\">&gt;{{ student.marks.subject2 }}&lt;\/<\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        &lt;<\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\">&gt;{{ student.marks.subject3 }}&lt;\/<\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        &lt;<\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\">&gt;{{ calculateCGPA(student.marks) }}&lt;\/<\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      &lt;\/<\/span><span style=\"color: #85E89D\">tr<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;\/<\/span><span style=\"color: #85E89D\">table<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;\/<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">script<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #F97583\">var<\/span><span style=\"color: #E1E4E8\"> app <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> angular.<\/span><span style=\"color: #B392F0\">module<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&#39;studentApp&#39;<\/span><span style=\"color: #E1E4E8\">, []);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  app.<\/span><span style=\"color: #B392F0\">controller<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&#39;studentCtrl&#39;<\/span><span style=\"color: #E1E4E8\">, <\/span><span style=\"color: #F97583\">function<\/span><span style=\"color: #E1E4E8\"> (<\/span><span style=\"color: #FFAB70\">$scope<\/span><span style=\"color: #E1E4E8\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    $scope.newStudent <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> {};<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    $scope.students <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> [];<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    $scope.<\/span><span style=\"color: #B392F0\">enterStudentDetails<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">function<\/span><span style=\"color: #E1E4E8\"> () {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      $scope.students.<\/span><span style=\"color: #B392F0\">push<\/span><span style=\"color: #E1E4E8\">(angular.<\/span><span style=\"color: #B392F0\">copy<\/span><span style=\"color: #E1E4E8\">($scope.newStudent));<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      $scope.newStudent <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> {};<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    };<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    $scope.<\/span><span style=\"color: #B392F0\">calculateCGPA<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">function<\/span><span style=\"color: #E1E4E8\"> (<\/span><span style=\"color: #FFAB70\">marks<\/span><span style=\"color: #E1E4E8\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #F97583\">var<\/span><span style=\"color: #E1E4E8\"> averageMarks <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> (marks.subject1 <\/span><span style=\"color: #F97583\">+<\/span><span style=\"color: #E1E4E8\"> marks.subject2 <\/span><span style=\"color: #F97583\">+<\/span><span style=\"color: #E1E4E8\"> marks.subject3) <\/span><span style=\"color: #F97583\">\/<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">3<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #F97583\">return<\/span><span style=\"color: #E1E4E8\"> (averageMarks <\/span><span style=\"color: #F97583\">\/<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">10<\/span><span style=\"color: #E1E4E8\">).<\/span><span style=\"color: #B392F0\">toFixed<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #79B8FF\">2<\/span><span style=\"color: #E1E4E8\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    };<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">script<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">body<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">html<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Output<\/h3>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-5 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-41-36-1.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"865\" height=\"573\" data-id=\"1726\" data-src=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-41-36-1.png?resize=865%2C573&#038;ssl=1\" alt=\"\" class=\"wp-image-1726 lazyload\" data-srcset=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-41-36-1.png?w=865&amp;ssl=1 865w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-41-36-1.png?resize=300%2C199&amp;ssl=1 300w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-41-36-1.png?resize=768%2C509&amp;ssl=1 768w\" data-sizes=\"(max-width: 865px) 100vw, 865px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 865px; --smush-placeholder-aspect-ratio: 865\/573;\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-42-06.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"865\" height=\"573\" data-id=\"1723\" data-src=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-42-06.png?resize=865%2C573&#038;ssl=1\" alt=\"\" class=\"wp-image-1723 lazyload\" data-srcset=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-42-06.png?w=865&amp;ssl=1 865w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-42-06.png?resize=300%2C199&amp;ssl=1 300w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-42-06.png?resize=768%2C509&amp;ssl=1 768w\" data-sizes=\"(max-width: 865px) 100vw, 865px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 865px; --smush-placeholder-aspect-ratio: 865\/573;\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-42-16-1.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"865\" height=\"573\" data-id=\"1725\" data-src=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-42-16-1.png?resize=865%2C573&#038;ssl=1\" alt=\"\" class=\"wp-image-1725 lazyload\" data-srcset=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-42-16-1.png?w=865&amp;ssl=1 865w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-42-16-1.png?resize=300%2C199&amp;ssl=1 300w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-42-16-1.png?resize=768%2C509&amp;ssl=1 768w\" data-sizes=\"(max-width: 865px) 100vw, 865px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 865px; --smush-placeholder-aspect-ratio: 865\/573;\" \/><\/a><\/figure>\n<\/figure>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-6 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-44-56-2.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"865\" height=\"573\" data-id=\"1729\" data-src=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-44-56-2.png?resize=865%2C573&#038;ssl=1\" alt=\"\" class=\"wp-image-1729 lazyload\" data-srcset=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-44-56-2.png?w=865&amp;ssl=1 865w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-44-56-2.png?resize=300%2C199&amp;ssl=1 300w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-44-56-2.png?resize=768%2C509&amp;ssl=1 768w\" data-sizes=\"(max-width: 865px) 100vw, 865px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 865px; --smush-placeholder-aspect-ratio: 865\/573;\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-45-07-1.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"865\" height=\"573\" data-id=\"1732\" data-src=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-45-07-1.png?resize=865%2C573&#038;ssl=1\" alt=\"\" class=\"wp-image-1732 lazyload\" data-srcset=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-45-07-1.png?w=865&amp;ssl=1 865w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-45-07-1.png?resize=300%2C199&amp;ssl=1 300w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-45-07-1.png?resize=768%2C509&amp;ssl=1 768w\" data-sizes=\"(max-width: 865px) 100vw, 865px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 865px; --smush-placeholder-aspect-ratio: 865\/573;\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-45-42-1.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"865\" height=\"573\" data-id=\"1733\" data-src=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-45-42-1.png?resize=865%2C573&#038;ssl=1\" alt=\"\" class=\"wp-image-1733 lazyload\" data-srcset=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-45-42-1.png?w=865&amp;ssl=1 865w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-45-42-1.png?resize=300%2C199&amp;ssl=1 300w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-45-42-1.png?resize=768%2C509&amp;ssl=1 768w\" data-sizes=\"(max-width: 865px) 100vw, 865px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 865px; --smush-placeholder-aspect-ratio: 865\/573;\" \/><\/a><\/figure>\n<\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"P06\">Program 06 : To-do List<\/h2>\n\n\n\n<p class=\"has-text-align-justify\"><strong>Develop an AngularJS program to create a simple to-do list application. Allow users to add, edit, and delete tasks.Note: The default values for tasks may be included in the program.<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Code<\/h3>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#24292e\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;!DOCTYPE html&gt;\n&lt;html ng-app=&quot;todoApp&quot;&gt;\n&lt;head&gt;\n  &lt;title&gt;AngularJS To-Do List&lt;\/title&gt;\n  &lt;style&gt;\n    #todoList {\n      width: 400px;\n      margin: auto;\n      border: 1px solid #ccc;\n      border-radius: 5px;\n      padding: 20px;\n      margin-top: 20px;\n      text-align: center;\n    }\n\n    ul {\n      list-style-type: none;\n      padding: 0;\n      text-align: left;\n    }\n\n    li {\n      margin-bottom: 10px;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    button {\n      background-color: #dc3545;\n      color: #fff;\n      border: none;\n      padding: 5px 10px;\n      border-radius: 3px;\n      cursor: pointer;\n    }\n\n    input[type=&quot;text&quot;] {\n      padding: 5px;\n      width: 60%;\n      margin-right: 5px;\n    }\n\n    form {\n      margin-top: 10px;\n    }\n  &lt;\/style&gt;\n  &lt;script src=&quot;https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.8.2\/angular.min.js&quot;&gt;&lt;\/script&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;div ng-controller=&quot;todoCtrl&quot; id=&quot;todoList&quot;&gt;\n  &lt;h2&gt;To-Do List&lt;\/h2&gt;\n\n  &lt;form ng-submit=&quot;addTask()&quot;&gt;\n    &lt;label for=&quot;newTask&quot;&gt;New Task:&lt;\/label&gt;\n    &lt;input type=&quot;text&quot; id=&quot;newTask&quot; ng-model=&quot;newTask&quot; required&gt;\n    &lt;button type=&quot;submit&quot;&gt;Add&lt;\/button&gt;\n  &lt;\/form&gt;\n\n  &lt;ul&gt;\n    &lt;li ng-repeat=&quot;task in tasks&quot;&gt;\n      &lt;span&gt;{{ task }}&lt;\/span&gt;\n      &lt;span&gt;\n        &lt;button ng-click=&quot;editTask($index)&quot;&gt;Edit&lt;\/button&gt;\n        &lt;button ng-click=&quot;deleteTask($index)&quot;&gt;Delete&lt;\/button&gt;\n      &lt;\/span&gt;\n    &lt;\/li&gt;\n  &lt;\/ul&gt;\n&lt;\/div&gt;\n\n&lt;script&gt;\n  var app = angular.module('todoApp', []);\n\n  app.controller('todoCtrl', function ($scope) {\n    $scope.tasks = [&quot;Breakfast&quot;, &quot;Lunch&quot;, &quot;Dinner&quot;];\n    $scope.newTask = &quot;&quot;;\n\n    $scope.addTask = function () {\n      if ($scope.newTask.trim() !== &quot;&quot;) {\n        $scope.tasks.push($scope.newTask);\n        $scope.newTask = &quot;&quot;;\n      }\n    };\n\n    $scope.editTask = function (index) {\n      var editedTask = prompt(&quot;Edit task:&quot;, $scope.tasks[index]);\n      if (editedTask !== null) {\n        $scope.tasks[index] = editedTask;\n      }\n    };\n\n    $scope.deleteTask = function (index) {\n      var confirmDelete = confirm(&quot;Are you sure you want to delete this task?&quot;);\n      if (confirmDelete) {\n        $scope.tasks.splice(index, 1);\n      }\n    };\n  });\n&lt;\/script&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color: #24292e\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #E1E4E8\">&lt;!<\/span><span style=\"color: #85E89D\">DOCTYPE<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">html<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">html<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-app<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;todoApp&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">head<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">title<\/span><span style=\"color: #E1E4E8\">&gt;AngularJS To-Do List&lt;\/<\/span><span style=\"color: #85E89D\">title<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">style<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #B392F0\">#todoList<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">width<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">400<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">margin<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">auto<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">border<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">1<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">solid<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">#ccc<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">border-radius<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">5<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">padding<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">20<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">margin-top<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">20<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">text-align<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">center<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #85E89D\">ul<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">list-style-type<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">none<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">padding<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">0<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">text-align<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">left<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #85E89D\">li<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">margin-bottom<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">10<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">display<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">flex<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">justify-content<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">space-between<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">align-items<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">center<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">background-color<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">#dc3545<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">color<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">#fff<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">border<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">none<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">padding<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">5<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">10<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">border-radius<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">3<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">cursor<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">pointer<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #85E89D\">input<\/span><span style=\"color: #E1E4E8\">[<\/span><span style=\"color: #B392F0\">type<\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #9ECBFF\">&quot;text&quot;<\/span><span style=\"color: #E1E4E8\">] {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">padding<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">5<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">width<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">60<\/span><span style=\"color: #F97583\">%<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">margin-right<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">5<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #85E89D\">form<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">margin-top<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">10<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;\/<\/span><span style=\"color: #85E89D\">style<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">script<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">src<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.8.2\/angular.min.js&quot;<\/span><span style=\"color: #E1E4E8\">&gt;&lt;\/<\/span><span style=\"color: #85E89D\">script<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">head<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">body<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-controller<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;todoCtrl&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">id<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;todoList&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">h2<\/span><span style=\"color: #E1E4E8\">&gt;To-Do List&lt;\/<\/span><span style=\"color: #85E89D\">h2<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">form<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-submit<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;addTask()&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">label<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">for<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;newTask&quot;<\/span><span style=\"color: #E1E4E8\">&gt;New Task:&lt;\/<\/span><span style=\"color: #85E89D\">label<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">input<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">type<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;text&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">id<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;newTask&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-model<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;newTask&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">required<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">type<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;submit&quot;<\/span><span style=\"color: #E1E4E8\">&gt;Add&lt;\/<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;\/<\/span><span style=\"color: #85E89D\">form<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">ul<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">li<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-repeat<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;task in tasks&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      &lt;<\/span><span style=\"color: #85E89D\">span<\/span><span style=\"color: #E1E4E8\">&gt;{{ task }}&lt;\/<\/span><span style=\"color: #85E89D\">span<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      &lt;<\/span><span style=\"color: #85E89D\">span<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        &lt;<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-click<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;editTask($index)&quot;<\/span><span style=\"color: #E1E4E8\">&gt;Edit&lt;\/<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        &lt;<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-click<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;deleteTask($index)&quot;<\/span><span style=\"color: #E1E4E8\">&gt;Delete&lt;\/<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      &lt;\/<\/span><span style=\"color: #85E89D\">span<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;\/<\/span><span style=\"color: #85E89D\">li<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;\/<\/span><span style=\"color: #85E89D\">ul<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">script<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #F97583\">var<\/span><span style=\"color: #E1E4E8\"> app <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> angular.<\/span><span style=\"color: #B392F0\">module<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&#39;todoApp&#39;<\/span><span style=\"color: #E1E4E8\">, []);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  app.<\/span><span style=\"color: #B392F0\">controller<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&#39;todoCtrl&#39;<\/span><span style=\"color: #E1E4E8\">, <\/span><span style=\"color: #F97583\">function<\/span><span style=\"color: #E1E4E8\"> (<\/span><span style=\"color: #FFAB70\">$scope<\/span><span style=\"color: #E1E4E8\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    $scope.tasks <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> [<\/span><span style=\"color: #9ECBFF\">&quot;Breakfast&quot;<\/span><span style=\"color: #E1E4E8\">, <\/span><span style=\"color: #9ECBFF\">&quot;Lunch&quot;<\/span><span style=\"color: #E1E4E8\">, <\/span><span style=\"color: #9ECBFF\">&quot;Dinner&quot;<\/span><span style=\"color: #E1E4E8\">];<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    $scope.newTask <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">&quot;&quot;<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    $scope.<\/span><span style=\"color: #B392F0\">addTask<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">function<\/span><span style=\"color: #E1E4E8\"> () {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #F97583\">if<\/span><span style=\"color: #E1E4E8\"> ($scope.newTask.<\/span><span style=\"color: #B392F0\">trim<\/span><span style=\"color: #E1E4E8\">() <\/span><span style=\"color: #F97583\">!==<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">&quot;&quot;<\/span><span style=\"color: #E1E4E8\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        $scope.tasks.<\/span><span style=\"color: #B392F0\">push<\/span><span style=\"color: #E1E4E8\">($scope.newTask);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        $scope.newTask <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">&quot;&quot;<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    };<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    $scope.<\/span><span style=\"color: #B392F0\">editTask<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">function<\/span><span style=\"color: #E1E4E8\"> (<\/span><span style=\"color: #FFAB70\">index<\/span><span style=\"color: #E1E4E8\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #F97583\">var<\/span><span style=\"color: #E1E4E8\"> editedTask <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">prompt<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&quot;Edit task:&quot;<\/span><span style=\"color: #E1E4E8\">, $scope.tasks[index]);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #F97583\">if<\/span><span style=\"color: #E1E4E8\"> (editedTask <\/span><span style=\"color: #F97583\">!==<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">null<\/span><span style=\"color: #E1E4E8\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        $scope.tasks[index] <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> editedTask;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    };<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    $scope.<\/span><span style=\"color: #B392F0\">deleteTask<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">function<\/span><span style=\"color: #E1E4E8\"> (<\/span><span style=\"color: #FFAB70\">index<\/span><span style=\"color: #E1E4E8\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #F97583\">var<\/span><span style=\"color: #E1E4E8\"> confirmDelete <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">confirm<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&quot;Are you sure you want to delete this task?&quot;<\/span><span style=\"color: #E1E4E8\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #F97583\">if<\/span><span style=\"color: #E1E4E8\"> (confirmDelete) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        $scope.tasks.<\/span><span style=\"color: #B392F0\">splice<\/span><span style=\"color: #E1E4E8\">(index, <\/span><span style=\"color: #79B8FF\">1<\/span><span style=\"color: #E1E4E8\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    };<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">script<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">body<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">html<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Output<\/h3>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-7 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-32-50-1.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"734\" height=\"480\" data-id=\"1710\" data-src=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-32-50-1.png?resize=734%2C480&#038;ssl=1\" alt=\"\" class=\"wp-image-1710 lazyload\" data-srcset=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-32-50-1.png?w=734&amp;ssl=1 734w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-32-50-1.png?resize=300%2C196&amp;ssl=1 300w\" data-sizes=\"(max-width: 734px) 100vw, 734px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 734px; --smush-placeholder-aspect-ratio: 734\/480;\" \/><\/a><figcaption class=\"wp-element-caption\">(a)<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-33-15.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"734\" height=\"480\" data-id=\"1709\" data-src=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-33-15.png?resize=734%2C480&#038;ssl=1\" alt=\"\" class=\"wp-image-1709 lazyload\" data-srcset=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-33-15.png?w=734&amp;ssl=1 734w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-33-15.png?resize=300%2C196&amp;ssl=1 300w\" data-sizes=\"(max-width: 734px) 100vw, 734px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 734px; --smush-placeholder-aspect-ratio: 734\/480;\" \/><\/a><figcaption class=\"wp-element-caption\">(b)<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-33-31-1.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"734\" height=\"480\" data-id=\"1711\" data-src=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-33-31-1.png?resize=734%2C480&#038;ssl=1\" alt=\"\" class=\"wp-image-1711 lazyload\" data-srcset=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-33-31-1.png?w=734&amp;ssl=1 734w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-33-31-1.png?resize=300%2C196&amp;ssl=1 300w\" data-sizes=\"(max-width: 734px) 100vw, 734px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 734px; --smush-placeholder-aspect-ratio: 734\/480;\" \/><\/a><figcaption class=\"wp-element-caption\">(c)<\/figcaption><\/figure>\n<\/figure>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-8 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-33-31-3.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"734\" height=\"480\" data-id=\"1719\" data-src=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-33-31-3.png?resize=734%2C480&#038;ssl=1\" alt=\"\" class=\"wp-image-1719 lazyload\" data-srcset=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-33-31-3.png?w=734&amp;ssl=1 734w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-33-31-3.png?resize=300%2C196&amp;ssl=1 300w\" data-sizes=\"(max-width: 734px) 100vw, 734px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 734px; --smush-placeholder-aspect-ratio: 734\/480;\" \/><\/a><figcaption class=\"wp-element-caption\">(d)<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-33-42-1.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"734\" height=\"480\" data-id=\"1718\" data-src=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-33-42-1.png?resize=734%2C480&#038;ssl=1\" alt=\"\" class=\"wp-image-1718 lazyload\" data-srcset=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-33-42-1.png?w=734&amp;ssl=1 734w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-33-42-1.png?resize=300%2C196&amp;ssl=1 300w\" data-sizes=\"(max-width: 734px) 100vw, 734px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 734px; --smush-placeholder-aspect-ratio: 734\/480;\" \/><\/a><figcaption class=\"wp-element-caption\">(e)<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-33-53-4.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"734\" height=\"480\" data-id=\"1720\" data-src=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-33-53-4.png?resize=734%2C480&#038;ssl=1\" alt=\"\" class=\"wp-image-1720 lazyload\" data-srcset=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-33-53-4.png?w=734&amp;ssl=1 734w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-33-53-4.png?resize=300%2C196&amp;ssl=1 300w\" data-sizes=\"(max-width: 734px) 100vw, 734px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 734px; --smush-placeholder-aspect-ratio: 734\/480;\" \/><\/a><figcaption class=\"wp-element-caption\">(f)<\/figcaption><\/figure>\n<\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"P07\">Program 07 : CRUD Application<\/h2>\n\n\n\n<p class=\"has-text-align-justify\"><strong>Write an AngularJS program to create a simple CRUD application (Create, Read, Update, and Delete) for managing users.<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Code<\/h3>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#24292e\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;!DOCTYPE html&gt;\n&lt;html ng-app=&quot;crudApp&quot;&gt;\n&lt;head&gt;\n  &lt;title&gt;AngularJS CRUD Application&lt;\/title&gt;\n  &lt;style&gt;\n    #userList {\n      width: 600px;\n      margin: auto;\n      border: 1px solid #ccc;\n      border-radius: 5px;\n      padding: 20px;\n      margin-top: 20px;\n    }\n\n    table {\n      width: 100%;\n      border-collapse: collapse;\n      margin-top: 10px;\n    }\n\n    th, td {\n      border: 1px solid #ddd;\n      padding: 8px;\n      text-align: left;\n    }\n\n    button {\n      background-color: #dc3545;\n      color: #fff;\n      border: none;\n      padding: 5px 10px;\n      border-radius: 3px;\n      cursor: pointer;\n    }\n  &lt;\/style&gt;\n  &lt;script src=&quot;https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.8.2\/angular.min.js&quot;&gt;&lt;\/script&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;div ng-controller=&quot;crudCtrl&quot; id=&quot;userList&quot;&gt;\n  &lt;h2&gt;Users List&lt;\/h2&gt;\n\n  &lt;form ng-submit=&quot;addUser()&quot;&gt;\n    &lt;label for=&quot;userName&quot;&gt;Name:&lt;\/label&gt;\n    &lt;input type=&quot;text&quot; id=&quot;userName&quot; ng-model=&quot;newUser.name&quot; required&gt;\n\n    &lt;label for=&quot;userEmail&quot;&gt;Email:&lt;\/label&gt;\n    &lt;input type=&quot;email&quot; id=&quot;userEmail&quot; ng-model=&quot;newUser.email&quot; required&gt;\n\n    &lt;button type=&quot;submit&quot;&gt;Add User&lt;\/button&gt;\n  &lt;\/form&gt;\n\n  &lt;table ng-show=&quot;users.length &gt; 0&quot;&gt;\n    &lt;tr&gt;\n      &lt;th&gt;Name&lt;\/th&gt;\n      &lt;th&gt;Email&lt;\/th&gt;\n      &lt;th&gt;Actions&lt;\/th&gt;\n    &lt;\/tr&gt;\n    &lt;tr ng-repeat=&quot;user in users&quot;&gt;\n      &lt;td&gt;{{ user.name }}&lt;\/td&gt;\n      &lt;td&gt;{{ user.email }}&lt;\/td&gt;\n      &lt;td&gt;\n        &lt;button ng-click=&quot;editUser(user)&quot;&gt;Edit&lt;\/button&gt;\n        &lt;button ng-click=&quot;deleteUser(user)&quot;&gt;Delete&lt;\/button&gt;\n      &lt;\/td&gt;\n    &lt;\/tr&gt;\n  &lt;\/table&gt;\n&lt;\/div&gt;\n\n&lt;script&gt;\n  var app = angular.module('crudApp', []);\n\n  app.controller('crudCtrl', function ($scope) {\n    $scope.users = [\n      { name: 'Shiv Kumar', email: 'shiv@company.com' },\n      { name: 'Iqbal Khan', email: 'shiv@company.com' }\n    ];\n\n    $scope.newUser = {};\n\n    $scope.addUser = function () {\n      if ($scope.newUser.name &amp;&amp; $scope.newUser.email) {\n        $scope.users.push(angular.copy($scope.newUser));\n        $scope.newUser = {};\n      }\n    };\n\n    $scope.editUser = function (user) {\n      var editedName = prompt(&quot;Edit user's name:&quot;, user.name);\n      var editedEmail = prompt(&quot;Edit user's email:&quot;, user.email);\n\n      if (editedName !== null &amp;&amp; editedEmail !== null) {\n        user.name = editedName;\n        user.email = editedEmail;\n      }\n    };\n\n    $scope.deleteUser = function (user) {\n      var confirmDelete = confirm(&quot;Are you sure you want to delete this user?&quot;);\n      if (confirmDelete) {\n        var index = $scope.users.indexOf(user);\n        $scope.users.splice(index, 1);\n      }\n    };\n  });\n&lt;\/script&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color: #24292e\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #E1E4E8\">&lt;!<\/span><span style=\"color: #85E89D\">DOCTYPE<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">html<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">html<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-app<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;crudApp&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">head<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">title<\/span><span style=\"color: #E1E4E8\">&gt;AngularJS CRUD Application&lt;\/<\/span><span style=\"color: #85E89D\">title<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">style<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #B392F0\">#userList<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">width<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">600<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">margin<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">auto<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">border<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">1<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">solid<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">#ccc<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">border-radius<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">5<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">padding<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">20<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">margin-top<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">20<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #85E89D\">table<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">width<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">100<\/span><span style=\"color: #F97583\">%<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">border-collapse<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">collapse<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">margin-top<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">10<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #85E89D\">th<\/span><span style=\"color: #E1E4E8\">, <\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">border<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">1<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">solid<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">#ddd<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">padding<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">8<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">text-align<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">left<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">background-color<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">#dc3545<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">color<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">#fff<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">border<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">none<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">padding<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">5<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">10<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">border-radius<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">3<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">cursor<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">pointer<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;\/<\/span><span style=\"color: #85E89D\">style<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">script<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">src<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.8.2\/angular.min.js&quot;<\/span><span style=\"color: #E1E4E8\">&gt;&lt;\/<\/span><span style=\"color: #85E89D\">script<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">head<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">body<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-controller<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;crudCtrl&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">id<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;userList&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">h2<\/span><span style=\"color: #E1E4E8\">&gt;Users List&lt;\/<\/span><span style=\"color: #85E89D\">h2<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">form<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-submit<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;addUser()&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">label<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">for<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;userName&quot;<\/span><span style=\"color: #E1E4E8\">&gt;Name:&lt;\/<\/span><span style=\"color: #85E89D\">label<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">input<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">type<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;text&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">id<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;userName&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-model<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;newUser.name&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">required<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">label<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">for<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;userEmail&quot;<\/span><span style=\"color: #E1E4E8\">&gt;Email:&lt;\/<\/span><span style=\"color: #85E89D\">label<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">input<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">type<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;email&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">id<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;userEmail&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-model<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;newUser.email&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">required<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">type<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;submit&quot;<\/span><span style=\"color: #E1E4E8\">&gt;Add User&lt;\/<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;\/<\/span><span style=\"color: #85E89D\">form<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">table<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-show<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;users.length &gt; 0&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">tr<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      &lt;<\/span><span style=\"color: #85E89D\">th<\/span><span style=\"color: #E1E4E8\">&gt;Name&lt;\/<\/span><span style=\"color: #85E89D\">th<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      &lt;<\/span><span style=\"color: #85E89D\">th<\/span><span style=\"color: #E1E4E8\">&gt;Email&lt;\/<\/span><span style=\"color: #85E89D\">th<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      &lt;<\/span><span style=\"color: #85E89D\">th<\/span><span style=\"color: #E1E4E8\">&gt;Actions&lt;\/<\/span><span style=\"color: #85E89D\">th<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;\/<\/span><span style=\"color: #85E89D\">tr<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">tr<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-repeat<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;user in users&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      &lt;<\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\">&gt;{{ user.name }}&lt;\/<\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      &lt;<\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\">&gt;{{ user.email }}&lt;\/<\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      &lt;<\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        &lt;<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-click<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;editUser(user)&quot;<\/span><span style=\"color: #E1E4E8\">&gt;Edit&lt;\/<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        &lt;<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-click<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;deleteUser(user)&quot;<\/span><span style=\"color: #E1E4E8\">&gt;Delete&lt;\/<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      &lt;\/<\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;\/<\/span><span style=\"color: #85E89D\">tr<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;\/<\/span><span style=\"color: #85E89D\">table<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">script<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #F97583\">var<\/span><span style=\"color: #E1E4E8\"> app <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> angular.<\/span><span style=\"color: #B392F0\">module<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&#39;crudApp&#39;<\/span><span style=\"color: #E1E4E8\">, []);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  app.<\/span><span style=\"color: #B392F0\">controller<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&#39;crudCtrl&#39;<\/span><span style=\"color: #E1E4E8\">, <\/span><span style=\"color: #F97583\">function<\/span><span style=\"color: #E1E4E8\"> (<\/span><span style=\"color: #FFAB70\">$scope<\/span><span style=\"color: #E1E4E8\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    $scope.users <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> [<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      { name: <\/span><span style=\"color: #9ECBFF\">&#39;Shiv Kumar&#39;<\/span><span style=\"color: #E1E4E8\">, email: <\/span><span style=\"color: #9ECBFF\">&#39;shiv@company.com&#39;<\/span><span style=\"color: #E1E4E8\"> },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      { name: <\/span><span style=\"color: #9ECBFF\">&#39;Iqbal Khan&#39;<\/span><span style=\"color: #E1E4E8\">, email: <\/span><span style=\"color: #9ECBFF\">&#39;shiv@company.com&#39;<\/span><span style=\"color: #E1E4E8\"> }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    ];<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    $scope.newUser <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> {};<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    $scope.<\/span><span style=\"color: #B392F0\">addUser<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">function<\/span><span style=\"color: #E1E4E8\"> () {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #F97583\">if<\/span><span style=\"color: #E1E4E8\"> ($scope.newUser.name <\/span><span style=\"color: #F97583\">&amp;&amp;<\/span><span style=\"color: #E1E4E8\"> $scope.newUser.email) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        $scope.users.<\/span><span style=\"color: #B392F0\">push<\/span><span style=\"color: #E1E4E8\">(angular.<\/span><span style=\"color: #B392F0\">copy<\/span><span style=\"color: #E1E4E8\">($scope.newUser));<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        $scope.newUser <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> {};<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    };<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    $scope.<\/span><span style=\"color: #B392F0\">editUser<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">function<\/span><span style=\"color: #E1E4E8\"> (<\/span><span style=\"color: #FFAB70\">user<\/span><span style=\"color: #E1E4E8\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #F97583\">var<\/span><span style=\"color: #E1E4E8\"> editedName <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">prompt<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&quot;Edit user&#39;s name:&quot;<\/span><span style=\"color: #E1E4E8\">, user.name);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #F97583\">var<\/span><span style=\"color: #E1E4E8\"> editedEmail <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">prompt<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&quot;Edit user&#39;s email:&quot;<\/span><span style=\"color: #E1E4E8\">, user.email);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #F97583\">if<\/span><span style=\"color: #E1E4E8\"> (editedName <\/span><span style=\"color: #F97583\">!==<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">null<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">&amp;&amp;<\/span><span style=\"color: #E1E4E8\"> editedEmail <\/span><span style=\"color: #F97583\">!==<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">null<\/span><span style=\"color: #E1E4E8\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        user.name <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> editedName;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        user.email <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> editedEmail;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    };<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    $scope.<\/span><span style=\"color: #B392F0\">deleteUser<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">function<\/span><span style=\"color: #E1E4E8\"> (<\/span><span style=\"color: #FFAB70\">user<\/span><span style=\"color: #E1E4E8\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #F97583\">var<\/span><span style=\"color: #E1E4E8\"> confirmDelete <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">confirm<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&quot;Are you sure you want to delete this user?&quot;<\/span><span style=\"color: #E1E4E8\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #F97583\">if<\/span><span style=\"color: #E1E4E8\"> (confirmDelete) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        <\/span><span style=\"color: #F97583\">var<\/span><span style=\"color: #E1E4E8\"> index <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> $scope.users.<\/span><span style=\"color: #B392F0\">indexOf<\/span><span style=\"color: #E1E4E8\">(user);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        $scope.users.<\/span><span style=\"color: #B392F0\">splice<\/span><span style=\"color: #E1E4E8\">(index, <\/span><span style=\"color: #79B8FF\">1<\/span><span style=\"color: #E1E4E8\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    };<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">script<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">body<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">html<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Output<\/h3>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-9 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-24-31-1.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"734\" height=\"480\" data-id=\"1700\" data-src=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-24-31-1.png?resize=734%2C480&#038;ssl=1\" alt=\"\" class=\"wp-image-1700 lazyload\" data-srcset=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-24-31-1.png?w=734&amp;ssl=1 734w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-24-31-1.png?resize=300%2C196&amp;ssl=1 300w\" data-sizes=\"(max-width: 734px) 100vw, 734px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 734px; --smush-placeholder-aspect-ratio: 734\/480;\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-24-47.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"734\" height=\"480\" data-id=\"1694\" data-src=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-24-47.png?resize=734%2C480&#038;ssl=1\" alt=\"\" class=\"wp-image-1694 lazyload\" data-srcset=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-24-47.png?w=734&amp;ssl=1 734w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-24-47.png?resize=300%2C196&amp;ssl=1 300w\" data-sizes=\"(max-width: 734px) 100vw, 734px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 734px; --smush-placeholder-aspect-ratio: 734\/480;\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-25-13-1.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"734\" height=\"480\" data-id=\"1699\" data-src=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-25-13-1.png?resize=734%2C480&#038;ssl=1\" alt=\"\" class=\"wp-image-1699 lazyload\" data-srcset=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-25-13-1.png?w=734&amp;ssl=1 734w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-25-13-1.png?resize=300%2C196&amp;ssl=1 300w\" data-sizes=\"(max-width: 734px) 100vw, 734px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 734px; --smush-placeholder-aspect-ratio: 734\/480;\" \/><\/a><\/figure>\n<\/figure>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-10 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-25-13-3.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"734\" height=\"480\" data-id=\"1704\" data-src=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-25-13-3.png?resize=734%2C480&#038;ssl=1\" alt=\"\" class=\"wp-image-1704 lazyload\" data-srcset=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-25-13-3.png?w=734&amp;ssl=1 734w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-25-13-3.png?resize=300%2C196&amp;ssl=1 300w\" data-sizes=\"(max-width: 734px) 100vw, 734px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 734px; --smush-placeholder-aspect-ratio: 734\/480;\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-25-27-1.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"734\" height=\"480\" data-id=\"1701\" data-src=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-25-27-1.png?resize=734%2C480&#038;ssl=1\" alt=\"\" class=\"wp-image-1701 lazyload\" data-srcset=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-25-27-1.png?w=734&amp;ssl=1 734w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-25-27-1.png?resize=300%2C196&amp;ssl=1 300w\" data-sizes=\"(max-width: 734px) 100vw, 734px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 734px; --smush-placeholder-aspect-ratio: 734\/480;\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-25-33-1.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"734\" height=\"480\" data-id=\"1705\" data-src=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-25-33-1.png?resize=734%2C480&#038;ssl=1\" alt=\"\" class=\"wp-image-1705 lazyload\" data-srcset=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-25-33-1.png?w=734&amp;ssl=1 734w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-15-25-33-1.png?resize=300%2C196&amp;ssl=1 300w\" data-sizes=\"(max-width: 734px) 100vw, 734px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 734px; --smush-placeholder-aspect-ratio: 734\/480;\" \/><\/a><\/figure>\n<\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"P08\">Program 08 : Login Form<\/h2>\n\n\n\n<p><strong>Develop AngularJS program to create a login form, with validation for the username and password fields.<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Code<\/h3>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#24292e\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;!DOCTYPE html&gt;\n&lt;html ng-app=&quot;loginApp&quot;&gt;\n&lt;head&gt;\n  &lt;title&gt;AngularJS Login Form&lt;\/title&gt;\n  &lt;style&gt;\n    #loginForm {\n      width: 300px;\n      margin: auto;\n      border: 1px solid #ccc;\n      border-radius: 5px;\n      padding: 20px;\n      margin-top: 20px;\n      text-align: center;\n    }\n\n    input {\n      width: 100%;\n      margin-bottom: 10px;\n      padding: 5px;\n    }\n\n    button {\n      background-color: #007bff;\n      color: #fff;\n      border: none;\n      padding: 8px 16px;\n      border-radius: 3px;\n      cursor: pointer;\n    }\n\n    .error {\n      color: #dc3545;\n      margin-top: 5px;\n    }\n  &lt;\/style&gt;\n  &lt;script src=&quot;https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.8.2\/angular.min.js&quot;&gt;&lt;\/script&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;div ng-controller=&quot;loginCtrl&quot; id=&quot;loginForm&quot;&gt;\n  &lt;h2&gt;Login Form&lt;\/h2&gt;\n\n  &lt;form name=&quot;loginForm&quot; ng-submit=&quot;login()&quot;&gt;\n    &lt;label for=&quot;username&quot;&gt;Username:&lt;\/label&gt;\n    &lt;input type=&quot;text&quot; id=&quot;username&quot; ng-model=&quot;username&quot; ng-pattern=&quot;\/^[a-zA-Z_]{4,}$\/&quot; required&gt;\n    &lt;div class=&quot;error&quot; ng-show=&quot;formSubmitted &amp;&amp; loginForm.username.$error.required&quot;&gt;Username is required.&lt;\/div&gt;\n    &lt;div class=&quot;error&quot; ng-show=&quot;formSubmitted &amp;&amp; loginForm.username.$error.pattern&quot;&gt;\n      Username should contain only alphabets and underscore and be at least 4 characters.\n    &lt;\/div&gt;\n\n    &lt;label for=&quot;password&quot;&gt;Password:&lt;\/label&gt;\n    &lt;input type=&quot;password&quot; id=&quot;password&quot; ng-model=&quot;password&quot; ng-minlength=&quot;6&quot; required&gt;\n    &lt;div class=&quot;error&quot; ng-show=&quot;formSubmitted &amp;&amp; loginForm.password.$error.required&quot;&gt;Password is required.&lt;\/div&gt;\n    &lt;div class=&quot;error&quot; ng-show=&quot;formSubmitted &amp;&amp; loginForm.password.$error.minlength&quot;&gt;\n      Password should be at least 6 characters.\n    &lt;\/div&gt;\n\n    &lt;button type=&quot;submit&quot;&gt;Login&lt;\/button&gt;\n    &lt;div class=&quot;error&quot; ng-show=&quot;loginFailed&quot;&gt;Invalid username or password.&lt;\/div&gt;\n  &lt;\/form&gt;\n&lt;\/div&gt;\n\n&lt;script&gt;\n  var app = angular.module('loginApp', []);\n\n  app.controller('loginCtrl', function ($scope) {\n    $scope.username = &quot;&quot;;\n    $scope.password = &quot;&quot;;\n    $scope.formSubmitted = false;\n    $scope.loginFailed = false;\n\n    \/\/ In a real-world scenario, replace this with actual authentication logic.\n    var validUsername = &quot;user123&quot;;\n    var validPassword = &quot;pass123&quot;;\n\n    $scope.login = function () {\n      $scope.formSubmitted = true;\n\n      if ($scope.loginForm.$valid) {\n        if ($scope.username === validUsername &amp;&amp; $scope.password === validPassword) {\n          \/\/ Authentication successful\n          console.log('Login successful!');\n          $scope.loginFailed = false;\n        } else {\n          \/\/ Authentication failed\n          console.log('Login failed!');\n          $scope.loginFailed = true;\n        }\n      }\n    };\n  });\n&lt;\/script&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color: #24292e\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #E1E4E8\">&lt;!<\/span><span style=\"color: #85E89D\">DOCTYPE<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">html<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">html<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-app<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;loginApp&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">head<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">title<\/span><span style=\"color: #E1E4E8\">&gt;AngularJS Login Form&lt;\/<\/span><span style=\"color: #85E89D\">title<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">style<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #B392F0\">#loginForm<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">width<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">300<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">margin<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">auto<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">border<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">1<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">solid<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">#ccc<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">border-radius<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">5<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">padding<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">20<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">margin-top<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">20<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">text-align<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">center<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #85E89D\">input<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">width<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">100<\/span><span style=\"color: #F97583\">%<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">margin-bottom<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">10<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">padding<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">5<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">background-color<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">#007bff<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">color<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">#fff<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">border<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">none<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">padding<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">8<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">16<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">border-radius<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">3<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">cursor<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">pointer<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #B392F0\">.error<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">color<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">#dc3545<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">margin-top<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">5<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;\/<\/span><span style=\"color: #85E89D\">style<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">script<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">src<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.8.2\/angular.min.js&quot;<\/span><span style=\"color: #E1E4E8\">&gt;&lt;\/<\/span><span style=\"color: #85E89D\">script<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">head<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">body<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-controller<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;loginCtrl&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">id<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;loginForm&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">h2<\/span><span style=\"color: #E1E4E8\">&gt;Login Form&lt;\/<\/span><span style=\"color: #85E89D\">h2<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">form<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">name<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;loginForm&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-submit<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;login()&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">label<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">for<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;username&quot;<\/span><span style=\"color: #E1E4E8\">&gt;Username:&lt;\/<\/span><span style=\"color: #85E89D\">label<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">input<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">type<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;text&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">id<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;username&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-model<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;username&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-pattern<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;\/^[a-zA-Z_]{4,}$\/&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">required<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">class<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;error&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-show<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;formSubmitted &amp;&amp; loginForm.username.$error.required&quot;<\/span><span style=\"color: #E1E4E8\">&gt;Username is required.&lt;\/<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">class<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;error&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-show<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;formSubmitted &amp;&amp; loginForm.username.$error.pattern&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      Username should contain only alphabets and underscore and be at least 4 characters.<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;\/<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">label<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">for<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;password&quot;<\/span><span style=\"color: #E1E4E8\">&gt;Password:&lt;\/<\/span><span style=\"color: #85E89D\">label<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">input<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">type<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;password&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">id<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;password&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-model<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;password&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-minlength<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;6&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">required<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">class<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;error&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-show<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;formSubmitted &amp;&amp; loginForm.password.$error.required&quot;<\/span><span style=\"color: #E1E4E8\">&gt;Password is required.&lt;\/<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">class<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;error&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-show<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;formSubmitted &amp;&amp; loginForm.password.$error.minlength&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      Password should be at least 6 characters.<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;\/<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">type<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;submit&quot;<\/span><span style=\"color: #E1E4E8\">&gt;Login&lt;\/<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">class<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;error&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-show<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;loginFailed&quot;<\/span><span style=\"color: #E1E4E8\">&gt;Invalid username or password.&lt;\/<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;\/<\/span><span style=\"color: #85E89D\">form<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">script<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #F97583\">var<\/span><span style=\"color: #E1E4E8\"> app <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> angular.<\/span><span style=\"color: #B392F0\">module<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&#39;loginApp&#39;<\/span><span style=\"color: #E1E4E8\">, []);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  app.<\/span><span style=\"color: #B392F0\">controller<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&#39;loginCtrl&#39;<\/span><span style=\"color: #E1E4E8\">, <\/span><span style=\"color: #F97583\">function<\/span><span style=\"color: #E1E4E8\"> (<\/span><span style=\"color: #FFAB70\">$scope<\/span><span style=\"color: #E1E4E8\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    $scope.username <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">&quot;&quot;<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    $scope.password <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">&quot;&quot;<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    $scope.formSubmitted <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">false<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    $scope.loginFailed <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">false<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #6A737D\">\/\/ In a real-world scenario, replace this with actual authentication logic.<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #F97583\">var<\/span><span style=\"color: #E1E4E8\"> validUsername <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">&quot;user123&quot;<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #F97583\">var<\/span><span style=\"color: #E1E4E8\"> validPassword <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">&quot;pass123&quot;<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    $scope.<\/span><span style=\"color: #B392F0\">login<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">function<\/span><span style=\"color: #E1E4E8\"> () {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      $scope.formSubmitted <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">true<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #F97583\">if<\/span><span style=\"color: #E1E4E8\"> ($scope.loginForm.$valid) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        <\/span><span style=\"color: #F97583\">if<\/span><span style=\"color: #E1E4E8\"> ($scope.username <\/span><span style=\"color: #F97583\">===<\/span><span style=\"color: #E1E4E8\"> validUsername <\/span><span style=\"color: #F97583\">&amp;&amp;<\/span><span style=\"color: #E1E4E8\"> $scope.password <\/span><span style=\"color: #F97583\">===<\/span><span style=\"color: #E1E4E8\"> validPassword) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">          <\/span><span style=\"color: #6A737D\">\/\/ Authentication successful<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">          console.<\/span><span style=\"color: #B392F0\">log<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&#39;Login successful!&#39;<\/span><span style=\"color: #E1E4E8\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">          $scope.loginFailed <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">false<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        } <\/span><span style=\"color: #F97583\">else<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">          <\/span><span style=\"color: #6A737D\">\/\/ Authentication failed<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">          console.<\/span><span style=\"color: #B392F0\">log<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&#39;Login failed!&#39;<\/span><span style=\"color: #E1E4E8\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">          $scope.loginFailed <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">true<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    };<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">script<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">body<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">html<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Output<\/h3>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/image-5.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"588\" height=\"453\" data-src=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/image-5.png?resize=588%2C453&#038;ssl=1\" alt=\"\" class=\"wp-image-1691 lazyload\" data-srcset=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/image-5.png?w=588&amp;ssl=1 588w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/image-5.png?resize=300%2C231&amp;ssl=1 300w\" data-sizes=\"(max-width: 588px) 100vw, 588px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 588px; --smush-placeholder-aspect-ratio: 588\/453;\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"P09\">Program 09 : Employee Details<\/h2>\n\n\n\n<p class=\"has-text-align-justify\"><strong>Create an AngularJS application that displays a list of employees and their salaries. Allow users to search for employees by name and salary. Note: Employee details may be included in the program.<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Code<\/h3>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#24292e\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;!DOCTYPE html&gt;\n&lt;html ng-app=&quot;employeeApp&quot;&gt;\n&lt;head&gt;\n  &lt;title&gt;AngularJS Employee List&lt;\/title&gt;\n  &lt;style&gt;\n    #employeeList {\n      width: 400px;\n      margin: auto;\n      border: 1px solid #ccc;\n      border-radius: 5px;\n      padding: 20px;\n      margin-top: 20px;\n    }\n\n    input {\n      width: 100%;\n      margin-bottom: 10px;\n      padding: 5px;\n    }\n\n    table {\n      width: 100%;\n      border-collapse: collapse;\n      margin-top: 10px;\n    }\n\n    th, td {\n      border: 1px solid #ddd;\n      padding: 8px;\n      text-align: left;\n    }\n  &lt;\/style&gt;\n  &lt;script src=&quot;https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.8.2\/angular.min.js&quot;&gt;&lt;\/script&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;div ng-controller=&quot;employeeCtrl&quot; id=&quot;employeeList&quot;&gt;\n  &lt;h2&gt;Employee List&lt;\/h2&gt;\n\n  &lt;label for=&quot;searchName&quot;&gt;Search by Name:&lt;\/label&gt;\n  &lt;input type=&quot;text&quot; id=&quot;searchName&quot; ng-model=&quot;searchName&quot;&gt;\n\n  &lt;label for=&quot;searchSalary&quot;&gt;Search by Salary:&lt;\/label&gt;\n  &lt;input type=&quot;number&quot; id=&quot;searchSalary&quot; ng-model=&quot;searchSalary&quot;&gt;\n\n  &lt;table&gt;\n    &lt;tr&gt;\n      &lt;th&gt;Name&lt;\/th&gt;\n      &lt;th&gt;Salary&lt;\/th&gt;\n    &lt;\/tr&gt;\n    &lt;tr ng-repeat=&quot;employee in employees | filter:{name: searchName, salary: searchSalary}&quot;&gt;\n      &lt;td&gt;{{ employee.name }}&lt;\/td&gt;\n      &lt;td&gt;{{ employee.salary | currency }}&lt;\/td&gt;\n    &lt;\/tr&gt;\n  &lt;\/table&gt;\n&lt;\/div&gt;\n\n&lt;script&gt;\n  var app = angular.module('employeeApp', []);\n\n  app.controller('employeeCtrl', function ($scope) {\n    $scope.employees = [\n      { name: 'Joseph Prabhu', salary: 50000 },\n      { name: 'Kiran Rao', salary: 60000 },\n      { name: 'Babu Bhaiyya', salary: 75000 },\n      \/\/ Add more employee details as needed\n    ];\n  });\n&lt;\/script&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color: #24292e\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #E1E4E8\">&lt;!<\/span><span style=\"color: #85E89D\">DOCTYPE<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">html<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">html<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-app<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;employeeApp&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">head<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">title<\/span><span style=\"color: #E1E4E8\">&gt;AngularJS Employee List&lt;\/<\/span><span style=\"color: #85E89D\">title<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">style<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #B392F0\">#employeeList<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">width<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">400<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">margin<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">auto<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">border<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">1<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">solid<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">#ccc<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">border-radius<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">5<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">padding<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">20<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">margin-top<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">20<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #85E89D\">input<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">width<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">100<\/span><span style=\"color: #F97583\">%<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">margin-bottom<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">10<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">padding<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">5<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #85E89D\">table<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">width<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">100<\/span><span style=\"color: #F97583\">%<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">border-collapse<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">collapse<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">margin-top<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">10<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #85E89D\">th<\/span><span style=\"color: #E1E4E8\">, <\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">border<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">1<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">solid<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">#ddd<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">padding<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">8<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">text-align<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">left<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;\/<\/span><span style=\"color: #85E89D\">style<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">script<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">src<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.8.2\/angular.min.js&quot;<\/span><span style=\"color: #E1E4E8\">&gt;&lt;\/<\/span><span style=\"color: #85E89D\">script<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">head<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">body<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-controller<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;employeeCtrl&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">id<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;employeeList&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">h2<\/span><span style=\"color: #E1E4E8\">&gt;Employee List&lt;\/<\/span><span style=\"color: #85E89D\">h2<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">label<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">for<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;searchName&quot;<\/span><span style=\"color: #E1E4E8\">&gt;Search by Name:&lt;\/<\/span><span style=\"color: #85E89D\">label<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">input<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">type<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;text&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">id<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;searchName&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-model<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;searchName&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">label<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">for<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;searchSalary&quot;<\/span><span style=\"color: #E1E4E8\">&gt;Search by Salary:&lt;\/<\/span><span style=\"color: #85E89D\">label<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">input<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">type<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;number&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">id<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;searchSalary&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-model<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;searchSalary&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">table<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">tr<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      &lt;<\/span><span style=\"color: #85E89D\">th<\/span><span style=\"color: #E1E4E8\">&gt;Name&lt;\/<\/span><span style=\"color: #85E89D\">th<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      &lt;<\/span><span style=\"color: #85E89D\">th<\/span><span style=\"color: #E1E4E8\">&gt;Salary&lt;\/<\/span><span style=\"color: #85E89D\">th<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;\/<\/span><span style=\"color: #85E89D\">tr<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">tr<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-repeat<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;employee in employees | filter:{name: searchName, salary: searchSalary}&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      &lt;<\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\">&gt;{{ employee.name }}&lt;\/<\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      &lt;<\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\">&gt;{{ employee.salary | currency }}&lt;\/<\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;\/<\/span><span style=\"color: #85E89D\">tr<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;\/<\/span><span style=\"color: #85E89D\">table<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">script<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #F97583\">var<\/span><span style=\"color: #E1E4E8\"> app <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> angular.<\/span><span style=\"color: #B392F0\">module<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&#39;employeeApp&#39;<\/span><span style=\"color: #E1E4E8\">, []);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  app.<\/span><span style=\"color: #B392F0\">controller<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&#39;employeeCtrl&#39;<\/span><span style=\"color: #E1E4E8\">, <\/span><span style=\"color: #F97583\">function<\/span><span style=\"color: #E1E4E8\"> (<\/span><span style=\"color: #FFAB70\">$scope<\/span><span style=\"color: #E1E4E8\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    $scope.employees <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> [<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      { name: <\/span><span style=\"color: #9ECBFF\">&#39;Joseph Prabhu&#39;<\/span><span style=\"color: #E1E4E8\">, salary: <\/span><span style=\"color: #79B8FF\">50000<\/span><span style=\"color: #E1E4E8\"> },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      { name: <\/span><span style=\"color: #9ECBFF\">&#39;Kiran Rao&#39;<\/span><span style=\"color: #E1E4E8\">, salary: <\/span><span style=\"color: #79B8FF\">60000<\/span><span style=\"color: #E1E4E8\"> },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      { name: <\/span><span style=\"color: #9ECBFF\">&#39;Babu Bhaiyya&#39;<\/span><span style=\"color: #E1E4E8\">, salary: <\/span><span style=\"color: #79B8FF\">75000<\/span><span style=\"color: #E1E4E8\"> },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #6A737D\">\/\/ Add more employee details as needed<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    ];<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">script<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">body<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">html<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Output<\/h3>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-11 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-12-46-52-1.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"579\" height=\"568\" data-id=\"1688\" data-src=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-12-46-52-1.png?resize=579%2C568&#038;ssl=1\" alt=\"\" class=\"wp-image-1688 lazyload\" data-srcset=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-12-46-52-1.png?w=579&amp;ssl=1 579w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-12-46-52-1.png?resize=300%2C294&amp;ssl=1 300w\" data-sizes=\"(max-width: 579px) 100vw, 579px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 579px; --smush-placeholder-aspect-ratio: 579\/568;\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-12-47-08.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"579\" height=\"568\" data-id=\"1682\" data-src=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-12-47-08.png?resize=579%2C568&#038;ssl=1\" alt=\"\" class=\"wp-image-1682 lazyload\" data-srcset=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-12-47-08.png?w=579&amp;ssl=1 579w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-12-47-08.png?resize=300%2C294&amp;ssl=1 300w\" data-sizes=\"(max-width: 579px) 100vw, 579px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 579px; --smush-placeholder-aspect-ratio: 579\/568;\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-12-47-31-3.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"579\" height=\"568\" data-id=\"1687\" data-src=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-12-47-31-3.png?resize=579%2C568&#038;ssl=1\" alt=\"\" class=\"wp-image-1687 lazyload\" data-srcset=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-12-47-31-3.png?w=579&amp;ssl=1 579w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-12-47-31-3.png?resize=300%2C294&amp;ssl=1 300w\" data-sizes=\"(max-width: 579px) 100vw, 579px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 579px; --smush-placeholder-aspect-ratio: 579\/568;\" \/><\/a><\/figure>\n<\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"P10\">Program 10 : Item Collection<\/h2>\n\n\n\n<p class=\"has-text-align-justify\"><strong>Create AngularJS application that allows users to maintain a collection of items. The application should display the current total number of items, and this count should automatically update as items are added or removed. Users should be able to add items to the collection and remove them as needed. Note: The default values for items may be included in the program.<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Code<\/h3>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#24292e\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;!DOCTYPE html&gt;\n&lt;html ng-app=&quot;itemApp&quot;&gt;\n&lt;head&gt;\n  &lt;title&gt;AngularJS Item Collection&lt;\/title&gt;\n  &lt;style&gt;\n    #itemCollection {\n      width: 400px;\n      margin: auto;\n      border: 1px solid #ccc;\n      border-radius: 5px;\n      padding: 20px;\n      margin-top: 20px;\n      text-align: center;\n    }\n\n    input {\n      width: 100%;\n      margin-bottom: 10px;\n      padding: 5px;\n    }\n\n    ul {\n      list-style-type: none;\n      padding: 0;\n    }\n\n    li {\n      margin-bottom: 10px;\n    }\n  &lt;\/style&gt;\n  &lt;script src=&quot;https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.8.2\/angular.min.js&quot;&gt;&lt;\/script&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;div ng-controller=&quot;itemCtrl&quot; id=&quot;itemCollection&quot;&gt;\n  &lt;h2&gt;Item Collection&lt;\/h2&gt;\n\n  &lt;label for=&quot;newItem&quot;&gt;New Item:&lt;\/label&gt;\n  &lt;input type=&quot;text&quot; id=&quot;newItem&quot; ng-model=&quot;newItem&quot; required&gt;\n  &lt;button ng-click=&quot;addItem()&quot;&gt;Add Item&lt;\/button&gt;\n\n  &lt;ul&gt;\n    &lt;li ng-repeat=&quot;item in items&quot;&gt;\n      {{ item }}\n      &lt;button ng-click=&quot;removeItem($index)&quot;&gt;Remove&lt;\/button&gt;\n    &lt;\/li&gt;\n  &lt;\/ul&gt;\n\n  &lt;p&gt;Total Items: {{ items.length }}&lt;\/p&gt;\n&lt;\/div&gt;\n\n&lt;script&gt;\n  var app = angular.module('itemApp', []);\n\n  app.controller('itemCtrl', function ($scope) {\n    $scope.items = [&quot;Item 1&quot;, &quot;Item 2&quot;, &quot;Item 3&quot;];\n    $scope.newItem = &quot;&quot;;\n\n    $scope.addItem = function () {\n      if ($scope.newItem.trim() !== &quot;&quot;) {\n        $scope.items.push($scope.newItem);\n        $scope.newItem = &quot;&quot;;\n      }\n    };\n\n    $scope.removeItem = function (index) {\n      $scope.items.splice(index, 1);\n    };\n  });\n&lt;\/script&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color: #24292e\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #E1E4E8\">&lt;!<\/span><span style=\"color: #85E89D\">DOCTYPE<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">html<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">html<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-app<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;itemApp&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">head<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">title<\/span><span style=\"color: #E1E4E8\">&gt;AngularJS Item Collection&lt;\/<\/span><span style=\"color: #85E89D\">title<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">style<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #B392F0\">#itemCollection<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">width<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">400<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">margin<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">auto<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">border<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">1<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">solid<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">#ccc<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">border-radius<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">5<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">padding<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">20<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">margin-top<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">20<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">text-align<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">center<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #85E89D\">input<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">width<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">100<\/span><span style=\"color: #F97583\">%<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">margin-bottom<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">10<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">padding<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">5<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #85E89D\">ul<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">list-style-type<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">none<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">padding<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">0<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #85E89D\">li<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">margin-bottom<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">10<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;\/<\/span><span style=\"color: #85E89D\">style<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">script<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">src<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.8.2\/angular.min.js&quot;<\/span><span style=\"color: #E1E4E8\">&gt;&lt;\/<\/span><span style=\"color: #85E89D\">script<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">head<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">body<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-controller<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;itemCtrl&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">id<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;itemCollection&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">h2<\/span><span style=\"color: #E1E4E8\">&gt;Item Collection&lt;\/<\/span><span style=\"color: #85E89D\">h2<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">label<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">for<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;newItem&quot;<\/span><span style=\"color: #E1E4E8\">&gt;New Item:&lt;\/<\/span><span style=\"color: #85E89D\">label<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">input<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">type<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;text&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">id<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;newItem&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-model<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;newItem&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">required<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-click<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;addItem()&quot;<\/span><span style=\"color: #E1E4E8\">&gt;Add Item&lt;\/<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">ul<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">li<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-repeat<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;item in items&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      {{ item }}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      &lt;<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-click<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;removeItem($index)&quot;<\/span><span style=\"color: #E1E4E8\">&gt;Remove&lt;\/<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;\/<\/span><span style=\"color: #85E89D\">li<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;\/<\/span><span style=\"color: #85E89D\">ul<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">p<\/span><span style=\"color: #E1E4E8\">&gt;Total Items: {{ items.length }}&lt;\/<\/span><span style=\"color: #85E89D\">p<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">script<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #F97583\">var<\/span><span style=\"color: #E1E4E8\"> app <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> angular.<\/span><span style=\"color: #B392F0\">module<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&#39;itemApp&#39;<\/span><span style=\"color: #E1E4E8\">, []);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  app.<\/span><span style=\"color: #B392F0\">controller<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&#39;itemCtrl&#39;<\/span><span style=\"color: #E1E4E8\">, <\/span><span style=\"color: #F97583\">function<\/span><span style=\"color: #E1E4E8\"> (<\/span><span style=\"color: #FFAB70\">$scope<\/span><span style=\"color: #E1E4E8\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    $scope.items <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> [<\/span><span style=\"color: #9ECBFF\">&quot;Item 1&quot;<\/span><span style=\"color: #E1E4E8\">, <\/span><span style=\"color: #9ECBFF\">&quot;Item 2&quot;<\/span><span style=\"color: #E1E4E8\">, <\/span><span style=\"color: #9ECBFF\">&quot;Item 3&quot;<\/span><span style=\"color: #E1E4E8\">];<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    $scope.newItem <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">&quot;&quot;<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    $scope.<\/span><span style=\"color: #B392F0\">addItem<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">function<\/span><span style=\"color: #E1E4E8\"> () {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #F97583\">if<\/span><span style=\"color: #E1E4E8\"> ($scope.newItem.<\/span><span style=\"color: #B392F0\">trim<\/span><span style=\"color: #E1E4E8\">() <\/span><span style=\"color: #F97583\">!==<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">&quot;&quot;<\/span><span style=\"color: #E1E4E8\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        $scope.items.<\/span><span style=\"color: #B392F0\">push<\/span><span style=\"color: #E1E4E8\">($scope.newItem);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        $scope.newItem <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">&quot;&quot;<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    };<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    $scope.<\/span><span style=\"color: #B392F0\">removeItem<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">function<\/span><span style=\"color: #E1E4E8\"> (<\/span><span style=\"color: #FFAB70\">index<\/span><span style=\"color: #E1E4E8\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      $scope.items.<\/span><span style=\"color: #B392F0\">splice<\/span><span style=\"color: #E1E4E8\">(index, <\/span><span style=\"color: #79B8FF\">1<\/span><span style=\"color: #E1E4E8\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    };<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">script<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">body<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">html<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Output<\/h3>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-12 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-12-37-15-3.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"579\" height=\"517\" data-id=\"1674\" data-src=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-12-37-15-3.png?resize=579%2C517&#038;ssl=1\" alt=\"\" class=\"wp-image-1674 lazyload\" data-srcset=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-12-37-15-3.png?w=579&amp;ssl=1 579w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-12-37-15-3.png?resize=300%2C268&amp;ssl=1 300w\" data-sizes=\"(max-width: 579px) 100vw, 579px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 579px; --smush-placeholder-aspect-ratio: 579\/517;\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-12-37-36-3.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"579\" height=\"517\" data-id=\"1675\" data-src=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-12-37-36-3.png?resize=579%2C517&#038;ssl=1\" alt=\"\" class=\"wp-image-1675 lazyload\" data-srcset=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-12-37-36-3.png?w=579&amp;ssl=1 579w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-12-37-36-3.png?resize=300%2C268&amp;ssl=1 300w\" data-sizes=\"(max-width: 579px) 100vw, 579px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 579px; --smush-placeholder-aspect-ratio: 579\/517;\" \/><\/a><\/figure>\n<\/figure>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-13 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-12-38-10-2.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"579\" height=\"517\" data-id=\"1678\" data-src=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-12-38-10-2.png?resize=579%2C517&#038;ssl=1\" alt=\"\" class=\"wp-image-1678 lazyload\" data-srcset=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-12-38-10-2.png?w=579&amp;ssl=1 579w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-12-38-10-2.png?resize=300%2C268&amp;ssl=1 300w\" data-sizes=\"(max-width: 579px) 100vw, 579px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 579px; --smush-placeholder-aspect-ratio: 579\/517;\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-12-38-27-2.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"579\" height=\"517\" data-id=\"1679\" data-src=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-12-38-27-2.png?resize=579%2C517&#038;ssl=1\" alt=\"\" class=\"wp-image-1679 lazyload\" data-srcset=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-12-38-27-2.png?w=579&amp;ssl=1 579w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-from-2024-01-23-12-38-27-2.png?resize=300%2C268&amp;ssl=1 300w\" data-sizes=\"(max-width: 579px) 100vw, 579px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 579px; --smush-placeholder-aspect-ratio: 579\/517;\" \/><\/a><\/figure>\n<\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"P11\">Program 11 : Convert to Upper case<\/h2>\n\n\n\n<p class=\"has-text-align-justify\"><strong>Create AngularJS application to convert student details to Uppercase using angular filters. Note: The default details of students may be included in the program.<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"P11A\">Code<\/h3>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#24292e\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;!DOCTYPE html&gt;\n&lt;html ng-app=&quot;studentApp&quot;&gt;\n&lt;head&gt;\n  &lt;title&gt;AngularJS Student Details&lt;\/title&gt;\n  &lt;style&gt;\n    #studentDetails {\n      width: 400px;\n      margin: auto;\n      border: 1px solid #ccc;\n      border-radius: 5px;\n      padding: 20px;\n      margin-top: 20px;\n      text-align: center;\n    }\n\n    input {\n      width: 100%;\n      margin-bottom: 10px;\n      padding: 5px;\n    }\n  &lt;\/style&gt;\n  &lt;script src=&quot;https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.8.2\/angular.min.js&quot;&gt;&lt;\/script&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;div ng-controller=&quot;studentCtrl&quot; id=&quot;studentDetails&quot;&gt;\n  &lt;h2&gt;Student Details&lt;\/h2&gt;\n\n  &lt;label for=&quot;studentName&quot;&gt;Name:&lt;\/label&gt;\n  &lt;input type=&quot;text&quot; id=&quot;studentName&quot; ng-model=&quot;student.name&quot; required&gt;\n\n  &lt;label for=&quot;studentBranch&quot;&gt;Branch:&lt;\/label&gt;\n  &lt;input type=&quot;text&quot; id=&quot;studentBranch&quot; ng-model=&quot;student.branch&quot; required&gt;\n\n  &lt;p&gt;Uppercase Name: {{ student.name | uppercase }}&lt;\/p&gt;\n  &lt;p&gt;Uppercase Branch: {{ student.branch | uppercase }}&lt;\/p&gt;\n&lt;\/div&gt;\n\n&lt;script&gt;\n  var app = angular.module('studentApp', []);\n\n  app.controller('studentCtrl', function ($scope) {\n    $scope.student = {\n      name: 'John Doe',\n      branch: 'Computer Science'\n    };\n  });\n&lt;\/script&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color: #24292e\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #E1E4E8\">&lt;!<\/span><span style=\"color: #85E89D\">DOCTYPE<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">html<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">html<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-app<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;studentApp&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">head<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">title<\/span><span style=\"color: #E1E4E8\">&gt;AngularJS Student Details&lt;\/<\/span><span style=\"color: #85E89D\">title<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">style<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #B392F0\">#studentDetails<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">width<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">400<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">margin<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">auto<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">border<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">1<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">solid<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">#ccc<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">border-radius<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">5<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">padding<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">20<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">margin-top<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">20<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">text-align<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">center<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #85E89D\">input<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">width<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">100<\/span><span style=\"color: #F97583\">%<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">margin-bottom<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">10<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">padding<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">5<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;\/<\/span><span style=\"color: #85E89D\">style<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">script<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">src<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.8.2\/angular.min.js&quot;<\/span><span style=\"color: #E1E4E8\">&gt;&lt;\/<\/span><span style=\"color: #85E89D\">script<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">head<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">body<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-controller<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;studentCtrl&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">id<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;studentDetails&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">h2<\/span><span style=\"color: #E1E4E8\">&gt;Student Details&lt;\/<\/span><span style=\"color: #85E89D\">h2<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">label<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">for<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;studentName&quot;<\/span><span style=\"color: #E1E4E8\">&gt;Name:&lt;\/<\/span><span style=\"color: #85E89D\">label<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">input<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">type<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;text&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">id<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;studentName&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-model<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;student.name&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">required<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">label<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">for<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;studentBranch&quot;<\/span><span style=\"color: #E1E4E8\">&gt;Branch:&lt;\/<\/span><span style=\"color: #85E89D\">label<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">input<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">type<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;text&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">id<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;studentBranch&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-model<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;student.branch&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">required<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">p<\/span><span style=\"color: #E1E4E8\">&gt;Uppercase Name: {{ student.name | uppercase }}&lt;\/<\/span><span style=\"color: #85E89D\">p<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">p<\/span><span style=\"color: #E1E4E8\">&gt;Uppercase Branch: {{ student.branch | uppercase }}&lt;\/<\/span><span style=\"color: #85E89D\">p<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">script<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #F97583\">var<\/span><span style=\"color: #E1E4E8\"> app <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> angular.<\/span><span style=\"color: #B392F0\">module<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&#39;studentApp&#39;<\/span><span style=\"color: #E1E4E8\">, []);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  app.<\/span><span style=\"color: #B392F0\">controller<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&#39;studentCtrl&#39;<\/span><span style=\"color: #E1E4E8\">, <\/span><span style=\"color: #F97583\">function<\/span><span style=\"color: #E1E4E8\"> (<\/span><span style=\"color: #FFAB70\">$scope<\/span><span style=\"color: #E1E4E8\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    $scope.student <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      name: <\/span><span style=\"color: #9ECBFF\">&#39;John Doe&#39;<\/span><span style=\"color: #E1E4E8\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      branch: <\/span><span style=\"color: #9ECBFF\">&#39;Computer Science&#39;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    };<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">script<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">body<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">html<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Output<\/h3>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/image-2.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"574\" height=\"480\" data-src=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/image-2.png?resize=574%2C480&#038;ssl=1\" alt=\"\" class=\"wp-image-1663 lazyload\" data-srcset=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/image-2.png?w=574&amp;ssl=1 574w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/image-2.png?resize=300%2C251&amp;ssl=1 300w\" data-sizes=\"(max-width: 574px) 100vw, 574px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 574px; --smush-placeholder-aspect-ratio: 574\/480;\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"P12\">Program 12 : Date Display<\/h2>\n\n\n\n<p class=\"has-text-align-justify\"><strong>Create an AngularJS application that displays the date by using date filter parameters<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Code<\/h3>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#24292e\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;!DOCTYPE html&gt;\n&lt;html ng-app=&quot;dateApp&quot;&gt;\n&lt;head&gt;\n  &lt;title&gt;AngularJS Date Display&lt;\/title&gt;\n  &lt;style&gt;\n    #dateDisplay {\n      width: 400px;\n      margin: auto;\n      border: 1px solid #ccc;\n      border-radius: 5px;\n      padding: 20px;\n      margin-top: 20px;\n      text-align: center;\n    }\n  &lt;\/style&gt;\n  &lt;script src=&quot;https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.8.2\/angular.min.js&quot;&gt;&lt;\/script&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;div ng-controller=&quot;dateCtrl&quot; id=&quot;dateDisplay&quot;&gt;\n  &lt;h2&gt;Date Display&lt;\/h2&gt;\n\n  &lt;p&gt;Default Format: {{ currentDate | date }}&lt;\/p&gt;\n  &lt;p&gt;Custom Format: {{ currentDate | date:'fullDate' }}&lt;\/p&gt;\n  &lt;p&gt;Short Format: {{ currentDate | date:'short' }}&lt;\/p&gt;\n  &lt;p&gt;Custom Format (MM\/dd\/yyyy): {{ currentDate | date:'MM\/dd\/yyyy' }}&lt;\/p&gt;\n&lt;\/div&gt;\n\n&lt;script&gt;\n  var app = angular.module('dateApp', []);\n\n  app.controller('dateCtrl', function ($scope) {\n    $scope.currentDate = new Date();\n  });\n&lt;\/script&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color: #24292e\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #E1E4E8\">&lt;!<\/span><span style=\"color: #85E89D\">DOCTYPE<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">html<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">html<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-app<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;dateApp&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">head<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">title<\/span><span style=\"color: #E1E4E8\">&gt;AngularJS Date Display&lt;\/<\/span><span style=\"color: #85E89D\">title<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">style<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #B392F0\">#dateDisplay<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">width<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">400<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">margin<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">auto<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">border<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">1<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">solid<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">#ccc<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">border-radius<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">5<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">padding<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">20<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">margin-top<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">20<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">text-align<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">center<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;\/<\/span><span style=\"color: #85E89D\">style<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">script<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">src<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.8.2\/angular.min.js&quot;<\/span><span style=\"color: #E1E4E8\">&gt;&lt;\/<\/span><span style=\"color: #85E89D\">script<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">head<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">body<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ng-controller<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;dateCtrl&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">id<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;dateDisplay&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">h2<\/span><span style=\"color: #E1E4E8\">&gt;Date Display&lt;\/<\/span><span style=\"color: #85E89D\">h2<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">p<\/span><span style=\"color: #E1E4E8\">&gt;Default Format: {{ currentDate | date }}&lt;\/<\/span><span style=\"color: #85E89D\">p<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">p<\/span><span style=\"color: #E1E4E8\">&gt;Custom Format: {{ currentDate | date:&#39;fullDate&#39; }}&lt;\/<\/span><span style=\"color: #85E89D\">p<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">p<\/span><span style=\"color: #E1E4E8\">&gt;Short Format: {{ currentDate | date:&#39;short&#39; }}&lt;\/<\/span><span style=\"color: #85E89D\">p<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">p<\/span><span style=\"color: #E1E4E8\">&gt;Custom Format (MM\/dd\/yyyy): {{ currentDate | date:&#39;MM\/dd\/yyyy&#39; }}&lt;\/<\/span><span style=\"color: #85E89D\">p<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">script<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #F97583\">var<\/span><span style=\"color: #E1E4E8\"> app <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> angular.<\/span><span style=\"color: #B392F0\">module<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&#39;dateApp&#39;<\/span><span style=\"color: #E1E4E8\">, []);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  app.<\/span><span style=\"color: #B392F0\">controller<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&#39;dateCtrl&#39;<\/span><span style=\"color: #E1E4E8\">, <\/span><span style=\"color: #F97583\">function<\/span><span style=\"color: #E1E4E8\"> (<\/span><span style=\"color: #FFAB70\">$scope<\/span><span style=\"color: #E1E4E8\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    $scope.currentDate <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">new<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">Date<\/span><span style=\"color: #E1E4E8\">();<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">script<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">body<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">html<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Output<\/h3>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/image-3.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"574\" height=\"480\" data-src=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/image-3.png?resize=574%2C480&#038;ssl=1\" alt=\"\" class=\"wp-image-1664 lazyload\" data-srcset=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/image-3.png?w=574&amp;ssl=1 574w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/image-3.png?resize=300%2C251&amp;ssl=1 300w\" data-sizes=\"(max-width: 574px) 100vw, 574px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 574px; --smush-placeholder-aspect-ratio: 574\/480;\" \/><\/a><\/figure>\n\n\n\n<p>If you are also looking for other Lab Manuals, head over to my following blog :<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-myblogosphere wp-block-embed-myblogosphere\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"klCpxgZx0V\"><a href=\"https:\/\/moodle.sit.ac.in\/blog\/vtu-lab-manuals-using-foss\/\">VTU Lab Manuals using FOSS<\/a><\/blockquote><iframe class=\"wp-embedded-content lazyload\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8220;VTU Lab Manuals using FOSS&#8221; &#8212; MyBlogosphere\" data-src=\"https:\/\/moodle.sit.ac.in\/blog\/vtu-lab-manuals-using-foss\/embed\/#?secret=546nh40ItW#?secret=klCpxgZx0V\" data-secret=\"klCpxgZx0V\" width=\"500\" height=\"282\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\"><\/iframe>\n<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>In this blog post, you will find solutions for the laboratory subject Angular JS Lab (21CSL581\/ 21CBL583) course work for the V semester of VTU university. The solutions to the lab component are coded developed using Angular JS and HTML. Along with the solutions for each question I have provided samples of program output as [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1759,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"site-container-style":"default","site-container-layout":"default","site-sidebar-layout":"default","disable-article-header":"default","disable-site-header":"default","disable-site-footer":"default","disable-content-area-spacing":"default","_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[3],"tags":[186,185,184,187,133,78,26,51,35,131,188,43],"class_list":["post-1654","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programming","tag-21cbl583","tag-21csl581","tag-21csl581-21cbl583","tag-angular-js","tag-cs","tag-cse","tag-foss","tag-html","tag-lab-manual","tag-new-syllabus","tag-v-semester","tag-vtu"],"aioseo_notices":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2024\/01\/angularjs-html.jpg?fit=1398%2C675&ssl=1","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/moodle.sit.ac.in\/blog\/wp-json\/wp\/v2\/posts\/1654","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/moodle.sit.ac.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/moodle.sit.ac.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/moodle.sit.ac.in\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/moodle.sit.ac.in\/blog\/wp-json\/wp\/v2\/comments?post=1654"}],"version-history":[{"count":22,"href":"https:\/\/moodle.sit.ac.in\/blog\/wp-json\/wp\/v2\/posts\/1654\/revisions"}],"predecessor-version":[{"id":2296,"href":"https:\/\/moodle.sit.ac.in\/blog\/wp-json\/wp\/v2\/posts\/1654\/revisions\/2296"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/moodle.sit.ac.in\/blog\/wp-json\/wp\/v2\/media\/1759"}],"wp:attachment":[{"href":"https:\/\/moodle.sit.ac.in\/blog\/wp-json\/wp\/v2\/media?parent=1654"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/moodle.sit.ac.in\/blog\/wp-json\/wp\/v2\/categories?post=1654"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/moodle.sit.ac.in\/blog\/wp-json\/wp\/v2\/tags?post=1654"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}