Hello there,

In this article you will learn how can you let the user input something when the website loads and the site will display that input on the screen.
We are going to use JavaScript Prompt to take the input from the user.

Prerequisites

Very basic knowledge of JavaScript

So, let's start the coding part...

HTML

Just give a id to the element whose content you have to change.

Here, I have to change the content inside the div with id "name".

So, we are all set. Now let's jump to the main JS part...

It's just a two line script and you're done.

JS

What we are doing here is taking a prompt input from the user and storing it in the variable called "name".

Then we're changing the content of the div with id "name".

So, that's it for this post. This was a small basic tutorial on JavaScript. Have a look on my other JavaScript projects by clicking the button below.

JavaScript

React JS custom text editor modal component.

    
        
import React, { useState } from 'react'

export default function Form() {
    const clear = () => {
        let newtext = text.substr(0, -1);
        setText(newtext);
    }
    const copy = () => {
        navigator.clipboard.writeText(text)
    }
    const upper = () => {
        let newtext = text.toUpperCase();
        setText(newtext);
    }
    const capitalize = () => {
        let newtext = text.charAt(0).toUpperCase() + text.slice(1);
        setText(newtext);
    }
    const remove_space = (event) => {
        let newtext = text.split(' ').filter(s => s).join(' ');
        setText(newtext);
    }
    const handleOnChange = (event) => {
        setText(event.target.value);
    }
    const [text, setText] = useState("");
    return (
        <>
            <div classname="form-group container p-4">

                {/* buttons */}
                <button 0="" classname="btn  btn-primary" data-bs-placement="top" data-bs-toggle="tooltip" disabled="{text.length" onclick="{clear}" title="Tooltip on top"><i classname="far fa-trash-alt"></i></button>
                <button 0="" classname="btn  btn-primary" disabled="{text.length" onclick="{copy}"><i classname="far fa-copy"></i></button>
                <button 0="" classname="btn  btn-primary" disabled="{text.length" onclick="{upper}"><i classname="far fa-text-size"></i></button>
                <button 0="" classname="btn  btn-primary" disabled="{text.length" onclick="{capitalize}"><i classname="fas fa-font-case"></i></button>
                <button 0="" classname="btn btn-primary" disabled="{text.length" onclick="{remove_space}"><i classname="fas fa-line-height fa-rotate-270"></i></button>

                {/* Textarea */}
                <textarea classname="thetext form-control mb-4" id="exampleFormControlTextarea1" onchange="{handleOnChange}" rows="8" value="{text}"></textarea>
                <h4 classname="mt-4">Text Count</h4>
                <div classname="my-2">
                    <p>{text.split(/\s+/).filter((element) =&gt; { return element.length !== 0 }).length} words and {text.split(' ').filter(s =&gt; s).join('').length} characters</p>
                </div>
            </div>
        &lt;/&gt;
    )
}

        
        
        
How to Learn React Step by Step:
React JS is a very popular web framework. It is a free and open-source front-end JavaScript library for building user interfaces or UI components. React JS is maintained by Facebook. So, if you are a web developer, you should be aware that everythin gwe see on the web is just html, css and the functioning things are simply javascript. You must have worked with html and css to make simple websites or standalone pages. But, what if you are building a large commercial website with many pages. There are a lot things to know about web development and many compplexitie4s in doing them like routing without reloading the pages.

So, React makes things much more easier and developer friendly to handle. Thus for a modern UI developer, you should learn this. Not only for UI, React helps in making a complete web app structure. This is not just for React. There are other JS libraries also like Angular, that you can learn to create modern web apps. But, in this post, we are discussing about React JS... Further Reading

Make a working Navbar component in react.
First import the links

    
        
<link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" rel="stylesheet"></link>
<link crossorigin="anonymous" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" rel="stylesheet"></link>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
        

React

    
        
import React from 'react'
import { Link } from 'react-router-dom'

