DEV Community: Harshit Khaladkar🇮🇳

QR Code Generator by HTML CSS and JavaScript

Harshit Khaladkar🇮🇳 — Sat, 09 Apr 2022 13:42:29 +0000

Hi Guys.In this post I will show you how to make QR code generator by HTML CSS and JavaScript.
Output👇

HTML

<body>
  <h1>QR Code Generator</h1>
  <input 
    type="text" 
    spellcheck="false"
    id="text"
    value="https://google.com"
  />
  <div id="qrcode"></div>
</body>

CSS

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }

  body {
      width: 80%;
      height: 30vh;
      margin: auto;
      display: grid;
      place-items: center;
  }

  h1 {
      font-family: sans-serif;
  }

  input {
      padding: 10px;
      border-radius: 20px;
      border: 2px solid steelblue;
      font-size: 1.5rem;
      letter-spacing: 2px;
      outline: none;
  }

JavaScript

<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
  <script type="text/javascript">

  const qrcode = document.getElementById("qrcode");
  const textInput = document.getElementById("text");

  const qr = new QRCode(qrcode);
  qr.makeCode(textInput.value.trim());

  textInput.oninput = (e) => {
    qr.makeCode(e.target.value.trim());
  };

For Example I used my twitter account link . It shows like this.
Output 👇

Thanks for reading my post please like share.

How to make "2D To 3D Button".

Harshit Khaladkar🇮🇳 — Fri, 18 Mar 2022 13:47:21 +0000

Hi Guys,In this Blog I will show you how to make 2D To 3D Button
Tutorial 👇
Tutorial

Source:-

HTML:-

<body>
<a href="#">tap on me</a>
</body>

CSS :-

body
{
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #2196f3;
}
a
{
  position: relative;
  padding: 20px 20px 20px 30px;
  color: #fff;
  font-size: 20px;
  font-family: sans-serif;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 10px;
  transition: 0.5s;
}
a:hover
{
  background: #2196f3;
  transition-delay: 2s;
  box-shadow: -30px 30px 50px rgba(0,0,0,.4);
  transform: rotate(-30deg) skew(35deg);
}
a:before,
a:after
{
  content: '';
  position: absolute;
  width: 2px;
  height: 100%;
  background: #fff;
  pointer-events: none;
  transform-style: linear;
  transition-property: width,opacity,transform,box-shadow;
  transition-duration: 0.5s;
}
a:before
{
  top: 0;
  left: 0;
}
a:after
{
  top: 0;
  right: 0;
}
a:hover:before
{
   width:100%;
   opacity: 0.1;
   transform: translate(5px,-5px);
   box-shadow: +2px 2px 2px rgba(0,0,0,.1);
   transition-delay: 0s,0.5s,1s,1.5s;
}
a:hover:after
{
   width:100%;
   opacity: 0.1;
   transform: translate(10px,-10px);
   box-shadow: +2px 2px 2px rgba(0,0,0,.1);
   transition-delay: 0s,0.5s,1s,1.5s;
}

Thanks for Reading My Post . Please like and Share.

GitHub - Git Cheat Sheet

Harshit Khaladkar🇮🇳 — Thu, 17 Feb 2022 13:33:45 +0000

Hello Guys
Today I am sharing GitHub Git Cheat Sheet

1. Git Configuration

$ git config --global user.name "Your Name"
Set the name that will be attached to your commits and tags.
$ git config --global user.email "you@example.com"
Set the e-mail address that will be attached to your commits and tags.
$ git config --global color.ui auto
Enable some colorization of Git output.

2. Starting A project

$ git init [project name]
Create a new local repository. If [project name] is provided, Git will
create a new directory name [project name] and will initialize a
repository inside it. If [project name]is not provided,then a new repository is initialized in the current directory.
$ git clone [project url]
Downloads a project with the entire history from the remote repository.

3.Day-to-Day work

