Merge pull request #16 from cindyliu923/cindy/update-clock-speech

cindyliu923 · web-flow · commit 7c7801836663 · 2020-03-31T00:24:25.000+09:00
Cindy/update clock speech
diff --git a/cindy/Day2-clock/index.html b/cindy/Day2-clock/index.html
@@ -8,15 +8,18 @@
 </head>
 <body>
   <div class="chick">
-    <audio class="time-audio" controls="controls">
-      <source src="" type="audio/mpeg">
-    </audio>
     <div class="chick-head">
       <div class="triangle">
         <br/>
         <p>點我報時</p><br/>
       </div>
     </div>
+    <div class="wing wing-left left-up"></div>
+    <div class="wing wing-left left-middle"></div>
+    <div class="wing wing-left left-down"></div>
+    <div class="wing wing-right right-up"></div>
+    <div class="wing wing-right right-middle"></div>
+    <div class="wing wing-right right-down"></div>
     <div class="clock">
       <div class="clock-face">
         <div class="dot"></div>
diff --git a/cindy/Day2-clock/main.js b/cindy/Day2-clock/main.js
@@ -1,10 +1,10 @@
 const secondHand = document.querySelector('.second-hand');
 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 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;
@@ -33,10 +33,10 @@ const setDate = () => {
 }
 
 chickHead.addEventListener('click', () => {
-  const today = `Chick ${time.innerText.slice(0, 24)}`
-  const url = `https://translate.google.com/translate_tts?ie=UTF-8&total=1&idx=0&textlen=32&client=tw-ob&q=${today}&tl=en-gb`
-  audio.src = encodeURI(url);
-  audio.autoplay = 'autoplay';
+  const msg = new SpeechSynthesisUtterance;
+  msg.text = `${time.innerText.slice(16, 24)} 咕咕`;
+  msg.rate = 2;
+  speechSynthesis.speak(msg);
 });
 
 setInterval(setDate, 10);
diff --git a/cindy/Day2-clock/style.css b/cindy/Day2-clock/style.css
@@ -16,6 +16,7 @@ body {
 
 .chick {
   margin: auto;
+  position: relative;
 }
 
 .triangle {
@@ -26,6 +27,53 @@ body {
   width: 350px;
 }
 
+.wing {
+  background-color: rgb(243, 203, 72);
+  height: 100px;
+  position: absolute;
+  width: 40px;
+}
+
+.wing-left {
+  border-radius: 100px 25px 100px 25px;
+  transform: rotate(100deg);
+}
+
+.left-up {
+  left: -30px;
+  top: 50%;
+}
+
+.left-middle {
+  left: -15px;
+  top: 55%;
+}
+
+.left-down {
+  left: 5px;
+  top: 60%;
+}
+
+.wing-right {
+  border-radius: 25px 100px 25px 100px;
+  transform: rotate(-100deg);
+}
+
+.right-up {
+  right: -30px;
+  top: 50%;
+}
+
+.right-middle {
+  right: -15px;
+  top: 55%;
+}
+
+.right-down {
+  right: 5px;
+  top: 60%;
+}
+
 .clock {
   background-color: rgb(243, 203, 72);
   border-radius: 50%;
@@ -80,7 +128,3 @@ body {
   position: relative;
   width: 1rem;
 }
-
-.time-audio {
-  display: none;
-}
