added toast

index.html

@@ -63,7 +63,7 @@
  </div>
  </section>
  <div class="image-vector"></div>
-
+ <div class="toast">Sample message</div>
  <script src="index.js"></script>
 </body>
 

index.js

@@ -13,6 +13,8 @@ const copyURLBtn = document.querySelector("#copyURLBtn");
 const fileURL = document.querySelector("#fileURL");
 const emailForm = document.querySelector("#emailForm");
 
+const toast = document.querySelector(".toast");
+
 const uploadURL = "http:https://localhost:3000/api/files";
 const emailURL = "http:https://localhost:3000/api/files/send";
 
@@ -52,42 +54,13 @@ fileInput.addEventListener("change", () => {
 copyURLBtn.addEventListener("click", () => {
  fileURL.select();
  document.execCommand("copy");
+ showToast("Copied to clipboard");
 });
 
 fileURL.addEventListener("click", () => {
  fileURL.select();
 });
 
-emailForm.addEventListener("submit", (e) => {
- e.preventDefault(); // stop submission
-
- // disable the button
- emailForm[2].setAttribute("disabled", "true");
- emailForm[2].innerText = "Sending";
-
- const url = fileURL.value;
-
- const formData = {
- uuid: url.split("/").splice(-1, 1)[0],
- emailTo: emailForm.elements["to-email"].value,
- emailFrom: emailForm.elements["from-email"].value,
- };
- console.log(formData);
- fetch(emailURL, {
- method: "POST",
- headers: {
- "Content-Type": "application/json",
- },
- body: JSON.stringify(formData),
- })
- .then((res) => res.json())
- .then((data) => {
- if (data.success) {
- sharingContainer.style.display = "none";
- }
- });
-});
-
 const uploadFile = () => {
  console.log("file added uploading");
 
@@ -130,12 +103,56 @@ const uploadFile = () => {
 const onFileUploadSuccess = (res) => {
  fileInput.value = ""; // reset the input
  status.innerText = "Uploaded";
+
+ // remove the disabled attribute from form btn & make text send
  emailForm[2].removeAttribute("disabled");
  emailForm[2].innerText = "Send";
- progressContainer.style.display = "none";
+ progressContainer.style.display = "none"; // hide the box
 
  const { file: url } = JSON.parse(res);
  console.log(url);
  sharingContainer.style.display = "block";
  fileURL.value = url;
 };
+
+emailForm.addEventListener("submit", (e) => {
+ e.preventDefault(); // stop submission
+
+ // disable the button
+ emailForm[2].setAttribute("disabled", "true");
+ emailForm[2].innerText = "Sending";
+
+ const url = fileURL.value;
+
+ const formData = {
+ uuid: url.split("/").splice(-1, 1)[0],
+ emailTo: emailForm.elements["to-email"].value,
+ emailFrom: emailForm.elements["from-email"].value,
+ };
+ console.log(formData);
+ fetch(emailURL, {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify(formData),
+ })
+ .then((res) => res.json())
+ .then((data) => {
+ if (data.success) {
+ showToast("Email Sent");
+ sharingContainer.style.display = "none"; // hide the box
+ }
+ });
+});
+
+let toastTimer;
+// the toast function
+const showToast = (msg) => {
+ clearTimeout(toastTimer);
+ toast.innerText = msg;
+ toast.classList.add("show");
+ toastTimer = setTimeout(() => {
+ toast.classList.remove("show");
+ }, 2000);
+};

style.css

@@ -9,14 +9,14 @@ body {
  font-family: system-ui;
  background: var(--main-bg-color);
  height: 98vh;
+ overflow: hidden;
 }
 
-.image-vector{
+.image-vector {
  width: 50vw;
  height: 50vh;
  background: url(/undraw-upload.svg) no-repeat center;
  background-size: contain;
-
 }
 
 body,
@@ -177,7 +177,6 @@ body,
  color: #607d8b;
 }
 
-
 .sharing-container img {
  height: 22px;
  width: 30px;
@@ -188,7 +187,7 @@ body,
  background: #f5fcff;
 }
 
-.email-container form{
+.email-container form {
  border: 2px solid var(--border-color);
  width: 100%;
  padding: 15px;
@@ -198,7 +197,8 @@ body,
  flex-direction: column;
  align-items: center;
 }
-.email-container, .send-btn-container {
+.email-container,
+.send-btn-container {
  display: flex;
  flex-direction: column;
  align-items: center;
@@ -216,7 +216,7 @@ body,
  text-align: center;
 }
 
-.email-container input:focus{
+.email-container input:focus {
  outline: none;
 }
 
@@ -227,7 +227,7 @@ body,
  width: 400px;
 }
 
-.send-btn-container button{
+.send-btn-container button {
  font-size: 18px;
  padding: 8px 40px;
  margin-top: 15px;
@@ -236,4 +236,23 @@ body,
  border-radius: 5px;
  color: #607d8b;
  cursor: pointer;
-}
+}
+
+.toast {
+ position: absolute;
+ bottom: 10px;
+ right: 50%;
+ transform: translate(50%, 60px);
+ padding: 10px 20px;
+ background: var(--light-blue);
+ color: #fff;
+ border-radius: 5px;
+ font-size: 18px;
+ box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1),
+ 0px 4px 6px -2px rgba(0, 0, 0, 0.05);
+ transition: transform ease-in-out 0.2s;
+}
+
+.show.toast {
+ transform:translate(50%, 0);
+}