export default function Navbar() {
    return (
        <>
            <nav classname="navbar navbar-expand-md bg-light navbar-light">
                <link classname="navbar-brand" to="/"></link>Social
                <button classname="navbar-toggler" data-target="#collapsibleNavbar" data-toggle="collapse" type="button">
                    <i classname="fal fa-bars"></i>
                </button>
                <div classname="collapse navbar-collapse" id="collapsibleNavbar">
                    <ul classname="navbar-nav">
                        <li classname="nav-item">
                            <link classname="nav-link" to="/"></link>Home
                        </li>
                        <li classname="nav-item">
                            <link classname="nav-link" to="/about"></link>About
                        </li>
                    </ul>
                    <div classname="d-flex navbar-nav">
                        <li>
                            <link classname="nav-item btn-danger btn mx-3" to="/login"></link>Login
                        </li>
                        <li>
                            <link classname="nav-item btn border border-primary" to="/"></link>Sign Up
                        </li>
                    </div>
                </div>
            </nav>
        &lt;/&gt;
    )
}

How to Learn React Step by Step:

React JS is a very popular web framework. It is a free and open-source front-end JavaScript library for building user interfaces or UI components. React JS is maintained by Facebook. So, if you are a web developer, you should be aware that everythin gwe see on the web is just html, css and the functioning things are simply javascript. You must have worked with html and css to make simple websites or standalone pages. But, what if you are building a large commercial website with many pages. There are a lot things to know about web development and many compplexitie4s in doing them like routing without reloading the pages.

So, React makes things much more easier and developer friendly to handle. Thus for a modern UI developer, you should learn this. Not only for UI, React helps in making a complete web app structure. This is not just for React. There are other JS libraries also like Angular, that you can learn to create modern web apps. But, in this post, we are discussing about React JS... Further Reading

Make a text typing Animation in JavaScript.

HTML Code

    
        
<div class="top-wrapper">
	<p>
        </p><h2 class="txt-rotate" data-period="900" data-rotate="[&quot;Hello User&quot;, &quot;Welcome to MrDevKnown&quot;, &quot;JavaScript Tuorial&quot;, &quot;Text typing effect in JS&quot;]">
        </h2>
	<p></p>
</div>
    

JavaScript Code

var TxtRotate = function (el, toRotate, period) {
        this.toRotate = toRotate;
        this.el = el;
        this.loopNum = 0;
        this.period = parseInt(period, 10) || 2000;
        this.txt = '';
        this.tick();
        this.isDeleting = false;
    };

    TxtRotate.prototype.tick = function () {
        var i = this.loopNum % this.toRotate.length;
        var fullTxt = this.toRotate[i];

        if (this.isDeleting) {
            this.txt = fullTxt.substring(0, this.txt.length - 1);
        } else {
            this.txt = fullTxt.substring(0, this.txt.length + 1);
        }

        this.el.innerHTML = '' + this.txt + '';

        var that = this;
        var delta = 300 - Math.random() * 100;

        if (this.isDeleting) { delta /= 2; }

        if (!this.isDeleting && this.txt === fullTxt) {
            delta = this.period;
            this.isDeleting = true;
        } else if (this.isDeleting && this.txt === '') {
            this.isDeleting = false;
            this.loopNum++;
            delta = 500;
        }

        setTimeout(function () {
            that.tick();
        }, delta);
    };

    window.onload = function () {
        var elements = document.getElementsByClassName('txt-rotate');
        for (var i = 0; i < elements.length; i++) {
            var toRotate = elements[i].getAttribute('data-rotate');
            var period = elements[i].getAttribute('data-period');
            if (toRotate) {
                new TxtRotate(elements[i], JSON.parse(toRotate), period);
            }
        }
        // INJECT CSS
        var css = document.createElement("style");
        css.type = "text/css";
        css.innerHTML = ".txt-rotate > .wrap { border-right: 0.08em solid #666 }";
        document.body.appendChild(css);
    };

