diff --git a/portfolio/.vscode/settings.json b/portfolio/.vscode/settings.json
new file mode 100644
index 0000000..4798424
--- /dev/null
+++ b/portfolio/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/portfolio/css/style.css b/portfolio/css/style.css
new file mode 100644
index 0000000..9250617
--- /dev/null
+++ b/portfolio/css/style.css
@@ -0,0 +1,564 @@
+*{
+    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.5rem;
+}
+
+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;
+}
+
+.home{
+    position: relative;
+    height: 100vh;
+    width: 100%;
+    background-image: url(../img/prof_img2.jpg);
+    filter: grayscale(100%);
+    clip-path: circle(70%);
+    background-size: cover;
+    background-position: center;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+
+}
+.slide{
+    margin-bottom: 20px;
+}
+
+.one{
+    display: inline-block;
+    margin-right: 15px;
+    height: 32px;
+    padding: 0 15px;
+    line-height: 32px;
+    font-size: 20px;
+    font-weight: 500;
+    border-radius: 5px;
+    background: var(--main-color);
+    color: var(--text-color);
+    
+}
+
+.home-text p{
+    color: var(--text-color);
+}
+.two{
+    display: inline-block;
+    color: var(--second-color);
+    font-size: 20px;
+    font-weight: 500;
+}
+.home-text h1{
+    font-size: var(--big-font);
+    font-weight: 700;
+    color: var(--text-color);
+    line-height: 1.1;
+    margin: 0 0 8px;
+}
+
+.home-text h3{
+    color: var(--text-color);
+    margin: 0 0 35px;
+    font-size: 3rem;
+    font-weight: 700;
+    line-height: 1.1;
+}
+.home-text p{
+    color: var(--second-color);
+    font-size: var(--p-font);
+    line-height: 1.8;
+    margin-bottom: 40px;
+}
+
+.button{
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.btn{
+    display: inline-block;
+    padding: 12px 28px;
+    background: var(--main-color);
+    border-radius: 5px;
+    color: var(--text-color);
+    font-size: 1rem;
+    letter-spacing: 1px;
+    font-weight: 600;
+    transition: all 45s ease;
+}
+
+.btn:hover{
+    transform: scale(0.9);
+}
+
+.btn2{
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--text-color);
+    margin-left: 35px;
+}
+.btn2 span i{
+    height: 55px;
+    width: 55px;
+    background: var(--main-color);
+    color: var(--text-color);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 35px;
+    margin-right: 15px;
+    border-radius: 50%;
+    transition: all 0.45 ease;
+}
+
+.btn2 span i:hover{
+    transform: scale(1.1) translateY(10px);
+}
+.about{
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    align-items: center;
+    gap: 1.5rem;
+}
+.about-image img{
+    height: auto;
+    max-width: 430px;
+    width: 100%;
+    border-radius: 20px;
+    filter: grayscale(100%);
+    clip-path: circle(50%);
+}
+
+.header .sticky{
+    background: var(--bg-color);
+    border-bottom: 2px solid #ffffff1a;
+}
+
+.about-text h2{
+    font-size: var(--h2-font);
+    line-height: 1;
+}
+.about-text h4{
+    font-size: 24px;
+    font-weight: 600;
+    color: var(--text-color);
+    line-height: 1.7;
+    margin: 15px 0 30px;
+}
+
+.about-text p{
+    font-size: var(--p-font);
+    color: var(--second-color);
+    line-height: 1.8;
+    margin-bottom: 4rem;
+}
+
+.services{
+    background: var(--second-bg-color);
+}
+.main-text{
+    text-align: center;
+}
+.main-text p{
+    color: var(--second-color);
+    font-size: 15px;
+    margin-bottom:1.5rem ;
+}
+.main-text h2{
+font-size: var(--h2-font);
+line-height: 1;
+}
+
+.services-content{
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, auto));
+    align-items: center;
+    grid-area: 2rem;
+    margin-top: 5rem;
+    gap: 20px;
+}
+
+.box{
+    background: var(--bg-color);
+    padding: 35px 40px;
+    border-radius: 8px;
+    transition: all 0.45 ease;
+}
+ 
+.s-icons i{
+    font-size: 32px;
+    margin-bottom: 2rem;
+}
+
+.box h3{
+    font-size: 24px;
+    font-weight: 600;
+    color: var(--text-color);
+    margin-bottom: 15px;
+}
+
+.box p{
+    color: var(--second-color);
+    font-size: 1rem;
+    line-height: 1.8;
+    margin-bottom: 25px;
+}
+.read{
+    display: inline-block;
+    padding: 8px 18px;
+    background: #333333;
+    color: var(--second-color);
+    font-size: 14px;
+    font-weight: 500;
+    border-radius: 8px;
+    transition: all .45s ease;
+}
+.read:hover{
+    letter-spacing: 1px;
+    background: #ffffff99;
+    color: var(--text-color);
+}
+.box:hover{
+    transform: translate(0px,-10px);
+    cursor: pointer;
+
+}
+
+.portfolio-content{
+    display: grid;
+    grid-template-columns: repeat(2, 2fr);
+    align-items: center;
+    gap: 2.5rem;
+    margin-top: 5rem;
+}
+
+.row{
+    position: relative;
+    overflow: hidden;
+    border-radius: 8px;
+    cursor: pointer;
+}
+.row img{
+    width: 100%;
+    border-radius: 8px;
+    display: block;
+    transition: transform 0.5s;
+}
+
+.layer{
+    width: 100%;
+    height: 0;
+    background:linear-gradient(rgba(0,0,0,0.1), #ff4d05);
+    position: absolute;
+    border-radius: 8px;
+    left: 0;
+    bottom: 0;
+    flex-direction: column;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: 0 40px;
+    transition: height 0.5s;
+}
+.layer h5{
+    font-size: 20px;
+    font-weight: 600;
+    margin-bottom: 15px;
+}
+.layer p{
+    color: var(--second-color);
+    font-size: 1rem;
+    line-height: 1.8;
+}
+.layer i{
+    color: var(--main-color);
+    margin-top: 20px;
+    font-size: 20px;
+    background: var(--text-color);
+    width: 60px;
+    height:60px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+}
+.row:hover img{
+    transform: scale(1.1);
+}
+.row:hover .layer{
+    height: 100%;
+}
+
+.contact{
+ background: var(--second-bg-color);
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);  
+ align-items: center;
+ gap: 2.5rem;  
+}
+
+.contact-text{
+    color: var(--text-color);
+    margin: 18px 0;
+    font-size: 20px;
+}
+.contact-text h2{
+    font-size: var(--h2-font);
+    line-height: 1;
+    margin: 18px 0;
+}
+.contact-text p{
+    color: var(--second-color);
+    font-size: var(--p-font);
+    line-height: 1.8;
+    margin-bottom:20px;
+}
+.list{
+    margin-bottom: 2.8rem;
+}
+.list li{
+    margin-bottom: 12px;
+}
+
+.list li a {
+    color: var(--second-color);
+    display: block;
+    font-size: 14px;
+    transition: all .45s ease;
+}
+.list li a:hover{
+    color: var(--text-color);
+    transform: translateX(5px);
+}
+
+.contact-icons i{
+    height: 45px;
+    width: 45px;
+    background: var(--main-color);
+    color: var(--text-color);
+    font-size: 22px;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 10px;
+    margin: 0 15px 20px;
+    transition: all 0.45s ease;
+
+}
+
+.contact-icons i:hover{
+    color: var(--main-color);
+    background: var(--text-color);
+}
+
+.contact-form{
+    position: relative;
+}
+.contact-form form input,
+form textarea{
+    width: 100%;
+    padding: 14px;
+    background: var(--bg-color);
+    color: var(--text-color);
+    border: none;
+    outline: none;
+    font-size: 15px;
+    border-radius: 8px;
+    margin-bottom: 10px;
+}
+.contact-form textarea{
+    resize: none;
+    height: 240px;
+}
+.contact-form .submit{
+    display: inline-block;
+    font-size: 16px;
+    background: var(--main-color);
+    color: var(--text-color);
+    width: 160px;
+    transition: all 0.45s ease;
+}
+
+.contact-form .submit:hover{
+    transform: scale(1.1);
+    cursor: pointer;
+}
+
+.end{
+    padding: 20px 15%;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 2rem;
+    background-color: var(--bg-color);
+}
+.last-text p{
+    color: var(--second-color);
+    font-size: 14px;
+}
+.top i{
+    padding: 10px;
+    border-radius: 8px;
+    font-size: 15px;
+    color: var(--text-color);
+    background: var(--main-color);
+}
+
+@media (max-width: 1480px){
+    header{
+        padding: 12px 2.5%;
+        transition: 0.1s;
+    }
+    header.sticky{
+        padding: 10px 2.5%;
+        transition: 0.1s;
+    }
+    section{
+        padding: 110px 3% 60px;
+    }
+    .end{
+        padding: 15px 3%;
+    }
+}
+@media (max-width: 1100px){
+    :root{
+        --big-font:4rem;
+        --h2-font:2.5rem;
+        --p-font:1.1rem;
+        transition: .1s;
+    }
+    .home-text h3{
+        font-size: 2.5rem;
+        transition: .1s;
+    }
+    .home{
+        height: 87vh;
+    }
+}
+
+@media (max-width: 920px){
+    .about{
+        grid-template-columns: 1fr;
+    }
+    .about-image{
+        text-align: center;
+        order: 2;
+    }
+    .about-image img{
+        width: 100%;
+        height: auto;
+        max-width: 100%;
+    }
+    .contact{
+        grid-template-columns: 1fr;
+    }
+}
+@media (max-width: 920px){
+    #menu-icon{
+        display: block;
+    }
+    .navlist{
+        position: absolute;
+        top: -1000px;
+        right: 0;
+        left: 0;
+        display: flex;
+        flex-direction: column;
+        background: var(--bg-color);
+        text-align: left;
+        transition: all .45s ease;
+    }
+    .navlist a {
+        display: block;
+        margin: 17px;
+        font-size: 20px;
+        transition: all .45s ease;
+        color: var(--text-color);
+    }
+    .navlist a:hover {
+        color: var(--main-color);
+    }
+    .navlist a.active {
+        color: var(--text-color);
+    }
+    .navlist.open{
+        top: 100%;
+    }
+}
\ No newline at end of file
diff --git a/portfolio/img/portfolio1.png b/portfolio/img/portfolio1.png
new file mode 100644
index 0000000..613722b
Binary files /dev/null and b/portfolio/img/portfolio1.png differ
diff --git a/portfolio/img/portfolio2.png b/portfolio/img/portfolio2.png
new file mode 100644
index 0000000..1ae3d5c
Binary files /dev/null and b/portfolio/img/portfolio2.png differ
diff --git a/portfolio/img/portfolio3.png b/portfolio/img/portfolio3.png
new file mode 100644
index 0000000..2353277
Binary files /dev/null and b/portfolio/img/portfolio3.png differ
diff --git a/portfolio/img/portfolio4.png b/portfolio/img/portfolio4.png
new file mode 100644
index 0000000..cef5161
Binary files /dev/null and b/portfolio/img/portfolio4.png differ
diff --git a/portfolio/img/portfolio5.png b/portfolio/img/portfolio5.png
new file mode 100644
index 0000000..843bca4
Binary files /dev/null and b/portfolio/img/portfolio5.png differ
diff --git a/portfolio/img/portfolio6.jpg b/portfolio/img/portfolio6.jpg
new file mode 100644
index 0000000..3e3cdcd
Binary files /dev/null and b/portfolio/img/portfolio6.jpg differ
diff --git a/portfolio/img/prof_img.jpg b/portfolio/img/prof_img.jpg
new file mode 100644
index 0000000..a0f98c9
Binary files /dev/null and b/portfolio/img/prof_img.jpg differ
diff --git a/portfolio/img/prof_img2.jpg b/portfolio/img/prof_img2.jpg
new file mode 100644
index 0000000..15c7b02
Binary files /dev/null and b/portfolio/img/prof_img2.jpg differ
diff --git a/portfolio/img/prof_img3.jpg b/portfolio/img/prof_img3.jpg
new file mode 100644
index 0000000..cff847d
Binary files /dev/null and b/portfolio/img/prof_img3.jpg differ
diff --git a/portfolio/img/prof_img4.jpg b/portfolio/img/prof_img4.jpg
new file mode 100644
index 0000000..32b7040
Binary files /dev/null and b/portfolio/img/prof_img4.jpg differ
diff --git a/portfolio/index.html b/portfolio/index.html
new file mode 100644
index 0000000..5cf7ebb
--- /dev/null
+++ b/portfolio/index.html
@@ -0,0 +1,222 @@
+<!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="slide">
+                <span class="one">Hello</span>
+                <span class="two">I'm</span>
+            </div>
+            <h1>Safir <span>J</span>M.</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>
+<!--About Section-->
+<section class="about" id="about">
+    <div class="about-image">
+        <img src="../img/prof_img.jpg" alt="about-image">
+    </div>
+    <div class="about-text">
+        <h2>About <span>Me</span></h2>
+        <h4>Full Stack Developer</h4>
+        <p>👀 I'm particularly interested in the MERN stack and Python, and I'm always looking for opportunities to learn and improve my skills.
+
+            🌱 Currently, I'm expanding my knowledge by learning C++, Python, and JavaScript, with a focus on MERN stack development.
+            
+            💞️ I'm actively seeking open source projects that require expertise in JavaScript, Python, C++, and React, and I'm excited about the possibility of collaborating with other developers to build something great.
+            
+            📫</p>
+   
+            <a href="#" class="btn">More About</a>
+        </div>
+
+</section>
+  
+<!--About Section-->
+
+<section class="services" id="services">
+    <div class="main-text">
+        <p>What I am Expert In</p>
+        <h2><span>My </span>Services</h2>
+    </div>
+    <div class="services-content">
+        <div class="box">
+            <div class="s-icons">
+                <i class="bx bx-mobile-alt"></i>
+                <h3>Web Design</h3>
+                <p>Web design is the process of creating visually appealing and functional websites. It involves various aspects such as layout, color scheme, typography, images, graphics, and user experience. A well-designed website should not only look good, but also be easy to navigate and use.                </p>
+                <a href="#" class="read">Read More</a>
+            </div>
+        </div>
+        <div class="box">
+            <div class="s-icons">
+                <i class="bx bx-edit-alt"></i>
+                <h3>Front-End Dev</h3>
+                <p>Front-end development is a type of web development that focuses on the client-side of a website or web application. 
+                    It involves the creation of user-facing components that make up the visual and interactive part of a website, such as the layout,
+                     design, and functionality. Front-end developers use various programming languages, such as HTML, CSS, and JavaScript,
+                     to build and optimize the user interface and user experience.</p>
+                <a href="#" class="read">Read More</a>
+            </div>
+        </div>
+
+        <div class="box">
+            <div class="s-icons">
+                <i class="bx bx-code-alt"></i>
+                <h3>Web Development</h3>
+                <p>Web development is the process of building, creating and maintaining websites and web applications.
+                     It encompasses several areas, including front-end development, back-end development, and full-stack development.</p>
+                <a href="#" class="read">Read More</a>
+            </div>
+        </div>
+
+
+    </div>
+</section>
+
+<!--Section portfolio-->
+
+<section class="portfolio" id="portfolio">
+    <div class="main-text">
+        <p>Portfolio</p>
+        <h2><span>Latest </span>Projects</h2>
+    </div>
+    <div class="portfolio-content">
+        <div class="row">
+            <img src="../img/portfolio1.png" alt="">
+            <div class="layer">
+            <h5>Word Counter</h5>
+            <p>This is a Js mini project, provides a real-time word and character counter for the text entered into the input text area. It also calculates the words per minute based on the time elapsed since the user started typing.</p>
+            <a href="#"><i class="bx bx-link-external"></i></a>
+            </div>
+        </div>
+
+        <div class="row">
+            <img src="../img/portfolio2.png" alt="">
+            <div class="layer">
+            <h5>Emoji Generator</h5>
+            <p>his is a great project for beginners who want to practice their JavaScript skills and have some fun with emojis!</p>
+            <a href="#"><i class="bx bx-link-external"></i></a>
+            </div>
+        </div>
+
+        <div class="row">
+            <img src="../img/portfolio3.png" alt="">
+            <div class="layer">
+            <h5>English Dictionary</h5>
+            <p>In this Js mini project, I'll be building a web application that fetches the definition and pronunciation of an English word, audio from an API and displays it on a webpage. </p>
+            <a href="#"><i class="bx bx-link-external"></i></a>
+            </div>
+        </div>
+
+        <div class="row">
+            <img src="../img/portfolio4.png" alt="">
+            <div class="layer">
+            <h5>Currency Converter</h5>
+            <p>In this tutorial, you'll learn how to use JavaScript, the Fetch API, and an external API to build a currency converter that can convert an amount from one currency to another.</p>
+            <a href="#"><i class="bx bx-link-external"></i></a>
+            </div>
+        </div>
+
+        <div class="row">
+            <img src="../img/portfolio5.png" alt="">
+            <div class="layer">
+            <h5>Digital Clock</h5>
+            <p>In this tutorial, you'll learn how to create a digital clock using JavaScript.</p>
+            <a href="#"><i class="bx bx-link-external"></i></a>
+            </div>
+        </div>
+
+        <div class="row">
+            <img src="../img/portfolio6.jpg" alt="">
+            <div class="layer">
+            <h5>BMI Calculator</h5>
+            <p>Learn how to use JavaScript to build a BMI calculator that calculates the Body Mass Index based on user input and provides a message related to the BMI category.</p>
+            <a href="#"><i class="bx bx-link-external"></i></a>
+            </div>
+        </div>
+    </div>
+</section>
+
+<!--Contact -->
+<section class="contact" id="contact">
+    <div class="contact-text">
+    <h2>
+        Contact <span>Me!</span>
+    </h2>
+    <h4>If you have any porject in your mind.</h4>
+    <p>👋 Hi, I'm Safir, a software developer with a strong focus on problem solving and front-end development.
+
+        👀 I'm particularly interested in the MERN stack and Python, and I'm always looking for opportunities to learn and improve my skills.</p>
+    <div class="list">
+        <li> <a href="#">+97470071190</a></li>
+        <li> <a href="#">safir.jameel@gmail.com</a></li>
+        <li> <a href="#">Please follow, like & subscribe</a></li>
+    </div>
+    <div class="contact-icons">
+        <a href="#"><i class="bx bxl-facebook"></i></a>
+        <a href="#"><i class="bx bxl-twitter"></i></a>
+        <a href="#"><i class="bx bxl-instagram-alt"></i></a>
+        <a href="#"><i class="bx bxl-youtube"></i></a>
+    </div>
+</div>
+    <div class="contact-form">
+        <form action="">
+            <input type="name" placeholder="Your Name" required>
+            <input type="email" placeholder="Your email address" required>
+            <input type="" placeholder="Your mobile number" required>
+            <textarea name="" id="" cols="30" rows="10" placeholder="How can I help you?" required></textarea>
+            <input type="submit" value="send message" class="submit" required>
+        </form>
+    </div>
+</section>
+
+<!--last section-->
+
+<section class="end">
+    <div class="last-text">
+        <p>&#169; 2023 Safir JM. All rights reserved.</p>
+    </div>
+    <div class="top">
+        <a href="#home"><i class="bx bx-up-arrow-alt"></i></a>
+    </div>
+</section>
+<!--custom js link-->
+<script type="text/javascript" src="js/script.js"></script>    
+</body>
+</html>
\ No newline at end of file
diff --git a/portfolio/js/script.js b/portfolio/js/script.js
new file mode 100644
index 0000000..0795700
--- /dev/null
+++ b/portfolio/js/script.js
@@ -0,0 +1,17 @@
+const header = document.querySelector("header");
+window.addEventListener("scroll", function(){
+    header.classList.toggle("sticky", window.scrollY > 100);
+});
+
+let menu = document.querySelector("#menu-icon");
+let navlist = document.querySelector(".navlist");
+
+menu.onclick =  () => {
+    menu.classList.toggle('bx-x');
+    navlist.classList.toggle('open')
+}
+
+window.onscroll = ()=>{
+    menu.classList.remove('bx-x');
+    navlist.classList.remove('open')
+}
\ No newline at end of file
diff --git a/realTimeCharCounter/index.html b/realTimeCharCounter/index.html
index 0d74e61..db697b1 100644
--- a/realTimeCharCounter/index.html
+++ b/realTimeCharCounter/index.html
@@ -9,17 +9,16 @@
       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 +30,14 @@ <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
index f29bdce..cc7441e 100644
--- a/realTimeCharCounter/script.js
+++ b/realTimeCharCounter/script.js
@@ -1,23 +1,27 @@
-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
index e62768b..cd9d527 100644
--- a/realTimeCharCounter/style.css
+++ b/realTimeCharCounter/style.css
@@ -24,12 +24,15 @@ 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;
@@ -47,6 +50,16 @@ 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);
 
 }