Develop Reference

I am having GooglePlacesAutocomplete focus Issue

Hello I have used google dropdown in my react project and need to handle event on focus of the dropdown I couldn't make it can you help me?
As you can see in below output there is a div placeholder which i need to hide on focus. I have tried a few ways but it didn't work so I need some expert help. I am stuck in here.
code
<GooglePlacesAutocomplete
apiKey={'XXXXXXX'}
selectProps={{
value,
backspaceRemovesValue: true,
controlShouldRenderValue: true,
isClearable: true,
placeholder: strings["SELECT_LOCATION"],
onChange: async (e) => {
console.log("E : ", e);
setValue(e)
if (e) {
let location = await getLocationAction(e.value?.place_id)
let address = {
address: e.label,
location
}
getLocation && getLocation(address)
} else {
getLocation(null);
}
}
}
}
/>
Output
<div class="googleDropdown">
<div class="css-2b097c-container">
<span
aria-live="polite"
aria-atomic="false"
aria-relevant="additions text"
class="css-1f43avz-a11yText-A11yText"
></span>
<div class="css-yk16xz-control">
<div class="css-1hwfws3">
<div class="css-1wa3eu0-placeholder">Select location</div>
<div class="css-1g6gooi">
<div class="" style="display: inline-block">
<input
autocapitalize="none"
autocomplete="off"
autocorrect="off"
id="react-select-3-input"
spellcheck="false"
tabindex="0"
type="text"
aria-autocomplete="list"
value=""
style="
box-sizing: content-box;
width: 2px;
background: 0px center;
border: 0px;
font-size: inherit;
opacity: 1;
outline: 0px;
padding: 0px;
color: inherit;
"
/>
<div
style="
position: absolute;
top: 0px;
left: 0px;
visibility: hidden;
height: 0px;
overflow: scroll;
white-space: pre;
font-size: 16px;
font-family: Comfortaa, Montserrat, sans-sarif;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
text-transform: none;
"
></div>
</div>
</div>
</div>
<div class="css-1wy0on6">
<span class="css-1okebmr-indicatorSeparator"></span>
<div class="css-tlfecz-indicatorContainer" aria-hidden="true">
<svg
height="20"
width="20"
viewBox="0 0 20 20"
aria-hidden="true"
focusable="false"
class="css-tj5bde-Svg"
>
<path
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
></path>
</svg>
</div>
</div>
</div>
</div>
</div>
code

How can I create a Collapsible menu?