$ git status
Displays the status of your working directory. Options include new,
staged, and modified files. It will retrieve branch name, current commit
identifier, and changes pending commit.
$ git add [file]
Add a file to the staging area. Use in place of the full file path to add all
changed files from the current directory down into the directory tree.
$ git diff [file]
Show changes between working directory and staging area.
$ git diff --staged [file]
Shows any changes between the staging area and the repository.
$ git checkout -- [file]
Discard changes in working directory. This operation is unrecovera-
ble.
$ git reset [file]
Revert your repository to a previous known working state.
$ git commit
Create a new commit from changes added to the staging area.
The commit must have a message!
$ git rm [file]
Remove file from working directory and staging area.
$ git stash
Put current changes in your working directory into stash for later use.
$ git stash pop
Apply stored stash content into working directory, and clear stash.
$ git stash drop
Delete a specific stash from all your previous stashes.

4.Git branching model

$ git branch [-a]

List all local branches in repository. With -a: show all branches
(with remote).
$ git branch [branch_name]
Create new branch, referencing the current HEAD.
$ git checkout [-b][branch_name]
Switch working directory to the specified branch. With -b: Git will
create the specified branch if it does not exist.
$ git merge [from name]
Join specified [from name] branch into your current branch (the one
you are on currently).
$ git branch -d [name]
Remove selected branch, if it is already merged into any other.
-D instead of -d forces deletion.

5. Review your work

$ git log [-n count]

List commit history of current branch. -n count limits list to last n
commits.
$ git log --oneline --graph --decorate
An overview with reference labels and history graph. One commit
per line.
$ git log ref..
List commits that are present on the current branch and not merged
into ref. A ref can be a branch name or a tag name.
$ git log ..ref
List commit that are present on ref and not merged into current
branch.
$ git reflog
List operations (e.g. checkouts or commits) made on local repository.

6. Tagging known commits

$ git tag

List all tags.
$ git tag [name] [commit sha]
Create a tag reference named name for current commit. Add commit
sha to tag a specific commit instead of current one.
$ git tag -a [name] [commit sha]
Create a tag object named name for current commit.
$ git tag -d [name]
Remove a tag from local repository.

7. Reverting changes

$ git reset [--hard] [target reference]
Switches the current branch to the target reference, leaving
a difference as an uncommitted change. When --hard is used,
all changes are discarded.
$ git revert [commit sha]
Create a new commit, reverting changes from the specified commit.
It generates an inversion of changes.

8.Synchronizing repositories

$ git fetch [remote]

Fetch changes from the remote, but not update tracking branches.
$ git fetch --prune [remote]
Delete remote Refs that were removed from the remote repository.
$ git pull [remote]
Fetch changes from the remote and merge current branch with its
upstream.
$ git push [--tags] [remote]
Push local changes to the remote. Use --tags to push tags.
$ git push -u [remote] [branch]
Push local branch to remote repository. Set its copy as an upstream.

A Git installation

For GNU/Linux distributions, Git should be available in the standard

system repository. For example, in Debian/Ubuntu please type in
the terminal:
$ sudo apt-get install git
If you need to install Git from source, you can get it from
git-scm.com/downloads.
An excellent Git course can be found in the great Pro Git book by
Scott Chacon and Ben Straub. The book is available online for free
at git-scm.com/book.

B Ignoring Files

