diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index 6b665aaa..00000000 --- a/.vscode/settings.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "liveServer.settings.port": 5501 -} diff --git a/103 - Word_Definition/Readme.md b/103 - Word Definition/Readme.md similarity index 100% rename from 103 - Word_Definition/Readme.md rename to 103 - Word Definition/Readme.md diff --git a/103 - Word_Definition/app.js b/103 - Word Definition/app.js similarity index 100% rename from 103 - Word_Definition/app.js rename to 103 - Word Definition/app.js diff --git a/103 - Word_Definition/images/word_definition.png b/103 - Word Definition/images/word_definition.png similarity index 100% rename from 103 - Word_Definition/images/word_definition.png rename to 103 - Word Definition/images/word_definition.png diff --git a/103 - Word_Definition/index.html b/103 - Word Definition/index.html similarity index 100% rename from 103 - Word_Definition/index.html rename to 103 - Word Definition/index.html diff --git a/103 - Word_Definition/style.css b/103 - Word Definition/style.css similarity index 100% rename from 103 - Word_Definition/style.css rename to 103 - Word Definition/style.css diff --git a/110 Pixel-to-em-converte/index.html b/110 - Pixel to em Converter/index.html similarity index 100% rename from 110 Pixel-to-em-converte/index.html rename to 110 - Pixel to em Converter/index.html diff --git a/110 Pixel-to-em-converte/script.js b/110 - Pixel to em Converter/script.js similarity index 100% rename from 110 Pixel-to-em-converte/script.js rename to 110 - Pixel to em Converter/script.js diff --git a/110 Pixel-to-em-converte/style.css b/110 - Pixel to em Converter/style.css similarity index 100% rename from 110 Pixel-to-em-converte/style.css rename to 110 - Pixel to em Converter/style.css diff --git a/113 - Particle-effect-animation/index.html b/113 - Particle Effect Animation/index.html similarity index 100% rename from 113 - Particle-effect-animation/index.html rename to 113 - Particle Effect Animation/index.html diff --git a/113 - Particle-effect-animation/script.js b/113 - Particle Effect Animation/script.js similarity index 100% rename from 113 - Particle-effect-animation/script.js rename to 113 - Particle Effect Animation/script.js diff --git a/113 - Particle-effect-animation/style.css b/113 - Particle Effect Animation/style.css similarity index 100% rename from 113 - Particle-effect-animation/style.css rename to 113 - Particle Effect Animation/style.css diff --git a/116 - Places under a Postal Code/index.html b/116 - Places under a Postal Code/index.html deleted file mode 100644 index 77131ca0..00000000 --- a/116 - Places under a Postal Code/index.html +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - - Pincode Data - - - -

Check Postal Pincodes

-
- -
- -
-
-

