Merge pull request #12 from cindyliu923/cindy/update-clock

cindyliu923 · web-flow · commit 837ab167239f · 2020-03-29T22:41:50.000+09:00
Update cindy clock for add audio
diff --git a/cindy/Day2-clock/index.html b/cindy/Day2-clock/index.html
@@ -8,8 +8,14 @@
 </head>
 <body>
   <div class="chick">
+    <audio class="time-audio" controls="controls">
+      <source src="" type="audio/mpeg">
+    </audio>
     <div class="chick-head">
-      <div class="triangle"></div>
+      <div class="triangle">
+        <br/>
+        <p>點我報時</p><br/>
+      </div>
     </div>
     <div class="clock">
       <div class="clock-face">
diff --git a/cindy/Day2-clock/main.js b/cindy/Day2-clock/main.js
@@ -3,6 +3,8 @@ const minsHand = document.querySelector('.min-hand');
 const hourHand = document.querySelector('.hour-hand');
 const time = document.querySelector('.time')
 const dot = document.querySelector('.dot')
+const audio = document.querySelector('.time-audio')
+const chickHead = document.querySelector('.chick-head')
 
 const caculateSeconds = (seconds) => {
   const secondsDegrees = ((seconds / 60) * 360) + 90;
@@ -30,4 +32,9 @@ const setDate = () => {
   caculateHours(hour);
 }
 
+chickHead.addEventListener('click', () => {
+  audio.src = `https://translate.google.com/translate_tts?ie=UTF-8&total=1&idx=0&textlen=32&client=tw-ob&q=${time.innerText}&tl=en-gb`
+  audio.autoplay = 'autoplay'
+});
+
 setInterval(setDate, 10);
diff --git a/cindy/Day2-clock/style.css b/cindy/Day2-clock/style.css
@@ -80,3 +80,7 @@ body {
   position: relative;
   width: 1rem;
 }
+
+.time-audio {
+  display: none;
+}
