Complete Practical 9

PracticalNine.Tests/Controllers/HomeControllerTest.cs

@@ -26,16 +26,16 @@ public void Index()
 		}
 
 		[TestMethod]
-		public void About()
+		public void Test3()
 		{
 			// Arrange
 			HomeController controller = new HomeController();
 
 			// Act
-			ViewResult result = controller.About() as ViewResult;
+			ViewResult result = controller.Test3() as ViewResult;
 
 			// Assert
-			Assert.AreEqual("Your application description page.", result.ViewBag.Message);
+			Assert.AreEqual("Hello World", result.ViewBag.Message);
 		}
 
 		[TestMethod]

PracticalNine/Content/Site.css

@@ -1,8 +1,18 @@
 /* Set padding to keep content from hitting the edges */
+
+html {
+    height: 100vh;
+}
+
+body {
+    height: 100vh;
+}
+
 .body-content {
     margin-top: 15px;
     padding-left: 15px;
     padding-right: 15px;
+    height:
 }
 
 /* Override the default bootstrap behavior where horizontal description lists 

PracticalNine/Controllers/HomeController.cs

@@ -13,10 +13,14 @@ public ActionResult Index()
 			return View();
 		}
 
-		public ActionResult About()
+		public ActionResult Test2()
 		{
-			ViewBag.Message = "Your application description page.";
+			return View();
+		}
 
+		public ActionResult Test3()
+		{
+			ViewBag.Message = "Hello World";
 			return View();
 		}
 

PracticalNine/PracticalNine.csproj

@@ -174,9 +174,10 @@
     <Content Include="Views\_ViewStart.cshtml" />
     <Content Include="Views\Shared\Error.cshtml" />
     <Content Include="Views\Shared\_Layout.cshtml" />
-    <Content Include="Views\Home\About.cshtml" />
+    <Content Include="Views\Home\Test2.cshtml" />
     <Content Include="Views\Home\Contact.cshtml" />
     <Content Include="Views\Home\Index.cshtml" />
+    <Content Include="Views\Home\Test3.cshtml" />
   </ItemGroup>
   <ItemGroup>
     <Folder Include="App_Data\" />

PracticalNine/Views/Home/Index.cshtml

@@ -3,31 +3,5 @@
 }
 
 <main>
-    <section class="row" aria-labelledby="aspnetTitle">
-        <h1 id="title">ASP.NET</h1>
-        <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
-        <p><a href="https://asp.net" class="btn btn-primary btn-md">Learn more &raquo;</a></p>
-    </section>
-
-    <div class="row">
-        <section class="col-md-4" aria-labelledby="gettingStartedTitle">
-            <h2 id="gettingStartedTitle">Getting started</h2>
-            <p>
-                ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
-                enables a clean separation of concerns and gives you full control over markup
-                for enjoyable, agile development.
-            </p>
-            <p><a class="btn btn-outline-dark" href="https://go.microsoft.com/fwlink/?LinkId=301865">Learn more &raquo;</a></p>
-        </section>
-        <section class="col-md-4" aria-labelledby="librariesTitle">
-            <h2 id="librariesTitle">Get more libraries</h2>
-            <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
-            <p><a class="btn btn-outline-dark" href="https://go.microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</a></p>
-        </section>
-        <section class="col-md-4" aria-labelledby="hostingTitle">
-            <h2 id="hostingTitle">Web Hosting</h2>
-            <p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p>
-            <p><a class="btn btn-outline-dark" href="https://go.microsoft.com/fwlink/?LinkId=301867">Learn more &raquo;</a></p>
-        </section>
-    </div>
+    <h2 class="text-success text-center">Hello World</h2>
 </main>

PracticalNine/Views/Home/Test2.cshtml

@@ -0,0 +1,57 @@
+@{
+    ViewBag.Title = "Test 2";
+}
+
+<main aria-labelledby="title" class="h-100 d-flex align-items-center">
+
+    <div class="container">
+        <div class="row">
+            <div class="col-2">
+                <button type="button" id="print" class="w-100 btn btn-success my-2">PRINT TEXT</button>
+                <button type="button" id="bold" class="w-100 btn btn-primary my-2">BOLD</button>
+                <button type="button" id="italic" class="w-100 btn btn-primary my-2">ITALIC</button>
+                <button type="button" id="underline" class="w-100 btn btn-primary my-2">UNDERLINE</button>
+                <button type="button" id="reset" class="w-100 btn btn-warning my-2">RESET</button>
+            </div>
+
+            <div class="col-8 d-flex align-items-center justify-content-center">
+                <label id="lblText" class="mt-4 text-center fs-1"></label>
+            </div>
+        </div>
+    </div>
+
+</main>
+
+<script>
+    const lblElement = document.getElementById("lblText");
+    const btnElements = document.querySelectorAll('.btn');
+
+    btnElements.forEach(btn => {
+        btn.addEventListener('click', (e) => {
+            handleBtnClick(e.target.id);
+        })
+    })
+
+    function handleBtnClick(btnId) {
+        switch (btnId) {
+            case 'print':
+                lblElement.innerText = "Hello World";
+                break;
+            case 'bold':
+                lblElement.style.fontWeight = 'bold';
+                break;
+            case 'italic':
+                lblElement.style.fontStyle = 'italic';
+                break;
+            case 'underline':
+                lblElement.style.textDecoration = 'underline';
+                break;
+            case 'reset':
+                lblElement.style = 'none';
+                break;
+            default:
+                break;
+        }
+
+    }
+</script>

PracticalNine/Views/Home/Test3.cshtml

@@ -0,0 +1,11 @@
+
+@{
+    ViewBag.Title = "Test3";
+}
+
+<h2>Test 3</h2>
+
+<hr class="w-25">
+
+@ViewBag.Message
+

PracticalNine/Views/Shared/_Layout.cshtml

@@ -10,25 +10,25 @@
 <body>
     <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark bg-dark">
         <div class="container">
-            @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
+            @Html.ActionLink("Practical 9", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
             <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" title="Toggle navigation" aria-controls="navbarSupportedContent"
                     aria-expanded="false" aria-label="Toggle navigation">
                 <span class="navbar-toggler-icon"></span>
             </button>
             <div class="collapse navbar-collapse d-sm-inline-flex justify-content-between">
                 <ul class="navbar-nav flex-grow-1">
-                    <li>@Html.ActionLink("Home", "Index", "Home", new { area = "" }, new { @class = "nav-link" })</li>
-                    <li>@Html.ActionLink("About", "About", "Home", new { area = "" }, new { @class = "nav-link" })</li>
+                    <li>@Html.ActionLink("Test 1", "Index", "Home", new { area = "" }, new { @class = "nav-link" })</li>
+                    <li>@Html.ActionLink("Test 2", "Test2", "Home", new { area = "" }, new { @class = "nav-link" })</li>
+                    <li>@Html.ActionLink("Test 3", "Test3", "Home", new { area = "" }, new { @class = "nav-link" })</li>
                     <li>@Html.ActionLink("Contact", "Contact", "Home", new { area = "" }, new { @class = "nav-link" })</li>
                 </ul>
             </div>
         </div>
     </nav>
-    <div class="container body-content">
-        @RenderBody()
+    <div class="container body-content h-75">
         <hr />
+        @RenderBody()
         <footer>
-            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
         </footer>
     </div>