Merge pull request #1108 from TusharRaval/Random-Color-Generator-Tush…

…arRaval Random color generator tushar raval
thinkswell · Jan 11, 2024 · 6eeedbe · 6eeedbe
2 parents 7ea2a2c + 0bf03a5
commit 6eeedbe
Show file tree

Hide file tree

Showing 12 changed files with 340 additions and 10 deletions.
diff --git a/1Application-frontend/package-lock.json b/1Application-frontend/package-lock.json
diff --git a/MusicPlayer/README.md b/MusicPlayer/README.md
diff --git a/MusicPlayer/Screenshot (40).png b/MusicPlayer/Screenshot (40).png
diff --git a/MusicPlayer/Screenshot (41).png b/MusicPlayer/Screenshot (41).png
diff --git a/MusicPlayer/akash0708/index.html b/MusicPlayer/akash0708/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mp3/Video Player</title>
+</head>
+<script src="style.css"></script>
+<body>
+
+    <div class="player">
+        <video id="myVideo" preload width="640" height="360">
+                             <source src="https://mainline.i3s.unice.fr/mooc/mi5.mp4" />
+                         </video>
+                         <div>
+                             <button type="button" id="pl">Play</button>
+                             <button type="button" id="pr">Previous</button>
+                             <input id="slide" type="range" value="0" />
+                             <button type="button" id="nx">Next</button>
+                             <button type="button"> <span id="volDown">- &nbsp; </span>Vol<span id="volUp"> &nbsp; +</span></button>
+                         </div>
+                         <div class="thumbs">
+                             <img id="vid1" src="https://i.imgur.com/y6RTkIi.gif" width="128" height="72" alt="video 1">
+                             <img id="vid2" src="https://i.imgur.com/MUG6cex.gif" width="128" height="72" alt="video 2">
+                             <img id="vid3" src="https://i.imgur.com/Ey7oJdj.gif" width="128" height="72" alt="video 3">
+                         </div>
+                     </div>
+
+         </div>
+         <script src="script.js"></script>
+     </body>
+
+</html>
diff --git a/MusicPlayer/images b/MusicPlayer/images
diff --git a/MusicPlayer/script.js b/MusicPlayer/script.js
@@ -0,0 +1,124 @@
+var myVid = document.getElementById("myVideo");
+var pl = document.getElementById("pl");
+var pr = document.getElementById("pr");
+var seek = document.getElementById("slide");
+var nx = document.getElementById("nx");
+var volDown = document.getElementById("volDown");
+var volUp = document.getElementById("volUp");
+var vid1 = document.getElementById("vid1");
+var vid2 = document.getElementById("vid2");
+var vid3 = document.getElementById("vid3");
+
+var sources = ["https://mainline.i3s.unice.fr/mooc/mi5.mp4", 
+               "https://mainline.i3s.unice.fr/mooc/ff7.mp4", 
+               "https://mainline.i3s.unice.fr/mooc/jbs.mp4"];
+
+var num = 0;
+myVid.src = sources[num];
+myVid.volume = 0.5;
+
+// start playing
+function cinema() {
+    function playPause() {
+        if (myVid.paused === true) {
+            myVid.play();
+            pl.innerHTML = "Pause";
+        } else {
+            myVid.pause();
+            pl.innerHTML = "Play";
+        }
+    }
+
+    function prevVid() {
+        if (num === 0) {
+            num = 0;
+        } else {
+            num--;
+            seek.value = 0;
+            myVid.src = sources[num];
+            myVid.play();
+        }
+    }
+
+    function vidSeek() {
+        var vidTime = myVid.duration * (seek.value / 100);
+        myVid.currentTime = vidTime;
+    }
+
+    function vidTime() {
+        var nt = myVid.currentTime * (100 / myVid.duration);
+        seek.value = nt;
+    }
+
+    function nextVid() {
+        if (num === 2) {
+            if (seek.value < 100) {
+                num = 2;
+            } else {
+                num = 0;
+                myVid.src = sources[num];
+                seek.value = 0;
+                myVid.pause();
+                pl.innerHTML = "Play";
+            }
+        } else {
+            num++;
+            seek.value = 0;
+            myVid.src = sources[num];
+            myVid.play();
+        }
+    }
+
+    function volChangeDown() {
+        if (myVid.volume > 0) {
+            myVid.volume -= 0.1;
+        }
+    }
+
+    function volChangeUp() {
+        if (myVid.volume < 1) {
+            myVid.volume += 0.1;
+        }
+    }
+
+    function vidChoice1() {
+        num = 0;
+        myVid.src = sources[num];
+        playPause();
+    }
+
+    function vidChoice2() {
+        num = 1;
+        myVid.src = sources[num];
+        playPause();
+    }
+
+    function vidChoice3() {
+        num = 2;
+        myVid.src = sources[num];
+        playPause();
+    }
+
+    // Add all event listeners
+    pl.addEventListener("click", playPause, false);
+    pr.addEventListener("click", prevVid, false);
+    seek.addEventListener("mousedown", function () {
+        myVid.pause();
+        pl.innerHTML = "Play";
+    });
+    seek.addEventListener("mouseup", function () {
+        myVid.play();
+        pl.innerHTML = "Pause";
+    });
+    seek.addEventListener("input", vidSeek, false);
+    myVid.addEventListener("timeupdate", vidTime, false);
+    myVid.addEventListener("ended", nextVid, false);
+    nx.addEventListener("click", nextVid, false);
+    volDown.addEventListener("mousedown", volChangeDown, false);
+    volUp.addEventListener("mousedown", volChangeUp, false);
+    vid1.addEventListener("click", vidChoice1);
+    vid2.addEventListener("click", vidChoice2);
+    vid3.addEventListener("click", vidChoice3);
+}
+
+cinema();
diff --git a/MusicPlayer/style.css b/MusicPlayer/style.css
@@ -0,0 +1,102 @@
+
+.player {
+    background: #000;
+    margin: 0 auto;
+    max-width: 640px;
+    overflow: hidden;
+    width: 95%;
+}
+
+.player button {
+    background-color: #004080;
+    border: none;
+    color: #D3D3D3;
+    float: left;
+    font-size: 100%;
+    height: 1.75em;
+    margin: 0;
+    overflow: hidden;
+    padding: 0;
+    white-space: nowrap;
+    width: 15%;
+}
+
+.player button:hover,
+.player input:hover {
+    background-color: #00509F;
+    color: #fff;
+    cursor: pointer;
+}
+
+.player input {
+
+    background-color: #004080;
+    border: none;
+    color: #D3D3D3;
+    float: left;
+    height: 1.5em;
+    margin: 0;
+    padding: 0;
+    width: 40%;
+}
+
+.player input[type=range]::-ms-track {
+    background: transparent;
+    border-color: transparent;
+    color: transparent;
+    cursor: pointer;
+    width: 100%;
+}
+
+.player input[type=range]::-webkit-slider-thumb {
+
+    -webkit-appearance: none;
+    background: #00509F;
+    border: 1px solid #D3D3D3;
+    box-sizing: border-box;
+    height: 1.5em;
+    width: 1em;
+}
+
+.player video {
+    background: #000;
+    border: 1px solid #000;
+    box-sizing: border-box;
+    height: 100%;
+    margin: 10% auto;
+    max-width: 640px;
+    width: 100%;
+}
+
+
+
+.signup span {
+    margin-left: .2em;
+    width: 20%;
+}
+
+.thumbs {
+    background-color: darkgrey;
+    border: 1px solid #000;
+    box-sizing: border-box;
+    overflow: hidden;
+    width: 100%;
+}
+
+.thumbs img {
+    height: 100%;
+    margin: 2%;
+    max-width: 128px;
+    width: 20%;
+}
+
+.thumbs img:hover {
+    border: 1px solid #FFF;
+    cursor: pointer;
+}
+
+
+img {
+    border: 1px solid #000;
+    box-sizing: border-box;
+}
diff --git a/Random-Color-Generator/index.html b/Random-Color-Generator/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<link rel="stylesheet" href="style.css">
+<body>
+    <h1>Random color generator</h1>
+
+    <div class="container">
+        <div>
+          <input type="color" id="color">
+          <h4 id="text">#000000</h4>
+          <p>click to change color</p>
+        </div>
+      </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Random-Color-Generator/script.js b/Random-Color-Generator/script.js
@@ -0,0 +1,36 @@
+
+function randomInteger(max) {
+    return Math.floor(Math.random()*(max + 1));
+}
+
+function randomRgbColor() {
+    let r = randomInteger(255);
+    let g = randomInteger(255);
+    let b = randomInteger(255);
+    return [r,g,b];
+}
+
+function randomHexColor() {
+    let [r,g,b] =randomRgbColor();
+
+    let hr = r.toString(16).padStart(2, '0');
+    let hg = g.toString(16).padStart(2, '0');
+    let hb = b.toString(16).padStart(2, '0');
+
+    return "#" + hr + hg + hb;
+}
+
+function changeColor() {
+  let hex = randomHexColor();
+  document.getElementById('color').value = hex;
+  document.getElementById('text').innerHTML = hex;
+}
+
+function clickHandler(event) {
+  changeColor();
+  event.preventDefault();
+}
+
+document.addEventListener('click', clickHandler);
+
+changeColor();
diff --git a/Random-Color-Generator/style.css b/Random-Color-Generator/style.css
@@ -0,0 +1,18 @@
+#color {
+    width: 50rem;
+    height: 30rem;
+  }
+
+
+  h4, h5, p {
+    font-family: sans-serif;
+    text-align: center;
+  }
+
+  .container {
+      width: 100%;
+      height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+  }
diff --git a/javascript-mini-projects b/javascript-mini-projects