alsiam · supermadu7 · Feb 28, 2025
diff --git a/drag-and-drop-or-browse-file/index.html b/drag-and-drop-or-browse-file/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE  html>
+<!-- Coding By CodingNepal - youtube.com/codingnepal -->
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Drag & Drop or Browse: File Upload | CodingNepal</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
+</head>
+<body>
+  <div class="drag-area">
+    <div class="icon"><i class="fas fa-cloud-upload-alt"></i></div>
+    <header>Drag & Drop to Upload File</header>
+    <span>OR</span>
+    <button>Browse File</button>
+    <input type="file" hidden>
+  </div>
+
+  <script src="script.js"></script>
+
+</body>
+</html>
diff --git a/drag-and-drop-or-browse-file/script.js b/drag-and-drop-or-browse-file/script.js
@@ -0,0 +1,57 @@
+//selecting all required elements
+const dropArea = document.querySelector(".drag-area"),
+dragText = dropArea.querySelector("header"),
+button = dropArea.querySelector("button"),
+input = dropArea.querySelector("input");
+let file; //this is a global variable and we'll use it inside multiple functions
+
+button.onclick = ()=>{
+  input.click(); //if user click on the button then the input also clicked
+}
+
+input.addEventListener("change", function(){
+  //getting user select file and [0] this means if user select multiple files then we'll select only the first one
+  file = this.files[0];
+  dropArea.classList.add("active");
+  showFile(); //calling function
+});
+
+
+//If user Drag File Over DropArea
+dropArea.addEventListener("dragover", (event)=>{
+  event.preventDefault(); //preventing from default behaviour
+  dropArea.classList.add("active");
+  dragText.textContent = "Release to Upload File";
+});
+
+//If user leave dragged File from DropArea
+dropArea.addEventListener("dragleave", ()=>{
+  dropArea.classList.remove("active");
+  dragText.textContent = "Drag & Drop to Upload File";
+});
+
+//If user drop File on DropArea
+dropArea.addEventListener("drop", (event)=>{
+  event.preventDefault(); //preventing from default behaviour
+  //getting user select file and [0] this means if user select multiple files then we'll select only the first one
+  file = event.dataTransfer.files[0];
+  showFile(); //calling function
+});
+
+function showFile(){
+  let fileType = file.type; //getting selected file type
+  let validExtensions = ["image/jpeg", "image/jpg", "image/png"]; //adding some valid image extensions in array
+  if(validExtensions.includes(fileType)){ //if user selected file is an image file
+    let fileReader = new FileReader(); //creating new FileReader object
+    fileReader.onload = ()=>{
+      let fileURL = fileReader.result; //passing user file source in fileURL variable
+      let imgTag = `<img src="${fileURL}" alt="">`; //creating an img tag and passing user selected file source inside src attribute
+      dropArea.innerHTML = imgTag; //adding that created img tag inside dropArea container
+    }
+    fileReader.readAsDataURL(file);
+  }else{
+    alert("This is not an Image File!");
+    dropArea.classList.remove("active");
+    dragText.textContent = "Drag & Drop to Upload File";
+  }
+}
diff --git a/drag-and-drop-or-browse-file/style.css b/drag-and-drop-or-browse-file/style.css
@@ -0,0 +1,59 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
+*{
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Poppins", sans-serif;
+}
+body{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  background: #5256ad;
+}
+.drag-area{
+  border: 2px dashed #fff;
+  height: 500px;
+  width: 700px;
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+.drag-area.active{
+  border: 2px solid #fff;
+}
+.drag-area .icon{
+  font-size: 100px;
+  color: #fff;
+}
+.drag-area header{
+  font-size: 30px;
+  font-weight: 500;
+  color: #fff;
+}
+.drag-area span{
+  font-size: 25px;
+  font-weight: 500;
+  color: #fff;
+  margin: 10px 0 15px 0;
+}
+.drag-area button{
+  padding: 10px 25px;
+  font-size: 20px;
+  font-weight: 500;
+  border: none;
+  outline: none;
+  background: #fff;
+  color: #5256ad;
+  border-radius: 5px;
+  cursor: pointer;
+}
+.drag-area img{
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+  border-radius: 5px;
+}
diff --git a/typing-speed-test/README.md b/typing-speed-test/README.md
@@ -0,0 +1,4 @@
+# typing_speed-test-webapp
+https://typing-speed-testbysudeep.netlify.app/
+Go Check this web-app and test ur typing speed.
+![image](https://user-images.githubusercontent.com/112026180/213909212-a385c10e-290f-40c5-a0c4-3f404ee1aa22.png)
diff --git a/typing-speed-test/index.html b/typing-speed-test/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<title>Typing Test by <a href="https://sudeep-portfolio.netlify.app/">@SudeepAcharjee</a>
+		</title>
+		<meta charset="UTF-8">
+		<link rel="stylesheet" type="text/css" href="style.css">
+	</head>
+
+	<body>
+
+		<div id="startWindow">
+			<div class="modalBox">
+				<h1>Typing Test</h1>
+				<p>It just takes a minute to test your typing speed! Timer will only start after you begin typing. It's a simple app which you can easily fool to get a good score. But if you are not serious, you may as well watch some other web-apps<a href="https://github.com/SudeepAcharjee" target="_blank">My Github Repository</a> :)</p>
+				<button id="startButton">Start Test</button>
+			</div>
+		</div>
+
+		<div id="timer">
+		</div>
+
+		<div id="wrapper">
+
+		<div id="paraContainer">
+			<p id="testPara"></p>
+		</div>
+
+		<textarea id="textArea" name="textarea" rows="5" cols="50" onPaste="return false" placeholder="Timer will only start after you begin typing."></textarea>
+
+		</div>
+
+		<div id="newTestWindow">
+			<div class="modalBox">
+				<h1>Time's Up!</h1>
+				<p id="finalScore"></p>
+				<button id="newTestButton">Click to try again!</button>
+			</div>
+		</div>
+
+	<script type="text/javascript" src="test.js"></script>
+	</body>
+<html>
diff --git a/typing-speed-test/style.css b/typing-speed-test/style.css
@@ -0,0 +1,126 @@
+* {
+	margin: 0px;
+	padding: 0px;
+}
+
+body {
+	background: #fff;
+	overflow: hidden;
+}
+
+#wrapper {
+	margin: 0 auto;
+	width: 1200px;
+}
+
+#timer {
+	text-align: center;
+	padding: 10px;
+	font-family: helvetica;
+	font-size: 25px;
+	background: #2ECC71;
+	opacity: 0.8;
+	display: none;
+	color: #fff;
+	letter-spacing: 2.5px;
+	font-weight: 100;
+}
+
+#paraContainer {
+	display: none;
+	width: 550px;
+	height: 600px;
+	margin: 25px 10px;
+	font-family: helvetica;
+	font-size: 18px;
+	line-height: 1.5;
+	border: 2px solid #2ECC71;
+	border-radius: 5px;
+	padding: 10px;
+	overflow-y: scroll;
+}
+
+#textArea {
+	display: none;
+	margin: 25px 10px;
+	width: 550px;
+	height: 600px;
+	resize:none;
+	font-family: helvetica;
+	font-size: 18px;
+	line-height: 1.5;
+	padding: 10px;
+	outline: none;
+	border: 2px solid #2ECC71;
+	border-radius: 5px;
+}
+
+#startWindow{
+	background: rgba(0,0,0,0.7);
+  	height: 100%;
+  	width: 100%;
+  	top: 0;
+  	left: 0;
+	position: absolute;
+	font-family: helvetica;
+	padding-top: 100px;
+}
+
+#newTestWindow{
+	background: rgba(0,0,0,0.7);
+  	height: 100%;
+  	width: 100%;
+  	top: 0;
+  	left: 0;
+	position: absolute;
+	font-family: helvetica;
+	padding-top: 100px;
+	overflow: hidden;
+	display: none;
+}
+
+
+.modalBox {
+	margin: 0 auto;
+	width: 500px;
+	background: #fff;
+	text-align: center;
+	border: 2px solid #C0392B;
+	border-radius: 10px;
+	padding: 20px;
+	line-height: 1.5;
+}
+
+.modalBox h1{
+	font-size: 35px;
+	text-align: center;
+	font-weight: 100;
+}
+
+.modalBox p {
+	font-size: 18px;
+	text-align: center;
+	font-weight: 100;
+	padding: 20px 0;
+}
+
+.modalBox button {
+	outline: none;
+	padding: 15px;
+	border-style: none;
+	cursor: pointer;
+	font-size: 18px;
+	border-radius: 5px;
+	background: #22A7F0;
+	border: 2px solid transparent;
+	color: #fff;
+	font-weight: 100;
+}
+
+.modalBox button:hover {
+	background: #fff;
+	border: 2px solid #22A7F0;
+	color: #22A7F0;
+	transition: 0.2s;
+}
+