-
- - - - \ No newline at end of file diff --git a/116 - Places under a Postal Code/index.js b/116 - Places under a Postal Code/index.js deleted file mode 100644 index 3908e023..00000000 --- a/116 - Places under a Postal Code/index.js +++ /dev/null @@ -1,44 +0,0 @@ -function pincode() { - var pin = document.getElementById("pincode").value; - var url = `https://api.postalpincode.in/pincode/`; - url+=pin; - var obj=''; - fetch(url) - .then(response=>response.json()) - .then(data=>{ - obj+=``; - obj+=`S.No`; - obj+=`Name`; - obj+=`BranchType`; - obj+=`Division`; - obj+=`District`; - obj+=`Region`; - obj+=`Circle`; - obj+=`Pincode`; - obj+=`State`; - obj+=`Country`; - obj+=``; - for(let i = 0;i`; - obj+=`${i+1}`; - obj+=`${data[0].PostOffice[i].Name}`; - obj+=`${data[0].PostOffice[i].BranchType}`; - obj+=`${data[0].PostOffice[i].Division}`; - obj+=`${data[0].PostOffice[i].District}`; - obj+=`${data[0].PostOffice[i].Region}`; - obj+=`${data[0].PostOffice[i].Circle}`; - obj+=`${data[0].PostOffice[i].Pincode}`; - obj+=`${data[0].PostOffice[i].State}`; - obj+=`${data[0].PostOffice[i].Country}`; - obj+=``; - } - document.querySelector("#error").innerHTML = ""; - document.getElementById("tab").innerHTML = obj; - }) - .catch(err=>{ - document.getElementById("tab").innerHTML = ""; - document.querySelector("#error").innerHTML = "No data found"; - }) -} - diff --git a/92- Ball-Game/css.css b/118 - Ball Game/css.css similarity index 100% rename from 92- Ball-Game/css.css rename to 118 - Ball Game/css.css diff --git a/92- Ball-Game/game/bg.jpeg b/118 - Ball Game/game/bg.jpeg similarity index 100% rename from 92- Ball-Game/game/bg.jpeg rename to 118 - Ball Game/game/bg.jpeg diff --git a/92- Ball-Game/game/bg.png b/118 - Ball Game/game/bg.png similarity index 100% rename from 92- Ball-Game/game/bg.png rename to 118 - Ball Game/game/bg.png diff --git a/92- Ball-Game/game/pic.jpg b/118 - Ball Game/game/pic.jpg similarity index 100% rename from 92- Ball-Game/game/pic.jpg rename to 118 - Ball Game/game/pic.jpg diff --git a/92- Ball-Game/game/pic.png b/118 - Ball Game/game/pic.png similarity index 100% rename from 92- Ball-Game/game/pic.png rename to 118 - Ball Game/game/pic.png diff --git a/92- Ball-Game/game/pic2.png b/118 - Ball Game/game/pic2.png similarity index 100% rename from 92- Ball-Game/game/pic2.png rename to 118 - Ball Game/game/pic2.png diff --git a/92- Ball-Game/game/picpg.jpg b/118 - Ball Game/game/picpg.jpg similarity index 100% rename from 92- Ball-Game/game/picpg.jpg rename to 118 - Ball Game/game/picpg.jpg diff --git a/92- Ball-Game/game/stump.jpg b/118 - Ball Game/game/stump.jpg similarity index 100% rename from 92- Ball-Game/game/stump.jpg rename to 118 - Ball Game/game/stump.jpg diff --git a/92- Ball-Game/index.html b/118 - Ball Game/index.html similarity index 100% rename from 92- Ball-Game/index.html rename to 118 - Ball Game/index.html diff --git a/92- Ball-Game/js.js b/118 - Ball Game/js.js similarity index 100% rename from 92- Ball-Game/js.js rename to 118 - Ball Game/js.js diff --git a/98-Random-Svg-Generator/README.md b/119 - Random Svg Generator/README.md similarity index 100% rename from 98-Random-Svg-Generator/README.md rename to 119 - Random Svg Generator/README.md diff --git a/98-Random-Svg-Generator/css/style.css b/119 - Random Svg Generator/css/style.css similarity index 100% rename from 98-Random-Svg-Generator/css/style.css rename to 119 - Random Svg Generator/css/style.css diff --git a/98-Random-Svg-Generator/img/Web capture_7-4-2022_55318_127.0.0.1.jpeg b/119 - Random Svg Generator/img/Web capture_7-4-2022_55318_127.0.0.1.jpeg similarity index 100% rename from 98-Random-Svg-Generator/img/Web capture_7-4-2022_55318_127.0.0.1.jpeg rename to 119 - Random Svg Generator/img/Web capture_7-4-2022_55318_127.0.0.1.jpeg diff --git a/98-Random-Svg-Generator/img/Web capture_7-4-2022_55339_127.0.0.1.jpeg b/119 - Random Svg Generator/img/Web capture_7-4-2022_55339_127.0.0.1.jpeg similarity index 100% rename from 98-Random-Svg-Generator/img/Web capture_7-4-2022_55339_127.0.0.1.jpeg rename to 119 - Random Svg Generator/img/Web capture_7-4-2022_55339_127.0.0.1.jpeg diff --git a/98-Random-Svg-Generator/img/logo2.svg b/119 - Random Svg Generator/img/logo2.svg similarity index 100% rename from 98-Random-Svg-Generator/img/logo2.svg rename to 119 - Random Svg Generator/img/logo2.svg diff --git a/98-Random-Svg-Generator/index.html b/119 - Random Svg Generator/index.html similarity index 100% rename from 98-Random-Svg-Generator/index.html rename to 119 - Random Svg Generator/index.html diff --git a/98-Random-Svg-Generator/js/script.js b/119 - Random Svg Generator/js/script.js similarity index 100% rename from 98-Random-Svg-Generator/js/script.js rename to 119 - Random Svg Generator/js/script.js diff --git a/99-GitHub/README.md b/122 - GitHub/README.md similarity index 100% rename from 99-GitHub/README.md rename to 122 - GitHub/README.md diff --git a/99-GitHub/css/style.css b/122 - GitHub/css/style.css similarity index 100% rename from 99-GitHub/css/style.css rename to 122 - GitHub/css/style.css diff --git a/99-GitHub/img/Web capture_10-4-2022_71120_127.0.0.1.jpeg b/122 - GitHub/img/Web capture_10-4-2022_71120_127.0.0.1.jpeg similarity index 100% rename from 99-GitHub/img/Web capture_10-4-2022_71120_127.0.0.1.jpeg rename to 122 - GitHub/img/Web capture_10-4-2022_71120_127.0.0.1.jpeg diff --git a/99-GitHub/img/Web capture_10-4-2022_71211_127.0.0.1.jpeg b/122 - GitHub/img/Web capture_10-4-2022_71211_127.0.0.1.jpeg similarity index 100% rename from 99-GitHub/img/Web capture_10-4-2022_71211_127.0.0.1.jpeg rename to 122 - GitHub/img/Web capture_10-4-2022_71211_127.0.0.1.jpeg diff --git a/99-GitHub/img/add-readme.png b/122 - GitHub/img/add-readme.png similarity index 100% rename from 99-GitHub/img/add-readme.png rename to 122 - GitHub/img/add-readme.png diff --git a/99-GitHub/index.html b/122 - GitHub/index.html similarity index 100% rename from 99-GitHub/index.html rename to 122 - GitHub/index.html diff --git a/99-GitHub/js/script.js b/122 - GitHub/js/script.js similarity index 100% rename from 99-GitHub/js/script.js rename to 122 - GitHub/js/script.js diff --git a/100 - Dino Game/README.md b/123 - Dino Game/README.md similarity index 100% rename from 100 - Dino Game/README.md rename to 123 - Dino Game/README.md diff --git a/100 - Dino Game/css/style.css b/123 - Dino Game/css/style.css similarity index 100% rename from 100 - Dino Game/css/style.css rename to 123 - Dino Game/css/style.css diff --git a/100 - Dino Game/img/Screenshot 2022-04-14 072750.png b/123 - Dino Game/img/Screenshot 2022-04-14 072750.png similarity index 100% rename from 100 - Dino Game/img/Screenshot 2022-04-14 072750.png rename to 123 - Dino Game/img/Screenshot 2022-04-14 072750.png diff --git a/100 - Dino Game/img/Screenshot 2022-04-14 072804.png b/123 - Dino Game/img/Screenshot 2022-04-14 072804.png similarity index 100% rename from 100 - Dino Game/img/Screenshot 2022-04-14 072804.png rename to 123 - Dino Game/img/Screenshot 2022-04-14 072804.png diff --git a/100 - Dino Game/img/Screenshot 2022-04-14 072814.png b/123 - Dino Game/img/Screenshot 2022-04-14 072814.png similarity index 100% rename from 100 - Dino Game/img/Screenshot 2022-04-14 072814.png rename to 123 - Dino Game/img/Screenshot 2022-04-14 072814.png diff --git a/100 - Dino Game/img/add-readme (1).png b/123 - Dino Game/img/add-readme (1).png similarity index 100% rename from 100 - Dino Game/img/add-readme (1).png rename to 123 - Dino Game/img/add-readme (1).png diff --git a/100 - Dino Game/img/cactus.png b/123 - Dino Game/img/cactus.png similarity index 100% rename from 100 - Dino Game/img/cactus.png rename to 123 - Dino Game/img/cactus.png diff --git a/100 - Dino Game/img/track.png b/123 - Dino Game/img/track.png similarity index 100% rename from 100 - Dino Game/img/track.png rename to 123 - Dino Game/img/track.png diff --git a/100 - Dino Game/img/trex.png b/123 - Dino Game/img/trex.png similarity index 100% rename from 100 - Dino Game/img/trex.png rename to 123 - Dino Game/img/trex.png diff --git a/100 - Dino Game/index.html b/123 - Dino Game/index.html similarity index 100% rename from 100 - Dino Game/index.html rename to 123 - Dino Game/index.html diff --git a/100 - Dino Game/js/script.js b/123 - Dino Game/js/script.js similarity index 100% rename from 100 - Dino Game/js/script.js rename to 123 - Dino Game/js/script.js diff --git a/124- Lyrics Search App/index.html b/124 - Lyrics Search App/index.html similarity index 96% rename from 124- Lyrics Search App/index.html rename to 124 - Lyrics Search App/index.html index a980d9ca..f435e584 100644 --- a/124- Lyrics Search App/index.html +++ b/124 - Lyrics Search App/index.html @@ -1,25 +1,25 @@ - - - - - OLX Clone - - - - - -
-

Lyrics Search App

-
- - -
-
-
-

Result will be displayed here

-
-
- - - + + + + + OLX Clone + + + + + +
+

Lyrics Search App

+
+ + +
+
+
+

Result will be displayed here

+
+
+ + + \ No newline at end of file diff --git a/124- Lyrics Search App/preview.PNG b/124 - Lyrics Search App/preview.PNG similarity index 100% rename from 124- Lyrics Search App/preview.PNG rename to 124 - Lyrics Search App/preview.PNG diff --git a/124- Lyrics Search App/script.js b/124 - Lyrics Search App/script.js similarity index 96% rename from 124- Lyrics Search App/script.js rename to 124 - Lyrics Search App/script.js index 13ab6d6b..654edba1 100644 --- a/124- Lyrics Search App/script.js +++ b/124 - Lyrics Search App/script.js @@ -1,92 +1,92 @@ -const from = document.getElementById("form"); -const search = document.getElementById("search"); -const result = document.getElementById("result"); -const more = document.getElementById("more"); - -const apiURL = "https://api.lyrics.ovh"; - -async function searchSongs(term) { - const res = await fetch(`${apiURL}/suggest/${term}`); - const data = await res.json(); - - showData(data); -} - -function showData(data) { - result.innerHTML = ` - - `; - if (data.prev || data.next) { - more.innerHTML = ` - ${ - data.prev - ? `` - : "" - } - ${ - data.next - ? `` - : "" - } - `; - } else { - more.innerHTML = ""; - } -} - -async function getMoreSongs(url) { - const res = await fetch(`https://cors-anywhere.herokuapp.com/${url}`); - const data = await res.json(); - - showData(data); -} - -async function getLyrics(artist, songTitle) { - const res = await fetch(`${apiURL}/v1/${artist}/${songTitle}`); - const data = await res.json(); - - if (data.error) { - result.innerHTML = data.error; - } else { - const lyrics = data.lyrics.replace(/(\r\n|\r|\n)/g, "
"); - - result.innerHTML = ` -

${artist} - ${songTitle}

- ${lyrics} - `; - } - - more.innerHTML = ""; -} - -form.addEventListener("submit", (e) => { - e.preventDefault(); - - const searchTerm = search.value.trim(); - - if (!searchTerm) { - alert("Please type in a search term"); - } else { - searchSongs(searchTerm); - } -}); - -// Get lyrics button click -result.addEventListener("click", (e) => { - const clickedEl = e.target; - if (clickedEl.tagName === "BUTTON") { - const artist = clickedEl.getAttribute("data-artist"); - const songTitle = clickedEl.getAttribute("data-songtitle"); - - getLyrics(artist, songTitle) - } +const from = document.getElementById("form"); +const search = document.getElementById("search"); +const result = document.getElementById("result"); +const more = document.getElementById("more"); + +const apiURL = "https://api.lyrics.ovh"; + +async function searchSongs(term) { + const res = await fetch(`${apiURL}/suggest/${term}`); + const data = await res.json(); + + showData(data); +} + +function showData(data) { + result.innerHTML = ` + + `; + if (data.prev || data.next) { + more.innerHTML = ` + ${ + data.prev + ? `` + : "" + } + ${ + data.next + ? `` + : "" + } + `; + } else { + more.innerHTML = ""; + } +} + +async function getMoreSongs(url) { + const res = await fetch(`https://cors-anywhere.herokuapp.com/${url}`); + const data = await res.json(); + + showData(data); +} + +async function getLyrics(artist, songTitle) { + const res = await fetch(`${apiURL}/v1/${artist}/${songTitle}`); + const data = await res.json(); + + if (data.error) { + result.innerHTML = data.error; + } else { + const lyrics = data.lyrics.replace(/(\r\n|\r|\n)/g, "
"); + + result.innerHTML = ` +

${artist} - ${songTitle}

+ ${lyrics} + `; + } + + more.innerHTML = ""; +} + +form.addEventListener("submit", (e) => { + e.preventDefault(); + + const searchTerm = search.value.trim(); + + if (!searchTerm) { + alert("Please type in a search term"); + } else { + searchSongs(searchTerm); + } +}); + +// Get lyrics button click +result.addEventListener("click", (e) => { + const clickedEl = e.target; + if (clickedEl.tagName === "BUTTON") { + const artist = clickedEl.getAttribute("data-artist"); + const songTitle = clickedEl.getAttribute("data-songtitle"); + + getLyrics(artist, songTitle) + } }); \ No newline at end of file diff --git a/124- Lyrics Search App/style.css b/124 - Lyrics Search App/style.css similarity index 93% rename from 124- Lyrics Search App/style.css rename to 124 - Lyrics Search App/style.css index 373bb8b2..730a7f13 100644 --- a/124- Lyrics Search App/style.css +++ b/124 - Lyrics Search App/style.css @@ -1,122 +1,122 @@ -* { - box-sizing: border-box; - } - - body { - background-color: rgb(219, 213, 213); - font-family: Arial, Helvetica, sans-serif; - margin: 0; - } - - button { - cursor: pointer; - } - - button:active { - transform: scale(0.95); - } - - input:focus, - button:focus { - outline: none; - } - - header { - background-position: center center; - color: #000000; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - padding: 30px 0; - position: relative; - } - - head:after { - content: ""; - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 100%; - background-color: rgba(0, 0, 0, 0.4); - } - - header * { - z-index: 1; - } - - header h1 { - margin: 0 0 30px; - } - - form { - position: relative; - width: 500px; - max-width: 100%; - } - - form input { - border: 0; - border-radius: 50px; - font-size: 16px; - padding: 15px 30px; - width: 100%; - background-color: antiquewhite; - } - - form button { - position: absolute; - top: 2px; - right: 2px; - background-color: rgb(243, 89, 115); - border: 0; - border-radius: 50px; - color: #fff; - font-size: 16px; - padding: 13px 30px; - } - - .btn { - background-color: rgb(243, 89, 115); - border: 0; - border-radius: 10px; - color: #fff; - padding: 4px 10px; - } - - ul.songs { - list-style-type: none; - padding: 0; - } - - ul.songs li { - display: flex; - align-items: center; - justify-content: space-between; - margin: 10px 0; - } - - .container { - margin: 30px auto; - max-width: 100%; - width: 500px; - } - - .container h2 { - font-weight: 300; - } - - .container p { - text-align: center; - } - - .centered { - display: flex; - justify-content: center; - } - - .centered button { - transform: scale(1.3); - margin: 15px; +* { + box-sizing: border-box; + } + + body { + background-color: rgb(219, 213, 213); + font-family: Arial, Helvetica, sans-serif; + margin: 0; + } + + button { + cursor: pointer; + } + + button:active { + transform: scale(0.95); + } + + input:focus, + button:focus { + outline: none; + } + + header { + background-position: center center; + color: #000000; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 30px 0; + position: relative; + } + + head:after { + content: ""; + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + background-color: rgba(0, 0, 0, 0.4); + } + + header * { + z-index: 1; + } + + header h1 { + margin: 0 0 30px; + } + + form { + position: relative; + width: 500px; + max-width: 100%; + } + + form input { + border: 0; + border-radius: 50px; + font-size: 16px; + padding: 15px 30px; + width: 100%; + background-color: antiquewhite; + } + + form button { + position: absolute; + top: 2px; + right: 2px; + background-color: rgb(243, 89, 115); + border: 0; + border-radius: 50px; + color: #fff; + font-size: 16px; + padding: 13px 30px; + } + + .btn { + background-color: rgb(243, 89, 115); + border: 0; + border-radius: 10px; + color: #fff; + padding: 4px 10px; + } + + ul.songs { + list-style-type: none; + padding: 0; + } + + ul.songs li { + display: flex; + align-items: center; + justify-content: space-between; + margin: 10px 0; + } + + .container { + margin: 30px auto; + max-width: 100%; + width: 500px; + } + + .container h2 { + font-weight: 300; + } + + .container p { + text-align: center; + } + + .centered { + display: flex; + justify-content: center; + } + + .centered button { + transform: scale(1.3); + margin: 15px; } \ No newline at end of file diff --git a/108 - Places under a Postal Code/index.html b/126 - Postal Code/index.html similarity index 100% rename from 108 - Places under a Postal Code/index.html rename to 126 - Postal Code/index.html diff --git a/108 - Places under a Postal Code/index.js b/126 - Postal Code/index.js similarity index 100% rename from 108 - Places under a Postal Code/index.js rename to 126 - Postal Code/index.js diff --git a/Armstrong Checker/Armstrong.css b/127 - Armstrong Checker/Armstrong.css similarity index 94% rename from Armstrong Checker/Armstrong.css rename to 127 - Armstrong Checker/Armstrong.css index cfbe0fe1..948c8087 100644 --- a/Armstrong Checker/Armstrong.css +++ b/127 - Armstrong Checker/Armstrong.css @@ -1,112 +1,112 @@ -/* Import Google Font - Poppins */ -@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); -*{ - margin: 0; - padding: 0; - box-sizing: border-box; - font-family: 'Poppins', sans-serif; -} -body{ - display: flex; - padding: 0 10px; - background-image: url("bgi.jpg"); - align-items: center; - justify-content: center; - min-height: 100vh; - /* background: #AA57CC; */ - margin-top: 200px; -} -::selection{ - color: #fff; - background: rgb(170,87,204,0.8); -} -.wrapper{ - max-width: 500px; - background: #fff; - border-radius: 7px; - padding: 20px 25px 15px; - box-shadow: 0 15px 40px rgba(0,0,0,0.12); -} -header h1{ - font-size: 27px; - font-weight: 500; -} -header p{ - margin-top: 5px; - font-size: 18px; - color: #474747; -} -.inputs{ - margin: 20px 0 27px; -} -.inputs input{ - width: 100%; - height: 60px; - outline: none; - padding: 0 17px; - font-size: 19px; - border-radius: 5px; - border: 1px solid #999; - transition: 0.1s ease; -} -.inputs input::placeholder{ - color: #999999; -} -.inputs input:focus{ - box-shadow: 0 3px 6px rgba(0,0,0,0.13); -} -.inputs input:focus::placeholder{ - color: #bebebe; -} -.inputs button{ - width: 100%; - height: 56px; - border: none; - opacity: 0.7; - outline: none; - color: #fff; - cursor: pointer; - font-size: 17px; - margin-top: 20px; - border-radius: 5px; - pointer-events: none; - background: #AA57CC; - transition: opacity 0.15s ease; -} -.inputs button.active{ - opacity: 1; - pointer-events: auto; -} -.info-txt{ - display: none; - font-size: 19px; - text-align: center; - margin-bottom: 18px; -} -.info-txt span{ - color: #AA57CC; -} - -@media (max-width: 520px) { - .wrapper{ - padding: 17px 20px 10px; - } - header h1{ - font-size: 25px; - } - header p{ - font-size: 16px; - } - .inputs input{ - height: 54px; - font-size: 17px; - } - .inputs button{ - height: 50px; - font-size: 16px; - margin-top: 17px; - } - .info-txt{ - font-size: 18px; - } -} +/* Import Google Font - Poppins */ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; +} +body{ + display: flex; + padding: 0 10px; + background-image: url("bgi.jpg"); + align-items: center; + justify-content: center; + min-height: 100vh; + /* background: #AA57CC; */ + margin-top: 200px; +} +::selection{ + color: #fff; + background: rgb(170,87,204,0.8); +} +.wrapper{ + max-width: 500px; + background: #fff; + border-radius: 7px; + padding: 20px 25px 15px; + box-shadow: 0 15px 40px rgba(0,0,0,0.12); +} +header h1{ + font-size: 27px; + font-weight: 500; +} +header p{ + margin-top: 5px; + font-size: 18px; + color: #474747; +} +.inputs{ + margin: 20px 0 27px; +} +.inputs input{ + width: 100%; + height: 60px; + outline: none; + padding: 0 17px; + font-size: 19px; + border-radius: 5px; + border: 1px solid #999; + transition: 0.1s ease; +} +.inputs input::placeholder{ + color: #999999; +} +.inputs input:focus{ + box-shadow: 0 3px 6px rgba(0,0,0,0.13); +} +.inputs input:focus::placeholder{ + color: #bebebe; +} +.inputs button{ + width: 100%; + height: 56px; + border: none; + opacity: 0.7; + outline: none; + color: #fff; + cursor: pointer; + font-size: 17px; + margin-top: 20px; + border-radius: 5px; + pointer-events: none; + background: #AA57CC; + transition: opacity 0.15s ease; +} +.inputs button.active{ + opacity: 1; + pointer-events: auto; +} +.info-txt{ + display: none; + font-size: 19px; + text-align: center; + margin-bottom: 18px; +} +.info-txt span{ + color: #AA57CC; +} + +@media (max-width: 520px) { + .wrapper{ + padding: 17px 20px 10px; + } + header h1{ + font-size: 25px; + } + header p{ + font-size: 16px; + } + .inputs input{ + height: 54px; + font-size: 17px; + } + .inputs button{ + height: 50px; + font-size: 16px; + margin-top: 17px; + } + .info-txt{ + font-size: 18px; + } +} diff --git a/Armstrong Checker/Armstrong.html b/127 - Armstrong Checker/Armstrong.html similarity index 96% rename from Armstrong Checker/Armstrong.html rename to 127 - Armstrong Checker/Armstrong.html index 692e79de..f6720ab4 100644 --- a/Armstrong Checker/Armstrong.html +++ b/127 - Armstrong Checker/Armstrong.html @@ -1,24 +1,24 @@ - - - - - - Armstrong Checker in JavaScript - - - - -
-
-

Armstrong Checker

-

Enter any number here to know whether it is Armstrong or not!!

-
-
- - -
-

-
- - + + + + + + Armstrong Checker in JavaScript + + + + +
+
+

Armstrong Checker

+

Enter any number here to know whether it is Armstrong or not!!

+
+
+ + +
+

+
+ + \ No newline at end of file diff --git a/Armstrong Checker/Armstrong.js b/127 - Armstrong Checker/Armstrong.js similarity index 95% rename from Armstrong Checker/Armstrong.js rename to 127 - Armstrong Checker/Armstrong.js index 63953736..6ad2fe24 100644 --- a/Armstrong Checker/Armstrong.js +++ b/127 - Armstrong Checker/Armstrong.js @@ -1,58 +1,58 @@ -const txtInput = document.querySelector(".inputs input"), -checkBtn = document.querySelector(".inputs button"), -infoTxt = document.querySelector(".info-txt"); -let filterInput; - - -// javascript program to check if x is a perfect square - -// A utility function that returns true if x is perfect square -function Armstrong(number) - { - var flag,remainder,addition = 0; - - - flag = number; - while(number > 0) - { - remainder = number%10; - addition = addition + remainder*remainder*remainder; - number = parseInt(number/10); - } - - if(addition == flag) - { - return true; - } - else - { - return false; - } - } - - -checkBtn.addEventListener("click", () => { - let n = filterInput; - console.log(typeof n); - - - infoTxt.style.display = "block"; - // if(isString(n)===true){ - // return infoTxt.innerHTML = `Enter a valid input` - // } - // else{ - if(Armstrong(n)===true) { - return infoTxt.innerHTML = `Yes, '${txtInput.value}' is Armstrong number`; - } - infoTxt.innerHTML = `NO, '${txtInput.value}' is not an Armstrong number`; - -}); - -txtInput.addEventListener("keyup", () => { - filterInput = txtInput.value.toLowerCase().replace(/[^A-Z0-9]/ig, ""); - if(filterInput) { - return checkBtn.classList.add("active"); - } - infoTxt.style.display = "none"; - checkBtn.classList.remove("active"); -}); +const txtInput = document.querySelector(".inputs input"), +checkBtn = document.querySelector(".inputs button"), +infoTxt = document.querySelector(".info-txt"); +let filterInput; + + +// javascript program to check if x is a perfect square + +// A utility function that returns true if x is perfect square +function Armstrong(number) + { + var flag,remainder,addition = 0; + + + flag = number; + while(number > 0) + { + remainder = number%10; + addition = addition + remainder*remainder*remainder; + number = parseInt(number/10); + } + + if(addition == flag) + { + return true; + } + else + { + return false; + } + } + + +checkBtn.addEventListener("click", () => { + let n = filterInput; + console.log(typeof n); + + + infoTxt.style.display = "block"; + // if(isString(n)===true){ + // return infoTxt.innerHTML = `Enter a valid input` + // } + // else{ + if(Armstrong(n)===true) { + return infoTxt.innerHTML = `Yes, '${txtInput.value}' is Armstrong number`; + } + infoTxt.innerHTML = `NO, '${txtInput.value}' is not an Armstrong number`; + +}); + +txtInput.addEventListener("keyup", () => { + filterInput = txtInput.value.toLowerCase().replace(/[^A-Z0-9]/ig, ""); + if(filterInput) { + return checkBtn.classList.add("active"); + } + infoTxt.style.display = "none"; + checkBtn.classList.remove("active"); +}); diff --git a/Armstrong Checker/bgi.jpg b/127 - Armstrong Checker/bgi.jpg similarity index 100% rename from Armstrong Checker/bgi.jpg rename to 127 - Armstrong Checker/bgi.jpg diff --git a/Armstrong Checker/readme b/127 - Armstrong Checker/readme similarity index 100% rename from Armstrong Checker/readme rename to 127 - Armstrong Checker/readme diff --git a/Bingo Card Generator/index.html b/128 - Bingo Card Generator/index.html similarity index 100% rename from Bingo Card Generator/index.html rename to 128 - Bingo Card Generator/index.html diff --git a/Bingo Card Generator/readme.md b/128 - Bingo Card Generator/readme.md similarity index 100% rename from Bingo Card Generator/readme.md rename to 128 - Bingo Card Generator/readme.md diff --git a/Bingo Card Generator/script.js b/128 - Bingo Card Generator/script.js similarity index 100% rename from Bingo Card Generator/script.js rename to 128 - Bingo Card Generator/script.js diff --git a/Bingo Card Generator/style.css b/128 - Bingo Card Generator/style.css similarity index 100% rename from Bingo Card Generator/style.css rename to 128 - Bingo Card Generator/style.css diff --git a/DiceGame/Capture.PNG b/129 - Dice Game/Capture.PNG similarity index 100% rename from DiceGame/Capture.PNG rename to 129 - Dice Game/Capture.PNG diff --git a/DiceGame/README.md b/129 - Dice Game/README.md similarity index 100% rename from DiceGame/README.md rename to 129 - Dice Game/README.md diff --git a/DiceGame/index.html b/129 - Dice Game/index.html similarity index 100% rename from DiceGame/index.html rename to 129 - Dice Game/index.html diff --git a/DiceGame/script.js b/129 - Dice Game/script.js similarity index 100% rename from DiceGame/script.js rename to 129 - Dice Game/script.js diff --git a/DiceGame/style.css b/129 - Dice Game/style.css similarity index 100% rename from DiceGame/style.css rename to 129 - Dice Game/style.css diff --git a/Get-mouse-position/Readme b/130 - Get Mouse Position/Readme similarity index 100% rename from Get-mouse-position/Readme rename to 130 - Get Mouse Position/Readme diff --git a/Get-mouse-position/index.html b/130 - Get Mouse Position/index.html similarity index 96% rename from Get-mouse-position/index.html rename to 130 - Get Mouse Position/index.html index e46e6e17..d7e0c186 100644 --- a/Get-mouse-position/index.html +++ b/130 - Get Mouse Position/index.html @@ -1,14 +1,14 @@ - - - - - - - Position of mouse - - - -
Move the mouse to get the cooridinates
- - + + + + + + + Position of mouse + + + +
Move the mouse to get the cooridinates
+ + \ No newline at end of file diff --git a/Get-mouse-position/script.js b/130 - Get Mouse Position/script.js similarity index 97% rename from Get-mouse-position/script.js rename to 130 - Get Mouse Position/script.js index 3402c3e5..e4ba3467 100644 --- a/Get-mouse-position/script.js +++ b/130 - Get Mouse Position/script.js @@ -1,6 +1,6 @@ -let output = document.getElementById("output"); -window.addEventListener("mousemove",(e)=>{ - let xPos=e.clientX; - let yPos=e.clientY; - output.innerHTML=`
X:${xPos}px
Y:${yPos}px
`; +let output = document.getElementById("output"); +window.addEventListener("mousemove",(e)=>{ + let xPos=e.clientX; + let yPos=e.clientY; + output.innerHTML=`
X:${xPos}px
Y:${yPos}px
`; }) \ No newline at end of file diff --git a/Get-mouse-position/style.css b/130 - Get Mouse Position/style.css similarity index 94% rename from Get-mouse-position/style.css rename to 130 - Get Mouse Position/style.css index 6b65e0df..7cb6ff89 100644 --- a/Get-mouse-position/style.css +++ b/130 - Get Mouse Position/style.css @@ -1,30 +1,30 @@ -*{ - padding: 0; - margin: 0; - box-sizing: border-box; -} - -body{ - height: 100vh; - background: linear-gradient(#FD5D5D 50%, #ffffff 50%); -} -#output{ - background-color: #ffffff; - width: 80vmin; - max-width: 500px; - padding: 50px 30px; - position: absolute; - transform: translate(-50%,-50%); - top: 50%; - left: 50%; - text-align: center; - border-radius: 8px; - box-shadow: 0 20px 50px rgba(4, 1, 22, 0.12); - -} -#output div{ - margin: 16px 0; -} -span{ - color: #7861f8; +*{ + padding: 0; + margin: 0; + box-sizing: border-box; +} + +body{ + height: 100vh; + background: linear-gradient(#FD5D5D 50%, #ffffff 50%); +} +#output{ + background-color: #ffffff; + width: 80vmin; + max-width: 500px; + padding: 50px 30px; + position: absolute; + transform: translate(-50%,-50%); + top: 50%; + left: 50%; + text-align: center; + border-radius: 8px; + box-shadow: 0 20px 50px rgba(4, 1, 22, 0.12); + +} +#output div{ + margin: 16px 0; +} +span{ + color: #7861f8; } \ No newline at end of file diff --git a/Guess Number By Speech/README.md b/131 - Guess Number by Speech/README.md similarity index 100% rename from Guess Number By Speech/README.md rename to 131 - Guess Number by Speech/README.md diff --git a/Guess Number By Speech/css/style.css b/131 - Guess Number by Speech/css/style.css similarity index 100% rename from Guess Number By Speech/css/style.css rename to 131 - Guess Number by Speech/css/style.css diff --git a/Guess Number By Speech/img/add-read.png b/131 - Guess Number by Speech/img/add-read.png similarity index 100% rename from Guess Number By Speech/img/add-read.png rename to 131 - Guess Number by Speech/img/add-read.png diff --git a/Guess Number By Speech/img/bg.jpg b/131 - Guess Number by Speech/img/bg.jpg similarity index 100% rename from Guess Number By Speech/img/bg.jpg rename to 131 - Guess Number by Speech/img/bg.jpg diff --git a/Guess Number By Speech/img/mic.png b/131 - Guess Number by Speech/img/mic.png similarity index 100% rename from Guess Number By Speech/img/mic.png rename to 131 - Guess Number by Speech/img/mic.png diff --git a/Guess Number By Speech/img/ss1.jpeg b/131 - Guess Number by Speech/img/ss1.jpeg similarity index 100% rename from Guess Number By Speech/img/ss1.jpeg rename to 131 - Guess Number by Speech/img/ss1.jpeg diff --git a/Guess Number By Speech/img/ss2.jpeg b/131 - Guess Number by Speech/img/ss2.jpeg similarity index 100% rename from Guess Number By Speech/img/ss2.jpeg rename to 131 - Guess Number by Speech/img/ss2.jpeg diff --git a/Guess Number By Speech/index.html b/131 - Guess Number by Speech/index.html similarity index 100% rename from Guess Number By Speech/index.html rename to 131 - Guess Number by Speech/index.html diff --git a/Guess Number By Speech/js/script.js b/131 - Guess Number by Speech/js/script.js similarity index 100% rename from Guess Number By Speech/js/script.js rename to 131 - Guess Number by Speech/js/script.js diff --git a/Leap Year Checker/leap.html b/132 - Leap Year Checker/leap.html similarity index 96% rename from Leap Year Checker/leap.html rename to 132 - Leap Year Checker/leap.html index 0f40147f..49eb8681 100644 --- a/Leap Year Checker/leap.html +++ b/132 - Leap Year Checker/leap.html @@ -1,126 +1,126 @@ - - - - - - - - Leap Year Checker - - - - -
- -
- - -
-
- -
-
- - - - - - + + + + + + + + Leap Year Checker + + + + +
+ +
+ + +
+
+ +
+
+ + + + + + \ No newline at end of file diff --git a/Leap Year Checker/leap.png b/132 - Leap Year Checker/leap.png similarity index 100% rename from Leap Year Checker/leap.png rename to 132 - Leap Year Checker/leap.png diff --git a/Leap Year Checker/leap2.png b/132 - Leap Year Checker/leap2.png similarity index 100% rename from Leap Year Checker/leap2.png rename to 132 - Leap Year Checker/leap2.png diff --git a/Leap Year Checker/readme b/132 - Leap Year Checker/readme similarity index 100% rename from Leap Year Checker/readme rename to 132 - Leap Year Checker/readme diff --git a/133-CoinTossGame/README.md b/133 - Coin Toss Game/README.md similarity index 100% rename from 133-CoinTossGame/README.md rename to 133 - Coin Toss Game/README.md diff --git a/133-CoinTossGame/index.css b/133 - Coin Toss Game/index.css similarity index 100% rename from 133-CoinTossGame/index.css rename to 133 - Coin Toss Game/index.css diff --git a/133-CoinTossGame/index.html b/133 - Coin Toss Game/index.html similarity index 100% rename from 133-CoinTossGame/index.html rename to 133 - Coin Toss Game/index.html diff --git a/133-CoinTossGame/index.js b/133 - Coin Toss Game/index.js similarity index 100% rename from 133-CoinTossGame/index.js rename to 133 - Coin Toss Game/index.js diff --git a/134 - Stack_Game/Code/index.html b/134 - Stack Game/Code/index.html similarity index 100% rename from 134 - Stack_Game/Code/index.html rename to 134 - Stack Game/Code/index.html diff --git a/134 - Stack_Game/Code/script.js b/134 - Stack Game/Code/script.js similarity index 100% rename from 134 - Stack_Game/Code/script.js rename to 134 - Stack Game/Code/script.js diff --git a/134 - Stack_Game/Code/style.css b/134 - Stack Game/Code/style.css similarity index 100% rename from 134 - Stack_Game/Code/style.css rename to 134 - Stack Game/Code/style.css diff --git a/134 - Stack_Game/README.md b/134 - Stack Game/README.md similarity index 100% rename from 134 - Stack_Game/README.md rename to 134 - Stack Game/README.md diff --git a/134 - Stack_Game/assets/stack-demoo.gif b/134 - Stack Game/assets/stack-demoo.gif similarity index 100% rename from 134 - Stack_Game/assets/stack-demoo.gif rename to 134 - Stack Game/assets/stack-demoo.gif diff --git a/137 - Loading CrashAnimation/index.html b/137 - Loading Crash Animation/index.html similarity index 100% rename from 137 - Loading CrashAnimation/index.html rename to 137 - Loading Crash Animation/index.html diff --git a/137 - Loading CrashAnimation/preview.gif b/137 - Loading Crash Animation/preview.gif similarity index 100% rename from 137 - Loading CrashAnimation/preview.gif rename to 137 - Loading Crash Animation/preview.gif diff --git a/137 - Loading CrashAnimation/script.js b/137 - Loading Crash Animation/script.js similarity index 100% rename from 137 - Loading CrashAnimation/script.js rename to 137 - Loading Crash Animation/script.js diff --git a/137 - Loading CrashAnimation/style.css b/137 - Loading Crash Animation/style.css similarity index 100% rename from 137 - Loading CrashAnimation/style.css rename to 137 - Loading Crash Animation/style.css diff --git a/136 - Meditation WebApp/assets/audio/meditation.mp3 b/138 - Meditation WebApp/assets/audio/meditation.mp3 similarity index 100% rename from 136 - Meditation WebApp/assets/audio/meditation.mp3 rename to 138 - Meditation WebApp/assets/audio/meditation.mp3 diff --git a/136 - Meditation WebApp/assets/img/10min.png b/138 - Meditation WebApp/assets/img/10min.png similarity index 100% rename from 136 - Meditation WebApp/assets/img/10min.png rename to 138 - Meditation WebApp/assets/img/10min.png diff --git a/136 - Meditation WebApp/assets/img/20min.png b/138 - Meditation WebApp/assets/img/20min.png similarity index 100% rename from 136 - Meditation WebApp/assets/img/20min.png rename to 138 - Meditation WebApp/assets/img/20min.png diff --git a/136 - Meditation WebApp/assets/img/2min.png b/138 - Meditation WebApp/assets/img/2min.png similarity index 100% rename from 136 - Meditation WebApp/assets/img/2min.png rename to 138 - Meditation WebApp/assets/img/2min.png diff --git a/136 - Meditation WebApp/assets/img/5min.png b/138 - Meditation WebApp/assets/img/5min.png similarity index 100% rename from 136 - Meditation WebApp/assets/img/5min.png rename to 138 - Meditation WebApp/assets/img/5min.png diff --git a/136 - Meditation WebApp/assets/img/autumn.png b/138 - Meditation WebApp/assets/img/autumn.png similarity index 100% rename from 136 - Meditation WebApp/assets/img/autumn.png rename to 138 - Meditation WebApp/assets/img/autumn.png diff --git a/136 - Meditation WebApp/assets/img/pause-button.png b/138 - Meditation WebApp/assets/img/pause-button.png similarity index 100% rename from 136 - Meditation WebApp/assets/img/pause-button.png rename to 138 - Meditation WebApp/assets/img/pause-button.png diff --git a/136 - Meditation WebApp/assets/img/play-button.png b/138 - Meditation WebApp/assets/img/play-button.png similarity index 100% rename from 136 - Meditation WebApp/assets/img/play-button.png rename to 138 - Meditation WebApp/assets/img/play-button.png diff --git a/136 - Meditation WebApp/assets/img/right-arrow.png b/138 - Meditation WebApp/assets/img/right-arrow.png similarity index 100% rename from 136 - Meditation WebApp/assets/img/right-arrow.png rename to 138 - Meditation WebApp/assets/img/right-arrow.png diff --git a/136 - Meditation WebApp/assets/img/spring.png b/138 - Meditation WebApp/assets/img/spring.png similarity index 100% rename from 136 - Meditation WebApp/assets/img/spring.png rename to 138 - Meditation WebApp/assets/img/spring.png diff --git a/136 - Meditation WebApp/assets/img/square-outline.svg b/138 - Meditation WebApp/assets/img/square-outline.svg similarity index 97% rename from 136 - Meditation WebApp/assets/img/square-outline.svg rename to 138 - Meditation WebApp/assets/img/square-outline.svg index fe4be5b0..c162dc6e 100644 --- a/136 - Meditation WebApp/assets/img/square-outline.svg +++ b/138 - Meditation WebApp/assets/img/square-outline.svg @@ -1,3 +1,3 @@ - - - + + + diff --git a/136 - Meditation WebApp/assets/img/summer.png b/138 - Meditation WebApp/assets/img/summer.png similarity index 100% rename from 136 - Meditation WebApp/assets/img/summer.png rename to 138 - Meditation WebApp/assets/img/summer.png diff --git a/136 - Meditation WebApp/assets/img/winter.png b/138 - Meditation WebApp/assets/img/winter.png similarity index 100% rename from 136 - Meditation WebApp/assets/img/winter.png rename to 138 - Meditation WebApp/assets/img/winter.png diff --git a/136 - Meditation WebApp/assets/video/autumn.mp4 b/138 - Meditation WebApp/assets/video/autumn.mp4 similarity index 100% rename from 136 - Meditation WebApp/assets/video/autumn.mp4 rename to 138 - Meditation WebApp/assets/video/autumn.mp4 diff --git a/136 - Meditation WebApp/assets/video/spring.mp4 b/138 - Meditation WebApp/assets/video/spring.mp4 similarity index 100% rename from 136 - Meditation WebApp/assets/video/spring.mp4 rename to 138 - Meditation WebApp/assets/video/spring.mp4 diff --git a/136 - Meditation WebApp/assets/video/summer.mp4 b/138 - Meditation WebApp/assets/video/summer.mp4 similarity index 100% rename from 136 - Meditation WebApp/assets/video/summer.mp4 rename to 138 - Meditation WebApp/assets/video/summer.mp4 diff --git a/136 - Meditation WebApp/assets/video/winter.mp4 b/138 - Meditation WebApp/assets/video/winter.mp4 similarity index 100% rename from 136 - Meditation WebApp/assets/video/winter.mp4 rename to 138 - Meditation WebApp/assets/video/winter.mp4 diff --git a/136 - Meditation WebApp/assets/video1/autumn.mp4 b/138 - Meditation WebApp/assets/video1/autumn.mp4 similarity index 100% rename from 136 - Meditation WebApp/assets/video1/autumn.mp4 rename to 138 - Meditation WebApp/assets/video1/autumn.mp4 diff --git a/136 - Meditation WebApp/assets/video1/spring.mp4 b/138 - Meditation WebApp/assets/video1/spring.mp4 similarity index 100% rename from 136 - Meditation WebApp/assets/video1/spring.mp4 rename to 138 - Meditation WebApp/assets/video1/spring.mp4 diff --git a/136 - Meditation WebApp/assets/video1/summer.mp4 b/138 - Meditation WebApp/assets/video1/summer.mp4 similarity index 100% rename from 136 - Meditation WebApp/assets/video1/summer.mp4 rename to 138 - Meditation WebApp/assets/video1/summer.mp4 diff --git a/136 - Meditation WebApp/assets/video1/winter.mp4 b/138 - Meditation WebApp/assets/video1/winter.mp4 similarity index 100% rename from 136 - Meditation WebApp/assets/video1/winter.mp4 rename to 138 - Meditation WebApp/assets/video1/winter.mp4 diff --git a/136 - Meditation WebApp/css/style.css b/138 - Meditation WebApp/css/style.css similarity index 93% rename from 136 - Meditation WebApp/css/style.css rename to 138 - Meditation WebApp/css/style.css index 076b0466..445570c1 100644 --- a/136 - Meditation WebApp/css/style.css +++ b/138 - Meditation WebApp/css/style.css @@ -1,239 +1,239 @@ -/* GENERAL CSS */ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -/* VIDEO */ -.video { - width: 100vw; - height: 100vh; - - position: fixed; - top: 0; - left: 0; - - z-index: -1; -} - -.video video { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - - min-width: 100%; - min-height: 100%; -} - -/* APP */ -.app { - width: 100vw; - height: 100vh; - display: grid; - grid-template-areas: - "a a a a s s" - "a a a a s s" - "d d d d s s" - "d d d d s s"; - - transition: opacity 500ms ease-in-out; -} -.inactive { - opacity: 0; -} - -/* AUDIO */ -.audio { - grid-area: a; - display: flex; - align-items: center; - justify-content: center; -} -.audio img { - width: 50px; - cursor: pointer; -} -.audio .progress { - width: 200px; - height: 200px; - - position: relative; - - margin: 0 40px; -} -.audio .progress svg { - width: 200px; - height: 200px; - - transform: rotate(45deg); - - position: absolute; - z-index: -1; -} -.audio .progress .audio-remaining-time { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - - color: #fff; - font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; - font-size: 2rem; - font-weight: bold; -} -/* DURATIONS */ -.durations { - grid-area: d; - - display: flex; - justify-content: space-around; - align-items: center; - - padding: 0 25%; -} -.durations .duration { - display: flex; - flex-direction: column; - align-items: center; -} -.durations .duration img { - width: 75px; - cursor: pointer; - - filter: drop-shadow(0px 0px 15px #222); -} -.durations .duration p { - font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; - font-size: 1.1rem; - font-weight: bold; - - color: #fff; - - margin-top: 5px; - - text-shadow: 0px 0px 15px #222; -} -/* SEASONS */ -.seasons { - grid-area: s; - display: flex; - flex-direction: column; - align-items: center; - justify-content: space-around; - padding: 40% 0; -} -.seasons .season img { - width: 75px; - cursor: pointer; - filter: drop-shadow(0px 0px 15px #222); -} - -/* TOGGLE MENU */ -.toggle-menu { - display: none; -} - -/* FOR SMALL SCREENS */ -@media screen and (max-width: 600px) { - /* VIDEO */ - .video video { - height: 100%; - } - - /* APP */ - .app { - grid-template-areas: - "a" - "a" - "a" - "d"; - } - - /* AUDIO */ - .audio .progress { - width: 175px; - height: 175px; - - margin: 0 10px; - } - .audio .play img, - .pause img { - width: 40px; - } - .audio .progress svg { - width: 175px; - height: 175px; - } - .audio .progress .rect1, - .rect { - width: 125px; - height: 125px; - } - .audio .progress .audio-remaining-time { - font-size: 1.75rem; - } - - /* DURATIONS */ - .durations { - padding: 0 10%; - } - .durations .duration img { - width: 60px; - } - .durations .duration p { - font-size: 1rem; - } - - /* SEASONS */ - .seasons { - position: absolute; - top: 20px; - left: -250px; - padding: 5px; - - flex-direction: row; - - background-color: #fff; - - border-radius: 0 5px 5px 0; - - transition: left 500ms ease-in-out; - } - .open { - left: 0px; - } - .seasons .season { - margin-left: 10px; - } - .seasons .season img { - width: 50px; - filter: none; - } - - /* TOGGLE MENU */ - .toggle-menu { - display: flex; - align-items: center; - justify-content: center; - - padding: 5px; - - margin-left: 10px; - - border-radius: 50%; - - transition: all 500ms ease-in-out; - } - .rotate { - transform: rotate(180deg); - } - .toggle-menu:hover { - background-color: rgba(0, 0, 0, 0.2); - cursor: pointer; - } - .toggle-menu img { - width: 20px; - } -} +/* GENERAL CSS */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* VIDEO */ +.video { + width: 100vw; + height: 100vh; + + position: fixed; + top: 0; + left: 0; + + z-index: -1; +} + +.video video { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + + min-width: 100%; + min-height: 100%; +} + +/* APP */ +.app { + width: 100vw; + height: 100vh; + display: grid; + grid-template-areas: + "a a a a s s" + "a a a a s s" + "d d d d s s" + "d d d d s s"; + + transition: opacity 500ms ease-in-out; +} +.inactive { + opacity: 0; +} + +/* AUDIO */ +.audio { + grid-area: a; + display: flex; + align-items: center; + justify-content: center; +} +.audio img { + width: 50px; + cursor: pointer; +} +.audio .progress { + width: 200px; + height: 200px; + + position: relative; + + margin: 0 40px; +} +.audio .progress svg { + width: 200px; + height: 200px; + + transform: rotate(45deg); + + position: absolute; + z-index: -1; +} +.audio .progress .audio-remaining-time { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + + color: #fff; + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + font-size: 2rem; + font-weight: bold; +} +/* DURATIONS */ +.durations { + grid-area: d; + + display: flex; + justify-content: space-around; + align-items: center; + + padding: 0 25%; +} +.durations .duration { + display: flex; + flex-direction: column; + align-items: center; +} +.durations .duration img { + width: 75px; + cursor: pointer; + + filter: drop-shadow(0px 0px 15px #222); +} +.durations .duration p { + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + font-size: 1.1rem; + font-weight: bold; + + color: #fff; + + margin-top: 5px; + + text-shadow: 0px 0px 15px #222; +} +/* SEASONS */ +.seasons { + grid-area: s; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; + padding: 40% 0; +} +.seasons .season img { + width: 75px; + cursor: pointer; + filter: drop-shadow(0px 0px 15px #222); +} + +/* TOGGLE MENU */ +.toggle-menu { + display: none; +} + +/* FOR SMALL SCREENS */ +@media screen and (max-width: 600px) { + /* VIDEO */ + .video video { + height: 100%; + } + + /* APP */ + .app { + grid-template-areas: + "a" + "a" + "a" + "d"; + } + + /* AUDIO */ + .audio .progress { + width: 175px; + height: 175px; + + margin: 0 10px; + } + .audio .play img, + .pause img { + width: 40px; + } + .audio .progress svg { + width: 175px; + height: 175px; + } + .audio .progress .rect1, + .rect { + width: 125px; + height: 125px; + } + .audio .progress .audio-remaining-time { + font-size: 1.75rem; + } + + /* DURATIONS */ + .durations { + padding: 0 10%; + } + .durations .duration img { + width: 60px; + } + .durations .duration p { + font-size: 1rem; + } + + /* SEASONS */ + .seasons { + position: absolute; + top: 20px; + left: -250px; + padding: 5px; + + flex-direction: row; + + background-color: #fff; + + border-radius: 0 5px 5px 0; + + transition: left 500ms ease-in-out; + } + .open { + left: 0px; + } + .seasons .season { + margin-left: 10px; + } + .seasons .season img { + width: 50px; + filter: none; + } + + /* TOGGLE MENU */ + .toggle-menu { + display: flex; + align-items: center; + justify-content: center; + + padding: 5px; + + margin-left: 10px; + + border-radius: 50%; + + transition: all 500ms ease-in-out; + } + .rotate { + transform: rotate(180deg); + } + .toggle-menu:hover { + background-color: rgba(0, 0, 0, 0.2); + cursor: pointer; + } + .toggle-menu img { + width: 20px; + } +} diff --git a/136 - Meditation WebApp/index.html b/138 - Meditation WebApp/index.html similarity index 97% rename from 136 - Meditation WebApp/index.html rename to 138 - Meditation WebApp/index.html index 085e6d6e..79f7a0ea 100644 --- a/136 - Meditation WebApp/index.html +++ b/138 - Meditation WebApp/index.html @@ -1,86 +1,86 @@ - - - - - - - Meditation App - - - -
- -
- -
-
- -
- pause -
-
- - - - - - -
- 00:00 -
-
-
- play -
-
-
-
- 10 s -

10 s

-
-
- 2 min -

2 min

-
-
- 5 min -

5 min

-
-
- 10 min -

10 min

-
-
- 20 min -

20 min

-
-
-
-
- winter -
-
- spring -
-
- summer -
-
- autumn -
-
- open menu -
-
-
- - - - - - + + + + + + + Meditation App + + + +
+ +
+ +
+
+ +
+ pause +
+
+ + + + + + +
+ 00:00 +
+
+
+ play +
+
+
+
+ 10 s +

10 s

+
+
+ 2 min +

2 min

+
+
+ 5 min +

5 min

+
+
+ 10 min +

10 min

+
+
+ 20 min +

20 min

+
+
+
+
+ winter +
+
+ spring +
+
+ summer +
+
+ autumn +
+
+ open menu +
+
+
+ + + + + + \ No newline at end of file diff --git a/136 - Meditation WebApp/js/app.js b/138 - Meditation WebApp/js/app.js similarity index 96% rename from 136 - Meditation WebApp/js/app.js rename to 138 - Meditation WebApp/js/app.js index dba0269c..b05ac577 100644 --- a/136 - Meditation WebApp/js/app.js +++ b/138 - Meditation WebApp/js/app.js @@ -1,84 +1,84 @@ -// SELECT PLAY AND PAUSE BUTTON -const play = document.querySelector(".play"), - pause = document.querySelector(".pause"); -// SELECT AUDIO ELEMENT -const audio = document.querySelector(".audio audio"); - -// PLAY AUDIO -play.addEventListener("click", () => { - audio.play(); - update(); -}); -// PAUSE AUDIO -pause.addEventListener("click", () => { - audio.pause(); -}); - -// SELECT SEASONS AND THE VIDEO -const seasons = document.querySelectorAll(".season"), - video = document.querySelector(".video video"); -// CHANGE VIDEO -seasons.forEach((season) => { - season.addEventListener("click", () => { - video.src = season.getAttribute("video-src"); - }); -}); - -// SELECT DURATION BUTTONS -const durations = document.querySelectorAll(".duration"); - -// DEFAULT AUDIO DURATION -let audioDuration = 120; // 2min - -// CHANGE AUDIO DURATION -durations.forEach((duration) => { - duration.addEventListener("click", () => { - audioDuration = duration.getAttribute("audio-duration"); - update(); - }); -}); - -// SELECT RECT and RMAINING TIME ELEMENT -const path = document.querySelector(".rect"), - remainingTimeEl = document.querySelector(".audio-remaining-time"); - -// TOTAL LENGTH OF THE PATH (PERIMETER OF THE RECTANGLE) -const pathLength = path.getTotalLength(); -// SET THE LENGTH OF A DASH TO pathLength -path.style.strokeDasharray = pathLength; - -function update() { - // STOP AUDIO - if (audio.currentTime >= audioDuration) { - audio.pause(); // pause audio - audio.currentTime = 0; // stop audio - } - - // PORTION PLAYED FROM THE AUDIO - let portionPlayed = audio.currentTime / audioDuration; - - // STROKE DASHOFFSET IS PROPOTIONAL TO the portionPlayed - path.style.strokeDashoffset = -portionPlayed * pathLength; - - // CALCULATE REMAINING TIME IN SEC - let remainingTimeInSec = audioDuration - audio.currentTime; - renderRemainingTime(remainingTimeInSec); - - if (!audio.paused) { - requestAnimationFrame(update); - console.log("update"); - } -} -update(); - -// RENDER REMAINING TIME -function renderRemainingTime(timeInSec) { - let min = Math.floor(timeInSec / 60); - let sec = Math.floor(timeInSec % 60); - - // IF min/sec is a single digit(ex:9) we add a zero before the digit. (ex: 9 becomes 09) - min = min < 10 ? `0${min}` : min; - sec = sec < 10 ? `0${sec}` : sec; - - remainingTimeEl.innerHTML = `${min}:${sec}`; -} +// SELECT PLAY AND PAUSE BUTTON +const play = document.querySelector(".play"), + pause = document.querySelector(".pause"); +// SELECT AUDIO ELEMENT +const audio = document.querySelector(".audio audio"); + +// PLAY AUDIO +play.addEventListener("click", () => { + audio.play(); + update(); +}); +// PAUSE AUDIO +pause.addEventListener("click", () => { + audio.pause(); +}); + +// SELECT SEASONS AND THE VIDEO +const seasons = document.querySelectorAll(".season"), + video = document.querySelector(".video video"); +// CHANGE VIDEO +seasons.forEach((season) => { + season.addEventListener("click", () => { + video.src = season.getAttribute("video-src"); + }); +}); + +// SELECT DURATION BUTTONS +const durations = document.querySelectorAll(".duration"); + +// DEFAULT AUDIO DURATION +let audioDuration = 120; // 2min + +// CHANGE AUDIO DURATION +durations.forEach((duration) => { + duration.addEventListener("click", () => { + audioDuration = duration.getAttribute("audio-duration"); + update(); + }); +}); + +// SELECT RECT and RMAINING TIME ELEMENT +const path = document.querySelector(".rect"), + remainingTimeEl = document.querySelector(".audio-remaining-time"); + +// TOTAL LENGTH OF THE PATH (PERIMETER OF THE RECTANGLE) +const pathLength = path.getTotalLength(); +// SET THE LENGTH OF A DASH TO pathLength +path.style.strokeDasharray = pathLength; + +function update() { + // STOP AUDIO + if (audio.currentTime >= audioDuration) { + audio.pause(); // pause audio + audio.currentTime = 0; // stop audio + } + + // PORTION PLAYED FROM THE AUDIO + let portionPlayed = audio.currentTime / audioDuration; + + // STROKE DASHOFFSET IS PROPOTIONAL TO the portionPlayed + path.style.strokeDashoffset = -portionPlayed * pathLength; + + // CALCULATE REMAINING TIME IN SEC + let remainingTimeInSec = audioDuration - audio.currentTime; + renderRemainingTime(remainingTimeInSec); + + if (!audio.paused) { + requestAnimationFrame(update); + console.log("update"); + } +} +update(); + +// RENDER REMAINING TIME +function renderRemainingTime(timeInSec) { + let min = Math.floor(timeInSec / 60); + let sec = Math.floor(timeInSec % 60); + + // IF min/sec is a single digit(ex:9) we add a zero before the digit. (ex: 9 becomes 09) + min = min < 10 ? `0${min}` : min; + sec = sec < 10 ? `0${sec}` : sec; + + remainingTimeEl.innerHTML = `${min}:${sec}`; +} diff --git a/136 - Meditation WebApp/js/hide-buttons.js b/138 - Meditation WebApp/js/hide-buttons.js similarity index 95% rename from 136 - Meditation WebApp/js/hide-buttons.js rename to 138 - Meditation WebApp/js/hide-buttons.js index 7169a771..6272ec7e 100644 --- a/136 - Meditation WebApp/js/hide-buttons.js +++ b/138 - Meditation WebApp/js/hide-buttons.js @@ -1,38 +1,38 @@ -const app = document.querySelector(".app"); - -// AMOUNT OF TIME TO CONSIDER USER INACTIVE -const inactiveTime = 3000; // 3sec - -// LAST TIME THE MOUSE HAS MOVED -let mouseLastMoveTime = new Date(); - -// LISTEN FOR MOUSE MOVE -document.addEventListener("mousemove", () => { - // RESET LAST TIME THE MOUSE HAS MOVED - mouseLastMoveTime = new Date(); - - // SHOW APP - app.classList.remove("inactive"); - - // SHOW CURSOR - document.body.style.cursor = "auto"; -}); - -// DEACTIVATE APP -function deactivateApp() { - // Check if the user was inactive for a certain amount of time - let now = new Date(); - let deltaTime = now - mouseLastMoveTime; - - if (deltaTime >= inactiveTime) { - // HIDE APP - app.classList.add("inactive"); - - // HIDE CURSOR - document.body.style.cursor = "none"; - } - - // LOOP - requestAnimationFrame(deactivateApp); -} -deactivateApp(); +const app = document.querySelector(".app"); + +// AMOUNT OF TIME TO CONSIDER USER INACTIVE +const inactiveTime = 3000; // 3sec + +// LAST TIME THE MOUSE HAS MOVED +let mouseLastMoveTime = new Date(); + +// LISTEN FOR MOUSE MOVE +document.addEventListener("mousemove", () => { + // RESET LAST TIME THE MOUSE HAS MOVED + mouseLastMoveTime = new Date(); + + // SHOW APP + app.classList.remove("inactive"); + + // SHOW CURSOR + document.body.style.cursor = "auto"; +}); + +// DEACTIVATE APP +function deactivateApp() { + // Check if the user was inactive for a certain amount of time + let now = new Date(); + let deltaTime = now - mouseLastMoveTime; + + if (deltaTime >= inactiveTime) { + // HIDE APP + app.classList.add("inactive"); + + // HIDE CURSOR + document.body.style.cursor = "none"; + } + + // LOOP + requestAnimationFrame(deactivateApp); +} +deactivateApp(); diff --git a/136 - Meditation WebApp/js/toggle-seasons-menu.js b/138 - Meditation WebApp/js/toggle-seasons-menu.js similarity index 97% rename from 136 - Meditation WebApp/js/toggle-seasons-menu.js rename to 138 - Meditation WebApp/js/toggle-seasons-menu.js index d6c4c7fe..e71dbab5 100644 --- a/136 - Meditation WebApp/js/toggle-seasons-menu.js +++ b/138 - Meditation WebApp/js/toggle-seasons-menu.js @@ -1,7 +1,7 @@ -const openMenuBtn = document.querySelector(".toggle-menu"), - seasonsMenu = document.querySelector(".seasons"); - -openMenuBtn.addEventListener("click", () => { - seasonsMenu.classList.toggle("open"); - openMenuBtn.classList.toggle("rotate"); -}); +const openMenuBtn = document.querySelector(".toggle-menu"), + seasonsMenu = document.querySelector(".seasons"); + +openMenuBtn.addEventListener("click", () => { + seasonsMenu.classList.toggle("open"); + openMenuBtn.classList.toggle("rotate"); +}); diff --git a/136 - Meditation WebApp/preview.jpg b/138 - Meditation WebApp/preview.jpg similarity index 100% rename from 136 - Meditation WebApp/preview.jpg rename to 138 - Meditation WebApp/preview.jpg diff --git "a/Love Calculator\360\237\222\226/index.html" b/140 - Love Calculator/index.html similarity index 100% rename from "Love Calculator\360\237\222\226/index.html" rename to 140 - Love Calculator/index.html diff --git "a/Love Calculator\360\237\222\226/readme.md" b/140 - Love Calculator/readme.md similarity index 100% rename from "Love Calculator\360\237\222\226/readme.md" rename to 140 - Love Calculator/readme.md diff --git "a/Love Calculator\360\237\222\226/script.js" b/140 - Love Calculator/script.js similarity index 100% rename from "Love Calculator\360\237\222\226/script.js" rename to 140 - Love Calculator/script.js diff --git "a/Love Calculator\360\237\222\226/style.css" b/140 - Love Calculator/style.css similarity index 100% rename from "Love Calculator\360\237\222\226/style.css" rename to 140 - Love Calculator/style.css diff --git a/luminosity particle js/app.js b/141 - Luminosity Particle Js/app.js similarity index 100% rename from luminosity particle js/app.js rename to 141 - Luminosity Particle Js/app.js diff --git a/luminosity particle js/index.html b/141 - Luminosity Particle Js/index.html similarity index 100% rename from luminosity particle js/index.html rename to 141 - Luminosity Particle Js/index.html diff --git a/luminosity particle js/style.css b/141 - Luminosity Particle Js/style.css similarity index 100% rename from luminosity particle js/style.css rename to 141 - Luminosity Particle Js/style.css diff --git a/Magic 8 Ball/Readme.md b/142 - Magic 8 Ball/Readme.md similarity index 100% rename from Magic 8 Ball/Readme.md rename to 142 - Magic 8 Ball/Readme.md diff --git a/Magic 8 Ball/assets/8ball.png b/142 - Magic 8 Ball/assets/8ball.png similarity index 100% rename from Magic 8 Ball/assets/8ball.png rename to 142 - Magic 8 Ball/assets/8ball.png diff --git a/Magic 8 Ball/assets/answer.png b/142 - Magic 8 Ball/assets/answer.png similarity index 100% rename from Magic 8 Ball/assets/answer.png rename to 142 - Magic 8 Ball/assets/answer.png diff --git a/Magic 8 Ball/index.html b/142 - Magic 8 Ball/index.html similarity index 100% rename from Magic 8 Ball/index.html rename to 142 - Magic 8 Ball/index.html diff --git a/Magic 8 Ball/script/script.js b/142 - Magic 8 Ball/script/script.js similarity index 100% rename from Magic 8 Ball/script/script.js rename to 142 - Magic 8 Ball/script/script.js diff --git a/Magic 8 Ball/snips/snip1.png b/142 - Magic 8 Ball/snips/snip1.png similarity index 100% rename from Magic 8 Ball/snips/snip1.png rename to 142 - Magic 8 Ball/snips/snip1.png diff --git a/Magic 8 Ball/style/style.css b/142 - Magic 8 Ball/style/style.css similarity index 100% rename from Magic 8 Ball/style/style.css rename to 142 - Magic 8 Ball/style/style.css diff --git a/Movie Ratings Application/index.html b/143 - Movie Ratings Application/index.html similarity index 96% rename from Movie Ratings Application/index.html rename to 143 - Movie Ratings Application/index.html index 88d68935..ae7c13fa 100644 --- a/Movie Ratings Application/index.html +++ b/143 - Movie Ratings Application/index.html @@ -1,23 +1,23 @@ - - - - - - - Movie Ratings - - - - -
-

Movie Ratings based on IMDb

-
-
- -
-
-
-
- - + + + + + + + Movie Ratings + + + + +
+

Movie Ratings based on IMDb

+
+
+ +
+
+
+
+ + \ No newline at end of file diff --git a/Movie Ratings Application/script.js b/143 - Movie Ratings Application/script.js similarity index 96% rename from Movie Ratings Application/script.js rename to 143 - Movie Ratings Application/script.js index aded8538..a8b7fbe3 100644 --- a/Movie Ratings Application/script.js +++ b/143 - Movie Ratings Application/script.js @@ -1,52 +1,52 @@ -function fun(e) -{ - var search=document.getElementById("name").value; - fetch(`https://www.omdbapi.com/?t=${search}&apikey=16ba5256`) - .then(response => response.json()) - .then(data => { - var s = ` - -

Movie Data

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Movie Name${data.Title}
Released date${data.Released}
Genre${data.Genre}
Actors${data.Actors}
Director${data.Director}
Short Note${data.Plot}
Poster - ${data.Title} -
IMDb Rating${data.imdbRating}
`; - document.getElementById("container_1").innerHTML = s; - }) - .catch(error => console.log('error', error)); - e.preventDefault(); +function fun(e) +{ + var search=document.getElementById("name").value; + fetch(`https://www.omdbapi.com/?t=${search}&apikey=16ba5256`) + .then(response => response.json()) + .then(data => { + var s = ` + +

Movie Data

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Movie Name${data.Title}
Released date${data.Released}
Genre${data.Genre}
Actors${data.Actors}
Director${data.Director}
Short Note${data.Plot}
Poster + ${data.Title} +
IMDb Rating${data.imdbRating}
`; + document.getElementById("container_1").innerHTML = s; + }) + .catch(error => console.log('error', error)); + e.preventDefault(); } \ No newline at end of file diff --git a/Movie Ratings Application/style.css b/143 - Movie Ratings Application/style.css similarity index 93% rename from Movie Ratings Application/style.css rename to 143 - Movie Ratings Application/style.css index 370429fd..2eff159b 100644 --- a/Movie Ratings Application/style.css +++ b/143 - Movie Ratings Application/style.css @@ -1,17 +1,17 @@ -.container{ - display: block; - text-align: center; -} -input{ - padding: 20px; - margin: 20px; - border-radius: 7px; - color: blue; -} -input::placeholder{ - color: red; -} -*{ - font-weight: bold; - letter-spacing: 0.1rem; +.container{ + display: block; + text-align: center; +} +input{ + padding: 20px; + margin: 20px; + border-radius: 7px; + color: blue; +} +input::placeholder{ + color: red; +} +*{ + font-weight: bold; + letter-spacing: 0.1rem; } \ No newline at end of file diff --git a/New-Year-Countdown/index.html b/144 - New Year Countdown/index.html similarity index 100% rename from New-Year-Countdown/index.html rename to 144 - New Year Countdown/index.html diff --git a/New-Year-Countdown/script.js b/144 - New Year Countdown/script.js similarity index 100% rename from New-Year-Countdown/script.js rename to 144 - New Year Countdown/script.js diff --git a/New-Year-Countdown/spinner.gif b/144 - New Year Countdown/spinner.gif similarity index 100% rename from New-Year-Countdown/spinner.gif rename to 144 - New Year Countdown/spinner.gif diff --git a/New-Year-Countdown/style.css b/144 - New Year Countdown/style.css similarity index 100% rename from New-Year-Countdown/style.css rename to 144 - New Year Countdown/style.css diff --git a/Number Facts/app.js b/145 - Number Facts/app.js similarity index 97% rename from Number Facts/app.js rename to 145 - Number Facts/app.js index 1c717a6f..1356c799 100644 --- a/Number Facts/app.js +++ b/145 - Number Facts/app.js @@ -1,17 +1,17 @@ -const form = document.querySelector('form'); -const factDiv = document.querySelector('.number-fact'); - -form.addEventListener('submit', (e) => { - e.preventDefault(); - const loadText ="wait a little bit ⌛"; - factDiv.innerHTML = loadText; - const baseURL = "http://numbersapi.com/"; - const number = e.target.querySelector('input[type="number"]').value; - fetch(baseURL + number,{ - headers:{ - 'x-requested-with': 'text/plain' - }}) - .then(response => response.text()) - .then(text => factDiv.innerHTML = text) - .catch(e=>console.log(e)); -}) +const form = document.querySelector('form'); +const factDiv = document.querySelector('.number-fact'); + +form.addEventListener('submit', (e) => { + e.preventDefault(); + const loadText ="wait a little bit ⌛"; + factDiv.innerHTML = loadText; + const baseURL = "http://numbersapi.com/"; + const number = e.target.querySelector('input[type="number"]').value; + fetch(baseURL + number,{ + headers:{ + 'x-requested-with': 'text/plain' + }}) + .then(response => response.text()) + .then(text => factDiv.innerHTML = text) + .catch(e=>console.log(e)); +}) diff --git a/Number Facts/index.html b/145 - Number Facts/index.html similarity index 96% rename from Number Facts/index.html rename to 145 - Number Facts/index.html index f6942ccd..b9770032 100644 --- a/Number Facts/index.html +++ b/145 - Number Facts/index.html @@ -1,21 +1,21 @@ - - - - - - Number Facts - - - -
-
-
- - -
-
Enter a number here to know some intresting info 😎 .
-
-
- - - + + + + + + Number Facts + + + +
+
+
+ + +
+
Enter a number here to know some intresting info 😎 .
+
+
+ + + diff --git a/Number Facts/readme b/145 - Number Facts/readme similarity index 100% rename from Number Facts/readme rename to 145 - Number Facts/readme diff --git a/Number Facts/ss1.png b/145 - Number Facts/ss1.png similarity index 100% rename from Number Facts/ss1.png rename to 145 - Number Facts/ss1.png diff --git a/Number Facts/ss2.png b/145 - Number Facts/ss2.png similarity index 100% rename from Number Facts/ss2.png rename to 145 - Number Facts/ss2.png diff --git a/Number Facts/style.css b/145 - Number Facts/style.css similarity index 94% rename from Number Facts/style.css rename to 145 - Number Facts/style.css index fdbe84b3..89700c59 100644 --- a/Number Facts/style.css +++ b/145 - Number Facts/style.css @@ -1,71 +1,71 @@ -@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap'); -*{ - padding: 0; - margin: 0; - box-sizing: border-box; -} -html{ - font-size: 10px; - font-family: 'Nunito', sans-serif; -} -body{ - background-color: rgb(28, 27, 34); - color: white; - min-height: 100vh; - display: flex; - align-items: center; - justify-content: center; -} -section{ - width: 100%; -} -.container{ - width: 90%; - max-width: 450px; - margin: 0 auto; -} -form,.number-fact{ - width: 100%; - background-color: rgb(42, 41, 42); - padding: 20px; - border-radius: 8px; -} -input[type="number"]{ - width: 70%; - height: 40px; - border-radius: 4px; - outline: none; - border: none; - background-color: #3a3a3b; - font-size: 24px; - color: aliceblue; - padding-left: 10px; -} -input[type="number"]::placeholder{ - font-size: 24px; - font-family: "Nunito"; - font-weight: 400; -} -button{ - display: inline-block; - width: 25%; - font-size: 24px; - height: 40px; - background-color:#3a3a3b; - color: aliceblue; - border: none; - outline: none; - cursor: pointer; - margin-left: 10px; - border-radius: 4px; -} -.number-fact{ - margin-top: 20px; - height: auto; - font-size: 20px; -} -@media only screen and (max-width: 678px){ - form button{ - font-size: 18px; - } +@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap'); +*{ + padding: 0; + margin: 0; + box-sizing: border-box; +} +html{ + font-size: 10px; + font-family: 'Nunito', sans-serif; +} +body{ + background-color: rgb(28, 27, 34); + color: white; + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; +} +section{ + width: 100%; +} +.container{ + width: 90%; + max-width: 450px; + margin: 0 auto; +} +form,.number-fact{ + width: 100%; + background-color: rgb(42, 41, 42); + padding: 20px; + border-radius: 8px; +} +input[type="number"]{ + width: 70%; + height: 40px; + border-radius: 4px; + outline: none; + border: none; + background-color: #3a3a3b; + font-size: 24px; + color: aliceblue; + padding-left: 10px; +} +input[type="number"]::placeholder{ + font-size: 24px; + font-family: "Nunito"; + font-weight: 400; +} +button{ + display: inline-block; + width: 25%; + font-size: 24px; + height: 40px; + background-color:#3a3a3b; + color: aliceblue; + border: none; + outline: none; + cursor: pointer; + margin-left: 10px; + border-radius: 4px; +} +.number-fact{ + margin-top: 20px; + height: auto; + font-size: 20px; +} +@media only screen and (max-width: 678px){ + form button{ + font-size: 18px; + } } \ No newline at end of file diff --git a/Quiz App/index.html b/146 - Quiz App/index.html similarity index 96% rename from Quiz App/index.html rename to 146 - Quiz App/index.html index dfbdcd7e..b1b4d76f 100644 --- a/Quiz App/index.html +++ b/146 - Quiz App/index.html @@ -1,36 +1,36 @@ - - - - - - Quiz App - - - - -
-
-

Question text

-
    -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
-
- -
- - + + + + + + Quiz App + + + + +
+
+

Question text

+
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
+
+ +
+ + diff --git a/Quiz App/script.js b/146 - Quiz App/script.js similarity index 96% rename from Quiz App/script.js rename to 146 - Quiz App/script.js index 6196fd20..eed476cc 100644 --- a/Quiz App/script.js +++ b/146 - Quiz App/script.js @@ -1,100 +1,100 @@ -const quizData = [ - { - question: "What is the most used programming language in 2019?", - a: "Java", - b: "C", - c: "Python", - d: "JavaScript", - correct: "d", - }, - { - question: "Who is the President of US?", - a: "Florin Pop", - b: "Donald Trump", - c: "Ivan Saldano", - d: "Mihai Andrei", - correct: "b", - }, - { - question: "What does HTML stand for?", - a: "Hypertext Markup Language", - b: "Cascading Style Sheet", - c: "Jason Object Notation", - d: "Helicopters Terminals Motorboats Lamborginis", - correct: "a", - }, - { - question: "What year was JavaScript launched?", - a: "1996", - b: "1995", - c: "1994", - d: "none of the above", - correct: "b", - }, -]; - -const quiz = document.getElementById("quiz"); -const answerEls = document.querySelectorAll(".answer"); -const questionEl = document.getElementById("question"); -const a_text = document.getElementById("a_text"); -const b_text = document.getElementById("b_text"); -const c_text = document.getElementById("c_text"); -const d_text = document.getElementById("d_text"); -const submitBtn = document.getElementById("submit"); - -let currentQuiz = 0; -let score = 0; - -loadQuiz(); - -function loadQuiz() { - deselectAnswers(); - - const currentQuizData = quizData[currentQuiz]; - - questionEl.innerText = currentQuizData.question; - a_text.innerText = currentQuizData.a; - b_text.innerText = currentQuizData.b; - c_text.innerText = currentQuizData.c; - d_text.innerText = currentQuizData.d; -} - -function getSelected() { - let answer = undefined; - - answerEls.forEach((answerEl) => { - if (answerEl.checked) { - answer = answerEl.id; - } - }); - - return answer; -} - -function deselectAnswers() { - answerEls.forEach((answerEl) => { - answerEl.checked = false; - }); -} - -submitBtn.addEventListener("click", () => { - // check to see the answer - const answer = getSelected(); - - if (answer) { - if (answer === quizData[currentQuiz].correct) { - score++; - } - - currentQuiz++; - if (currentQuiz < quizData.length) { - loadQuiz(); - } else { - quiz.innerHTML = ` -

You answered correctly at ${score}/${quizData.length} questions.

- - - `; - } - } +const quizData = [ + { + question: "What is the most used programming language in 2019?", + a: "Java", + b: "C", + c: "Python", + d: "JavaScript", + correct: "d", + }, + { + question: "Who is the President of US?", + a: "Florin Pop", + b: "Donald Trump", + c: "Ivan Saldano", + d: "Mihai Andrei", + correct: "b", + }, + { + question: "What does HTML stand for?", + a: "Hypertext Markup Language", + b: "Cascading Style Sheet", + c: "Jason Object Notation", + d: "Helicopters Terminals Motorboats Lamborginis", + correct: "a", + }, + { + question: "What year was JavaScript launched?", + a: "1996", + b: "1995", + c: "1994", + d: "none of the above", + correct: "b", + }, +]; + +const quiz = document.getElementById("quiz"); +const answerEls = document.querySelectorAll(".answer"); +const questionEl = document.getElementById("question"); +const a_text = document.getElementById("a_text"); +const b_text = document.getElementById("b_text"); +const c_text = document.getElementById("c_text"); +const d_text = document.getElementById("d_text"); +const submitBtn = document.getElementById("submit"); + +let currentQuiz = 0; +let score = 0; + +loadQuiz(); + +function loadQuiz() { + deselectAnswers(); + + const currentQuizData = quizData[currentQuiz]; + + questionEl.innerText = currentQuizData.question; + a_text.innerText = currentQuizData.a; + b_text.innerText = currentQuizData.b; + c_text.innerText = currentQuizData.c; + d_text.innerText = currentQuizData.d; +} + +function getSelected() { + let answer = undefined; + + answerEls.forEach((answerEl) => { + if (answerEl.checked) { + answer = answerEl.id; + } + }); + + return answer; +} + +function deselectAnswers() { + answerEls.forEach((answerEl) => { + answerEl.checked = false; + }); +} + +submitBtn.addEventListener("click", () => { + // check to see the answer + const answer = getSelected(); + + if (answer) { + if (answer === quizData[currentQuiz].correct) { + score++; + } + + currentQuiz++; + if (currentQuiz < quizData.length) { + loadQuiz(); + } else { + quiz.innerHTML = ` +

You answered correctly at ${score}/${quizData.length} questions.

+ + + `; + } + } }); \ No newline at end of file diff --git a/Quiz App/style.css b/146 - Quiz App/style.css similarity index 93% rename from Quiz App/style.css rename to 146 - Quiz App/style.css index 8ef65cba..10c35063 100644 --- a/Quiz App/style.css +++ b/146 - Quiz App/style.css @@ -1,70 +1,70 @@ -@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap"); - -* { - box-sizing: border-box; -} - -body { - background-color: #b8c6db; - background-image: linear-gradient(315deg, #b8c6db 0%, #f5f7fa 100%); - display: flex; - align-items: center; - justify-content: center; - font-family: "Poppins", sans-serif; - margin: 0; - min-height: 100vh; -} - -.quiz-container { - background-color: #fff; - border-radius: 10px; - box-shadow: 0 0 10px 2px rgba(100, 100, 100, 0.1); - overflow: hidden; - width: 600px; - max-width: 100%; -} - -.quiz-header { - padding: 4rem; -} - -h2 { - padding: 1rem; - text-align: center; - margin: 0; -} - -ul { - list-style-type: none; - padding: 0; -} - -ul li { - font-size: 1.2rem; - margin: 1rem 0; -} - -ul li label { - cursor: pointer; -} - -button { - background-color: #8e44ad; - border: none; - color: white; - cursor: pointer; - display: block; - font-family: inherit; - font-size: 1.1rem; - width: 100%; - padding: 1.3rem; -} - -button:hover { - background-color: #732d91; -} - -button:focus { - background-color: #5e3370; - outline: none; -} +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap"); + +* { + box-sizing: border-box; +} + +body { + background-color: #b8c6db; + background-image: linear-gradient(315deg, #b8c6db 0%, #f5f7fa 100%); + display: flex; + align-items: center; + justify-content: center; + font-family: "Poppins", sans-serif; + margin: 0; + min-height: 100vh; +} + +.quiz-container { + background-color: #fff; + border-radius: 10px; + box-shadow: 0 0 10px 2px rgba(100, 100, 100, 0.1); + overflow: hidden; + width: 600px; + max-width: 100%; +} + +.quiz-header { + padding: 4rem; +} + +h2 { + padding: 1rem; + text-align: center; + margin: 0; +} + +ul { + list-style-type: none; + padding: 0; +} + +ul li { + font-size: 1.2rem; + margin: 1rem 0; +} + +ul li label { + cursor: pointer; +} + +button { + background-color: #8e44ad; + border: none; + color: white; + cursor: pointer; + display: block; + font-family: inherit; + font-size: 1.1rem; + width: 100%; + padding: 1.3rem; +} + +button:hover { + background-color: #732d91; +} + +button:focus { + background-color: #5e3370; + outline: none; +} diff --git a/Screen Recorder/index.html b/147 - Screen Recorder/index.html similarity index 100% rename from Screen Recorder/index.html rename to 147 - Screen Recorder/index.html diff --git a/Screen Recorder/readme.md b/147 - Screen Recorder/readme.md similarity index 100% rename from Screen Recorder/readme.md rename to 147 - Screen Recorder/readme.md diff --git a/Screen Recorder/script.js b/147 - Screen Recorder/script.js similarity index 100% rename from Screen Recorder/script.js rename to 147 - Screen Recorder/script.js diff --git a/Screen Recorder/style.css b/147 - Screen Recorder/style.css similarity index 100% rename from Screen Recorder/style.css rename to 147 - Screen Recorder/style.css diff --git a/SideNavBar/index.html b/148 - Side NavBar/index.html similarity index 97% rename from SideNavBar/index.html rename to 148 - Side NavBar/index.html index fa6a4724..cc19753d 100644 --- a/SideNavBar/index.html +++ b/148 - Side NavBar/index.html @@ -1,801 +1,801 @@ - - - - - - - - - - - - - - - - - - - - - 30 Days of JavaScript - - - - - -
-

30 Days of JavaScript

- - - - - - - - - -
- - -
- × - Our Projects -
- Drum Kit - Clock - Random Color Generator - Digital Clock - Random Password Generator - Calendar - Dynamic Form Field - Number Counter - Dice Roll - Emoji Switcher - Color Picker - Custom QR Code - Favicon Fetcher - Visit Counter - Joke Generator - Countdown Timer - Text Speed Control - Stopwatch - Traffic Lights - Levitate Board - Wave Effect - Zoom Effect - Drawing Pad - Word Counter - Weather App - Calculator - Memory Matching Game - Music Player - To Do List - Tic Tac Toe - Pop The Balloons - Events Keycode - Feedback UI - Virtual Piano - Decimal to Binary - Hangman - Rock Paper Scissors - Snack Game - Age Calculator - Gradient Generator - Basic-Image-Carousel - Simple Form Validation - Getting Started With APIs - Infinite Scroll - Chatting App - Image Slider - Caesar Cipher - Attendace Table - Content Placeholder - Country Detail - Notes Maker - Temperature Convertor - Notes Taking App - Project Idea Generator - Weeblist - Jokes Chrome Extension - quix App - Simon Game - Color Choosing Game - News Website - Greeting Card - IP Address Tracker - URL Bookmark - Photo Editor - Postmaster Clone - Text to Speech Converter - Currency Converter - Movie TV Series Qoute Generator - Food Delivery Site - Transpose Matric Calculator - Background Color Changer - Typing Platform - Casino Slot Machine Game - Randome Anime Profile - Movie Search App - Car Game - Search Github Profile - Dictionary App - Bet Game - Meditation App - Flip Book - Falling Ball Game - Guess Who Game - Teetris Game - Menu Filter - Weight Conversion Toll - - Ping Pong Game - CRUD Application - Pomodoro Clock - Captcha Generator - Loan Calculator - BlackJack Game - Qoute Of The Day - Audio Visualizer - Minesweeper Game - Word_Definition - Caltch Me If You Can - Speech Recognization - Student Grade Calculator - Sudoku Game -

- -
-
- - - - - - - - - - - - - -
- - - - - - - -
- - Drum Kit -

Drum Kit

- -
-
- - Clock -

Clock

- -
-
- - Random Color Generator -

Random Color Generator

- -
-
- - Digital Clock -

Digital Clock

- -
-
- - Random Password Generator -

Random Password Generator

- -
-
- - Calendar -

Calendar

- -
-
- - Dynamic Form Field -

Dynamic Form Field

- -
-
- - Number Counter -

Number Counter

- -
-
- - Dice Roll -

Dice Roll

- -
-
- - Emoji Switcher -

Emoji Switcher

- -
-
- - Color Picker -

Color Picker

- -
-
- - Custom QR Code -

Custom QR Code

- -
-
- - Favicon Fetcher -

Favicon Fetcher

- -
-
- - Visit Counter -

Visit Counter

- -
-
- - Joke Generator -

Joke Generator

- -
-
- - Countdown Timer -

Countdown Timer

- -
-
- - Text Speed Control -

Text Speed Control

- -
-
- - Stopwatch -

Stopwatch

- -
-
- - Traffic Lights -

Traffic Lights

- -
-
- - Levitate Board -

Levitate Board

- -
-
- - Wave Effect -

Wave Effect

- -
-
- - Zoom Effect -

Zoom Effect

- -
-
- - Drawing Pad -

Drawing Pad

- -
-
- - Word Counter -

Word Counter

- -
-
- - Weather App -

Weather App

- -
-
- - Calculator -

Calculator

- -
-
- - Memory Matching Game -

Memory Matching Game

- -
-
- - Music Player -

Music Player

- -
-
- - To Do List -

To Do List

- -
-
- - Tic Tac Toe -

Tic Tac Toe

- -
-
- - Pop the Balloons -

Pop the Balloons

- -
-
- - Events Keycode -

Events Keycode

- -
-
- - Feedback UI -

Feedback UI

- -
-
- - Virtual Piano -

Virtual Piano

- -
-
- - Decimal to Binary -

Decimal to Binary

- -
-
- - Hangman -

Hangman

- -
-
- - Rock Paper Scissors Game -

Rock Paper Scissors

- -
-
- - Snake Game -

Snake Game

- -
-
- - Age Calculator -

Age Calculator

- -
-
- - Gradient Generator -

Gradient Generator

- -
-
- - Basic-Images-Carousel -

Basic-Images-Carousel

- -
-
- - Simple Form Validation -

Simple Form Validation

- -
-
- - Getting Started with APIs -

Getting Started with APIs

- -
-
- - Infinite Scroll -

Infinite Scroll

- -
-
- - Chatting App -

Chatting App

- -
-
- - Image Slider -

Image Slider

- -
-
- - Caesar Cipher -

Caesar Cipher

- -
-
- - Attendance Table -

Attendance Table

- -
-
- - Content Placeholder -

Content Placeholder

- -
-
- - Country Detail -

Country Detail

- -
-
- - Notes Maker -

Notes Maker

- -
-
- - Temperature Convertor -

Temperature Convertor

- -
-
- - Notes Taking App -

Notes Taking App

- -
-
- - Project Idea Generator -

Project Idea Generator

- -
-
- - Weeblist -

Weeblist

- -
-
- - Jokes Chrome Extension -

Jokes Chrome Extension

- -
-
- - Quiz App -

Quiz app

- -
-
- - Simon Game -

Simon Game

- -
-
- - Color Choosing Game -

Color Choosing Game

- -
-
- - News Website -

News Website

- -
-
- - Greeting Card -

Greeting Card

- -
-
- - IP Address Tracker -

IP Address Tracker

- -
-
- - URL Bookmark -

URL Bookmark

- -
-
- - Photo Editor -

Photo Editor

- -
-
- - Postmaster Clone -

Postmaster Clone

- -
-
- - Text to Speech Converter -

Text to Speech Converter

- -
-
- - Currency Converter -

Currency Converter

- -
-
- - Movie TV Series Quote Generator -

Movie TV Series Quote Generator

-
-
- - Food Delivery Site -

Food Delivery Site

- -
-
- - Transpose Matrix Calculator -

Transpose Matrix Calculator

- -
-
- - Background Color Changer -

Background Color Changer

- -
-
- - Typing Platform -

Typing Platform

- -
-
- - Casino Slot Machine Game -

Casino Slot Machine Game

- -
-
- - Random Anime Profile -

Random Anime Profile

- -
-
- - Movie Search App -

Movie Search App

- -
-
- - Car Game -

Car Game

- -
-
- - Search Github Profile -

Search Github Profile

- -
-
- - Dictionary App -

Dictionary App

- -
-
- - The Bet Game -

The Bet Game

- -
-
- - Meditation App -

Meditation App

- -
-
- - Flipbook -

Flipbook

- -
-
- - Falling Ball Game -

Falling Ball Game

- -
-
- - Guess Who Game -

Guess Who Game

- -
-
- - Tetris Game -

Tetris Game

- -
-
- - Menu Filter -

Menu Filter

- -
-
- - Weight Conversion Tool -

Weight Conversion Tool

- -
-
- - Ping Pong Game -

Ping Pong Game

- -
-
- - CRUD Application -

CRUD Application

- -
-
- - Pomodoro Clock -

Pomodoro Clock

- -
-
- - Captcha Generator -

Captcha Generator

- -
-
- - Loan Calculator -

Loan Calculator

- -
-
- - BlackJack Game -

BlackJack Game

- -
-
- - Quote of The Day -

Quote of The Day

- -
-
- - Audio Visualizer -

Audio Visualizer

- -
-
- - Minesweeper Game -

Minesweeper Game

- -
-
- - Word_Definition -

Word_Definition

- -
-
- - Catch Me If You Can -

Catch Me If You Can

- -
-
- - Speech Recognitation -

Speech Recognitation

- -
-
- - Student Grade Calculator/ -

Student Grade Calculator/

- -
-
- - Sudoku Game -

Sudoku Game

- -
-
- - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + 30 Days of JavaScript + + + + + +
+

30 Days of JavaScript

+ + + + + + + + + +
+ + +
+ × + Our Projects +
+ Drum Kit + Clock + Random Color Generator + Digital Clock + Random Password Generator + Calendar + Dynamic Form Field + Number Counter + Dice Roll + Emoji Switcher + Color Picker + Custom QR Code + Favicon Fetcher + Visit Counter + Joke Generator + Countdown Timer + Text Speed Control + Stopwatch + Traffic Lights + Levitate Board + Wave Effect + Zoom Effect + Drawing Pad + Word Counter + Weather App + Calculator + Memory Matching Game + Music Player + To Do List + Tic Tac Toe + Pop The Balloons + Events Keycode + Feedback UI + Virtual Piano + Decimal to Binary + Hangman + Rock Paper Scissors + Snack Game + Age Calculator + Gradient Generator + Basic-Image-Carousel + Simple Form Validation + Getting Started With APIs + Infinite Scroll + Chatting App + Image Slider + Caesar Cipher + Attendace Table + Content Placeholder + Country Detail + Notes Maker + Temperature Convertor + Notes Taking App + Project Idea Generator + Weeblist + Jokes Chrome Extension + quix App + Simon Game + Color Choosing Game + News Website + Greeting Card + IP Address Tracker + URL Bookmark + Photo Editor + Postmaster Clone + Text to Speech Converter + Currency Converter + Movie TV Series Qoute Generator + Food Delivery Site + Transpose Matric Calculator + Background Color Changer + Typing Platform + Casino Slot Machine Game + Randome Anime Profile + Movie Search App + Car Game + Search Github Profile + Dictionary App + Bet Game + Meditation App + Flip Book + Falling Ball Game + Guess Who Game + Teetris Game + Menu Filter + Weight Conversion Toll + + Ping Pong Game + CRUD Application + Pomodoro Clock + Captcha Generator + Loan Calculator + BlackJack Game + Qoute Of The Day + Audio Visualizer + Minesweeper Game + Word_Definition + Caltch Me If You Can + Speech Recognization + Student Grade Calculator + Sudoku Game +

+ +
+
+ + + + + + + + + + + + + +
+ + + + + + + +
+ + Drum Kit +

Drum Kit

+ +
+
+ + Clock +

Clock

+ +
+
+ + Random Color Generator +

Random Color Generator

+ +
+
+ + Digital Clock +

Digital Clock

+ +
+
+ + Random Password Generator +

Random Password Generator

+ +
+
+ + Calendar +

Calendar

+ +
+
+ + Dynamic Form Field +

Dynamic Form Field

+ +
+
+ + Number Counter +

Number Counter

+ +
+
+ + Dice Roll +

Dice Roll

+ +
+
+ + Emoji Switcher +

Emoji Switcher

+ +
+
+ + Color Picker +

Color Picker

+ +
+
+ + Custom QR Code +

Custom QR Code

+ +
+
+ + Favicon Fetcher +

Favicon Fetcher

+ +
+
+ + Visit Counter +

Visit Counter

+ +
+
+ + Joke Generator +

Joke Generator

+ +
+
+ + Countdown Timer +

Countdown Timer

+ +
+
+ + Text Speed Control +

Text Speed Control

+ +
+
+ + Stopwatch +

Stopwatch

+ +
+
+ + Traffic Lights +

Traffic Lights

+ +
+
+ + Levitate Board +

Levitate Board

+ +
+
+ + Wave Effect +

Wave Effect

+ +
+
+ + Zoom Effect +

Zoom Effect

+ +
+
+ + Drawing Pad +

Drawing Pad

+ +
+
+ + Word Counter +

Word Counter

+ +
+
+ + Weather App +

Weather App

+ +
+
+ + Calculator +

Calculator

+ +
+
+ + Memory Matching Game +

Memory Matching Game

+ +
+
+ + Music Player +

Music Player

+ +
+
+ + To Do List +

To Do List

+ +
+
+ + Tic Tac Toe +

Tic Tac Toe

+ +
+
+ + Pop the Balloons +

Pop the Balloons

+ +
+
+ + Events Keycode +

Events Keycode

+ +
+
+ + Feedback UI +

Feedback UI

+ +
+
+ + Virtual Piano +

Virtual Piano

+ +
+
+ + Decimal to Binary +

Decimal to Binary

+ +
+
+ + Hangman +

Hangman

+ +
+
+ + Rock Paper Scissors Game +

Rock Paper Scissors

+ +
+
+ + Snake Game +

Snake Game

+ +
+
+ + Age Calculator +

Age Calculator

+ +
+
+ + Gradient Generator +

Gradient Generator

+ +
+
+ + Basic-Images-Carousel +

Basic-Images-Carousel

+ +
+
+ + Simple Form Validation +

Simple Form Validation

+ +
+
+ + Getting Started with APIs +

Getting Started with APIs

+ +
+
+ + Infinite Scroll +

Infinite Scroll

+ +
+
+ + Chatting App +

Chatting App

+ +
+
+ + Image Slider +

Image Slider

+ +
+
+ + Caesar Cipher +

Caesar Cipher

+ +
+
+ + Attendance Table +

Attendance Table

+ +
+
+ + Content Placeholder +

Content Placeholder

+ +
+
+ + Country Detail +

Country Detail

+ +
+
+ + Notes Maker +

Notes Maker

+ +
+
+ + Temperature Convertor +

Temperature Convertor

+ +
+
+ + Notes Taking App +

Notes Taking App

+ +
+
+ + Project Idea Generator +

Project Idea Generator

+ +
+
+ + Weeblist +

Weeblist

+ +
+
+ + Jokes Chrome Extension +

Jokes Chrome Extension

+ +
+
+ + Quiz App +

Quiz app

+ +
+
+ + Simon Game +

Simon Game

+ +
+
+ + Color Choosing Game +

Color Choosing Game

+ +
+
+ + News Website +

News Website

+ +
+
+ + Greeting Card +

Greeting Card

+ +
+
+ + IP Address Tracker +

IP Address Tracker

+ +
+
+ + URL Bookmark +

URL Bookmark

+ +
+
+ + Photo Editor +

Photo Editor

+ +
+
+ + Postmaster Clone +

Postmaster Clone

+ +
+
+ + Text to Speech Converter +

Text to Speech Converter

+ +
+
+ + Currency Converter +

Currency Converter

+ +
+
+ + Movie TV Series Quote Generator +

Movie TV Series Quote Generator

+
+
+ + Food Delivery Site +

Food Delivery Site

+ +
+
+ + Transpose Matrix Calculator +

Transpose Matrix Calculator

+ +
+
+ + Background Color Changer +

Background Color Changer

+ +
+
+ + Typing Platform +

Typing Platform

+ +
+
+ + Casino Slot Machine Game +

Casino Slot Machine Game

+ +
+
+ + Random Anime Profile +

Random Anime Profile

+ +
+
+ + Movie Search App +

Movie Search App

+ +
+
+ + Car Game +

Car Game

+ +
+
+ + Search Github Profile +

Search Github Profile

+ +
+
+ + Dictionary App +

Dictionary App

+ +
+
+ + The Bet Game +

The Bet Game

+ +
+
+ + Meditation App +

Meditation App

+ +
+
+ + Flipbook +

Flipbook

+ +
+
+ + Falling Ball Game +

Falling Ball Game

+ +
+
+ + Guess Who Game +

Guess Who Game

+ +
+
+ + Tetris Game +

Tetris Game

+ +
+
+ + Menu Filter +

Menu Filter

+ +
+
+ + Weight Conversion Tool +

Weight Conversion Tool

+ +
+
+ + Ping Pong Game +

Ping Pong Game

+ +
+
+ + CRUD Application +

CRUD Application

+ +
+
+ + Pomodoro Clock +

Pomodoro Clock

+ +
+
+ + Captcha Generator +

Captcha Generator

+ +
+
+ + Loan Calculator +

Loan Calculator

+ +
+
+ + BlackJack Game +

BlackJack Game

+ +
+
+ + Quote of The Day +

Quote of The Day

+ +
+
+ + Audio Visualizer +

Audio Visualizer

+ +
+
+ + Minesweeper Game +

Minesweeper Game

+ +
+
+ + Word_Definition +

Word_Definition

+ +
+
+ + Catch Me If You Can +

Catch Me If You Can

+ +
+
+ + Speech Recognitation +

Speech Recognitation

+ +
+
+ + Student Grade Calculator/ +

Student Grade Calculator/

+ +
+
+ + Sudoku Game +

Sudoku Game

+ +
+
+ + + + + + + + + + \ No newline at end of file diff --git a/SideNavBar/script.js b/148 - Side NavBar/script.js similarity index 96% rename from SideNavBar/script.js rename to 148 - Side NavBar/script.js index adea6f5c..8f5d5c06 100644 --- a/SideNavBar/script.js +++ b/148 - Side NavBar/script.js @@ -1,76 +1,76 @@ -$(document).ready(function () { - $(window).scroll(function () { - if ($(this).scrollTop() >= 100) { - $(".scrollToTop").fadeIn(); - } else { - $(".scrollToTop").fadeOut(); - } - }); - $(".scrollToTop").click(function (e) { - e.preventDefault(); - $("html, body").animate({ scrollTop: 0 }, 500); - return false; - }); -}); - -function toggleDarkLight() { - var body = document.getElementById("body"); - var button = document.getElementById("toggle"); - if (button.innerHTML == "🌙") { - button.innerHTML = "☀️"; - } else { - button.innerHTML = "🌙"; - } - - var trans = () => { - document.documentElement.classList.add("transition"); - window.setTimeout(() => { - document.documentElement.classList.remove("transition"); - }, 500); - }; - - var currentClass = body.className; - // body.className = currentClass == "dark-mode" ? "light-mode" : "dark-mode"; - if (currentClass == "dark-mode") { - trans(); - body.className = "light-mode"; - } else { - trans(); - body.className = "dark-mode"; - } -} - -function search_project() { - let input = document.getElementById('searchbar').value; - input = input.toLowerCase(); - var x = document.getElementsByClassName('item'); - - for (i = 0; i < x.length; i++) { - if (!x[i].querySelector('a').innerHTML.toLowerCase().includes(input)) { - x[i].style.display = "none"; - } - else { - x[i].style.display = "list-item"; - } - } -} - - -// SideNavBAr - -function openSideNav() { - document.getElementById("30daysSidenavbar").style.width = "250px"; - document.getElementById("toggle").style.margin = "55px 3px 3px 260px"; - document.getElementById("mainContainer").style.margin = "10px 0px 0px 260px"; - document.querySelector(".main").style.gridTemplateColumns= ["repeat(auto-fill, 290px)"]; - document.querySelector(".main").style.width= "90vw"; - -} - -function closeSideNav() { - document.getElementById("30daysSidenavbar").style.width = "0"; - document.getElementById("toggle").style.margin= "55px 3px 3px 120px"; - document.getElementById("mainContainer").style.margin= "auto"; - document.querySelector(".main").style.gridTemplateColumns= ["repeat(auto-fit, minmax(320px, 1fr))"]; - document.querySelector(".main").style.width= "80vw"; +$(document).ready(function () { + $(window).scroll(function () { + if ($(this).scrollTop() >= 100) { + $(".scrollToTop").fadeIn(); + } else { + $(".scrollToTop").fadeOut(); + } + }); + $(".scrollToTop").click(function (e) { + e.preventDefault(); + $("html, body").animate({ scrollTop: 0 }, 500); + return false; + }); +}); + +function toggleDarkLight() { + var body = document.getElementById("body"); + var button = document.getElementById("toggle"); + if (button.innerHTML == "🌙") { + button.innerHTML = "☀️"; + } else { + button.innerHTML = "🌙"; + } + + var trans = () => { + document.documentElement.classList.add("transition"); + window.setTimeout(() => { + document.documentElement.classList.remove("transition"); + }, 500); + }; + + var currentClass = body.className; + // body.className = currentClass == "dark-mode" ? "light-mode" : "dark-mode"; + if (currentClass == "dark-mode") { + trans(); + body.className = "light-mode"; + } else { + trans(); + body.className = "dark-mode"; + } +} + +function search_project() { + let input = document.getElementById('searchbar').value; + input = input.toLowerCase(); + var x = document.getElementsByClassName('item'); + + for (i = 0; i < x.length; i++) { + if (!x[i].querySelector('a').innerHTML.toLowerCase().includes(input)) { + x[i].style.display = "none"; + } + else { + x[i].style.display = "list-item"; + } + } +} + + +// SideNavBAr + +function openSideNav() { + document.getElementById("30daysSidenavbar").style.width = "250px"; + document.getElementById("toggle").style.margin = "55px 3px 3px 260px"; + document.getElementById("mainContainer").style.margin = "10px 0px 0px 260px"; + document.querySelector(".main").style.gridTemplateColumns= ["repeat(auto-fill, 290px)"]; + document.querySelector(".main").style.width= "90vw"; + +} + +function closeSideNav() { + document.getElementById("30daysSidenavbar").style.width = "0"; + document.getElementById("toggle").style.margin= "55px 3px 3px 120px"; + document.getElementById("mainContainer").style.margin= "auto"; + document.querySelector(".main").style.gridTemplateColumns= ["repeat(auto-fit, minmax(320px, 1fr))"]; + document.querySelector(".main").style.width= "80vw"; } \ No newline at end of file diff --git a/SideNavBar/style.css b/148 - Side NavBar/style.css similarity index 93% rename from SideNavBar/style.css rename to 148 - Side NavBar/style.css index 18c302e0..462fe7d2 100644 --- a/SideNavBar/style.css +++ b/148 - Side NavBar/style.css @@ -1,352 +1,352 @@ -* { - margin: 0; - padding: 0; - box-sizing: border-box; - list-style: none; -} - -@font-face { - font-family: "sans"; - src: url(font/sans.ttf); -} - -body { - font-family: "sans"; - -} -#body{ - box-sizing: border-box; - width: 100vw; -} -.firstDiv{ - width: 100vw; -} - -/* Dark Mode */ -body.dark-mode { - background-color: #111; - color: #eee; -} - -body.dark-mode a { - color: #111; -} -/* body.dark-mode a { - color: rgb(255, 255, 255); -} */ - -body.dark-mode button { - background-color: #eee; - color: #111; -} - -body.dark-mode h4 { - color: #eee; -} - -body.dark-mode svg { - fill: #fff; - color: #151513; -} - -body.dark-mode input { - color: white; -} - -body.light-mode input { - color: #111; -} - -body.light-mode { - background-color: #eee; - color: #111; -} - -body.light-mode a { - color: #111; -} - -body.light-mode button { - background-color: #111; - color: #eee; -} - -body.light-mode h4 { - color: #111; -} - -body.light-mode svg { - fill: #151513; - color: #fff; -} - -body.light-mode i{ - color: #111 !important; -} - - - -/* Octocat */ - -.github-corner:hover .octo-arm { - animation: octocat-wave 560ms ease-in-out; -} - -@keyframes octocat-wave { - - 0%, - 100% { - transform: rotate(0); - } - - 20%, - 60% { - transform: rotate(-25deg); - } - - 40%, - 80% { - transform: rotate(10deg); - } -} - -@media (max-width: 500px) { - .github-corner:hover .octo-arm { - animation: none; - } - - .github-corner .octo-arm { - animation: octocat-wave 560ms ease-in-out; - } -} - -.toggleButton { - position: absolute; - top: 0; - margin: 55px 3px 3px 120px; - padding: 5px; - border: none; - border-radius: 50%; - font-size: 30px; - left: 0; -} - -.toggleButton1 { - position: fixed; - top: 0; - margin: 0px 0px 0px 0px; - - border: none; - border-radius: 50%; - font-size: 50px; - left: 0; -} - -html.transition, -html.transition *, -html.transition *:before, -html.transition *:after { - transition: all 750ms !important; - transition-delay: 0 !important; -} - -h1 { - text-align: center; - font-size: 3.5rem; - padding: 5vh 7vw; -} - -@media only screen and (max-width: 658px) { - - h1 { - font-size: 1.8em; - padding: 32px 40px; - } - -} - -h4 { - padding: 2%; -} - -img { - width: 100%; - border-radius: 10px 10px 0 0; -} - -a { - color: inherit; -} - -a:visited { - color: inherit; -} - -.container { - display: flex; - flex-direction: row; - font-size: 30px; - text-align: center; -} - -.item { - flex: 50%; - width: 90%; - height: 100%; - background-color: rgba(0, 0, 0, 0.4); - box-shadow: 0 0 transparent, 0 0 transparent, 0 0 transparent, 0 0 transparent, 0 2px 3px 0 rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.06); - border-radius: 10px; - transition: transform .3s ease-in-out 0s; -} - -.item:hover { - transform: scale3d(1.05, 1.05, 1); - /* border: 1px solid #ffffff; */ - filter: drop-shadow(10px); - filter: contrast(110%); -} - -.item h4 { - font-size: 1.3rem; - text-align: center; -} - -.main { - width: 80%; - display: grid; - grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); - grid-gap: 24px; - row-gap: 24px; - margin: auto; - box-sizing: border-box; -} - -.main a { - text-decoration: none; -} - -footer { - background-color: #19172e; - text-align: center; - color: white; - font-size: 1rem; - left: 0; - right: 0; - bottom: 0; - margin-bottom: 0; - padding: 10px; - line-height: 3vh; - margin-top: 30px; -} - -footer a:visited { - color: white; - -} - - - -/* Side NavBar */ -.menu-toggle{ - padding: 5vh 7vw 0 5vh; - font-size: 1.5rem; -} - -.sidenavbar { - height: 100%; - width: 0; - position: fixed; - z-index: 1; - top: 0; - left: 0; - background: linear-gradient(to right, rgb(5, 0, 46), black); - overflow-x: hidden; - transition: 0.5s; - padding-top: 60px; - -} - -.sidenavbar::-webkit-scrollbar { - width: 2px; - background-color: rgb(48, 46, 46); -} - -.sidenavbar a { - padding: 8px 8px 8px 32px; - text-decoration: none; - font-size: 19px; - display: block; - transition: 0.3s; - -} - -.index a:hover , .index a:focus{ - color: #868383; - text-decoration: underline; -} - -.sidenavbar .closebtn { - position: absolute; - top: 0; - right: 25px; - font-size: 36px; - margin-left: 50px; -} - -/* .bigMain{ - box-sizing: border-box; -} */ - -@media (max-width: 800px) { - .container { - flex-direction: column; - } -} - - - -.scrollToTop { - position: fixed; - display: flex; - right: 10px; - bottom: 10px; - cursor: pointer; - width: 40px; - height: 40px; - background-color: #5520b6; - border-radius: 50%; -} - -.scrollToTop span { - position: absolute; - top: 50%; - left: 50%; - margin-left: -8px; - margin-top: -12px; - border: 8px solid transparent; - border-bottom-color: white; -} - -.scrollToTop:hover { - background-color: #5836D8; -} - -input { - border-radius: 3rem; - padding: 10px; - width: 15%; - position: absolute; - top: 6.5%; - right: 7%; - background: transparent; -} - -@media(max-width:1000px) { - input { - position: relative; - align-items: center; - margin-bottom: 3%; - left: 35%; - width: 25% - } -} +* { + margin: 0; + padding: 0; + box-sizing: border-box; + list-style: none; +} + +@font-face { + font-family: "sans"; + src: url(font/sans.ttf); +} + +body { + font-family: "sans"; + +} +#body{ + box-sizing: border-box; + width: 100vw; +} +.firstDiv{ + width: 100vw; +} + +/* Dark Mode */ +body.dark-mode { + background-color: #111; + color: #eee; +} + +body.dark-mode a { + color: #111; +} +/* body.dark-mode a { + color: rgb(255, 255, 255); +} */ + +body.dark-mode button { + background-color: #eee; + color: #111; +} + +body.dark-mode h4 { + color: #eee; +} + +body.dark-mode svg { + fill: #fff; + color: #151513; +} + +body.dark-mode input { + color: white; +} + +body.light-mode input { + color: #111; +} + +body.light-mode { + background-color: #eee; + color: #111; +} + +body.light-mode a { + color: #111; +} + +body.light-mode button { + background-color: #111; + color: #eee; +} + +body.light-mode h4 { + color: #111; +} + +body.light-mode svg { + fill: #151513; + color: #fff; +} + +body.light-mode i{ + color: #111 !important; +} + + + +/* Octocat */ + +.github-corner:hover .octo-arm { + animation: octocat-wave 560ms ease-in-out; +} + +@keyframes octocat-wave { + + 0%, + 100% { + transform: rotate(0); + } + + 20%, + 60% { + transform: rotate(-25deg); + } + + 40%, + 80% { + transform: rotate(10deg); + } +} + +@media (max-width: 500px) { + .github-corner:hover .octo-arm { + animation: none; + } + + .github-corner .octo-arm { + animation: octocat-wave 560ms ease-in-out; + } +} + +.toggleButton { + position: absolute; + top: 0; + margin: 55px 3px 3px 120px; + padding: 5px; + border: none; + border-radius: 50%; + font-size: 30px; + left: 0; +} + +.toggleButton1 { + position: fixed; + top: 0; + margin: 0px 0px 0px 0px; + + border: none; + border-radius: 50%; + font-size: 50px; + left: 0; +} + +html.transition, +html.transition *, +html.transition *:before, +html.transition *:after { + transition: all 750ms !important; + transition-delay: 0 !important; +} + +h1 { + text-align: center; + font-size: 3.5rem; + padding: 5vh 7vw; +} + +@media only screen and (max-width: 658px) { + + h1 { + font-size: 1.8em; + padding: 32px 40px; + } + +} + +h4 { + padding: 2%; +} + +img { + width: 100%; + border-radius: 10px 10px 0 0; +} + +a { + color: inherit; +} + +a:visited { + color: inherit; +} + +.container { + display: flex; + flex-direction: row; + font-size: 30px; + text-align: center; +} + +.item { + flex: 50%; + width: 90%; + height: 100%; + background-color: rgba(0, 0, 0, 0.4); + box-shadow: 0 0 transparent, 0 0 transparent, 0 0 transparent, 0 0 transparent, 0 2px 3px 0 rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.06); + border-radius: 10px; + transition: transform .3s ease-in-out 0s; +} + +.item:hover { + transform: scale3d(1.05, 1.05, 1); + /* border: 1px solid #ffffff; */ + filter: drop-shadow(10px); + filter: contrast(110%); +} + +.item h4 { + font-size: 1.3rem; + text-align: center; +} + +.main { + width: 80%; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); + grid-gap: 24px; + row-gap: 24px; + margin: auto; + box-sizing: border-box; +} + +.main a { + text-decoration: none; +} + +footer { + background-color: #19172e; + text-align: center; + color: white; + font-size: 1rem; + left: 0; + right: 0; + bottom: 0; + margin-bottom: 0; + padding: 10px; + line-height: 3vh; + margin-top: 30px; +} + +footer a:visited { + color: white; + +} + + + +/* Side NavBar */ +.menu-toggle{ + padding: 5vh 7vw 0 5vh; + font-size: 1.5rem; +} + +.sidenavbar { + height: 100%; + width: 0; + position: fixed; + z-index: 1; + top: 0; + left: 0; + background: linear-gradient(to right, rgb(5, 0, 46), black); + overflow-x: hidden; + transition: 0.5s; + padding-top: 60px; + +} + +.sidenavbar::-webkit-scrollbar { + width: 2px; + background-color: rgb(48, 46, 46); +} + +.sidenavbar a { + padding: 8px 8px 8px 32px; + text-decoration: none; + font-size: 19px; + display: block; + transition: 0.3s; + +} + +.index a:hover , .index a:focus{ + color: #868383; + text-decoration: underline; +} + +.sidenavbar .closebtn { + position: absolute; + top: 0; + right: 25px; + font-size: 36px; + margin-left: 50px; +} + +/* .bigMain{ + box-sizing: border-box; +} */ + +@media (max-width: 800px) { + .container { + flex-direction: column; + } +} + + + +.scrollToTop { + position: fixed; + display: flex; + right: 10px; + bottom: 10px; + cursor: pointer; + width: 40px; + height: 40px; + background-color: #5520b6; + border-radius: 50%; +} + +.scrollToTop span { + position: absolute; + top: 50%; + left: 50%; + margin-left: -8px; + margin-top: -12px; + border: 8px solid transparent; + border-bottom-color: white; +} + +.scrollToTop:hover { + background-color: #5836D8; +} + +input { + border-radius: 3rem; + padding: 10px; + width: 15%; + position: absolute; + top: 6.5%; + right: 7%; + background: transparent; +} + +@media(max-width:1000px) { + input { + position: relative; + align-items: center; + margin-bottom: 3%; + left: 35%; + width: 25% + } +} diff --git a/SnakeGame_VoiceControlled/index.html b/149 - Snake Game Voice/index.html similarity index 100% rename from SnakeGame_VoiceControlled/index.html rename to 149 - Snake Game Voice/index.html diff --git a/SnakeGame_VoiceControlled/main.js b/149 - Snake Game Voice/main.js similarity index 100% rename from SnakeGame_VoiceControlled/main.js rename to 149 - Snake Game Voice/main.js diff --git a/SnakeGame_VoiceControlled/readme.md b/149 - Snake Game Voice/readme.md similarity index 100% rename from SnakeGame_VoiceControlled/readme.md rename to 149 - Snake Game Voice/readme.md diff --git a/SnakeGame_VoiceControlled/speechCommand.js b/149 - Snake Game Voice/speechCommand.js similarity index 100% rename from SnakeGame_VoiceControlled/speechCommand.js rename to 149 - Snake Game Voice/speechCommand.js diff --git a/SnakeGame_VoiceControlled/style.css b/149 - Snake Game Voice/style.css similarity index 100% rename from SnakeGame_VoiceControlled/style.css rename to 149 - Snake Game Voice/style.css diff --git a/snowy particle js/Sat Apr 23 2022 10_32_09 PM.webm b/150 - Snowy Particle Js/Sat Apr 23 2022 10_32_09 PM.webm similarity index 100% rename from snowy particle js/Sat Apr 23 2022 10_32_09 PM.webm rename to 150 - Snowy Particle Js/Sat Apr 23 2022 10_32_09 PM.webm diff --git a/snowy particle js/app.js b/150 - Snowy Particle Js/app.js similarity index 100% rename from snowy particle js/app.js rename to 150 - Snowy Particle Js/app.js diff --git a/snowy particle js/index.html b/150 - Snowy Particle Js/index.html similarity index 100% rename from snowy particle js/index.html rename to 150 - Snowy Particle Js/index.html diff --git a/snowy particle js/readme.md b/150 - Snowy Particle Js/readme.md similarity index 50% rename from snowy particle js/readme.md rename to 150 - Snowy Particle Js/readme.md index d3f5a12f..8b137891 100644 --- a/snowy particle js/readme.md +++ b/150 - Snowy Particle Js/readme.md @@ -1 +1 @@ - + diff --git a/snowy particle js/style.css b/150 - Snowy Particle Js/style.css similarity index 100% rename from snowy particle js/style.css rename to 150 - Snowy Particle Js/style.css diff --git a/type writer effect on text/css/style.css b/151 - Type Writer Effect/css/style.css similarity index 93% rename from type writer effect on text/css/style.css rename to 151 - Type Writer Effect/css/style.css index 3f23a13a..d395237e 100644 --- a/type writer effect on text/css/style.css +++ b/151 - Type Writer Effect/css/style.css @@ -1,25 +1,25 @@ -.container { - width: 1100px; - margin: auto; - height: 100vh; -} -.container p { - font-size: 26px; - text-align: center; - padding: 18px; - font-weight: bold; - background-color: red; -} -button { - width: 270px; - height: 50px; - background-color: black; - color: white; - font-size: 20px; -} -#mydiv { - width: 100%; - height: 40px; - border: 1px solid black; - margin: 30px 0px 30px; -} +.container { + width: 1100px; + margin: auto; + height: 100vh; +} +.container p { + font-size: 26px; + text-align: center; + padding: 18px; + font-weight: bold; + background-color: red; +} +button { + width: 270px; + height: 50px; + background-color: black; + color: white; + font-size: 20px; +} +#mydiv { + width: 100%; + height: 40px; + border: 1px solid black; + margin: 30px 0px 30px; +} diff --git a/type writer effect on text/index.html b/151 - Type Writer Effect/index.html similarity index 96% rename from type writer effect on text/index.html rename to 151 - Type Writer Effect/index.html index 9ad92b49..76a0d568 100644 --- a/type writer effect on text/index.html +++ b/151 - Type Writer Effect/index.html @@ -1,21 +1,21 @@ - - - - - - - Type Writer Effect - - - - -
-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, asperiores. -

-
- -
- - - - + + + + + + + Type Writer Effect + + + + +
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, asperiores. +

+
+ +
+ + + + diff --git a/type writer effect on text/js/index.js b/151 - Type Writer Effect/js/index.js similarity index 96% rename from type writer effect on text/js/index.js rename to 151 - Type Writer Effect/js/index.js index b83f317b..b4846f37 100644 --- a/type writer effect on text/js/index.js +++ b/151 - Type Writer Effect/js/index.js @@ -1,15 +1,15 @@ -var mytext = document.getElementById("mytext"); -var mydiv = document.getElementById("mydiv"); -var mybutton = document.getElementById("mybutton"); -var i = 0; -mybutton.onclick = function () { - var typewriter = setInterval(function () { - mydiv.textContent += mytext.textContent[i]; - i++; - if (i > mytext.textContent.length - 1) { - mytext.textContent="Done !!!!!"; - i=0; - clearInterval(typewriter); - } - }, 100); -}; +var mytext = document.getElementById("mytext"); +var mydiv = document.getElementById("mydiv"); +var mybutton = document.getElementById("mybutton"); +var i = 0; +mybutton.onclick = function () { + var typewriter = setInterval(function () { + mydiv.textContent += mytext.textContent[i]; + i++; + if (i > mytext.textContent.length - 1) { + mytext.textContent="Done !!!!!"; + i=0; + clearInterval(typewriter); + } + }, 100); +}; diff --git a/Voice Recorder/Readme.md b/152 - Voice Recorder/Readme.md similarity index 100% rename from Voice Recorder/Readme.md rename to 152 - Voice Recorder/Readme.md diff --git a/Voice Recorder/index.html b/152 - Voice Recorder/index.html similarity index 100% rename from Voice Recorder/index.html rename to 152 - Voice Recorder/index.html diff --git a/Voice Recorder/script.js b/152 - Voice Recorder/script.js similarity index 100% rename from Voice Recorder/script.js rename to 152 - Voice Recorder/script.js diff --git a/Voice Recorder/style.css b/152 - Voice Recorder/style.css similarity index 100% rename from Voice Recorder/style.css rename to 152 - Voice Recorder/style.css diff --git a/Whatsapp-Message-Sender/index.html b/153 - Whatsapp Message Sender/index.html similarity index 100% rename from Whatsapp-Message-Sender/index.html rename to 153 - Whatsapp Message Sender/index.html diff --git a/Whatsapp-Message-Sender/script.js b/153 - Whatsapp Message Sender/script.js similarity index 97% rename from Whatsapp-Message-Sender/script.js rename to 153 - Whatsapp Message Sender/script.js index d58deb6e..b59c3576 100644 --- a/Whatsapp-Message-Sender/script.js +++ b/153 - Whatsapp Message Sender/script.js @@ -1,11 +1,11 @@ -document.getElementById("1").addEventListener("click", () => { - let num = document.getElementById("num").value; - let message = document.getElementById("message").value; - if (num === "" || message === "") { - alert("Please, Enter both the fields properly!"); - document.getElementById("num").value = ""; - } else { - let link = `http://Wa.me/${num}?text=${message}`; - window.open(link); - } -}); +document.getElementById("1").addEventListener("click", () => { + let num = document.getElementById("num").value; + let message = document.getElementById("message").value; + if (num === "" || message === "") { + alert("Please, Enter both the fields properly!"); + document.getElementById("num").value = ""; + } else { + let link = `http://Wa.me/${num}?text=${message}`; + window.open(link); + } +}); diff --git a/89 - Projectile-Motion-Simulator/README.md b/89 - Projectile Motion Simulator/README.md similarity index 100% rename from 89 - Projectile-Motion-Simulator/README.md rename to 89 - Projectile Motion Simulator/README.md diff --git a/89 - Projectile-Motion-Simulator/i.html b/89 - Projectile Motion Simulator/i.html similarity index 100% rename from 89 - Projectile-Motion-Simulator/i.html rename to 89 - Projectile Motion Simulator/i.html diff --git a/89 - Projectile-Motion-Simulator/pms.png b/89 - Projectile Motion Simulator/pms.png similarity index 100% rename from 89 - Projectile-Motion-Simulator/pms.png rename to 89 - Projectile Motion Simulator/pms.png diff --git a/Lights-Out-Game b/Lights-Out-Game deleted file mode 160000 index de0158fc..00000000 --- a/Lights-Out-Game +++ /dev/null @@ -1 +0,0 @@ -Subproject commit de0158fcefe44dc0a6f8d06ce5087578da7967fb diff --git a/index.html b/index.html index 6b488849..3e9e6d10 100644 --- a/index.html +++ b/index.html @@ -451,6 +451,7 @@

Currency Converter

Movie TV Series Quote Generator

Movie TV Series Quote Generator

+
@@ -508,7 +509,7 @@

Search Github Profile

- Dictionary App + Dictionary App

Dictionary App
@@ -560,18 +561,54 @@

Menu Filter

Weight Conversion Tool

+
+ + Body Mass Index Calculator +

Body Mass Index Calculator

+ +
Ping Pong Game

Ping Pong Game
+
+ + Projectile Motion Simulator +

Projectile Motion Simulator

+ +
CRUD Application

CRUD Application
+
+ + Casio +

Casio

+ +
+
+ + Typer +

Typer

+ +
+
+ + Windows 11 Clone +

Windows 11 Clone

+ +
+
+ + Whack a Mole Game +

Whack a Mole Game

+ +
Pomodoro Clock @@ -615,9 +652,9 @@

Minesweeper Game
- - Word_Definition -

Word_Definition

+ + Word Definition +

Word Definition
@@ -629,7 +666,7 @@

Catch Me If You Can

Speech Recognitation -

Speech Recognitation

+

Speech Recognition
@@ -644,6 +681,84 @@

Student Grade Calculator/

Sudoku Game

+
+ + Maths Addition +

Casio

+ +
+
+ + Third Degree Equation Solver +

Third Degree Equation Solver

+ +
+
+ + Pixel to em Converter +

Pixel to em Converter

+ +
+
+ + BMI Calculator +

BMI Calculator

+ +
+
+ + Meme Generator +

Meme Generator

+ +
+
+ + Particle Effect Animation +

Particle Effect Animation

+ +
+
+ + Weight Converter +

Weight Converter

+ +
+
+ + Puzzle +

Puzzle

+ +
+
+ + Simple Library Management +

Simple Library Management

+ +
+
+ + Palindrome Checker +

Palindrome Checker

+ +
+
+ + Ball Game +

Ball Game

+ +
+
+ + Random SVG Generator +

Random SVG Generator

+ +
+
+ + Find The Image +

Find The Image

+ +