How can I create a Collapsible menu on "Cheat Status" and another on the "RainbowSixSiege Cheats".
I'm good at structuring sites with html and css but I'm denied with javascript
The complete code did not enter, I copied the main part, I hope there is everything you need
If you need anything I can send you the complete file, however I only need the javascript code to make these two "Menus" work
button {
display: inline-block;
border: none;
background: none;
cursor: pointer;
}
.product-status-box {
background-color: #fff;
box-shadow: 12px 12px 30px 0px rgba(0, 0, 0, 0.15);
padding: 3.2rem 6.4rem;
border-radius: 22px;
margin-top: 3.2rem;
}
.product-status {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.product-status-title {
font-size: 1.8rem;
font-weight: 700;
}
.product-status-icon {
width: 2.4rem;
}
.margin-top {
margin-top: 1.6rem;
}
.hidden-box {
}
.hidden-box-btn {
display: flex;
align-items: center;
gap: 1.2rem;
}
.hidden-box-btn h3 {
font-size: 1.6rem;
font-weight: 600;
margin-bottom: 0.4rem;
}
.product-icon {
width: 2rem;
}
.hidden-2nd-box {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 1.4rem;
font-weight: 500;
}
<div class="product-status-box">
<button type="button" class="product-status">
<h2 class="product-status-title">Cheats Status</h2>
<svg
xmlns="http://www.w3.org/2000/svg"
class="product-status-icon"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19 9l-7 7-7-7"
/>
</svg>
</button>
<div class="hidden-box">
<button type="button" class="hidden-box-btn margin-top">
<h3>RainbowSixSiege Cheats</h3>
<svg
xmlns="http://www.w3.org/2000/svg"
class="product-icon"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19 9l-7 7-7-7"
/>
</svg>
</button>
<div class="hidden-2nd-box">
<p>Klar.gg</p>
<p class="green-text">Operational</p>
</div>
</div>
</div>

This is going to be tricky one I will suggest you to add jQuery UI and
put these tags in your HTML head element
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
NOW add this jQuery code in your JavaScript and link it to your html just like you link external CSS in index.html
like this
<script src=" *your file path of JavaScript* "></script>
now add these line in your JavaScript file
$(document).ready(function () {
$('').click(function () { //add your class or id in the click function
$('').slideToggle(); //here you add class or id which you want to show when user click on button
});
});
quotes in the above brackets are compulsory don't remove them place your class or id inside them
repeat this one with second button with different class or id.
Hope this will solve your problem.

scroll bar with horizontal scroll sticking in the body

I'm asking you for some help because I'm struggling a bit with CSS/JS, it's been a long time since I've practiced.
Basically I'm trying to make a section with a "sticky" title that scrolls horizontally with a block just below it that also stays sticky until I finish making this horizontal scrolling.
I managed to set up the structure but I think I need to add some more JS or modify what has been done. Currently I have 2 scrollbars I would like to have only one but that acts like I have two.
I put you the JSfiddle it will be more clear:
https://jsfiddle.net/ps4b10ro
const spaceHolder = document.querySelector('.space-holder');
const horizontal = document.querySelector('.horizontal');
spaceHolder.style.height = `${calcDynamicHeight(horizontal)}px`;
function calcDynamicHeight(ref) {
const vw = window.innerWidth;
const vh = window.innerHeight;
const objectWidth = ref.scrollWidth;
return objectWidth - vw + vh + 150; // 150 is the padding (in pixels) desired on the right side of the .cards container. This can be set to whatever your styles dictate
}
window.addEventListener('scroll', () => {
const sticky = document.querySelector('.sticky');
horizontal.style.transform = `translateX(-${sticky.offsetTop}px)`;
});
window.addEventListener('resize', () => {
spaceHolder.style.height = `${calcDynamicHeight(horizontal)}px`;
});
var swiper = new Swiper('.swiper-container', {
direction: 'vertical',
mousewheelControl: true,
slidesPerView: 1,
// freeMode: true,
// freeModeSticky: true
});
*,
*::before,
*::after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
font-size: 100%;
}
body {
margin: 0;
font-family: sans-serif;
}
.container {
position: relative;
width: 100%;
min-height: 100vh;
}
.space-holder {
background-color: #111;
position: relative;
width: 100%;
}
.sticky {
height: 100vh;
position: sticky;
top: 0;
height: 100vh;
width: 100%;
overflow-x: hidden;
}
.horizontal {
position: absolute;
height: 100%;
will-change: transform;
}
.cards {
position: relative;
height: fit-content;
padding: 0 0 0 150px;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
}
.horizontalText {
color: #fff;
font-size: 4em;
padding: 0 3vw 0 3vw;
width: 53vw;
height: fit-content;
}
.etsy {
background-color: #fff;
margin-top: 22vh;
height: 400px;
position: sticky;
bottom: 350vh;
height: 100%;
overflow: hidden;
}
.test {
background-color: blanchedalmond;
height: 1000px;
}
<div class="test"></div>
<div class="module"></div>
<section class="container">
<div class="space-holder">
<div class="sticky">
<div class="horizontal">
<section role="feed" class="cards">
<h2 class="horizontalText">Discovers our products</h2>
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="24" cy="24" r="24" fill="#EDD337"/>
</svg>
<h2 class="horizontalText">Discovers our universe</h2>
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="24" cy="24" r="24" fill="#EDD337"/>
</svg>
<h2 class="horizontalText">Discovers our products</h2>
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="24" cy="24" r="24" fill="#EDD337"/>
</svg>
<h2 class="horizontalText">Discovers our universe</h2>
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="24" cy="24" r="24" fill="#EDD337"/>
</svg>
<h2 class="horizontalText">Discovers our products</h2>
</section>
</div>
<section class="etsy sticky">
<section id="emporter container" class="blanc hori">
<div class="wrap">
<div class="defilement">
<a href="/articles/damien-rice">
<div class="cover" style="background:url(https://cdn.blogotheque.net/blogotheque/2019/11/18/fd9c7d252ab9de5569c9fcc96aabaaff.jpg) 50% 50%">
<div><img src="/packs/media/img/play-9e06fa89856b9d33899e081448a066f5.svg" alt=""></div>
</div>
<h3>Damien Rice</h3>
<p>Soirée de Poche #54</p>
</a>
<a href="/articles/benjamin-booker-25870">
<div class="cover" style="background:url(https://cdn.blogotheque.net/blogotheque/2020/01/02/27cd1d46f726bf3e4c15a79ad42e8e0a.png) 50% 50%">
<div><img src="/packs/media/img/play-9e06fa89856b9d33899e081448a066f5.svg" alt=""></div>
</div>
<h3>Benjamin Booker</h3>
<p>Soirée de Poche #53</p>
</a>
<a href="/articles/shame">
<div class="cover" style="background:url(https://cdn.blogotheque.net/blogotheque/2019/11/18/ec085ebc867db30fc41f8be3b247ec37.jpg) 50% 50%">
<div><img src="/packs/media/img/play-9e06fa89856b9d33899e081448a066f5.svg" alt=""></div>
</div>
<h3>Shame</h3>
<p>Soirée de Poche #52</p>
</a>
<a href="/articles/hamilton-leithauser">
<div class="cover" style="background:url(https://cdn.blogotheque.net/blogotheque/2019/12/05/b56f9fbe55b912ad931376338a655440.png) 50% 50%">
<div><img src="/packs/media/img/play-9e06fa89856b9d33899e081448a066f5.svg" alt=""></div>
</div>
<h3>Hamilton Leithauser</h3>
<p>Soirée de Poche #51</p>
</a>
</div>
<div class="navigation">
<!-- <img class="pointer gauche bloque" src="img/agaucheN.svg" alt="" /> -->
<svg class="pointer gauche bloque" height="40" viewBox="0 0 40 40" width="40" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="#111" stroke-width="2" transform="matrix(1 0 0 -1 0 40)"><circle cx="20" cy="20" r="19"></circle><path d="m22.3823529 14-6.3823529 6.3823529 6.3823529 6.4852942"></path></g></svg>
<!-- <img class="pointer droite" src="img/agaucheN.svg" alt="" /> -->
<svg class="pointer droite" height="40" viewBox="0 0 40 40" width="40" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="#111" stroke-width="2" transform="matrix(1 0 0 -1 0 40)"><circle cx="20" cy="20" r="19"></circle><path d="m22.3823529 14-6.3823529 6.3823529 6.3823529 6.4852942"></path></g></svg>
<div class="progress">
<div style="transform: matrix(0.2, 0, 0, 1, 0, 0);"></div>
</div>
</div>
</div>
</section>
</section>
<div class="test">
</div>
Thank you in advance for your help and or your advice

