v1.1

- Several UI changes
- Added App version across all pages
- Changes to ReadMe File.

README.md

@@ -1,27 +1,16 @@
-# UnoRandomizer
+# Uno Randomizer
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.3.9.
+This is a web application to randomize an outcome for your UNO blank cards. 
+This eliminates the need of sticking to one rule per UNO Blank Card since the outcome is decided on the spot. 
 
-## Development server
+## Installation
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+This is an Angular 8 project therefore, <br>
 
-## Code scaffolding
+Run `npm install` then you're ready to develop. <br>
+Run `npm start` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
 
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+## Usage
 
-## Build
+Please refer the site http://www.unorandomizer.com/usage
 
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
-
-## Running unit tests
-
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Running end-to-end tests
-
-Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

package.json

@@ -1,6 +1,6 @@
 {
   "name": "uno-randomizer",
-  "version": "0.0.0",
+  "version": "1.1",
   "scripts": {
     "ng": "ng",
     "start": "ng serve -o",

src/app/app.component.html

@@ -1 +1,12 @@
 <router-outlet></router-outlet>
+
+<footer>
+  <div class="container">
+    <div class="row">
+      <div class="col-12 text-center">
+        <p> UNO is a registered trademark of MATTEL, INC. <br>
+          ©2020 UNO Randomizer v{{ version }} by Thisaru Mahadurage</p>
+      </div>
+    </div>
+  </div>
+</footer>

src/app/app.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { version } from '../../package.json';
 
 @Component({
   selector: 'app-root',
@@ -7,4 +8,5 @@ import { Component } from '@angular/core';
 })
 export class AppComponent {
   title = 'uno-randomizer';
+  public version: string = version;
 }

src/app/home/home.component.html

@@ -8,11 +8,11 @@
     </div>
 
     <div class="row">
-      <div class="col-md-12 text-center">
+      <div class="col-md-7 m-auto text-center">
         <h1>Welcome to UNO Randomizer</h1>
-        <p>Revolutionize your UNO Blank Cards with UNO Randomizer. <br>
-          We chose the outcome for your Blank Cards. <br>
-          When a player gets a Blank Wild Card Press ‘START’</p>
+        <p>Revolutionize your UNO Blank Cards with UNO Randomizer.
+          We chose the outcome for your Blank Cards.
+          When a player gets a Blank Wild Card Press ‘START’
       </div>
     </div>
 
@@ -30,22 +30,15 @@ <h1>Welcome to UNO Randomizer</h1>
       </div>
     </div>
 
-    <div class="row software-links">
+    <div class="row software-links mt-4">
       <div class="col-12 text-center">
         <p routerLink="/about">About</p>
         <p routerLink="/usage">How to Use</p>
         <p routerLink="/outcomes">List of Outcomes</p>
       </div>
     </div>
 
-    <footer>
-      <div class="row">
-        <div class="col-12 text-center">
-          <p> UNO is a registered trademark of MATTEL, INC. <br>
-            ©2020 UNO Randomizer v1.0 by Thisaru Mahadurage</p>
-        </div>
-      </div>
-    </footer>
+
 
   </div>
 </section>

src/app/home/home.component.scss

@@ -34,12 +34,15 @@ $secondary: #F8DA27;
   p {
     cursor: pointer;
     display: inline-block;
-    margin: 2rem 1rem;
+    margin: 0 1rem;
   }
 }
 
-footer {
-  p {
-    font-size: 0.8rem;
+@media only screen and (max-width: 768px) {
+  /* For mobile phones: */
+  h1 {
+    font-size: 1.5rem;
   }
+
 }
+

src/styles.scss

@@ -71,3 +71,9 @@ h1, h2, h3, h4, h5, h6 {
 .modal-footer {
   border-top: none;
 }
+
+footer {
+  p {
+    font-size: 0.8rem;
+  }
+}

tsconfig.json

@@ -11,6 +11,7 @@
     "moduleResolution": "node",
     "importHelpers": true,
     "target": "es2015",
+    "resolveJsonModule": true,
     "typeRoots": [
       "node_modules/@types"
     ],