Develop

app.js

@@ -1,82 +1,126 @@
-const song = document.querySelector(".song");
-const play = document.querySelector(".play");
-const replay = document.querySelector(".replay");
-const outline = document.querySelector(".moving-outline circle");
-const video = document.querySelector(".vid-container video");
-//Sounds
-const sounds = document.querySelectorAll(".sound-picker button");
-//Time Display
-const timeDisplay = document.querySelector(".time-display");
-const outlineLength = outline.getTotalLength();
-//Duration
-const timeSelect = document.querySelectorAll(".time-select button");
-let fakeDuration = 600;
-
-outline.style.strokeDashoffset = outlineLength;
-outline.style.strokeDasharray = outlineLength;
-timeDisplay.textContent = `${Math.floor(fakeDuration / 60)}:${Math.floor(
-  fakeDuration % 60
-)}`;
-
-sounds.forEach(sound => {
+
+  const song = document.querySelector(".song");
+  const play = document.querySelector(".play");
+  const replay = document.querySelector(".replay");
+  const outline = document.querySelector(".moving-outline circle");
+  const video = document.querySelector(".vid-container video");
+
+  //sounds
+  const sounds = document.querySelectorAll(".sound-picker button");
+
+  //time-display
+  const timeDisplay = document.querySelector(".time-display");
+  //Get the length of the outline
+  const outlineLength = outline.getTotalLength();
+  const timeSelect = document.querySelectorAll(".time-select button");
+  let fakeDuration = 600;
+
+
+
+  outline.style.strokeDashoffset = outlineLength;
+    //再生ボタンのsvgの丸い線のアニメーション
+    //stroke-width	線の太さを指定する
+    //stroke-dasharray	線の間隔を指定する
+    //stroke-dashoffset	線の位置を指定する
+  outline.style.strokeDasharray = outlineLength;
+    //時間表示　秒数を◯：◯に直すために60で割った時の商とあまりをかく
+  timeDisplay.textContent = `${Math.floor(fakeDuration / 60)}:${Math.floor(
+      fakeDuration % 60
+  )}`;
+
+
+  //音楽選択のボタン→sounds
+  //soundsが押されたらdata-sound、data-videoからデータ取ってきてsongとvideoを変える
+  //音が止まってたら音と動画を流し始める
+  //音が流れてたら音と動画を止める
+  sounds.forEach(sound => {
   sound.addEventListener("click", function() {
     song.src = this.getAttribute("data-sound");
     video.src = this.getAttribute("data-video");
     checkPlaying(song);
   });
-});
-
-play.addEventListener("click", function() {
-  checkPlaying(song);
-});
+  });
 