Connect svg rect with an accordion

I have a svg image with a mouse hover on four rect elements and an accordion with four buttons done with javascript. I want to connect each element by hovering them simultaneously (a rect and button accordion) and by clicking on a svg rect it will open a button accordion and by clicking on an accordion it will fill a rect. You can check my fiddle here: https://jsfiddle.net/pfrutuoso/zcsj8g05/2/
This is my html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<div class="stage_info">
<button class="accordion">Stage 1</button>
<div class="panel">
<p>Information here..</p>
</div>
<button class="accordion">Stage 2</button>
<div class="panel">
<p>Information here..</p>
</div>
<button class="accordion">Stage 3</button>
<div class="panel">
<p>Information here..</p>
</div>
<button class="accordion">Stage 4</button>
<div class="panel">
<p>Information here..</p>
</div>
</div>
<div class="stage_img">
<map id="big_stage">
<svg version="1.1" id="stadium" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="100%" height="100%" viewBox="0 0 456.122 451.02" enable-background="new 0 0 456.122 451.02"
xml:space="preserve">
<rect id="stage4" x="25.51" y="25.51" fill="#1C6131" width="200" height="200"/>
<rect id="stage3" x="230.612" y="25.51" fill="#1C6131" width="200" height="200"/>
<rect id="stage2" x="25.51" y="229.592" fill="#1C6131" width="200" height="200"/>
<rect id="stage1" x="230.612" y="229.592" fill="#1C6131" width="200" height="200"/>
</svg>
</map>
</div>
</div>
</body>
</html>
My css:
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
}
.active,
.accordion:hover {
background-color: #ccc;
}
.panel {
padding: 0 18px;
background-color: white;
display: none;
overflow: hidden;
}
.wrapper {
display: inline-block;
max-width: 1140px;
margin: 0 auto;
width: 100%;
text-align: center;
}
.stage_info,
.stage_img {
display: inline-block;
width: calc(50% - 80px);
vertical-align: top;
}
rect {
cursor: pointer;
z-index: 999;
position: relative;
}
rect:hover {
fill: #ccc;
pointer-events: all;
}
And my javascript:
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}

