stopwatch and button animations

VictorMuniz7 · Sep 29, 2023 · 5f3dc2f · 5f3dc2f
1 parent a30bf15
commit 5f3dc2f
Show file tree

Hide file tree

Showing 7 changed files with 99 additions and 15 deletions.
diff --git a/docs/404.html b/docs/404.html
@@ -13,5 +13,5 @@
 <style>*{margin:0;padding:0;box-sizing:border-box;font-family:Chakra Petch,sans-serif}</style><link rel="stylesheet" href="styles.2c7e6e2c6c2cbf3a.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.2c7e6e2c6c2cbf3a.css"></noscript></head>
 <body>
   <app-root></app-root>
-<script src="runtime.a6c2c4f2f7d2ad32.js" type="module"></script><script src="polyfills.beb655ff6475a3a5.js" type="module"></script><script src="main.1cd5882a64ed0efb.js" type="module"></script></body>
+<script src="runtime.a6c2c4f2f7d2ad32.js" type="module"></script><script src="polyfills.beb655ff6475a3a5.js" type="module"></script><script src="main.caf8bdc738990537.js" type="module"></script></body>
 </html>
diff --git a/docs/index.html b/docs/index.html
@@ -13,5 +13,5 @@
 <style>*{margin:0;padding:0;box-sizing:border-box;font-family:Chakra Petch,sans-serif}</style><link rel="stylesheet" href="styles.2c7e6e2c6c2cbf3a.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.2c7e6e2c6c2cbf3a.css"></noscript></head>
 <body>
   <app-root></app-root>
-<script src="runtime.a6c2c4f2f7d2ad32.js" type="module"></script><script src="polyfills.beb655ff6475a3a5.js" type="module"></script><script src="main.1cd5882a64ed0efb.js" type="module"></script></body>
+<script src="runtime.a6c2c4f2f7d2ad32.js" type="module"></script><script src="polyfills.beb655ff6475a3a5.js" type="module"></script><script src="main.caf8bdc738990537.js" type="module"></script></body>
 </html>
diff --git a/docs/main.1cd5882a64ed0efb.js b/docs/main.1cd5882a64ed0efb.js
diff --git a/docs/main.caf8bdc738990537.js b/docs/main.caf8bdc738990537.js
diff --git a/src/app/stopwatch/stopwatch.component.html b/src/app/stopwatch/stopwatch.component.html
@@ -11,17 +11,17 @@ <h1>Stopwatch</h1>
         </div>
     </header>
   <div class="container">
-    <div class="stopwatch-div">
-      <div class="stopwatch" >
+    <div class="stopwatch-div" >
+      <div class="stopwatch" #stopw>
         <p>{{ currentTime }}</p>
       </div>
     </div>
     <div class="options-div">
-      <button (click)="start()"><i class="fa-solid fa-play"></i></button>
-      <button (click)="pause()"><i class="fa-solid fa-pause"></i></button>
-      <button (click)="restart()"><i class="fa-solid fa-arrow-rotate-left"></i></button>
-      <button (click)="lap()"><i class="fa-solid fa-flag"></i></button>
-      <button (click)="clearLaps()"><i class="fa-solid fa-broom"></i></button>
+      <button (click)="start()" (click)="buttonEffect(btn1)" #btn1><i class="fa-solid fa-play"></i></button>
+      <button (click)="pause()" (click)="buttonEffect(btn2)" #btn2><i class="fa-solid fa-pause"></i></button>
+      <button (click)="restart()" (click)="buttonEffect(btn3)" #btn3><i class="fa-solid fa-arrow-rotate-left"></i></button>
+      <button (click)="lap()" (click)="buttonEffect(btn4)" #btn4><i class="fa-solid fa-flag"></i></button>
+      <button (click)="clearLaps()" (click)="buttonEffect(btn5)" #btn5><i class="fa-solid fa-broom"></i></button>
     </div>
     <div class="lap-div">
       <ul>

