+
+
+
+
+
\ No newline at end of file
diff --git a/projects/File Downloader/script.js b/projects/File Downloader/script.js
new file mode 100644
index 00000000..8e34e149
--- /dev/null
+++ b/projects/File Downloader/script.js
@@ -0,0 +1,25 @@
+const fileInput = document.querySelector("input"),
+downloadBtn = document.querySelector("button");
+
+downloadBtn.addEventListener("click", e => {
+ e.preventDefault();
+ downloadBtn.innerText = "Downloading file...";
+ fetchFile(fileInput.value);
+});
+
+function fetchFile(url) {
+ fetch(url).then(res => res.blob()).then(file => {
+ let tempUrl = URL.createObjectURL(file);
+ const aTag = document.createElement("a");
+ aTag.href = tempUrl;
+ aTag.download = url.replace(/^.*[\\\/]/, '');
+ document.body.appendChild(aTag);
+ aTag.click();
+ downloadBtn.innerText = "Download File";
+ URL.revokeObjectURL(tempUrl);
+ aTag.remove();
+ }).catch(() => {
+ alert("Failed to download file!");
+ downloadBtn.innerText = "Download File";
+ });
+}
\ No newline at end of file
diff --git a/projects/File Downloader/style.css b/projects/File Downloader/style.css
new file mode 100644
index 00000000..c642985b
--- /dev/null
+++ b/projects/File Downloader/style.css
@@ -0,0 +1,70 @@
+/* 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;
+ align-items: center;
+ justify-content: center;
+ min-height: 100vh;
+ background: #03f6a1;
+}
+.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;
+}
+form{
+ margin: 20px 0 27px;
+}
+form input{
+ width: 100%;
+ height: 60px;
+ outline: none;
+ padding: 0 17px;
+ font-size: 19px;
+ border-radius: 5px;
+ border: 1px solid #b3b2b2;
+ transition: 0.1s ease;
+}
+form input::placeholder{
+ color: #b3b2b2;
+}
+form input:focus{
+ box-shadow: 0 3px 6px rgba(0,0,0,0.13);
+}
+form button{
+ width: 100%;
+ border: none;
+ opacity: 0.7;
+ outline: none;
+ color: #fff;
+ cursor: pointer;
+ font-size: 17px;
+ margin-top: 20px;
+ padding: 15px 0;
+ border-radius: 5px;
+ pointer-events: none;
+ background: #4285F4;
+ transition: opacity 0.15s ease;
+}
+form input:valid ~ button{
+ opacity: 1;
+ pointer-events: auto;
+}
\ No newline at end of file