Thursday, 3 September 2020

My Activity Tracker in Angular 2

My Activity Tracker solution is available here

 Hold on
Are you doing a hackerrank ?

oh wait, Are you from doing this on Fresco Play?

and Are you from TCS?

okay so I get it you may be stuck here because the question is incomplete 

You need to create an activity tracker and here I show u my code-

app.component.ts-

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  //Define your variables done,todos,newToDo,newToDoObj,error
  todos:any
  done:boolean
  newToDo : String
  newToDoObj:any
  error: boolean
   TODOS :any[]

  //Define your constructor here with todos as [] ,newToDo as '' and error as false
  constructor() {
      this.newToDo = '';
      this.todos = [];
      this.error = false;
    }
  //Define your addMore function here
  addMore(newToDo) {
      if(this.newToDo != '')
      {
        this.newToDoObj = {
          newTodo: this.newToDo,
          done: false
        }
        this.todos.push(this.newToDoObj);
        this.newToDo = '';
      }
      else
      {
        this.error = true
      }
      console.log(this.todos);
    }

  //Define your clearAll function here
  clearAll(){
    this.todos.length = 0;
  }
}

app.component.html-

<h1>Fresco PLAY Activity Tracker</h1>

<div>
    <div *ngFor="let todo of todos; let i=index" class="todoItem">
        <input type="checkbox" [(ngModel)]="todo.done" />
        <span [ngClass]="{'checked': todo.done}">{{i+1}}. {{ todo.desc }}</span>
    </div>
    <span *ngIf="todos.length == 0">No Activities to track! Start by adding one</span><br/>
    <input id="newTodo" type="text" [(ngModel)]="newToDo">
    <span *ngIf="error" style="color:red;">Please enter an activity!</span>
    <br/>
    <button id="addActivity" (click)="addMore()">Add an Activity!</button>
    <button id="clearAll" (click)="clearAll()">Clear All</button>
</div>



11 comments:

  1. Thank you so much bro.. it's really helpful

    ReplyDelete
  2. Thank you for the update, very nice site.. mobile phone tracker

    ReplyDelete
  3. Replies
    1. are you sure?, becuase I just rechecked, it is working for me

      Delete
  4. add
    .checked{
    color: red;
    text-decoration: line-through;
    }
    in css file

    ReplyDelete
  5. Can I get answer for directive hands on

    ReplyDelete
  6. Angular bloggers are content creators and software developers who share knowledge, tutorials, best practices, and updates related to the Angular framework. Through blogs, articles, and technical guides, they help developers learn concepts such as components, services, dependency injection, routing, and state management. Their content ranges from beginner-friendly introductions to advanced topics, making Angular development more accessible to a wide audience. Many Angular bloggers also review new framework releases and explain how developers can adopt the latest features effectively.

    ReplyDelete

GPT4ALL - A new LLaMa (Large Language Model)

posted 29th March, 2023 - 11:50, GPT4ALL launched 1 hr ago  What if we use AI generated prompt and response to train another AI - Exactly th...