JavaScript Music Player Web App:
That was 26 July, 2021. I wanted to improve my front end development skills. So I decided to make something that would also help me in Javascript. Because seriously, I am worse at it! At the end, I sat on my computer and started looking for an idea. Suddenly, I don't know why but one line said by Mark Zuckerberg hit me on my mind. Mark has once said during his speech at Harvard, "Facebook was not the first thing that I built... I also built games, chat systems, study tools and music players. I’m not alone. JK Rowling got rejected 12 times before publishing Harry Potter. Even Beyonce had to make hundreds of songs to get Halo. The greatest successes come from having the freedom to fail."
Well I know that's very motivating line... But I am not talking about that! Well, I know you got what I am talking about, but I need to explain this... 

Did you notice, he said Music Players... Well, That's where the idea came from... Thank you Zuck! :)
So, first things first, I did what's every web dev's first step, that is to create a index.html file... Then it all started... Firstly I created the basic structure of the website in html then added some css in it... Further Reading 

React JS is a very popular web framework. It is a free and open-source front-end JavaScript library for building user interfaces or UI components. React JS is maintained by Facebook. So, if you are a web developer, you should be aware that everythin gwe see on the web is just html, css and the functioning things are simply javascript. You must have worked with html and css to make simple websites or standalone pages. But, what if you are building a large commercial website with many pages. There are a lot things to know about web development and many compplexitie4s in doing them like routing without reloading the pages.

So, React makes things much more easier and developer friendly to handle. Thus for a modern UI developer, you should learn this. Not only for UI, React helps in making a complete web app structure. This is not just for React. There are other JS libraries also like Angular, that you can learn to create modern web apps. But, in this post, we are discussing about React JS

So, a few months back from the time I wrote this post, I started to learn react. I followed a YouTube playlist that helped me. And if you are going to learn react then you can also follow it. But this is only if you know hindi. To access the playlist, click here.

This playlist makes you learn react by making projects. Which is I suppose the best way to learn programming. Like if you ask me, I never follow any tutorials. I just come across an idea and start building it. Yeah, most of the time I get frustrated as my ideas don't work. But this is how programming is. You learn to deal with problems. *Also, this is not a promotional post.*

So, I think that's it for this post. If you want to learn react follow the above playlist. See you in the next post.

Hey there, Mr.Known here... This is the first post on this blog but not my first project. I started to code back in 2019, when I learnt basics of html, css and I should not say but I saw PHP...

# Dare not ask Why? Okay! :')

So basically, my story begins from ... Error 500

That was 26 July, 2021. I wanted to improve my front end development skills. So I decided to make something that would also help me in Javascript. Because seriously, I am worse at it! At the end, I sat on my computer and started looking for an idea. Suddenly, I don't know why but one line said by Mark Zuckerberg hit me on my mind. Mark has once said during his speech at Harvard, "Facebook was not the first thing that I built... I also built games, chat systems, study tools and music players. I’m not alone. JK Rowling got rejected 12 times before publishing Harry Potter. Even Beyonce had to make hundreds of songs to get Halo. The greatest successes come from having the freedom to fail."

Well I know that's very motivating line... But I am not talking about that! Well, I know you got what I am talking about, but I need to explain this...

Did you notice, he said Music Players... Well, That's where the idea came from... Thank you Zuck! :)

So, first things first, I did what's every web dev's first step, that is to create a index.html file... Then it all started... Firstly I created the basic structure of the website in html then added some css in it...

Then after I was satisfied with the design { Well, that saisfaction is temporary... } I created script.js file and started with my javascript part for the project.

After a few google searches and a few video tutorials, I completed the player in 3 hours. Well, thanks to the gods of developers, w3schools, stackoverflow, geeksforgeeks, youtube, ...

Note: But, you should keep in mind that there's no program made which doesn't have bugs.

The most important part of a programmers life is debugging of code. That's where we spend most time staring at our code looking for a silly error that we committed.

Finally, managing with my studies and taking out some time for debugging, I guess today I completed it... Not today actually, I meant to say the day I uploaded this post. See on the top.

This is the final look of the music player:

If you want the code of the music player, then you are just one comment away...

Right now, I am not providing the code because i think as of now, no one other than me is reading this...

Please let me know in the comments below that you are reading this post...

Code Link: Github

This link might not work right now... :(

This is how the player looks like...

Okay Bye Bye!

See you...