$ cat .gitignore
/logs/*
!logs/.gitkeep
/tmp
*.swp
Verify the .gitignore file exists in your project and ignore certain type
of files, such as all files in logs directory (excluding the .gitkeep file),
whole tmp directory and all files *.swp. File ignoring will work for the
directory (and children directories) where .gitignore file is placed.

C Ingoring files

D.The zoo of working areas

Thanks for reading this article.I Hope you Like my post,please like share.

Best Apps for Learning Coding

Harshit Khaladkar🇮🇳 — Sun, 06 Feb 2022 16:26:02 +0000

Hi Guys . Welcome To My Another Blog.

Top Apps Where You Can Learn !!

Here are some best apps where you can learn:--

1. Programming Hub

From My Personal experience . Programming Hub is a platform where you can learn Python, HTML, C++, Javascript, java, and a ton more. This app has over 118,000+ reviews with ratings of 4.8/5 stars on the Google Play Store and has an Editors' Choice badge.
In this app, you can learn from the best courses and also track your skills.

2.Mimo

Mimo, on this platform/app, you can learn android development, web designing, web development, and much more stuff. This platform is really amazing. It will help you make projects that are real-life projects. which helps you in an interview.
In this app, you can learn various languages like HTML, CSS, javascript, react, node.js, PHP, Java, MongoDB, c#, etc.
3. Solo Learn

Solo Learn is a must check, This app will help you to learn from beginner to advance level. This also offers you coding lessons, courses, and quizzes. Which can help you practice.
In this app, you can learn many languages like HTML, CSS, javascript, python, PHP, c#, kotlin, java, and many more. So you see web development, android development all covered!!
4. Grasshopper

Grasshopper is the best way to learn to code for beginners. With fun, quick lessons on your phone or desktop, Grasshopper teaches adult learners to write real JavaScript. It’s currently available free of charge on Desktop, Android, and iOS. Grasshopper is a Code with Google program.
5.programming Hero

Programming hero is a platform for learning code it is number #1. This app also won the best tech code startup. This platform offers you learning from scratch. It provides quizzes which help you revise. so must check
In this app, you can learn various languages with courses like HTML, CSS, javascript, react, node.js, PHP, Java, MongoDB, c#, kotlin, flutter, and many more.

Thanks for reading my post. Hope you Like my post. Please like Share.

Cool React Projects To Build in 2022 | 10 Projects

Harshit Khaladkar🇮🇳 — Wed, 02 Feb 2022 17:09:59 +0000

Cool React Projects To Build in 2022 | 10 Projects | Frontend Everything |

Hello Everyone 👋Welcome to My New Post, here I am showing some cool projects you should build with REACT JS.

9: Projects To Make On React JS

Calculator
E-commerce Website
Productivity Tools
Weather Web Application
Entertainment Website
Cryptocurrency Website
Password Generator
Photo Gallery Website
Real-time Chat Application

Calculator

E-commerce Website

Productivity Tools

Weather Web Application

Entertainment Website

Cryptocurrency Website

Password Generator

Photo Gallery Website

Real-time Chat Application

Thank You For Scrolling Till here 😊. If you like my post please like share.

More blogs you should give a check.

Follow me

Simple Calculator with Dark Mode

Harshit Khaladkar🇮🇳 — Wed, 05 Jan 2022 11:00:03 +0000

Hi Guys Wish you Happy Year 🎊.

Here's a simple calculator built using HTML, CSS and obviously, JavaScript.

This calculator also has dark mode which looks really good. And here's how you can do that:

HTML

<!DOCTYPE html>
<html lang="en">
<head>

    <title>Simple JS Calculator</title>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="light.css" id="theme">
    <script src="script.js"></script>
</head>
<body>
    <div class="container">
        <h1>Calculator</h1>
        <div class="row-1">
            <input type="text" id="result" placeholder="Result" readonly>
            <button onclick="clearScreen()" id="clear" >C</button>
        </div>
        <div class="btnrow-1">
            <button onclick="updScreen(1)">1</button>
            <button onclick="updScreen(2)">2</button>
            <button onclick="updScreen(3)">3</button>
            <button onclick="updScreen('*')">x</button>
        </div>
        <div class="btnrow-1">
            <button onclick="updScreen(4)" >4</button>
            <button onclick="updScreen(5)" >5</button>
            <button onclick="updScreen(6)" >6</button>
            <button onclick="updScreen('+')">+</button>
        </div>
        <div class="btnrow-1">
            <button onclick="updScreen(7)">7</button>
            <button onclick="updScreen(8)">8</button>
            <button onclick="updScreen(9)">9</button>
            <button onclick="updScreen('-')">-</button>
        </div>
        <div class="btnrow-2">
            <button onclick="updScreen('/')" >/</button>
            <button onclick="updScreen(0)" >0</button>
            <button onclick="updScreen('.')">.</button>
            <button onclick="result.value = eval(result.value)">=</button>
        </div>
        <div class="btnrow-1">
            <button onclick="themeSwitcher()" id="dark-mode" >Turn on Dark Mode</button>
        </div>
    </div>
</body>
</html>

CSS

Now made two css file
1) Light Mode
2) Dark Mode

Here's the CSS for Light Mode

/* CSS Reset */
*{
    margin: 0;
    padding: 0;
}
body{
    background-color: lightSteelBlue;
    font-family: 'Open Sans', sans-serif;
    font-weight: 500;
}
.row-1 {
    margin-top: 15px;
}
h1{
    color: black;
    font-family: Lunacy, serif;
}