-replay.addEventListener("click", function() {
+  //play->再生ボタン ||
+  //これが押されたらcheck関数
+  //音が止まってたら音と動画を流し始める
+  //音が流れてたら音と動画を止める
+  play.addEventListener("click", function() {
+    checkPlaying(song);
+  });
+
+  //replay->リプレイボタン
+  //押されたらrestart関数
+  replay.addEventListener("click", function() {
     restartSong(song);
-
   });
 
-
-const restartSong = song =>{
+  //songはaudioタグ
+  const restartSong = song =>{
     let currentTime = song.currentTime;
     song.currentTime = 0;
     console.log("ciao")
+  }
 
-}
-
-timeSelect.forEach(option => {
-  option.addEventListener("click", function() {
-    fakeDuration = this.getAttribute("data-time");
-    timeDisplay.textContent = `${Math.floor(fakeDuration / 60)}:${Math.floor(
-      fakeDuration % 60
-    )}`;
+  //時間選択のボタン→timeselect
+  //ボタンそれぞれにdata-time　120秒とかがついてる
+  //押されたらdurarion(秒数カウンタ)をdata-timeにする
+  timeSelect.forEach(option => {
+    option.addEventListener("click", function() {
+      fakeDuration = this.getAttribute("data-time");
+      timeDisplay.textContent = `${Math.floor(fakeDuration / 60)}:${Math.floor(
+        fakeDuration % 60
+      )}`;
+    });
   });
-});
-
-const checkPlaying = song => {
-  if (song.paused) {
-    song.play();
-    video.play();
-    play.src = "./svg/pause.svg";
-  } else {
-    song.pause();
-    video.pause();
-    play.src = "./svg/play.svg";
-  }
-};
-
-song.ontimeupdate = function() {
-  let currentTime = song.currentTime;
-  let elapsed = fakeDuration - currentTime;
-  let seconds = Math.floor(elapsed % 60);
-  let minutes = Math.floor(elapsed / 60);
-  timeDisplay.textContent = `${minutes}:${seconds}`;
-  let progress = outlineLength - (currentTime / fakeDuration) * outlineLength;
-  outline.style.strokeDashoffset = progress;
-
-  if (currentTime >= fakeDuration) {
-    song.pause();
-    song.currentTime = 0;
-    play.src = "./svg/play.svg";
-    video.pause();
-  }
-};
+
+  //check関数
+  //音が止まってたら音と動画を流し始める
+  //音が流れてたら音と動画を止める
+  const checkPlaying = song => {
+    if (song.paused) {
+      song.play();
+      video.play();
+      play.src = "./svg/pause.svg";
+    } else {
+      song.pause();
+      video.pause();
+      play.src = "./svg/play.svg";
+    }
+  };
+
+  //
+
+  // ontimeupdate->再生位置が変更された時にJavaScriptを実行
+
+  song.ontimeupdate = function() {
+    let currentTime = song.currentTime;
+    let elapsed = fakeDuration - currentTime;
+    let seconds = Math.floor(elapsed % 60);
+    let minutes = Math.floor(elapsed / 60);
+    timeDisplay.textContent = `${minutes}:${seconds}`;
+    let progress = outlineLength - (currentTime / fakeDuration) * outlineLength;
+    outline.style.strokeDashoffset = progress;
+
+    if (currentTime >= fakeDuration) {
+      song.pause();
+      song.currentTime = 0;
+      play.src = "./svg/play.svg";
+      video.pause();
+      replay.style.display = block;
+    }
+  };
+
+
+
+
+
+
+
+
+
+
+
+
+
+

index.html

@@ -16,22 +16,22 @@
         </video>
         </div>
         <div class="time-select">
-          <button data-time="10">2 Minutes</button>
+          <button data-time="120">2 Minutes</button>
           <button data-time="300" class="medium-mins">5 Minutes</button>
           <button data-time="600" class="long-mins">10 Minutes</button>
         </div>
         <div class="player-container">
-            <audio class="song">
+              <audio class="song">
                 <source src="./sounds/rain.mp3" />
               </audio>
-              <img src="./svg/play.svg" class="play"></img>
+              <img src="./svg/play.svg" class="play">
               <svg class="track-outline" width="453" height="453" viewBox="0 0 453 453" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <circle cx="226.5" cy="226.5" r="216.5" stroke="white" stroke-width="20"/>
                 </svg>
               <svg class="moving-outline" width="453" height="453" viewBox="0 0 453 453" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <circle cx="226.5" cy="226.5" r="216.5" stroke="#018EBA" stroke-width="20"/>
                 </svg>
-              <img src="./svg/replay.svg" class="replay"></img>
+              <img src="./svg/replay.svg" class="replay">
 
                 <h3 class="time-display">0:00</h3>      
       </div>

style.css

@@ -4,14 +4,13 @@
   box-sizing: border-box;
 }
 
-.app {
+.app{
   height: 100vh;
   display: flex;
   justify-content: space-evenly;
   align-items: center;
   font-family: "Montserrat", sans-serif;
 }
-
 .time-select,
 .sound-picker {
   height: 80%;
@@ -31,7 +30,7 @@
   border-radius: 5px;
   cursor: pointer;
   border: 2px solid white;
-  transition: all 0.5s ease;
+  transition: all 0.7s ease;
 }
 
 .sound-picker button {
@@ -91,3 +90,7 @@ video {
   width: 100%;
   z-index: -10;
 }
+
+.replay{
+  display: none;
+}