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

SidP919 · Dec 18, 2021 · 49823d1 · 49823d1
1 parent 8a09522
commit 49823d1
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 22 deletions.
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>