2nd-major-commit: starting changes in app component

SidP919 · SidP919 · commit 49823d1b65aa · 2021-12-19T01:33:20.000+05:30
diff --git a/Angular/to_do_list/src/app/app.component.css b/Angular/to_do_list/src/app/app.component.css
@@ -0,0 +1,10 @@
+body{
+    min-width: 320px;
+    padding: 0%;
+    margin: 0%;
+}
+
+/* Main */
+main{
+    margin-top: 100px;
+}
diff --git a/Angular/to_do_list/src/app/app.component.html b/Angular/to_do_list/src/app/app.component.html
@@ -1,20 +1,21 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>To Do List</title>
-</head>
-<body class="container-fluid p-2 bg-primary">
-  <header>
-    <h1 class="text-white">To Do List</h1>
-  </header>
-  <main class="text-center text-white bg-danger m-1">
-    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laudantium, nobis fuga ab doloribus itaque autem tempora quod vero accusantium eos repudiandae alias! Impedit nostrum nobis omnis. Fuga sapiente beatae ea ab. Vitae, ullam neque saepe reiciendis ea mollitia nostrum hic quasi adipisci delectus commodi dicta molestiae doloribus aut in voluptatibus.</p>
-  </main>
-  <footer class="bg-primary">
-  <p class="text-white">This app has been made using Angular framework.</p>
-  </footer>
-</body>
-</html>
+
+<header>
+  <!-- Fixed Navbar -->
+  <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-primary">
+    <a class="navbar-brand" href="#">
+      &nbsp;<img src="./assets/images/todo_list_icon.png" width="30" height="30" 
+      class="d-inline-block align-top bg-white rounded" alt="ToDoList icon">
+      <p class="text-white d-inline mt-0 font-weight-bold">&nbsp;&nbsp;{{title}}</p>
+    </a>
+  </nav>
+</header>
+<main class="p-1">
+  <section class="p-1">
+    <div class="text-center text-white bg-danger m-1">
+      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laudantium, nobis fuga ab doloribus itaque autem tempora quod vero accusantium eos repudiandae alias! Impedit nostrum nobis omnis. Fuga sapiente beatae ea ab. Vitae, ullam neque saepe reiciendis ea mollitia nostrum hic quasi adipisci delectus commodi dicta molestiae doloribus aut in voluptatibus.</p>
+    </div>
+  </section>
+</main>
+<footer class="bg-primary fixed-bottom text-center pt-2">
+<p class="text-white">This app has been made using Angular framework. You can get its source code <a href="https://github.com/SidP919/Web-Development/tree/master/Angular/to_do_list" target="_blank" class="text-white">here</a></p>
+</footer>
diff --git a/Angular/to_do_list/src/app/app.component.ts b/Angular/to_do_list/src/app/app.component.ts
@@ -6,5 +6,5 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  title = 'to_do_list';
+  title = 'To-Do-List';
 }
diff --git a/Angular/to_do_list/src/assets/images/to-do-list-bg.jpg b/Angular/to_do_list/src/assets/images/to-do-list-bg.jpg
diff --git a/Angular/to_do_list/src/assets/images/todo_list_icon.png b/Angular/to_do_list/src/assets/images/todo_list_icon.png
diff --git a/Angular/to_do_list/src/index.html b/Angular/to_do_list/src/index.html
@@ -7,7 +7,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
-<body>
+<body background="./assets/images/to-do-list-bg.jpg">
   <app-root></app-root>
 </body>
 </html>

Original file line number	Diff line number	Diff line change
`@@ -6,5 +6,5 @@ import { Component } from '@angular/core';`
`6`	`6`	`styleUrls: ['./app.component.css']`
`7`	`7`	`})`
`8`	`8`	`export class AppComponent {`
`9`		`- title = 'to_do_list';`
	`9`	`+ title = 'To-Do-List';`
`10`	`10`	`}`