SJMcode · SJMcode · Feb 16, 2023 · Feb 17, 2023 · Feb 17, 2023 · Feb 18, 2023
diff --git a/portfolio/.vscode/settings.json b/portfolio/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/portfolio/css/style.css b/portfolio/css/style.css
@@ -0,0 +1,78 @@
+*{
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+    font-family: "Poppins",sans-serif;
+    text-decoration: none;
+    list-style: none;
+    scroll-behavior: smooth;
+}
+
+:root{
+    --bg-color: #2a2a2a;
+    --second-bg-color:#202020;
+    --text-color:#fff;
+    --second-color:#ccc;
+    --main-color:#ff4d05;
+    --big-font:5rem;
+    --h2-font:3rem;
+    --p-font:1.1rem;
+}
+
+body{
+    background: var(--bg-color);
+    color: var(--text-color);
+}
+header{
+    position: fixed;
+    width: 100%;
+    top: 0;
+    right: 0;
+    z-index: 10000;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: transparent;
+    padding: 22px 15%;
+    border-bottom: 1px solid transparent;
+    transition: all 0.4s ease;
+}
+.logo{
+    color: var(--text-color);
+    font-size: 35px;
+    font-weight: 700;
+    letter-spacing: 1px;
+}
+span{
+    color: var(--main-color);
+}
+
+.navlist{
+    display: flex;
+}
+.navlist a{
+    color: var(--second-color);
+    font-size: 17px;
+    font-weight: 500;
+    margin: 0 25px;
+    transition: all 0.45s ease;
+}
+.navlist a:hover{
+    color: var(--main-color);
+}
+.navlist a.active{
+    color: var(--main-color);
+}
+
+.menu-icon{
+    color: var(--text-color);
+    font-size: 55px;
+    z-index: 10001;
+    cursor: pointer;
+    margin-left: 25px;
+    display: none;
+}
+
+section{
+    padding: 160px 15% 120px;
+}
diff --git a/portfolio/index.html b/portfolio/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+
+<link rel="stylesheet"
+  href="https://unpkg.com/boxicons@latest/css/boxicons.min.css">
+<link rel="stylesheet" type="text/css" href="css/style.css">
+    <title>Portfolio Website</title>
+</head>
+<body>
+
+    <!--Header Design-->
+    <header>
+        <a href="#" class="logo">Safir <span>J</span>M.</a>
+        <ul class="navlist">
+            <li> <a href="#home" class="active">Home</a> </li>
+            <li> <a href="#about">About me</a> </li>
+            <li> <a href="#services">Services</a> </li>
+            <li> <a href="#portfolio">Portfolio</a> </li>
+            <li> <a href="#contact">Contact Me</a> </li>
+        </ul>
+        <div class="bx bx-menu" id="menu-icon"></div>
+
+    </header>
+
+    <!--Home Section-->
+    <section class="home" id="home">
+        <div class="home-text">
+            <div class="class-slide">
+                <span class="one">Hello</span>
+                <span class="two">I'm</span>
+            </div>
+            <h1>Safir JM.</h1>
+            <h3>Software Developer.</h3>
+            <p>👋 Hi, I'm Safir, a software developer with a strong focus on problem solving <br> and front-end development.</p>
+
+            <div class="button">
+                <a href="#" class="btn">Say, Hello</a>
+                <a href="#" class="btn2"><span><i class='bx bx-play'></i></span>Watch my work</a>
+            </div>
+        </div>
+    </section>
+
+<!--custom js link-->
+<script type="text/javascript" src="js/script.js"></script>    
+</body>
+</html>
diff --git a/portfolio/js/script.js b/portfolio/js/script.js
diff --git a/realTimeCharCounter/index.html b/realTimeCharCounter/index.html
@@ -9,17 +9,17 @@
       rel="stylesheet"
     />
     <link rel="stylesheet" href="style.css">
-    <title>Real Time Character Counter</title>
+    <title>Real Time Word Counter</title>
+
 </head>
 <body>
   <div class="wrapper">
     <div class="container">
-      <textarea
-        id="input-textarea"
-        rows="12"
-        placeholder="Start Typing here..."
-      ></textarea>
+
+      <textarea id="input-textarea" rows="12" placeholder="Start typing here..."></textarea>
     </div>
+
+
     <div class="count">
       <div>
         <h5 id="word-count">0</h5>
@@ -31,10 +31,15 @@ <h5 id="charac-count">0</h5>
       </div>
       <div>
         <h5 id="wpm-count">0</h5>
-        <p>WPM</p>
+
+        <p>wpm</p>
       </div>
     </div>
+
+
   </div>
+
+
 
 <script src="script.js"></script>
 </body>

diff --git a/realTimeCharCounter/script.js b/realTimeCharCounter/script.js
@@ -1,23 +1,26 @@
-let inputTextArea = document.getElementById("input-textarea");
-let characCount = document.getElementById("charac-count");
-let wordCount = document.getElementById("word-count");
-const wpmCount = document.getElementById("wpm-count");
+const inputTextArea = document.getElementById("input-textarea"); 
+const wordCount = document.getElementById("word-count"); 
+const charcCount =document.getElementById("charac-count"); 
+const wpmCount = document.getElementById("wpm-count");  
+
 let startTime;
 
-inputTextArea.addEventListener("input", () => {
-  characCount.textContent = inputTextArea.value.length;
-  let txt = inputTextArea.value.trim();
-  const words = txt.split(/\s+/).filter((item) => item).length;
-  wordCount.textContent = words;
-// Calculate WPM
+inputTextArea.addEventListener("input",()=>{
+  charcCount.textContent = inputTextArea.value.length;
+  console.log(charcCount);
+  let text = inputTextArea.value.trim();
+  const words = text.split(/\s+/).filter((item)=>item).length;
+
+wordCount.textContent = words;
+
 let currentTime = new Date().getTime();
-let timeElapsed = (currentTime - startTime) / 1000;
-let wpm = (words / timeElapsed) * 60;
-wpmCount.innerText = wpm.toFixed(2);
+let timeElapsed = (currentTime - startTime)/1000;
+let wpm = (words / timeElapsed)* 60;
+wpmCount.textContent = wpm.toFixed(2);
 
-});
 
+})
 
-inputTextArea.addEventListener("focus", function() {
+inputTextArea.addEventListener("focus", function(){
   startTime = new Date().getTime();
-});
+})
diff --git a/realTimeCharCounter/style.css b/realTimeCharCounter/style.css
@@ -24,18 +24,20 @@ body{
   margin-top: 10px;
   border-radius: 8px;
   box-shadow: 0 30px 50px rgba(30, 20, 49, 0.3);
-
 }
+
 textarea{
   width: 100%;
   border: none;
-  resize: none;
+  resize:none ;
+}
   outline: none;
   font-size: 16px;
   line-height: 28px;
   color: #0e101a;
 }
 
+
 .count{
   background-color: #000000;
   width: 80%;
@@ -47,6 +49,17 @@ textarea{
   justify-content: space-around;
   text-align: center;
   border-radius: 5px;
+
+  box-shadow: 0 20px 40px rgba(30, 20, 40, 0.4);
+}
+
+.count p{
+  color: #a0a0c0;
+}
+.count h5{
+  color: #e62916;
+  font-size: 32px;
+}
   box-shadow: 0 20px 40px rgba(30, 20, 49, 0.4);
 
 }