I tried to do it as procedurally as possible as that seemed to be what you were going for in your JS.
I added value attributes to your stage buttons with the id of the corresponding rect elements, and I added a class called grey with the same properties as those applied when hovering.
let stgInf = document.querySelector(".stage_info");
let svg = document.querySelector("#stadium");
function onClick(num) {
let acc = stgInf.querySelector(`.accordion:nth-of-type(${num})`);
let panel = acc.nextElementSibling;
let rect = svg.querySelector(`rect#${acc.getAttribute("value")}`);
return () => {
acc.classList.toggle("active");
if (acc.classList.contains("active")) {
panel.style.display = "block";
rect.classList.add("grey");
} else {
panel.style.display = "none";
rect.classList.remove("grey");
}
}
}
function hover(num) {
let acc = stgInf.querySelector(`.accordion:nth-of-type(${num})`);
let rect = svg.querySelector(`rect#${acc.getAttribute("value")}`);
return (event) => {
if (event.type === "mouseenter") {
acc.classList.add("grey");
rect.classList.add("grey");
} else if (!acc.classList.contains("active")) {
acc.classList.remove("grey");
rect.classList.remove("grey");
}
}
}
let accs = stgInf.querySelectorAll(".accordion");
let i = 1;
for (let acc of accs) {
let rect = svg.querySelector(`rect#${acc.getAttribute("value")}`);
acc.addEventListener("click", onClick(i));
acc.addEventListener("mouseenter", hover(i));
acc.addEventListener("mouseout", hover(i));
rect.addEventListener("click", onClick(i));
rect.addEventListener("mouseenter", hover(i));
rect.addEventListener("mouseout", hover(i));
++i;
}
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
}
.panel {
padding: 0 18px;
background-color: white;
display: none;
overflow: hidden;
}
.wrapper {
display: inline-block;
max-width: 1140px;
margin: 0 auto;
width: 100%;
text-align: center;
}
.stage_info,
.stage_img {
display: inline-block;
width: calc(50% - 80px);
vertical-align: top;
}
rect {
cursor: pointer;
z-index: 999;
position: relative;
}
.grey,
.active,
.accordion:hover,
rect:hover {
fill: #ccc;
background-color: #ccc;
pointer-events: all;
}
<div class="wrapper">
<div class="stage_info">
<button class="accordion" value="stage1">Stage 1</button>
<div class="panel">
<p>Information here..</p>
</div>
<button class="accordion" value="stage2">Stage 2</button>
<div class="panel">
<p>Information here..</p>
</div>
<button class="accordion" value="stage3">Stage 3</button>
<div class="panel">
<p>Information here..</p>
</div>
<button class="accordion" value="stage4">Stage 4</button>
<div class="panel">
<p>Information here..</p>
</div>
</div>
<div class="stage_img">
<map id="big_stage">
<svg version="1.1" id="stadium" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="100%" height="100%" viewBox="0 0 456.122 451.02" enable-background="new 0 0 456.122 451.02"
xml:space="preserve">
<rect id="stage4" x="25.51" y="25.51" fill="#1C6131" width="200" height="200"/>
<rect id="stage3" x="230.612" y="25.51" fill="#1C6131" width="200" height="200"/>
<rect id="stage2" x="25.51" y="229.592" fill="#1C6131" width="200" height="200"/>
<rect id="stage1" x="230.612" y="229.592" fill="#1C6131" width="200" height="200"/>
</svg>
</map>
</div>
</div>
EDIT
I implemented the hover functionality you mentioned in your comment by adding mouseenter and mouseout event listeners in addition to the click listeners.