diff --git a/src/app/stopwatch/stopwatch.component.scss b/src/app/stopwatch/stopwatch.component.scss
@@ -67,6 +67,7 @@ header{
   display: flex;
   justify-content: center;
   align-items: center;
+  transition-duration: 1s;
 
   p{
     width: 4.15em;
@@ -97,9 +98,19 @@ header{
     outline: 0;
     cursor: pointer;
     color: #fff;
+
+    &:hover{
+      background-color: #bec9e6;
+    }
+
   }
 }
 
+.animation-btn{
+  animation: buttonAnimation 1.5s ease-in-out;
+}
+
+
 .lap-div{
   width: 100%;
 
@@ -146,7 +157,37 @@ header{
 
   .options-div{
     margin-top: 5em;
-  }
+
+      button{
+        &:hover{
+          background-color: transparent;
+          i{
+            display: none;
+          }
+        }
+
+        &:nth-child(1):hover::before{
+          content: 'Start';
+        }
+
+        &:nth-child(2):hover::before{
+          content: 'Stop';
+        }
+
+        &:nth-child(3):hover::before{
+          content: 'Restart';
+        }
+
+        &:nth-child(4):hover::before{
+          content: 'Lap';
+        }
+
+        &:nth-child(5):hover::before{
+          content: 'Clear';
+        }
+      }
+    }
+
 
   .lap-div{
 
@@ -181,3 +222,26 @@ header{
   }
 }
 
+@media screen and (min-width: 95em) {
+
+  .options-div{
+    width: 45%;
+
+    button{
+      width: 5em;
+    }
+  }
+
+}
+
+@keyframes buttonAnimation {
+
+  from{
+    background-color: #dee3f0;
+  }
+
+  to{
+    background-color: transparent;
+  }
+
+}
diff --git a/src/app/stopwatch/stopwatch.component.ts b/src/app/stopwatch/stopwatch.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ElementRef, ViewChild } from '@angular/core';
 
 @Component({
   selector: 'app-stopwatch',
@@ -7,8 +7,11 @@ import { Component } from '@angular/core';
 })
 export class StopwatchComponent {
 
+  @ViewChild('stopw') stopwatch!: ElementRef;
+
   isRunning: boolean = false;
-  intervalId: any;
+  intervalMilliseconds: any;
+  intervalSeconds: any;
   timeMilliseconds: number = 0;
   currentTime: string = '00:00:00';
 
@@ -17,15 +20,24 @@ export class StopwatchComponent {
   start(){
     if(!this.isRunning){
       this.isRunning = true;
-      this.intervalId = setInterval(() => {
+      this.intervalMilliseconds = setInterval(() => {
         this.timeMilliseconds += 10;
         this.currentTime = this.convertMilliseconds(this.timeMilliseconds);
       }, 10)
+
+      this.intervalSeconds = setInterval(() => {
+        this.stopwatch.nativeElement.style.transform = 'scale(1.05)'
+
+        setTimeout(() => {
+          this.stopwatch.nativeElement.style.transform = 'scale(1)'
+        }, 500)
+      }, 1000)
     }
   }
 
   pause(){
-    clearInterval(this.intervalId);
+    clearInterval(this.intervalMilliseconds);
+    clearInterval(this.intervalSeconds);
     this.isRunning = false;
   }
 
@@ -36,6 +48,7 @@ export class StopwatchComponent {
   }
 
   lap(){
+    if(this.isRunning)
     this.laps.push(this.currentTime);
   }
 
@@ -50,4 +63,11 @@ export class StopwatchComponent {
 
     return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}:${milliseconds.toString().padStart(2, '0').replace('.', '').slice(-2)}`;
   }
+
+  buttonEffect(btn: HTMLElement){
+    btn.classList.add('animation-btn')
+    setTimeout(() => {
+      btn.classList.remove('animation-btn')
+    }, 1000);
+  }
 }