DEV Community: KUMAR HARSH

Custom Snippets in VS Code

KUMAR HARSH — Mon, 12 Jul 2021 04:48:39 +0000

Tired of writing the same code over and over again?

Want to save time in a Competitive Programming contest?

Rest Assured as VS Code allows you to create your very own code snippets to save time while programming.

What is a Snippet?
A prefix is what is used to trigger the snippet and the body will be expanded and inserted.

You can create snippets:

Globally- which will be used for all programming languages across all folders.
Project- custom snippets for each project separately.
Language- create templates for each programming language you code in separately.

Not only that you can create multiple code snippets and use different prefixes to use your snippet of choice whenever you want.

Now let's dive right into it and see how we can do all of this:
open VS Code > settings > user snippets

You should see a drop-down menu as shown in the image below.

Now select the particular language for which you want to create the snippets by scrolling or searching for it (by language identifier) in the search box shown or you can also select the New Global Snippets file if snippet should appear for all languages.

Here I would be showing how to create 2 custom snippets for C++ :

One that I use for normal programming.
Another one that I use for competitive programming.

Select CPP(C++) from the drop-down menu for C++. You'll see text commented in between
a pair of curly braces { // }. The commented text contains some basic instructions on how
to create the snippet and an example code, you can either clear all of it or edit and use the same code.

Normal Programming Code Snippet

here is how it looks in the cpp.json file
( I'll add the screenshot of the complete page below)

the "snippet-normal-c++" is the title you choose for your snippet

prefix: the word by which access your snippet while coding (basically when you type as in this case "cpp" while coding in a .cpp file vs code Intellisense automatically gives you suggestions from where you can hit enter and get your boilerplate code)

you can see the suggestions vs code gives in the image below:

(try this after creating your snippet and saving it)

body: this is where you write the code template you want, you can write them in between double quotes " " and separate them by using a comma(,) which is the typical syntax of a .json file.

description: you can add a little description if you want which will be displayed by the vs code IntelliSense.
Now one particular thing you might have noticed is the "$1" symbol which I have used.
That indicates the position where the cursor will be placed after the template has been copied.

Here is how the template looks like when used while coding -

Competitive Programming Code Snippet

Why use #include <bits/stdc++.h> ? you might ask

It is a header file that includes every standard library. In programming contests, using this file is a good idea, when you want to reduce the time wasted in doing chores; especially when your rank is time sensitive

Also taking input of the number of test cases is a part of each question so that is why I have included that in the template I use.

But anyways that was me. You can design your code that fulfills your needs.

here is how the output of this snippet looks like:

Here is how the Competitive Programming Snippet looks like:

And here is how the complete cpp.json file looks like:

Hit Ctrl+S to save the settings...

You can add as many templates as you want and fine-tune them according to your need.

So what are you waiting for? Go and create your snippet right now. KEEP CODING !!!

If you prefer to watch videos to learn something here is a YouTube video I found helpful while learning how to create custom snippets:

There are many more features that you can add to your template and even download some extensions for that. To know more about that you can read Snippets in Visual Studio Code.

If you liked my content consider following me on Twitter

Also if you got any questions feel free to ping me on Twitter.

Thank You! 😊

What is Linux ? 🤔

KUMAR HARSH — Sat, 26 Jun 2021 15:37:14 +0000

I have recently started learning Linux and so I decided to document my journey along the way, so I would be writing a Blog series where I will cover everything that I have learned.

The entire content credits goes to my instructor Brian Holt.

So without further ado, let's get on with todays blog.

Let’s get started with a little bit of backstory about Linux 👨‍🏫

To learn about how Linux came to be, let’s go back to the beginning to 1969 where Ken Thompson and Dennis Ritchie of Bell Laboratories developed the UNIX operating system. It was later rewritten in C to make it more portable and eventually became a widely used operating system.

A decade or so later, Richard Stallman started working on the GNU (GNU is Not UNIX) project, the GNU kernel called Hurd, which unfortunately never came to completion. The GNU General Public License (GPL), a free software license, was also created as a result of this.

The kernel is the most important piece in the operating system. It allows the hardware to talk to the software. It also does a whole lot of other cool things. For now, just know that the kernel controls pretty much everything that happens on your system.

During this time other efforts such as BSD, MINIX, etc. were developed to be UNIX like-systems. However, one thing that all these UNIX like-systems had in common was the lack of a unified kernel.

Then in 1991, a young fellow named Linus Torvalds started developing what we now know today as the Linux kernel.

If at this you are wondering why I am giving you a history lesson, its because, I think it's useful to know why something was created to understand what problems it can solve for you.

Let's talk a bit more about UNIX so that we can understand UNIX like-systems better.

UNIX

Linux is considered a Unix-like operating system which basically means that Linux derives heavy inspiration from Unix without actually conforming to be a full Unix operating system. macOS and FreeBSD would be two more examples of a Unix-like operating system.

Unix was created in the 70s and has pretty much inspired every operating system created since then. Nearly everything you're going to learn today was originated in Unix itself. A big part of Unix software is the idea of the Unix philosophy which is a sort of digital minimalism when it comes to coding. The idea is instead of having a few very specialized tools (or programs) we should have many small, composable tools that we can use to compose to solve larger problems. The influence of this is still felt and talked about today.

Here's what they originally wrote:

Make each program do one thing well. To do a new job, build afresh rather than complicate old programs by adding new "features".
Expect the output of every program to become the input to another, as yet unknown, program. Don't clutter output with extraneous information. Avoid stringently columnar or binary input formats. Don't insist on interactive input.
Design and build software, even operating systems, to be tried early, ideally within weeks. Don't hesitate to throw away the clumsy parts and rebuild them.
Use tools in preference to unskilled help to lighten a programming task, even if you have to detour to build the tools and expect to throw some of them out after you've finished using them.

Linux

Linux isn't directly Unix, just directly inspired by it, and incorporates many of its ideas and interfaces into it. It was created in 1991 by Linus Torvalds who is still an influential figure today and still runs the Linux project. He created Linux because at the time there was no single free, open-source reimplementation of the Unix operating system (the BSD kernel wasn't yet available yet) so he wrote his own kernel which became known as the Linux kernel.

From here the project took off and was adopted far and wide. (As of writing) all of the top 500 super computers run on Linux, much of the mobile phone market share (thanks to Android being based on Linux), and many of the servers running your favorite websites. Suffice to say, Linux is incredibly important to the modern computing world.

TIME has come to answer the most important Question

Why Linux 🤔

So why Linux over other operating systems?

First, it's free. Anyone can use Linux to do anything without paying anyone a dime. This is useful for college students who don't have any money but it's also critical for large businesses running thousands or tens-of-thousands of servers. It can save them millions of dollars to not have to pay for an operating system.

It's very well maintained. Because Linux is such a popular operating system, it has a lot of eyes on it. Engineers from all over the world and all over the industry are constantly contributing fixes and new features to Linux, both on their own free time and during the course of their jobs.

It runs just about anywhere. Linux not only runs on x86 (the Intel / AMD processor architecture your computer is likely using) but it runs on Internet-of-Things devices, phones, fridges, cars, etc. If it has a processor in it, chances are you can get Linux running on it already.

Most of the the things you need already exist for it. Linux already has many of the tools one would need to run servers, devices, media, etc. all on it already, meaning you wouldn't need to create it. Linux has a rich ecosystem of programs available that are also likely free.

The knowledgebase for Linux is enormous. Having a problem? Chances are someone else already had the same problem and you can find the solution on StackOverflow or someone's blog. Because the knowledgebase is so large, it's really easy to hire someone with deep knowledge of Linux and for you it's profitable to learn Linux because so many jobs demand the skillset.

At its core, Linux is the kernel. Anything based on this Linux kernel is a considered a Linux distribution, or distro for short.

Choosing a Linux Distribution 🤯

We learned about the Linux kernel which powers millions of devices a day.

One thing before we move forward, the term Linux is actually quite a misnomer, since it actually refers to the Linux kernel. However, many distributions use the Linux kernel so therefore are commonly known as Linux operating systems.

A Linux system is divided into three main parts:

Hardware - This includes all the hardware that your system runs on as well as memory, CPU, disks, etc.
Linux Kernel - As we discussed above, the kernel is the core of the operating system. It manages the hardware and tells it how to interact with the system.
User Space - This is where users like yourself will be directly interacting with the system.

So the first step we’ll need to take is to install Linux on your machine.

There are many Linux distributions to choose from, we’ll just go over the most popular options.

Debian

Debian is an overall great operating system for any platform.

Ubuntu

Great for any platform, desktop, laptop and server.

Linux Mint

Great for desktop and laptop

Red Hat Enterprise Linux

As described by the name it's mostly used in enterprise, so if you need a solid server OS this would be a good one.

Arch Linux

Great for desktop and laptop. If you also have a small device such as a Raspberry Pi and need to stick a lightweight OS on it, you can’t go wrong with Arch.

Few more popular ones:

Let's Run Linux 😎

So, enough chit-chat, let's run Linux!!

Which operating system are you using right now?

If you're using a desktop running Linux of some variety, you're already set.

For Windows and MacOS users we have some options:

Virtualization

We're going to running our Linux through a process call virtualization. We'll be running a virtual machine which is frequently abbreviated as VMs. VMs are an operating system running within another operating system, called the host machine. The host machine will create a virtual environment with virtual access to its hardware to the VM. The VM will have no idea that it's not actually running on real hardware; all it can see is the resources that the host is providing it.

I'll give you several options so you can do what's best fit for you.

For either macOS or Windows: Multipass

Multipass is a great new tool from the folks at Canonical (who make Ubuntu). It's a super easy way to spin up and spin down little VMs to try things out. You can even spin up multiple and play with them together. I'd recommend this for most users of macOS and Windows since it just sort of works without a lot of effort and you don't have to install everything yourself.

If you are on Windows 10 Home you need to install VirtualBox too in addition to Multipass.

Multipass will use VirtualBox if it can't use Microsoft Hyper-V (a feature only available in Windows 10 Pro.) If you are on MacOS or Windows 10 Pro, you do not need VirtualBox.

Once you have Multipass installed, you should be able to run it and open a new shell.

You should be here. It has you logged in as the user "ubuntu" who has password less root privileges.

For either macOS or Windows: VirtualBox

Oracle makes a product called VirtualBox. VirtualBox is a hosted hypervisor which is another way of saying that this is a program that allows you to run VMs. It can run Windows, Linux, macOS, and many other VMs.

You'll need to download VirtualBox and you'll need to download the Ubuntu Server Installer as well and go through the whole process.

It bears mentioning that VirtualBox isn't the only option. VMWare Fusion and Parallels (macOS only) are two great options too. They just aren't FREE.

Here is a YouTube Video I found useful while installing Ubuntu on my Windows 10 VirtualBox.

For Windows Users: WSL

If you're a Windows 10 user, you can install and use WSL. I'd strongly recommend installing WSL2. It allows you to run Linux natively inside of Windows.

At this point, you should have a shell prompt ready to go so we can start learning Linux.

Bonus

Many people (me included) worship 🙏 Linus Torvalds and I encourage you to find out more about him and how Linux came to be and how that led to Git being developed. Yes! you read it right, this man was the mind behind Git as well, and now you know why I worship him.

Here is a great Ted Talk that you should listen to.

What’s my favorite Linux Distro ?

Glad you asked.

I LOVE Ubuntu. It’s the first Linux distro I ever downloaded and I have no regrets.

It's a very good choice for many different use cases. In my opinion, it's the best general purpose distro overall.

Ubuntu is a very polished (when I say polished I mean it has a nice interface) distro of Linux which I think it is the easiest to use. It's backed a company called Canonical who puts a lot of love into the distro and they're definitely one of my favorite companies.

Ubuntu is a great choice for running Linux on as your main OS (I don't), for servers in the cloud, for IoT, or for any other of myriad things. It's a really great, flexible distribution.

What do you think are the best Linux Distros?

Let me know in the comments!

If you liked my content consider following me on Twitter

I hope you found this article valuable. If yes do let me know in the comments 😊

Also if you got any question feel free to ping me on Twitter.

Thank You!

Best IDE’s and Text Editors!

KUMAR HARSH — Thu, 24 Jun 2021 11:40:30 +0000

As a coder, finding a text editor that works for you is critical. You’ll be spending tons of time working in it, so get cozy.

For those just getting started and wondering about text editors, why they’re important and which to use – keep reading!

What is a text editor?

The formal definition is:

“A text editor is a type of program used for editing plain text files.”

Essentially, a text editor is a program on you computer that allows you to create and edit a range of programming language files.

AKA this is the place where you write your code!

Text editors handle “hand coding” many different languages, i.e.: HTML, CSS, JavaScript, PHP, Ruby, Java, Python, and so forth.

If you already use one you might think,

"Why is it important for me to know about the different Text Editors and IDE's available out there, if the one I am currently working on works just fine?"

Well simply put,

There's nothing more satisfying than finding the perfect Text Editor., and you won't find the perfect one unless you try some of these out yourself.

Keep in mind that there is no THE BEST EDITOR out there, each one is different, the best text editor for you is ultimately what makes you most efficient., so experiment with a few find out the one which suits you the best.

Now there are dozens of editors out there but I will only mention the ones which have gained immense popularity and are widely used by the community, and are FREE to use.

Here’s a collection of my favorite text editors. Some of these are also considered IDEs.

Text editors are not the same as IDEs (Integrated Development Environment). While almost every IDE has the capability of creating and editing plain text documents, they also include an abundance of other features.

IDEs have different panels and widgets, taking a lot more space. An everyday text editor is much more lightweight and flexible.

Meaning you can do a lot more with IDEs than simply write code.

Visual Studio Code

Visual Studio Code is a open source-code editor made by Microsoft for Windows, Linux and MacOS.

Features include support for debugging, syntax highlighting, intelligent code completion, snippets, code refactoring, large library of extensions and plugins, and embedded Git.

Not quite an IDE (that’s actually a separate product altogether), VS Code can take on most of the tasks of an IDE with the right configuration and plugin library.

Sublime Text

Sublime Text is a shareware cross-platform source code editor with a Python application programming interface.

Sublime Text is a beautiful, feature-rich code editor. Maybe the biggest draw is that it puts a premium on user experience. The UX is probably the tightest of every entry on the list. This is because of features like distraction-free writing mode, quick shortcuts/search, split editing, and much more. One of the biggest features users flaunt is the ridiculously intuitive keyboard shortcut system.

They offer an indefinite, never-ending trial so it's essentially free to use unless you chose to upgrade to premium.

Vim

Vim is hardcore. Let’s be clear about that upfront. While other text editors are newbie friendly this one is definitely not. From the official website down to the software itself, Vim is a coder’s tool for coders by coders.

It’s designed for use both from a command-line interface (CLI) and as a standalone application in a graphical user interface (GUI).

Vim provides many commands which make editing functionality really powerful.

Vim definitely requires a learning curve and a willingness to immerse yourself in a whole new feature-set that might not be the same as some other text editors you are used to.

Once you get past the UI and the steep learning curve, you’ll see why the text editor is designed the way it is. It does roughly everything all the other best text editors can do. But more than maybe anything else on the list, it’s designed for efficiency and function.

Atom

Atom is a free and open-source and highly customizable text and source code editor for MacOS, Linux, and Windows with support for plug-ins written in JavaScript, and embedded Git Control, developed by GitHub and now owned by Microsoft. Atom is a desktop application built using web technologies.

Built around a minimal core, Atom comes with multiple language-specific packages built in, and the library of community-written ones has exploded over the years since the editor was first released.

Notepad++

Notepad++ is an extremely popular text editor. That is in part because it’s free and GPL-licensed open source. Even more than that, though, the reason it’s one of the best text editors around is that it’s simple.

One of the things that makes Notepad++ stand out is the fact that it’s already been translated into over 80 languages.

The downside: this software is Windows-only.

Brackets

Brackets is a free and open-source code editor that is made for web developers. Created and released by Adobe Systems, Brackets has a clean user interface that is filled with brilliant features: Live Preview, Quick Edit, etc. Link to download
Codeshare: Share code in real-time with developers in your browser.

It does, however, offer some unique and useful features. One of those features being Extract, a tool which allows you to extract information such as colors, fonts, gradients, measurements, directly from PSDs as clean CSS. For front-end developers working in a design agency who have to recreate pixel-perfect sites from mock-ups, there may be no better tool for you.

Bluefish

Bluefish is more of an IDE than a real text editor, which means it may be a little advanced for brand new users. It’s free, supports pretty much every language because it’s open-source, and comes with a wide variety of useful features for use across many platforms. It supports coding languages including HTML, XHTML, CSS, XML, PHP, C, C++, JavaScript, Java, Go, Ada, D, SQL, Perl, ColdFusion, JSP, Python, Ruby, and shell.

Online IDE's

Replit

It is a simple yet powerful Online IDE, Editor, Compiler, Interpreter, and REPL. Code, compile, run, and host in 50+ programming languages.

Codeshare

Share code in real-time with developers in your browser. An online code editor for interviews, troubleshooting, teaching.

Bonus

Vi

The default editor that comes with the UNIX operating system is called vi (visual editor).

What’s my favorite text editor?

Glad you asked.

I LOVE VS CODE. It’s the first text editor I ever downloaded and I’m not looking back.

I’ve played with Sublime, but there’s something about VS Code. It’s attractive, easy to use, tons and tons of customizations and modifications using the never ending extensions … plus all my friends use it

But, truly, VS Code is a great editor – that’s why so many use it, and it has gained immense popularity since it's release.

In Conclusion

When trying to make a list of the best code and text editors available, it’s impossible not to miss a few strong contenders.
Every Coder, and developer has a favorite set of tools just like every carpenter has a favorite hammer and an artist has a favorite set of brushes.

What do you think are the best code editors?

Let me know in the comments!

If you liked my content consider following me on Twitter

I hope you found this article valuable. If yes do let me know in the comments 😊

Also if you got any question feel free to ping me on Twitter.

Thank You!

Want to Host Your Website for free ?

KUMAR HARSH — Tue, 22 Jun 2021 13:43:47 +0000

When you create a website, you essentially create a bunch of different files. These files need to be stored somewhere in order to be accessible on the Internet. Reliable and high-performing web hosting is a crucial part of any successful website.

Lets suppose you've just started making basic projects and you want to showcase your work with others but you can't afford to pay for a hosting service. In such case what you're supposed to do then ?

No need to worry there are quite few FREE web hosting services out there.

In this article we'll come across some of them !

1️⃣ GitHub Pages

GitHub, Inc. is a provider of Internet hosting for software development and version control using Git.

Host your website directly from your GitHub repository.

Just edit, push, and your changes are live.

GitHub Pages is not only good but the easiest way to host your website because you are probably pushing your project to GitHub anyways (if not then start doing it), and after pushing your files to the GitHub repository with a few clicks you can go LIVE with your projects and share it with everyone.

2️⃣ Netlify

Netlify is an intuitive Git-based workflow and powerful serverless platform to build, deploy, and collaborate on web apps.

Create amazing experiences for the web in record time—without thinking once about servers or devops.

3️⃣ Vercel

Deploy web projects with the best frontend developer experience and highest end-user performance.

Vercel is a cloud platform for static sites and Serverless Functions that fits perfectly with your workflow.

4️⃣ Heroku

Heroku is a platform that enables developers to build, run, and operate applications entirely in the cloud.

Whether you're building a simple prototype or a business-critical product, Heroku's fully-managed platform gives you the simplest path to delivering apps quickly.

5️⃣ Firebase

Firebase is a platform developed by Google for creating mobile and web applications.

With a single command, you can quickly deploy web apps and serve both static and dynamic content to a global CDN (content delivery network).

Free hosting is good for anyone looking to create their first website.

The End!

This article was inspired by Insha.

Follow her for more amazing content.

I hope you found this article valuable. If yes do let me know in the comments 😊

Also if you got any question feel free to ping me on Twitter or Linkedin

DEV Profile

KUMAR HARSHFollow

The best way to learn is to teach.Programmer by Passion and Developer for Fun, and I love sharing my journey with everyone.

Thank You!

JavaScript-30-Day-20

KUMAR HARSH — Mon, 21 Jun 2021 18:28:14 +0000

Native Speech Recognition

demo

Today we are going to learn all about speech recognition in the browser.

Instead of complete walk through of the project, I'll only talk about the important stuff.

Here is the complete code we write:

window.SpeechRecognition =
        window.SpeechRecognition || window.webkitSpeechRecognition;

      const recognition = new SpeechRecognition();
      recognition.interimResults = true;
      recognition.lang = "en-US";

      let p = document.createElement("p");
      const words = document.querySelector(".words");
      words.appendChild(p);

      recognition.addEventListener("result", (e) => {
        console.log(e);
        const transcript = Array.from(e.results)
          .map((result) => result[0])
          .map((result) => result.transcript)
          .join("");

        const poopScript = transcript.replace(/poop|poo|shit|dump/gi, "💩");
        p.textContent = poopScript;

        if (e.results[0].isFinal) {
          p = document.createElement("p");
          words.appendChild(p);
        }
      });

      recognition.addEventListener("end", recognition.start);

      recognition.start();

SpeechRecognition.interimResults=true;
This makes sure that results are available while we are speaking and not after we are done speaking.

We use document.createElement to create a paragraph and append it to the ‘words’ div which is a contenteditable

We add an eventListener on ‘result’ event of SpeechRecognition , In the event e, we get e.results which we assign to transcript variable.

e.results is a list, not an array and each 0th element of the list is the text data we need. So we map transcript on result[0]
Then we return transcript and join everything so that it forms a single string.

This works only for one paragraph so we need to set ‘end’ event to run SpeechRecognition.start() again.

p.textContent=transcript; , We finally put transcript into DOM.

We need to run createElement and appendChild inside the result event again so that p does not get replaced in the DOM but creates a new paragraph instead.

With this we are done with the project.

GitHub repo:

cenacrharsh / JS-30-DAY-20

Blog on Day-19 of javascript30

JavaScript-30-Day-19

KUMAR HARSH ・ Jun 21 ・ 6 min read

#javascript #webdev #github #programming

Blog on Day-18 of javascript30

JavaScript-30-Day-18

KUMAR HARSH ・ Jun 18 ・ 3 min read

#javascript #github #webdev #programming

Blog on Day-17 of javascript30

JavaScript-30-Day-17

KUMAR HARSH ・ Jun 17 ・ 3 min read

#javascript #webdev #github #programming

Follow me on Twitter

Follow me on Linkedin

DEV Profile

.ltag__user__id__641726 .follow-action-button { background-color: #000000 !important; color: #000000 !important; border-color: #000000 !important; }

KUMAR HARSHFollow

The best way to learn is to teach.Programmer by Passion and Developer for Fun, and I love sharing my journey with everyone.

You can also do the challenge at javascript30

Thanks @wesbos , WesBos to share this with us! 😊💖

Please comment and let me know your views

Thank You!

JavaScript-30-Day-19

KUMAR HARSH — Mon, 21 Jun 2021 18:04:41 +0000

Unreal Webcam Fun

demo

So what are we going to be building today?

Today we are going to make a photo booth with JavaScript.

First of all, we've got our video being piped in from our webcam, and then we've got our video being piped into a canvas element. Then, once it's in a canvas element, we can start to do all kinds of cool things with it. Like we can take our photo, and then you can go ahead and download them. They'll download to your
computer, and you can see them as real photos. Then, in the scripts, once we have it, we can start to add effects, like different filters where things should be red. Or what we can do is make this really cool RGB split, where you can see my face.

Before we get started today, there is one
thing that we do need to get up and running, and that is a server. So far, in this course we've just been working off of
the file. However, because of security restrictions with
getting a user's webcam, it must be tied to what's called a "secure origin".

A secure origin is a website that
is HTTPS, or in our case localhost is also
a secure origin.

index.html needs to be fed through some sort of server.

Wes included a package.JSON file. If we open that up, you'll see one dependency, which is this called "browser-sync". It allows you to open up your website and start a little server, and it also gives you live reloading and a whole bunch of other stuff.

First we type npm install when that has finished what you can type is npm start.

This is the html we start with:

<div class="photobooth">
      <div class="controls">
        <button onClick="takePhoto()">Take Photo</button>
      </div>

      <canvas class="photo"></canvas>
      <video class="player"></video>
      <div class="strip"></div>
    </div>

We quickly make a couple of selectors:

const video = document.querySelector('.player');
const canvas = document.querySelector('.photo');
const ctx = canvas.getContext('2d');
const strip = document.querySelector('.strip');
const snap = document.querySelector('.snap');

The first thing we want to do is get the video
being piped into that video element.

navigator.mediaDevices.getUserMedia({ video: true, audio: false })

Now that thing this going to return a promise so we call a .then on it.

navigator.mediaDevices.getUserMedia({ video: true, audio: false })
    .then(localMediaStream => {
      console.log(localMediaStream);

Now what we need to do is to take our video, and we need to set the source to be that localMediaStream

Now, that's not going to work automatically, because localMediaStream is an object. In order for our video to work, it actually needs to be converted into some sort of URL.

video.srcObject = localMediaStream;
      video.play();
    })
    .catch(err => {
      console.error(`OH NO!!!`, err);
    });

.createObjectURL, That's going to convert that media stream into something that this video player can understand.

Now what we will see is one or two frames not a continuous video stream.

Why is that?

That's because we set the video to be this media stream. But it's not going to update unless we actually go ahead and play it.

Therefore, underneath that we'll call video.play, which is going to play it.

We need to do a catch here, just in case someone doesn't allow you to access their webcam. We need to handle that error.

Here is the complete getVideo function:

function getVideo() {
  navigator.mediaDevices
    .getUserMedia({ video: true, audio: false })
    .then((localMediaStream) => {
      console.log(localMediaStream);

      video.srcObject = localMediaStream;
      video.play();
    })
    .catch((err) => {
      console.error(`OH NO!!!`, err);
    });
}

getVideo();

The next thing that we need to do is to take a frame from this video, and to paint it onto the actual canvas on the screen.

We'll first re-size our canvas according to height and width of actual video.

Now, we need to make sure that the canvas is the
exact same size before we paint to it. That's really important because if the canvas is not the same size as the video
or if your video webcam has a different width and height to it, then we need to change that.

const width = video.videoWidth;
  const height = video.videoHeight;
  canvas.width = width;
  canvas.height = height;

Now, what we want to do is to every 16 milliseconds (random choice), we are going to take an image from the webcam
and put it into the canvas.

return setInterval(() => {
    ctx.drawImage(video, 0, 0, width, height);

Here is the complete paintToCanvas function:

function paintToCanvas() {
  const width = video.videoWidth;
  const height = video.videoHeight;
  canvas.width = width;
  canvas.height = height;

  return setInterval(() => {
    ctx.drawImage(video, 0, 0, width, height);
}

The way that dramImage works is that you pass it an image, or a video element, and it will paint it right to it.

We're going to start at 00. Start at the top left-hand corner of the canvas, and then paint the width and the height. That's exactly why we resized our canvas.

We return that interval here, because if you ever need to stop this from painting, you can have access to that interval and
you can call clearInterval on it.

It's kind of a pain to have to manually run this paintToCanvas. So what we're going to do is, We're going to listen for an event
on the video element called canplay

canplay - That's an event that the video will emit.

video.addEventListener("canplay", paintToCanvas);

Now, what we want to do is let's work on the takePhoto function.

First of all we add capture sound to it for effect.

snap.currentTime = 0;
  snap.play();

What we now need to do is take the data out of the canvas.
We can do this, const data = canvas.toDataURL.

Then, you pass it, "image/jpeg".

The image that we currently have is in a text-based representation so we need to convert in into a link.

const link = document.createElement("a");

  link.href = data;
  link.setAttribute("download", "handsome");

We can now not only click photos but download them as well.

Now we want the photos to be visible on the screen as well:

link.innerHTML = `<img src="${data}" alt="Handsome Man" />`;
strip.insertBefore(link, strip.firstChild);

Here is the complete take photo function:

function takePhoto() {
  // played the sound
  snap.currentTime = 0;
  snap.play();

  // take the data out of the canvas
  const data = canvas.toDataURL("image/jpeg");

  const link = document.createElement("a");

  link.href = data;
  link.setAttribute("download", "handsome");

  link.innerHTML = `<img src="${data}" alt="Handsome Man" />`;

  strip.insertBefore(link, strip.firstChild);
}

The last thing that we want to do is do some filters on them.
So the way that a filter works is that you get the pixels out of the canvas, and then you mess with them, changing the
RGB values, and put them back in.

So let's go back up to our paintToCanvas:

Here are the changes we make:

// take the pixels out
let pixels = ctx.getImageData(0, 0, width, height);

// mess with them

pixels = redEffect(pixels); //red filter

// pixels = greenScreen(pixels); //green screen effect

// pixels = rgbSplit(pixels); //rgb split effect

// ctx.globalAlpha = 0.8; //for ghosting effect

// put them back
ctx.putImageData(pixels, 0, 0);
  }, 16);

Here is the completed function:

function paintToCanvas() {
  const width = video.videoWidth;
  const height = video.videoHeight;
  canvas.width = width;
  canvas.height = height;

  return setInterval(() => {
    ctx.drawImage(video, 0, 0, width, height);

// take the pixels out
let pixels = ctx.getImageData(0, 0, width, height);

// mess with them

pixels = redEffect(pixels); //red filter

// pixels = greenScreen(pixels); //green screen effect

// pixels = rgbSplit(pixels); //rgb split effect

// ctx.globalAlpha = 0.8; //for ghosting effect

// put them back
ctx.putImageData(pixels, 0, 0);
  }, 16);
}

and now you create the functions for effects:

function redEffect(pixels) {
  for (let i = 0; i < pixels.data.length; i += 4) {
    pixels.data[i + 0] = pixels.data[i + 0] + 200; // RED
    pixels.data[i + 1] = pixels.data[i + 1] - 50; // GREEN
    pixels.data[i + 2] = pixels.data[i + 2] * 0.5; // Blue
  }
  return pixels;
}

function rgbSplit(pixels) {
  for (let i = 0; i < pixels.data.length; i += 4) {
    pixels.data[i - 150] = pixels.data[i + 0]; // RED
    pixels.data[i + 500] = pixels.data[i + 1]; // GREEN
    pixels.data[i - 550] = pixels.data[i + 2]; // Blue
  }
  return pixels;
}

function greenScreen(pixels) {
  const levels = {};

  document.querySelectorAll(".rgb input").forEach((input) => {
    levels[input.name] = input.value;
  });

  for (i = 0; i < pixels.data.length; i = i + 4) {
    red = pixels.data[i + 0];
    green = pixels.data[i + 1];
    blue = pixels.data[i + 2];
    alpha = pixels.data[i + 3];

    if (
      red >= levels.rmin &&
      green >= levels.gmin &&
      blue >= levels.bmin &&
      red <= levels.rmax &&
      green <= levels.gmax &&
      blue <= levels.bmax
    ) {
      // take it out!
      pixels.data[i + 3] = 0;
    }
  }

  return pixels;
}

With this we are done with the project.

GitHub repo:

cenacrharsh / JS-30-DAY-19

Blog on Day-18 of javascript30

JavaScript-30-Day-18

KUMAR HARSH ・ Jun 18 ・ 3 min read

#javascript #github #webdev #programming

Blog on Day-17 of javascript30

JavaScript-30-Day-17

KUMAR HARSH ・ Jun 17 ・ 3 min read

#javascript #webdev #github #programming

Blog on Day-16 of javascript30

JavaScript-30-Day-16

KUMAR HARSH ・ Jun 16 ・ 3 min read

#javascript #css #github #webdev

Follow me on Twitter

Follow me on Linkedin

DEV Profile

.ltag__user__id__641726 .follow-action-button { background-color: #000000 !important; color: #000000 !important; border-color: #000000 !important; }

KUMAR HARSHFollow

The best way to learn is to teach.Programmer by Passion and Developer for Fun, and I love sharing my journey with everyone.

You can also do the challenge at javascript30

Thanks @wesbos , WesBos to share this with us! 😊💖

Please comment and let me know your views

Thank You!

JavaScript for Web Development

KUMAR HARSH — Sat, 19 Jun 2021 17:50:18 +0000

This blog is inspired by the Tweet by Pratham

For more amazing content do follow him on Twitter.

Now let's dive into the blog:

JavaScript is an enormous language but you don't need to learn everything in the beginning.

Here is the detailed explanation on JavaScript for Web Development.

JavaScript is a kind of language that as you progress deeper in the field, you will come to know a lot more cool concepts about it.

Prerequisites if you want to learn JavaScript for web development.

HTML
CSS

First and foremost, it's a programming language so you should know about basic programming concepts:

Data types in JavaScript
Variables
Statements
Control statements
Operators
And other basic stuff....

If you know programming beforehand and have some experience in any programming language like C, C++, Java, Python etc. then this should not be hard for you.

But you can start with the ZERO knowledge as well.

There are some advanced topics in JavaScript which you don't need to learn in the beginning. For ex:

Async/await
callbacks, promises, etc...

These are some advance concept which you can learn after you have a decent knowledge of JavaScript.

You need to cover some intermediate topics so that you can add behaviour to your website. They are

Arrays and their methods
Objects
Functions
Arrow function

These will help you to work with DOM.

Let's talk about DOM a little bit. It stands for Document Object Model.

Consider it as a tree that comprises the content of a particular web page (HTML)

JavaScript and DOM are connected.

We use DOM to access the elements but write JavaScript code in order to modify them.

Here is a simple example:

Don't get confused here. DOM is not a programming language it's just a model using which we can access and modify HTML elements.

Basic things you need to cover in DOM

Finding HTML Elements

getElementsByTagName()
getElementsById()
getElementsByClassName()

Changing HTML Element

element.innerHTML
element.attribute
element .style.property
element.setAttribute(attr, value)

Adding and deleting elements

document.createElement(element)
document.removeChild(element)
document.appendChild(element)

Just one last thing and then you will be able to make fully-fledged websites.

After learning these basic properties and methods, its time to move onto Events and Event Listener

The addEventListener() method attaches an event handler to the specified element.

Up to this point you will able to make a fully functional website using JavaScript. But there are always some margin of improvement

Here are some advanced key concepts

Hoisting
Closures
Callbacks
Promises
Async & Await
Currying
And other ES6,ES7 features

Project-based learning is the best. Here are some practice projects you can build

Do follow Pratham if you liked this content and let me know if you want more such blogs about Web Development.

If you liked my content consider following me on Twitter

Thank You!

JavaScript-30-Day-18

KUMAR HARSH — Fri, 18 Jun 2021 17:31:04 +0000

Adding up times with Reduce

demo

Today we will be using Array.prototype.map and Array.prototype.reduce to figure out the total runtime of given videos in hours, minutes and seconds.

So we are given a list of items each mimicking a video and each one has a data-time attribute telling us the length of the video in the format minutes:seconds, and we need to figure out how to pull them out of the DOM, convert them to numbers, make them into minutes and seconds, add it all up, figure out how many hours, minutes and seconds there are totally, then finally console.log those actual values.

Here is sample of list items given:

<ul class="videos">
      <li data-time="5:43">Video 1</li>
      <li data-time="2:33">Video 2</li>
      <li data-time="3:45">Video 3</li>
      <li data-time="0:47">Video 4</li>
      <li data-time="5:21">Video 5</li>
</ul>

First thing we want to do is select all of those nodes

const timeNodes = document.querySelectorAll("[data-time]");

We are not selecting list items because we don't know if it's always going to be a list item so we will select anything with a data-time attribute on it.

Now this timeNodes is a NodeList and to use map we need an Array, so we need to convert this from a node list into an array of actual time strings.

const timeNodes = Array.from(document.querySelectorAll("[data-time]"));

Now timeNodes is an array of list items.

We will now extract time out of this array of list items.

const seconds = timeNodes.map((node) => node.dataset.time);

Now seconds is an array of strings (containing all the times)

Now we want to convert the time into just seconds. The format in which we have our time right now is minutes:seconds so we need to split this string on the :.

const seconds = timeNodes.map((node) => node.dataset.time).map((timeCode) => {
          const [mins, secs] = timeCode.split(":");

But the problem we run into here is after splitting what we get is also a string and we need numbers to do any kind of mathematical calculation.

So we need to map over the array again and use parseFloat to convert the string into numbers.

We can see how parseFloat solves our problem:

const seconds = timeNodes
        .map((node) => node.dataset.time)
        .map((timeCode) => {
          const [mins, secs] = timeCode.split(":").map(parseFloat);
return mins * 60 + secs
});

This gives us all the time in seconds.

Now that we have all the times in seconds, we need to add them all up and we are going to use reduce for that.

const seconds = timeNodes
        .map((node) => node.dataset.time)
        .map((timeCode) => {
          const [mins, secs] = timeCode.split(":").map(parseFloat);
          return mins * 60 + secs;
        })
        .reduce((total, vidSeconds) => total + vidSeconds);

This gives us the total number of seconds of every single video added together.

Time to chop down the total seconds into hours, minutes and seconds.

      let secondsLeft = seconds;
      const hours = Math.floor(secondsLeft / 3600);

We use Math.floor to get rid of the decimal part, for example 2.5 hours needs to be converted to 2 hours and we'll convert the remaining 0.5 hours into minutes and seconds

1hour=3600seconds

      secondsLeft = secondsLeft % 3600;
      const mins = Math.floor(secondsLeft / 60);
      //1min=60seconds
      secondsLeft = secondsLeft % 60;
console.log(`${hours}hours ${mins}minutes ${secondsLeft}seconds`);

This is final output:

and with this our project for the day was completed.

GitHub repo:

cenacrharsh / JS-30-DAY-18

Blog on Day-17 of javascript30

JavaScript-30-Day-17

KUMAR HARSH ・ Jun 17 '21

#javascript #webdev #github #programming

Blog on Day-16 of javascript30

JavaScript-30-Day-16

KUMAR HARSH ・ Jun 16 '21

#javascript #css #github #webdev

Blog on Day-15 of javascript30

JavaScript-30-Day-15

KUMAR HARSH ・ Jun 15 '21

#javascript #github

Follow me on Twitter

Follow me on Linkedin

DEV Profile

KUMAR HARSHFollow

The best way to learn is to teach.Programmer by Passion and Developer for Fun, and I love sharing my journey with everyone.

You can also do the challenge at javascript30

Thanks @wesbos , WesBos to share this with us! 😊💖

Please comment and let me know your views

Thank You!

JavaScript-30-Day-17

KUMAR HARSH — Thu, 17 Jun 2021 17:42:08 +0000

Sort without Articles

demo

Today we're going to be working with JavaScript's Array.prototype.sort method, and we're going to be sorting this array of band names, but the kind of the catch is we need to sort them without "The", "An", "A" in front of the actual band names, because those are articles and they don't go into alphabetizing your actual name of your band, and the end we'll we display the sorted names on the webpage along with the "A", "An" and "The", just that they won't be affecting the sort order.

A quick refresher if you feel a bit rusty with Array.prototype.sort. Here is the MDN reference.

This is the array provided to us:

const bands = [
        "The Plot in You",
        "The Devil Wears Prada",
        "Pierce the Veil",
        "Norma Jean",
        "The Bled",
        "Say Anything",
        "The Midway State",
        "We Came as Romans",
        "Counterparts",
        "Oh, Sleeper",
        "A Skylit Drive",
        "Anywhere But Here",
        "An Old Dog",
      ];

If we do like this:

      const sortedBands = bands.sort(function (a, b) {
        if (a > b) {
          return 1;
        } else {
         return -1;
        }
      });
     console.log(sortedBands);

Even though they are not numbers it would still work and this list would be arranged alphabetically just that it is being based of "A" and "And" and "The".

So what we need to do is create a new function strip, and it's going to take in the band name, and from there we are going to return the bandName, but it's going to replace the word "A" and "An" and "The".

To replace all three of them in one go we would use a regular expression. We'll replace the articles with nothing that is an empty string ('').


      function strip(bandName) {
        return bandName.replace(/^(a |an |the )/i, "").trim();
      }

The i is to signify our text is case insensitive.
^ indicates if the string starts wtih "A" and "An" and "The" then replace them.
We add a space as well so that we don't replace band names if they start with "A" and "An" and "The" for example band "Anywhere but Here"
trim() removes if there are extra space at the end of the word.

Now we will rewrite our sort function once again:

       const sortedBands = bands.sort(function (a, b) {
         if (strip(a) > strip(b)) {
           return 1;
         } else {
           return -1;
         }
       });

We are only using strip inside of our if statement so our actual data is not modified.

We can also write the above function using ES6 syntax:

      const sortedBands = bands.sort((a, b) => (strip(a) > strip(b) ? 1 : -1));

Now that we have our sorted array we will display it on the screen.

      document.querySelector("#bands").innerHTML = sortedBands
        .map((band) => `<li>${band}</li>`)
        .join("");

If we remove the .join('') we will notice in between the names we will get commas (,) and why is that ?

Basically when you try to set to innerHTML something that is not a string, just like an array, then it will just call .toString() on it, and by default it's going to put a comma in between each one. So by using .join() at the end we will join it into one big string rather than a bunch of sting with a comma in between.

Here is the difference between toString and join.

Here is the complete JavaScript code:

const bands = [
        "The Plot in You",
        "The Devil Wears Prada",
        "Pierce the Veil",
        "Norma Jean",
        "The Bled",
        "Say Anything",
        "The Midway State",
        "We Came as Romans",
        "Counterparts",
        "Oh, Sleeper",
        "A Skylit Drive",
        "Anywhere But Here",
        "An Old Dog",
      ];

function strip(bandName) {
        return bandName.replace(/^(a |an |the )/i, "").trim();
      }

const sortedBands = bands.sort((a, b) => (strip(a) > strip(b) ? 1 : -1));

document.querySelector("#bands").innerHTML = sortedBands
        .map((band) => `<li>${band}</li>`)
        .join("");

and with this our project for the day was completed.

GitHub repo:

cenacrharsh / JS-30-DAY-17

Blog on Day-16 of javascript30

JavaScript-30-Day-16

KUMAR HARSH ・ Jun 16 '21

#javascript #css #github #webdev

Blog on Day-15 of javascript30

JavaScript-30-Day-15

KUMAR HARSH ・ Jun 15 '21

#javascript #github

Blog on Day-14 of javascript30

JavaScript-30-Day-14

KUMAR HARSH ・ Jun 14 '21

#javascript #webdev #github #programming

Follow me on Twitter

Follow me on Linkedin

DEV Profile

KUMAR HARSHFollow

The best way to learn is to teach.Programmer by Passion and Developer for Fun, and I love sharing my journey with everyone.

You can also do the challenge at javascript30

Thanks @wesbos , WesBos to share this with us! 😊💖

Please comment and let me know your views

Thank You!

JavaScript-30-Day-16

KUMAR HARSH — Wed, 16 Jun 2021 16:58:52 +0000

CSS Text Shadow Mouse Move Effect

demo

What we will be working on today is a CSS animation in which when you move your mouse, the shadow sort of follows it around.

How? We will dynamically update the style on the element depending on the position of our mouse.

This is the HTML we start working with:

<div class="hero">
      <h1 contenteditable>🔥WOAH!</h1>
    </div>

Now we will listen for a mousemove event on our element with class hero, and when that changes we are going to figure out how far and where we should put the text shadow.

First we'll grab hero:

const hero = document.querySelector(".hero");

Now we will attach our event listener:

hero.addEventListener("mousemove", shadow);

Now inside our shadow function:

First thing we need todo is get the width and height of the thing we have hovered over which is hero in this case:

const width = hero.offsetWidth;
const height = hero.offsetWeight;

ES6 way to do it is:
const { offsetWidth: width, offsetHeight: height } = hero

Now we will figure out where the persons cursor was:

let { offsetX: x, offsetY: y } = e;

But if try to print (x,y) we'll see a issue, as soon we reach the text the coordinate values become inconsistent.

Why? Because even though we are listening for mousemove on the hero but if there are children elements inside of the hero, it's going to give the (x,y) of the actual elements that we hovered on , which is kind of a pain.

So we need consistent x and y values so we'll figure put if, what we are hovering on is an h1 element, then modify the x and y values accordingly.

In our function:

this is the div with class of hero(what we listened on),therefore the this value is always going to be hero.

e.target will be what the event got triggered on,it will change sometimes, here if we hover elsewhere it will be div and if we hover on the text it will be h1 tag.

So,

 if (this != e.target) {
          x = x + e.target.offsetLeft;
          y = y + e.target.offsetRight;
        }

Basically we are adding how far we are we from the top and left to get the right coordinates if we are hovering on the h1 tag.

Now that we have the correct co-ordinates,we will figure out how far the text shadow should actually go.

We will calculate a walk which is how many pixel at it's most should the shadow be stretched.

If 100 is our walk 50 is as high (in the bottom right corner of the screen) as we go and -50 is as low (in the upper left corner of the string) as we go, where our element is placed in the middle.

const walk = 100;
const xwalk = Math.round((x / width) * walk - walk / 2);
const ywalk = Math.round((y / width) * walk - walk / 2);

Formula makes sure instead of going from 0 to 100 we go from -50 to 50.

Now grab text and set shadow

        const text = document.querySelector("h1");

        text.style.textShadow = `
        ${xwalk}px ${ywalk}px 0 rgba(255,0,255,0.7),
        ${xwalk * -1}px ${ywalk}px 0 rgba(0,255,255,0.7),
        ${ywalk}px ${xwalk * -1}px 0 rgba(0,255,0,0.7),
        ${ywalk * -1}px ${xwalk}px 0 rgba(0,0,255,0.7)`;
      }

We have used multiple textShadow properties using varying co-ordinates and different colors for better effect.

and with this our project for the day was completed.

GitHub repo:

cenacrharsh / JS-30-DAY-16

Blog on Day-15 of javascript30

JavaScript-30-Day-15

KUMAR HARSH ・ Jun 15 '21

#javascript #github

Blog on Day-14 of javascript30

JavaScript-30-Day-14

KUMAR HARSH ・ Jun 14 '21

#javascript #webdev #github #programming

Blog on Day-13 of javascript30

JavaScript-30-Day-13

KUMAR HARSH ・ Jun 13 '21

#javascript #css #github #webdev

Follow me on Twitter

Follow me on Linkedin

DEV Profile

KUMAR HARSHFollow

The best way to learn is to teach.Programmer by Passion and Developer for Fun, and I love sharing my journey with everyone.

You can also do the challenge at javascript30

Thanks @wesbos , WesBos to share this with us! 😊💖

Please comment and let me know your views

Thank You!

JavaScript-30-Day-15

KUMAR HARSH — Tue, 15 Jun 2021 18:26:54 +0000

Local Storage and Event Delegation

demo

On day-15 we will learn how to make our state persistent by using local storage and learn how to use event delegation.

We have a simple list by default where we can add items and also they also have checkboxes which we can check, but the data and state of checked/unchecked boxes will stay as long as we don't refresh the page, after which every thing will be reset, and we'll work to make the this change persistent.

This is the default HTML we have:

<ul class="plates">
        <li>Loading Tapas...</li>
      </ul>
      <form class="add-items">
        <input type="text" name="item" placeholder="Item Name" required />
        <input type="submit" value="+ Add Item" />
      </form>

We'll start by selecting the unordered list and the form element.

const addItems = document.querySelector(".add-items");
      const itemsList = document.querySelector(".plates");
      const items =[];

We'll add a submit eventlistener to form element

addItems.addEventListener("submit", addItem);

Why? submit, this is because one can submit by using the keyboard as well hence to cover all our bases we use a submit event listener.

Now inside the addItem function:

function addItem(e) {
        e.preventDefault();
        const text = this.querySelector("[name=item]").value;
        const item = {
          text,
          done: false,
        };
        items.push(item);
        populateList(items, itemsList);
        localStorage.setItem("items", JSON.stringify(items));
        this.reset();
      }

First of all we use .preventDefault() method as by default the form is going to reload the page as soon as data is entered (generally to send data to server) and to prevent page from reloading we use the preventDefault() method.

Now we need to take the input user gives inside the box and put it into an object using const text = this.querySelector("[name=item]").value. The querySelector gives us the input element which has a property called .value which gives the text user has typed inside the input field.

You might be thinking why this and not document for query selector. The this here contains the form and we are searching for the one with attribute name=item. This technique is helpful when we are working with multiple forms.

After we put the text into an object using

const item = {
          text,
          done: false,
        };

The done is for whether the item is checked and we will make it true when we click the checkbox.

Now we will push the object into items array using items.push(item)

Now we call populateList(items, itemsList) where we recreate the list every time user gives an input. The work of populateList function is to basically generate the HTML for the page.

this.reset() clears the input field after adding it to our list.

Here is the populateList() function:

function populateList(plates = [], platesList) {
        platesList.innerHTML = plates
          .map((plate, i) => {
            return `
            <li>
              <input type="checkbox" data-index=${i} id="item${i}" ${
              plate.done ? "checked" : ""
            } />
              <label for="item${i}">${plate.text}</label>
            </li>
            `;
          })
          .join("");
      }

Here we basically get the text and create a list item according to it and pass it to the list we already have.

The plates = [] prevents the code from breaking if we forget to supply the arguments.

The id="item${i}" and for="item${i}" is same and that is how we link the label and input, when you click the label the input checks itself.

Now after all this we can add whatever we type to our list but it is not peristent and so we use local storage.

Local Storage is simply a key-value store and we can only use strings to store data in local storage

If you try to put something other than a string into Local Storage, it will convert it and store it as string.

So we use JSON.stringify to convert our objects/arrays into JSON string, and the method to set data in the storage is setItem.

localStorage.setItem("items", JSON.stringify(items));

So we'll modify the const items =[] started with to
const items = JSON.parse(localStorage.getItem("items")) || []

Here getItem is used to take data our of local storage.

Now on page load it tries to load data from local storage and if it fails then fallback value is [] there.

Now we will work to make the toggling persistent, so that if we check an item it remains checked after refresh, but the problem is we can't listen for click events on list items because if we add new list items listeners won't work on them because input was created after we listened for them and hence they don't have eventListeners attached to them.

The whole idea of Event Delegation is rather than listening for click/change on checkbox directly , what we do is we look for something which is already going to be on the page at the time of listening.

Looking at our html the

Hence we will listen for a click on the plates and then we wil find out Did they actually mean to click on one of the input inside of it?

If we click different items the target will be different and so we use e.target and if it is not input.

Now we will go to items array and find out what is the status of each items whether checked/uncheced and accordingly toggle it's value and set it into local storage.

Here is the function:

itemsList.addEventListener("click", toggleDone);

function toggleDone(e) {
        if (!e.target.matches("input")) {
          return;
          //skip this unless it's an input
        }
        console.log(e.target);
        const el = e.target;
        const index = el.dataset.index;
        items[index].done = !items[index].done;
        localStorage.setItem("items", JSON.stringify(items));
        populateList(items, itemsList);
      }

Here we use the data-index attribute we gave each element so that we know the position of each element inside our array and we use that index to manipulate the elements.

So in short everytime we make a change, we mirror that change to local storage and then we rerender the entire list.

Here is the complete javascript:

const addItems = document.querySelector(".add-items");
      const itemsList = document.querySelector(".plates");
      const items = JSON.parse(localStorage.getItem("items")) || [];

      function addItem(e) {
        e.preventDefault();
        const text = this.querySelector("[name=item]").value;
        const item = {
          text,
          done: false,
        };
        console.log(item);
        items.push(item);
        populateList(items, itemsList);
        localStorage.setItem("items", JSON.stringify(items));
        this.reset();
      }

      function populateList(plates = [], platesList) {
        platesList.innerHTML = plates
          .map((plate, i) => {
            return `
            <li>
              <input type="checkbox" data-index=${i} id="item${i}" ${
              plate.done ? "checked" : ""
            } />
              <label for="item${i}">${plate.text}</label>
            </li>
            `;
          })
          .join("");
      }

      function toggleDone(e) {
        if (!e.target.matches("input")) {
          return;
          //skip this unless it's an input
        }
        console.log(e.target);
        const el = e.target;
        const index = el.dataset.index;
        items[index].done = !items[index].done;
        localStorage.setItem("items", JSON.stringify(items));
        populateList(items, itemsList);
      }

      addItems.addEventListener("submit", addItem);
      itemsList.addEventListener("click", toggleDone);
      populateList(items, itemsList);

and with this our project for the day was completed.

GitHub repo:

cenacrharsh / JS-30-DAY-15

Blog on Day-14 of javascript30

JavaScript-30-Day-14

KUMAR HARSH ・ Jun 14 '21

#javascript #webdev #github #programming

Blog on Day-13 of javascript30

JavaScript-30-Day-13

KUMAR HARSH ・ Jun 13 '21

#javascript #css #github #webdev

Blog on Day-12 of javascript30

JavaScript-30-Day-12

KUMAR HARSH ・ Jun 12 '21

#javascript #github #webdev

Follow me on Twitter
Follow me on Linkedin

DEV Profile

KUMAR HARSHFollow

The best way to learn is to teach.Programmer by Passion and Developer for Fun, and I love sharing my journey with everyone.

You can also do the challenge at javascript30

Thanks @wesbos , WesBos to share this with us! 😊💖

Please comment and let me know your views

Thank You!

Deploying a React App to GitHub Pages

KUMAR HARSH — Tue, 15 Jun 2021 13:43:45 +0000

React App*

* created using create-react-app

Introduction

In this tutorial, I'll show you how I deployed a React app—which I created using create-react-app to GitHub Pages.

You can visit the deployed app, at https://cenacrharsh.github.io/test/.

This repository contains the files related to the app. The master branch contains the app's source code (the code the app's developers edit), and the gh-pages branch contains a built version of the app (i.e. the code that GitHub Pages serves to the app's visitors).

The remainder of this document contains a tutorial on creating a React app (using create-react-app) and deploying that app to GitHub Pages.

Tutorial

Prerequisites

An adequate version of Node.js is installed. Here's the adequate version I use:
```
$ node --version
v14.17.0
```
An adequate version of npm is installed. Here's the adequate version I use:
```
$ npm --version
6.14.13
```
An adequate version of create-react-app is installed. Here's the adequate version I use:
```
$ create-react-app --version
4.0.3
```
In the case of create-react-app, you can either install it globally (i.e. $ npm install -g create-react-app) or install it locally (i.e. $ npm install create-react-app). If you choose the latter, you will have to specify its path whenever you invoke it (e.g. path/to/node_modules/.bin/create-react-app).
A GitHub account.
A command-line Git client setup according to GitHub.

Procedure

Create an empty repository on GitHub.

For this tutorial, I'll create a repository named test.
By empty, I mean without a README.md file, a .gitignore file, a LICENSE file, or any other files.
Create a new React app on your computer.
```
$ create-react-app test
```
This is the app you will deploy to GitHub Pages in step 7.
I opted to give the app the same name as my GitHub repository (i.e. test). However, you can name them differently from one another (e.g. you can name your app app-123 and your GitHub Repository repo-456).
This will create a new folder named test (or whatever you named your app) on your computer.
Install the gh-pages package as a "dev-dependency" of the app.

The commands shown in the following steps can all be issued from within the app's folder, so make sure to navigate to the newly created test folder and then use the commands. Use $ cd test to navigate to the app folder from where you are currently on the terminal.

After navigating to the test folder use:

```
$ npm install gh-pages --save-dev
```

Add some properties to the app's package.json file.

At the top level, add a homepage property. Define its value to be the string http://{username}.github.io/{repo-name}, where {username} is your GitHub username, and {repo-name} is the name of the GitHub repository you created in step 1. Since my GitHub username is cenacrharsh and the name of my GitHub repository is test, I added the following property:
```
//...
"homepage": "http://cenacrharsh.github.io/test"
```
In the existing scripts property, add a predeploy property and a deploy property, each having the values shown below:
```
"scripts": {
  //...
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}
```
Create a git repository in the app's folder.
```
$ git init
```
Add the GitHub repository as a "remote" in your local git repository.
```
$ git remote add origin https://github.com/cenacrharsh/test.git
```
This will make it so the gh-pages package knows where you want it to deploy your app in step 7.
It will also make it so git knows where you want it to push your source code (i.e. the commits on your master branch) in step 8.
Generate a production build of your app, and deploy it to GitHub Pages.
```
$ npm run deploy
```
That's it! Your app is now accessible at the URL you specified in step 4.
In my case, my app is now accessible at: https://cenacrharsh.github.io/test/
Explore the GitHub repository at this point. You will see that, although a master branch did not exist, a gh-pages branch did exist. The gh-pages branch contained the built app code, as opposed to the app's source code.
Optionally, commit your source code to the "master" branch and push your commit to GitHub.
```
$ git add .
$ git commit -m "Create a React app and publish it to GitHub Pages"
$ git push -u origin master
```
Explore the GitHub repository once again at this point.You will notice that a master branch now existed, and it contained the app's source code.
So, the master branch holds the source code, and the gh-pages branch holds the built app code.

References

Facebook's tutorial on deploying a React app to GitHub Pages