How to make images change a little quicker?

My code works just fine but for some reason when you click on the play button it takes a bit longer to switch over to the pause sign, and occasionally it takes a bit longer for the pause button to go to the play button. I also have one more question, when you click on the rain and beach icon there's a blue square border that I didn't remember putting, how do you remove it?
Thanks, Love2code
<!DOCTYPE html>
<html>
<head>
<title>Meditation App</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.app{
height:100vh;
display:flex;
justify-content:space-evenly;
align-items:center;
}
.time-select,.sound-picker,.player-container{
height:80%;
flex:1;
display:flex;
flex-direction:column;
justify-content:space-evenly;
align-items:center;
}
.player-container{
position:relative;
}
.player-container svg{
position:absolute;
height:50%;
top:50%;
left:50%;
transform:translate(-50%,-50%);
pointer-events:none;
}
.time-display{
position:absolute;
bottom:10%;
color:white;
font-size:50px;
}
video{
position:fixed;
top:0%;
left:0%;
width:100%;
z-index:-10;
}
.time-select button,
.sound-picker button{
color:white;
width:30%;
height:10%;
background:none;
border:2px solid white;
cursor:pointer;
border-radius:5px;
font-size:20px;
transition:all 0.5s ease;
}
.time-select button:hover{
color:black;
background:white;
}
.sound-picker button{
border:none;
height:120px;
width:120px;
border-radius:50%;
}
.sound-picker button:nth-child(1){
background:#4972a1;
}
.sound-picker button:nth-child(2){
background:#a14f49;
}
.sound-picker:focus{
outline: none;
}
</style>
</head>
<body>
<div class="app">
<div class="vid-container">
<video Loop>
<source src="https://www.dropbox.com/s/wkdu9elom9o4r5g/rain%20%281%29.mp4?raw=1"/>
</video>
</div>
<div class="time-select">
<button data-time="120">2 Minutes</button>
<button data-time="300">5 Minutes</button>
<button data-time="600">10 Minutes</button>
</div>
<div class="player-container">
<audio class="song">
<source src="https://www.dropbox.com/s/jawlfpyyz83w2td/rain.mp3?raw=1"></source>
</audio>
<img src="https://www.dropbox.com/s/8unx3knosmefedk/download%20%281%29.svg?raw=1" class="play-container" alt="">
<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>
<h3 class="time-display">0:00</h3>
</div>
<div class="sound-picker">
<button data-sound="https://www.dropbox.com/s/jawlfpyyz83w2td/rain.mp3?raw=1" data-video="https://www.dropbox.com/s/wkdu9elom9o4r5g/rain%20%281%29.mp4?raw=1"><img src="https://i.ibb.co/8BspYTV/rain-1.png"></button>
<button data-sound="https://www.dropbox.com/s/6k9nauf2ffyvfuu/beach.mp3?raw=1"
data-video="https://www.dropbox.com/s/tsdd86bxmax32jp/beach.mp4?raw=1"><img src="https://i.ibb.co/T0xw4k7/sun-umbrella.png"></button>
</div>
</body>
<script>
const app = () => {
const song = document.querySelector(".song");
const play = document.querySelector(".play-container");
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 length of the outside
const outlineLength = outline.getTotalLength();
//Duration
let fakeDuration = 600;
outline.style.strokeDasharray = outlineLength;
outline.style.strokeDashoffset = outlineLength;
//play sounds
play.addEventListener("click", () => {
checkPlaying(song);
});
//stop and play the sounds
const checkPlaying = song =>{
if(song.paused){
song.play();
video.play();
play.src = 'https://www.dropbox.com/s/3zvnjkebwt1sjgq/download%20%283%29.svg?raw=1';
}else{
song.pause();
video.pause();
play.src = 'https://www.dropbox.com/s/8unx3knosmefedk/download%20%281%29.svg?raw=1';
}
}
};
app();
</script>
</html>

