Reward Task:Gamentio

 Project Directory:

      App:

             Card Component

             Card2 Component

             Card3 Component

             App Component.html

             App Component.css

             App Component.ts



Card.css


h4{
    text-align: center;
    margin-top:10px;
    color:white;
    font-weight: bold;
}



.card .card{
    background:rgb(245, 198, 46);
    border-radius: 5px 5px 0px 0px;
    border:0px solid rgb(245, 198, 46);
}

.card{
    background: linear-gradient(to bottom,#ecab4f,#33110a);
    border:0px solid;
}

.card-body{
    text-align:center;
}


button{
    justify-content: center;
    border-radius: 10px;
    padding-left:20px;
    padding-right:20px;
    font-size:25px;
    border:1px solid #d32438;
    background-color: #d32438;
    color: white;
    font-weight: bold;
}

.lock{
    width:50px;
    height:50px;
    margin-top:-10px;
}



.card-body img{
  width:60px;
  height:60px;
  margin-top:20px;
}




p{
    color:white;
    font-weight: bold;
    font-size: 25px;
    margin-top:5px;
    
}




/* 

.card .card{
    background:linear-gradient(to bottom,#129cb8,#64cadf)
}


*/
.card-body2{
    text-align:center;
}

.card-body2{
    margin-top:-10px;
}

.card-body2 img{
    width:60px;
    height:60px;
    margin-top:20px;
  }


  .card2 .card2{
    background:rgb(43, 180, 43);
    border-radius: 5px 5px 0px 0px;
    border:0px solid rgb(245, 198, 46);
}

.card2{
    background: linear-gradient(to bottom,#1f8e8e,#002632);
    border:0px solid;
}


Card.ts



Card.html

<div class="card" style="width: 10rem; height:15rem ">
    <div class="card" style="width: 10rem; height:3rem ">
        <ng-content select=".cardhead"></ng-content>
    </div>
    <div class="card-body">
      <ng-content select=".rounded-pill" ></ng-content>
      <img src="../../assets/Coins.png">
      <ng-content></ng-content>
    </div>
</div>


Card2.css


h4{
    text-align: center;
    margin-top:10px;
    color:white;
    font-weight: bold;
}



.card .card{
    background:linear-gradient(to bottom,#129cb8,#64cadf);
    border-radius: 5px 5px 0px 0px;
    border:0px solid #129cb8;
}

.card{
    background: linear-gradient(to bottom,#1f8e8e,#002632);
    border:0px solid;
}

.card-body{
    text-align:center;
}

.lock{
    width:50px;
    height:50px;
    margin-top:-10px;
}

.coin{
  width:60px;
  height:60px;
  margin-top:20px;
}
 


/* 

.card .card{
    background:linear-gradient(to bottom,#129cb8,#64cadf)
}


*/



/* -----Second Card-----   */




Card2.ts


Card2.html

<div class="card" style="width: 10rem; height:15rem ">
      <div class="card" style="width: 10rem; height:3rem ">
          <ng-content select=".day"></ng-content>
      </div>
      <div class="card-body">
        <div>
        <img class="lock" src="../../assets/locked.png">
        </div>
        <img class="coin" src="../../assets/Coins.png">
        <ng-content></ng-content>
      </div>
  </div>
  


Card3.css



.card-body2{
    text-align:center;
    margin-top:-10px;
}

.card-body2 img{
    width:60px;
    height:60px;
    margin-top:20px;
  }


  .card2 .card2{
    background:rgb(43, 180, 43);
    border-radius: 5px 5px 0px 0px;
    border:0px solid rgb(43, 180, 43);
}

.card2{
    background: linear-gradient(to bottom,#1f8e8e,#002632);
    border:0px solid;
}
.card4{
    margin-left:40vw;
}

.lock{
    width:312.5%;
    height:50px;
    margin-top:-62.5;
}


Card3.ts


Card3.html

<div class="card card2" style="width: 10rem; height:15rem ">
    <div class="card card2" style="width: 10rem; height:3rem ">
        <ng-content select=".cardhead"></ng-content>
    </div>
    <div class="card-body2"> 
      <div>
        <img class="lock" src="../../assets/Green_tick.png">
        </div>
       <img src="../../assets/Coins.png">
       <ng-content></ng-content>
      
</div>
  

App Component.html


    <div class=container>
        <div class="header">
            <img src="../assets/Ribbon.png">
            <h3>DAILY REWARD</h3>
        </div>

        <div class="row">
            <div *ngFor="let val of values,let i=index" class="col-sm-2">
                   <div *ngIf="i===count"> 
                   <app-card >
                    <h4 class="cardhead">{{ val.head}} </h4>
                    <button (click)="claim()" class="rounded-pill">Claim</button>
                    <p>{{ val.coin}}</p>
                </app-card>
                </div>
                <div *ngIf="i>count">
                <app-card2>
                    <h4 class="day">{{ val.head }}</h4>
                    <p class="coinvalue">{{ val.coin}}</p>
                </app-card2>
               </div>
               <div *ngIf="i<count"> 
                <app-card3>
                    <h4 class="cardhead">{{ val.head}}</h4>
                    <p class="cardtext3">{{ val.coin}}</p>
                </app-card3>
            </div>
            
        </div>
    </div>







<!--

    <div class=container>
        <div class="header">
            <img src="../assets/Ribbon.png">
            <h3>DAILY REWARD</h3>
        </div>

        <div class="row">
            <div class="col-sm-2">
                <app-card></app-card>
            </div>
            <div class="col-sm-2">
                <app-card2>
                    <h4 class="day">DAY 2</h4>
                    <p>60 Coins</p>
                </app-card2>
            </div>
            <div class="col-sm-2">
                <app-card2>
                    <h4 class="day">DAY 3</h4>
                    <p>70 Coins</p>
                </app-card2>
            </div>
            <div class="col-sm-2">
                <app-card2>
                    <h4 class="day">DAY 4</h4>
                    <p>80 Coins</p>
                </app-card2>
            </div>
            <div class="col-sm-2">
                <app-card2>
                    <h4 class="day">DAY 5</h4>
                    <p>90 Coins</p>
                </app-card2>
            </div>
            <div class="col-sm-2">
                <app-card2>
                    <h4 class="day">DAY 6</h4>
                    <p>100 Coins</p>
                </app-card2>
            </div>
        </div>
    </div>





     <div class="col-sm-2">
                <app-card>
                    <h4 class="cardhead">DAY 1 </h4>
                    <button (click)="claim()" class="rounded-pill">Claim</button>
                    <p>50 Coins</p>
                </app-card>
            </div>


    
                <app-card2>
                    <h4 class="day">{{ val.head }}</h4>
                    <p class="coinvalue">{{ val.coin}}</p>
                </app-card2>



-->    

App Component.css


.header{
    text-align:center;
    margin-top:40px;
}

.header img {
    width:370px;
    height:50px;
}

.header h3{
    margin-top:-45px;
    color:white;
    font-weight:bold;
}

.row{
    margin-top:200px;
    animation:slide_up 0.75s ;
}

h4{
    text-align: center;
    margin-top:10px;
    color:white;
    font-weight: bold;
}



p{
    color:white;
    font-weight: bold;
    font-size:25px;
    margin-top:10px;
}

.cardtext3{
    margin-top:0px;
}


@keyframes slide_up{
    0%{
        transform:translateY(250px);
    }
    100%{
        transform:translateY;
     }
}

button{
    justify-content: center;
    border-radius: 10px;
    padding-left:20px;
    padding-right:20px;
    font-size:25px;
    border:1px solid #d32438;
    background-color: #d32438;
    color: white;
    font-weight: bold;
}



App Component.ts

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


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent  {
  title = 'claimb';
 
  
  
 

  count=0;
  
  
  values:any=[
    {
     day:1,
     head:"DAY 1",
     coin:"50 Coins"
    },
     
    {
      day:'2',
      head:"DAY 2",
      coin:"60 Coins"
    },
    {
      count:3,
      head:"DAY 3",
      coin:"70 Coins"
    },
    {
      count:4,
      head:"DAY 4",
      coin:"80 Coins"
    },
    { 
      count:5,
      head:"DAY 5",
      coin:"90 Coins"
    },
    {
      count:6,
      head:"DAY 6",
      coin:"100 Coins"
    }
  ]
  claim(){
    console.log("button clicked")
    this.count=this.count+1;
    //console.log(this.count)
  }

  


}




Comments

Post a Comment

Popular posts from this blog

Angular First Project

Angular Tutorial  For creating new Project in Angular : ng new Project_Name    (opt routing --yes,styling according to your choice  )  For creating new component in Angular : ng g c Component_Name for creating module ng g m  Module_Name For creating component inside folder or module ng g c folder or module_name/component_name Folder Structure in Angular: App component . ts (typescript file we use for writing logic) App component.html(we use for html ) App component.css (for styling the elements which we have declared in app component.html) App module.ts(for importing module,service,directives,pipes) index.html(main html file) styles.css(main css we can specify styling of whole project here) App routing file we use to give routing path to any component. lets start first we will create a component home open terminal  inside project directory ng g c home we have generated a component with a Name home component. for testing that our home component is worki...
Read more

demo project:Student information system

 Project Directory: src/Assets, src/App,       home component,       mat-confirm component,       App component.html       App module.ts       App routing module.ts       shared/dialog.service       Student Module                                registration(css,html,ts),                               update(css,html,ts),                               sidebar(css,html,ts)                               studentlist(css,html,ts)                               mat confirm(css,html,ts)      student...
Read more