├── song.mp3
├── crysong.mp3
├── favicon.ico
├── glowball.gif
├── happy-cat.gif
├── offball.png
├── banana-cat.gif
├── favicon-16x16.png
├── favicon-32x32.png
├── apple-touch-icon.png
├── android-chrome-192x192.png
├── android-chrome-512x512.png
├── README.md
├── site.webmanifest
├── style.css
├── index.html
└── index.js


/song.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Harshbailurkar/Disco-Diwane-JS-Mobile-app/HEAD/song.mp3


--------------------------------------------------------------------------------
/crysong.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Harshbailurkar/Disco-Diwane-JS-Mobile-app/HEAD/crysong.mp3


--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Harshbailurkar/Disco-Diwane-JS-Mobile-app/HEAD/favicon.ico


--------------------------------------------------------------------------------
/glowball.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Harshbailurkar/Disco-Diwane-JS-Mobile-app/HEAD/glowball.gif


--------------------------------------------------------------------------------
/happy-cat.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Harshbailurkar/Disco-Diwane-JS-Mobile-app/HEAD/happy-cat.gif


--------------------------------------------------------------------------------
/offball.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Harshbailurkar/Disco-Diwane-JS-Mobile-app/HEAD/offball.png


--------------------------------------------------------------------------------
/banana-cat.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Harshbailurkar/Disco-Diwane-JS-Mobile-app/HEAD/banana-cat.gif


--------------------------------------------------------------------------------
/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Harshbailurkar/Disco-Diwane-JS-Mobile-app/HEAD/favicon-16x16.png


--------------------------------------------------------------------------------
/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Harshbailurkar/Disco-Diwane-JS-Mobile-app/HEAD/favicon-32x32.png


--------------------------------------------------------------------------------
/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Harshbailurkar/Disco-Diwane-JS-Mobile-app/HEAD/apple-touch-icon.png


--------------------------------------------------------------------------------
/android-chrome-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Harshbailurkar/Disco-Diwane-JS-Mobile-app/HEAD/android-chrome-192x192.png


--------------------------------------------------------------------------------
/android-chrome-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Harshbailurkar/Disco-Diwane-JS-Mobile-app/HEAD/android-chrome-512x512.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Disco-Diwane-JS-Mobile-app
2 | Simple Funny Disco app using JS
3 | #javascript #CSS #HTML
4 | 
5 | Demo : https://harshbailurkar.github.io/Disco-Diwane-JS-Mobile-app/
6 | 


--------------------------------------------------------------------------------
/site.webmanifest:
--------------------------------------------------------------------------------
1 | {"name":"Disco Diwane",
2 | "short_name":"Disco",
3 | "icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   margin: 0;
 3 |   padding: 0;
 4 |   box-sizing: border-box;
 5 | }
 6 | 
 7 | nav {
 8 |   text-align: center;
 9 |   background-color: rgb(43, 43, 43);
10 |   padding: 0.4em;
11 | }
12 | 
13 | ul {
14 |   display: flex;
15 |   justify-content: center;
16 |   list-style: none;
17 |   padding: 0.7em;
18 | }
19 | 
20 | li {
21 |   padding: 0.7em;
22 |   margin: 0 10px; /* Adjust the gap between list items */
23 |   background-color: rgb(222, 218, 218);
24 |   border-radius: 5px;
25 | }
26 | 
27 | a {
28 |   text-decoration: none;
29 |   color: black;
30 | }
31 | body {
32 |   background: #181616;
33 | }
34 | 
35 | .button {
36 |   display: flex;
37 |   flex-direction: row;
38 |   justify-content: center; /* Horizontally center the content */
39 |   align-items: center;
40 | }
41 | button {
42 |   padding: 0.8em;
43 |   background-color: rgb(255, 255, 255);
44 |   border: none;
45 |   border-radius: 5px;
46 |   margin: 1em;
47 | }
48 | .img {
49 |   display: flex;
50 |   justify-content: center; /* Horizontally center the content */
51 |   align-items: center;
52 | }
53 | img {
54 |   padding-top: 2rem;
55 |   width: 40%;
56 |   max-width: 250px;
57 | }
58 | h2 {
59 |   color: whitesmoke;
60 |   text-align: center;
61 | }
62 | h4 {
63 |   color: whitesmoke;
64 |   text-align: center;
65 | }
66 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Disco Diwane app</title>
 7 |     <link rel="stylesheet" href="style.css" />
 8 |     <link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png" />
 9 |     <link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png" />
10 |     <link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png" />
11 |     <link rel="manifest" href="./site.webmanifest" />
12 |   </head>
13 |   <body>
14 |     <nav>
15 |       <ul>
16 |         <li>Home</li>
17 |         <li><a href="https://github.com/Harshbailurkar">Github</a></li>
18 |       </ul>
19 |     </nav>
20 |     <h2>Your Disco Room</h2>
21 |     <h4>press Start to begin</h4>
22 |     <div class="container">
23 |       <div class="button">
24 |         <button id="start">start</button>
25 |         <button id="stop">stop</button>
26 |       </div>
27 |       <div class="img">
28 |         <img id="ball" src="./offball.png" alt="" />
29 |       </div>
30 |     </div>
31 | 
32 |     <audio id="audio" src="" autoplay loop></audio>
33 |     <audio id="cryaudio" src="" autoplay></audio>
34 |     <div class="catimg">
35 |       <img id="cat" src="./banana-cat.gif" alt="" />
36 |     </div>
37 |     <script src="index.js"></script>
38 |   </body>
39 | </html>
40 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | let discoBall = document.getElementById("ball");
 2 | let cat = document.getElementById("cat");
 3 | const start = document.getElementById("start");
 4 | const stop = document.getElementById("stop");
 5 | const audio = document.getElementById("audio");
 6 | const cryaudio = document.getElementById("cryaudio");
 7 | 
 8 | const preloadedCatImage = new Image();
 9 | preloadedCatImage.src = "./happy-cat.gif";
10 | 
11 | function colorFind() {
12 |   const colorCode = "0123456789ABCDEF";
13 |   let color = "#";
14 |   for (let i = 0; i < 6; i++) {
15 |     color += colorCode[Math.floor(Math.random() * 16)];
16 |   }
17 |   return color;
18 | }
19 | let intervalId;
20 | start.addEventListener("click", () => {
21 |   discoBall.src = "./glowball.gif";
22 |   cat.src = preloadedCatImage.src;
23 | 
24 |   audio.src = "./song.mp3";
25 |   document.querySelector("h4").innerText = "press Stop to End";
26 |   console.log("start");
27 |   if (!intervalId) {
28 |     intervalId = setInterval(() => {
29 |       document.body.style.backgroundColor = colorFind();
30 |     }, 200);
31 |   }
32 | });
33 | 
34 | stop.addEventListener("click", () => {
35 |   document.querySelector("h4").innerText = "press Start to begin";
36 |   clearInterval(intervalId);
37 |   intervalId = null;
38 |   document.body.style.backgroundColor = "#181616";
39 |   discoBall.src = "./offball.png";
40 |   cat.src = "./banana-cat.gif";
41 |   audio.src = " ";
42 |   cryaudio.src = "./crysong.mp3";
43 | });
44 | 


--------------------------------------------------------------------------------