Because your SVGs are remotely sourced, it takes a bit of time to download them. I've created two hidden images with the remote sources. This will download these and have them ready in your cash for when you need them. I've also changed the sequence of when you switch the source path to come before you play the video.
I've set all elements to have an outline of none to take away the blue border when clicking on the image.
const app = () => {
const song = document.querySelector(".song");
const play = document.querySelector(".play-container");
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 length of the outside
const outlineLength = outline.getTotalLength();
//Duration
let fakeDuration = 600;
outline.style.strokeDasharray = outlineLength;
outline.style.strokeDashoffset = outlineLength;
//play sounds
play.addEventListener("click", () => {
checkPlaying(song);
});
//stop and play the sounds
const checkPlaying = song => {
if (song.paused) {
play.src = 'https://www.dropbox.com/s/3zvnjkebwt1sjgq/download%20%283%29.svg?raw=1';
song.play();
video.play();
} else {
play.src = 'https://www.dropbox.com/s/8unx3knosmefedk/download%20%281%29.svg?raw=1';
song.pause();
video.pause();
}
}
};
app();
* {
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
}
.app {
height: 100vh;
display: flex;
justify-content: space-evenly;
align-items: center;
}
.time-select,
.sound-picker,
.player-container {
height: 80%;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
.player-container {
position: relative;
}
.player-container svg {
position: absolute;
height: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
}
.time-display {
position: absolute;
bottom: 10%;
color: white;
font-size: 50px;
}
video {
position: fixed;
top: 0%;
left: 0%;
width: 100%;
z-index: -10;
}
.time-select button,
.sound-picker button {
color: white;
width: 30%;
height: 10%;
background: none;
border: 2px solid white;
cursor: pointer;
border-radius: 5px;
font-size: 20px;
transition: all 0.5s ease;
}
.time-select button:hover {
color: black;
background: white;
}
.sound-picker button {
border: none;
height: 120px;
width: 120px;
border-radius: 50%;
}
.sound-picker button:nth-child(1) {
background: #4972a1;
}
.sound-picker button:nth-child(2) {
background: #a14f49;
}
.sound-picker:focus {
outline: none;
}
<img src="https://www.dropbox.com/s/3zvnjkebwt1sjgq/download%20%283%29.svg?raw=1" style="display:none;">
<img src="https://www.dropbox.com/s/8unx3knosmefedk/download%20%281%29.svg?raw=1" style="display:none;">
<div class="app">
<div class="vid-container">
<video Loop>
<source src="https://www.dropbox.com/s/wkdu9elom9o4r5g/rain%20%281%29.mp4?raw=1"/>
</video>
</div>
<div class="time-select">
<button data-time="120">2 Minutes</button>
<button data-time="300">5 Minutes</button>
<button data-time="600">10 Minutes</button>
</div>
<div class="player-container">
<audio class="song">
<source src="https://www.dropbox.com/s/jawlfpyyz83w2td/rain.mp3?raw=1"></source>
</audio>
<img src="https://www.dropbox.com/s/8unx3knosmefedk/download%20%281%29.svg?raw=1" class="play-container" alt="">
<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>
<h3 class="time-display">0:00</h3>
</div>
<div class="sound-picker">
<button data-sound="https://www.dropbox.com/s/jawlfpyyz83w2td/rain.mp3?raw=1" data-video="https://www.dropbox.com/s/wkdu9elom9o4r5g/rain%20%281%29.mp4?raw=1"><img src="https://i.ibb.co/8BspYTV/rain-1.png"></button>
<button data-sound="https://www.dropbox.com/s/6k9nauf2ffyvfuu/beach.mp3?raw=1" data-video="https://www.dropbox.com/s/tsdd86bxmax32jp/beach.mp4?raw=1"><img src="https://i.ibb.co/T0xw4k7/sun-umbrella.png"></button>
</div>