.container{
    display: flex;
    width: 100%;
    height: 90vh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
button{
    background-color: white;
    width: 65px;
    height: 65px;
    margin: 2px 0.3px;
    border: none;
    outline: none;
    border-radius: 3px;
    font-size: 15px;
    font-family: 'Open Sans', sans-serif;
}

button:hover{
    cursor: pointer;
    background-color: rgb(37, 35, 59);
    color: #fff;
}
#dark-mode {
    width: 274px;
    height: 40px;
}
#clear{
    background-color: rgb(255, 20, 20);
    color: white;
}
#clear:hover{
    background-color: rgb(37, 35, 59);
}
input[type="text"]{
    width: 180px;
    height: 65px;
    padding-left: 25px;
    border: none;
    outline: none;
    border-radius: 3px;
    font-size: 15px;
    font-family: 'Open Sans', sans-serif;
}
p {
 text-align: center;
}

Here's the CSS for Dark Mode

/* CSS Reset */
*{
    margin: 0;
    padding: 0;
}
body{
    background-color: #1d1e1f;
    font-family: 'Open Sans', sans-serif;
    font-weight: 500;
}
.row-1 {
    margin-top: 15px;
}
h1{
    color: orange;
    font-family: Lunacy, serif;
    color: #FFBB89;
    font-size: ;   
}

.container{
    display: flex;
    width: 100%;
    height: 90vh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
button{
    background-color: #444444;
    color: white;
    width: 65px;
    height: 65px;
    margin: 2px 0.3px;
    border: none;
    outline: none;
    border-radius: 3px;
    font-size: 15px;
    font-family: 'Open Sans', sans-serif;
}
input{
    color: white;
}
button:hover{
    cursor: pointer;
    background-color: rgb(160, 160, 160);
    color: #fff;
}
#dark-mode {
    width: 274px;
    height: 40px;
}
#clear{
    background-color: rgb(255, 40, 40);
    color: white;
}
#clear:hover{
    background-color: rgb(37, 36, 54);
}
input[type="text"]{
    background-color: #444444;
    color: white;
    width: 180px;
    height: 65px;
    padding-left: 25px;
    border: none;
    outline: none;
    border-radius: 3px;
    font-size: 15px;
    font-family: 'Open Sans', sans-serif;
}
p {
 text-align: center;
 color: white;
}

And finally, here's the JavaScript:

// Clear screen with C button.

function clearScreen() {

 document.getElementById("result")
  .value = "";

}



// Display updates in Result Input

function updScreen(val) {

 var x = document.getElementById(
  "result").value;

 document.getElementById("result")
  .value = x + val;

}



// Switch between Dark and Light Modes

function themeSwitcher() {

 var dark = document.getElementById(
  "dark-mode");

 var th = document.getElementById(
  "theme");

 if (th.getAttribute('href') ==
  'light.css') {

  th.href = 'dark.css';

  dark.innerHTML =
   'Turn on Light Mode';

 } else {

  th.href = 'light.css';

  dark.innerHTML =
   'Turn on Dark mode';

 }

}

That's it. Now we have a simple calculator with dark mode. Thanks for reading. Hope you like it! If you have any problems, you can definitely comment and ask me. I will definitely help you.
If you like my post, please like the article
Follow me 👇
Twitter

Quora

How TO - Responsive Top Navigation

Harshit Khaladkar🇮🇳 — Tue, 14 Dec 2021 14:31:27 +0000

Learn how to create a responsive top navigation menu with CSS and JavaScript.

Responsive Navigation Bar
Resize the browser window to see how the responsive navigation menu works:

Create A Responsive Topnav

Step 1) Add HTML:
Example

<!-- Load an icon library to show a hamburger menu (bars) on small screens -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>

The link with class="icon" is used to open and close the topnav on small screens.

Step 2) Add CSS ;
Example

/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

Add media queries
:

Example

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

Step 3) Add JavaScript :
Example

/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}

Here the Output

Hopefully, the tutorial above has helped you a lot to learn how to make a Menu Bar
If you like my post, please like the article
Follow me 👇
Twitter

Quora

Duolingo