DEV Community: yash kumat

3 JS Interactions

yash kumat — Tue, 05 Jul 2022 17:51:35 +0000

1. alert

shows a message.

alert("Hello");

2. prompt

shows a message asking the user to input text or null.

var name = prompt("What is your name?");

Note: You can add an optional second parameter, the initial value for the input field.

var name = prompt("What is your name?", "John");

3. confirm

shows a message and waits for the user to press "OK" or "Cancel". It returns "true" for OK and "false" for Cancel.

var confirmation = confirm("Are you sure?");

Tilt on hover using Vanilla-tilt.js

yash kumat — Sat, 12 Feb 2022 06:20:33 +0000

Steps:

Add jQuery cdn

<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>

Add Vanilla-tilt.js cdn

<script src="https://cdn.jsdelivr.net/npm/vanilla-tilt@1.7.2/lib/vanilla-tilt.min.js"></script>

Add Attributes according to effect you require. For eg.

data-tilt - mark your element
data-tilt-max="50" - max tilt rotation (degrees)
data-tilt-speed="400" - speed of the transition

Final code -

<html lang="en">
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
</head>
<body>
    <div class="your-element" data-tilt data-tilt-max="50" data-tilt-speed="400" data-tilt-perspective="500"></div>
    <script src="https://cdn.jsdelivr.net/npm/vanilla-tilt@1.7.2/lib/vanilla-tilt.min.js"></script>
</body>
</html>

React-Firebase CRUD Application

yash kumat — Fri, 28 Jan 2022 08:52:45 +0000

ToDo Applications are best to start learning any framework as it cover basic CRUD operations and form handling as well.

Tech Stack

Client: React, Bootstrap

Server: Firebase

Screenshots

File Structure

Form component - Input form and add document logic
CardContainer component - Read, update, delete document logic
App component - Layout (Parent component).

Features

Component Based (React)
Realtime (Firebase)
Reponsive (Bootstrap)

Lessons Learned

1. React

useState

    // useState - Assign initial value to a variable and create a function that can be used to change value of variable

    const [tasks, setTasks] = useState([])   

    // const tasks = [] , setTasks() is the function which is used to set value of tasks

useEffect

    // useEffect - Run code indside it when there is change in second arg.
    useEffect(()=>{
        someCode
    },[dependent variable])    // When dependent variable changes useEffect runs

2. Firebase

Setup


import { initializeApp } from "firebase/app";

import { getFirestore } from '@firebase/firestore'

// Firebase Configuration
const firebaseConfig = {
    apiKey: "XXXX",
    authDomain: "XXXX",
    databaseURL: "XXXX",
    projectId: "XXXX",
    storageBucket: "XXXX",
    messagingSenderId: "XXXX",
    appId: "XXXX",
    measurementId: "XXXX"
};

// Connect firebase to our application
const app = initializeApp(firebaseConfig);

// connect to Firestore (firebase nosql db)
export const db = getFirestore(app);

Screenshot of Firestore document collection

Collection refrence

const collectionRef = collection(db, "collection_name")

Create

import {addDoc } from 'firebase/firestore'

const saveTask = async (e) => {
    await addDoc(todosCollectionRef, newTask)   // Add new doc
}

Read

import {getDocs } from 'firebase/firestore'

const getTasks = async (e) => {
    const taskList = await getDocs(todosCollectionRef);   // Get all Docs
}

Update

import {updateDoc } from 'firebase/firestore'

const saveTask = async (e) => {
    const task = doc(db, "todos", id);    // find doc 
    await updateDoc(task, {isComplete: true})  // update doc 
}

Delete

import {deleteDoc } from 'firebase/firestore'

const deleteTask = async (id) => {
    const task = doc(db, "todos", id)
    await deleteDoc(task)   // Delete doc
}

Feedback

If you have any feedback, please reach out to us at ykumat@gmail.com

Redux Basics

yash kumat — Wed, 12 Jan 2022 05:51:48 +0000

This is a guide to understand and use redux in your project in easiest way.

Table of Contents

About Redux
- Lessons Learned
- Built With
Getting Started
- Prerequisites
- Installation
Usage
Contact
Acknowledgments

About Redux

Centralize your application's state and logic.

Lessons Learned

1. Reducer - Function that takes current state and action (type of action + data) as an argument and return updated state.

2. Action - Object that has type of action (basically name) and data to be passed to a reducer function.

3. Store - Give us different methods to fetch or modify current state

  * getState() - Returns current state

  * dispatch() - call reducer function by passing action

  * subscribe() - listen to state change

Built With

Getting Started

Prerequisites

react

  npx create-react-app app-name

redux

  npm install redux

Usage

This is how you can use redux in your application

Create reducer.js file and write function that takes state and action and retuns updated state.

function reducer(state =[], action){
  if(action.type === "type){
    <!--  Some Logic    -->
    return updatedState
  }
}

Create store.js file and export store

import { createStore } from 'redux'

const store = createStore(reducer);

export default store;

Now you can use store variable to getState or dispatch (take action) or subscribe (listen to state change), etc
- getState

  store.getState()

dispatch

  store.dispatch({
      type: "type",
      payload:{
          data: "data"
      }
  })

  store.subscribe(()=>{})

Contact

Email - ykumat@gmail.com
Twitter - @yashkumat
Github Profile: https://github.com/yashkumat/

Acknowledgments

Redux Tutorial - Learn Redux from Scratch by Prgramming with Mosh

(back to top)

Contact from - send Email directly from client-side

yash kumat — Fri, 31 Dec 2021 05:30:52 +0000

A contact form let visitors fill out the form and submit it to send a message to the site owner

Behind the scenes, your contact form triggers an emails.sendForm() function which generate email message and send it to your mail id.

emailjs.sendForm(
    'YOUR_SERVICE_ID', 
    'YOUR_TEMPLATE_ID', 
    form.current, 
    'YOUR_USER_ID'
).then((result) => {},(error)=>{})

Steps

1 . Create account on EmailJS

2 . Add new email service

3 . Add new template
edit template as per your requirement

4 . create react app

$ npx create-react-app project_name

5 . Install EmailJS library

$ npm install @emailjs/browser --save

6 . Create contact form

<form ref={form} onSubmit={sendMail} className='contact-form'>
   <input type="text" className="form-input" name="name"  placeholder='your name'/>
   <input type="text" className="form-input" name="subject" placeholder='subject' />
   <input type="email" className="form-input" name="email" placeholder='youremail' />
   <input type="message" className="form-input" name="message" placeholder='message' />
   <input type="submit" className='form-button' value="Send Mail" />
</form>

useRef() hook
Note - The useRef is a hook that allows to directly create a reference to the DOM element in the functional component.

const form = useRef();
console.log(form.current)

Result -

[Log] <form class="contact-form">
<input type="text" class="form-input" name="name" placeholder="your name">
<input type="text" class="form-input" name="subject" placeholder="subject">
<input type="email" class="form-input" name="email" placeholder="youremail">
<input type="message" class="form-input" name="message" placeholder="message">
<input type="submit" class="form-button" value="Send Mail">
</form>

7 . Now call emailjs.sendForm()

emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', form.current, 'YOUR_USER_ID')
      .then((result) => {
          console.log(result.text);
      }, (error) => {
          console.log(error.text);
      });

This function generate email message and send it to your mail id.

React Node MySql

yash kumat — Thu, 30 Dec 2021 18:27:08 +0000

In this lesson we will learn how add, read, delete data from MySql database (phpmyadmin, MySql Workbench, etc) using React in Frontend and Node Js Server.

We will also learn how to use Axios, Express, CORS, mysql package, prepared statements and many more things in this project.

Client

We are using Axios to send request to our server running on port 9000.

Create

Axios.post('http://localhost:9000/create_user', 
{
    username : username,
    password: encodedPassword
}).then(()=>{
    console.log("request Send!")
})

Axios.post(endpoint, data_object).then((err, success)=>{})

Read

Axios.get('http://localhost:9000/get_all_users')
.then((response)=>{
   setUsers(response.data)
})

Axios.get(endpoint).then(response=>{})

Delete

Axios.delete(`http://localhost:9000/delete_user/${id}`)
.then(()=>{
   console.log("User Deleted")
})

Axios.delete(endpoint+param).then((err, success)=>{})

Server


// Import Express
const express =  require('express')

/* 
Cross-origin resource sharing - 
Cross-origin resource sharing is a mechanism that allows
restricted resources on a web page to be requested from
another domain outside the domain from which the first
resource was served.
*/
const cors = require('cors')

// Create express application
const app = express()

// Use CORS
app.use(cors())

// Recognise the incoming Request Object as a JSON Object
app.use(express.json())

// Import MySql
const mysql = require('mysql')

// Connect to MySql database
const db = mysql.createConnection({
    user: "root",
    host: "localhost",
    password: "",
    database: "react-mysql"
})

// Fire app at port 9000
app.listen(9000, ()=>{
    console.log("Server Started. Jai Shree Ram!")
    db.connect(function(err) {
        if (err) throw err;
        console.log("Connected!");
    });
})

// Insert into database
app.post('/create_user', (req,res)=>{
    const username = req.body.username
    const password = req.body.password

    db.query("INSERT INTO users (username, password) VALUES (?, ?)", [username, password], (err, result)=>{
        if(err){
            console.log(err);
        }else{
            console.log("value inserted!");
        }
    })
})

// Get from database
app.get('/get_all_users',(req,res)=>{
    db.query("SELECT * FROM users", (err,result)=>{
        if(err){
            console.log(err)
        }else{
            res.send(result)
        }
    })
})

// Delete from database
app.delete("/delete_user/:id",(req,res)=>{
    const id = req.params.id

    db.query("DELETE FROM users WHERE id = ?", id, (err,result)=>{
        if(err){
            console.log(err)
        }else{
            console.log("deleted")
        }
    })
})

1 . Insert

db.query("INSERT INTO table_name (col1, col2, col3, ...) VALUES (?, ?, ?, ...)", [val1, val2, val3, ...], (err, result)=>{})

Note - values are not directly passed but send separately in array for SQL injections prevention.

2 . Get

db.query("SELECT * FROM table_name", (err,result)=>{})

3 . Delete

db.query("DELETE FROM table_name WHERE id = ?", id, (err,result)=>{})

Note - when we have to pass one value we can send it directly instead of array into prepared statement.

GitHub Link - https://github.com/yashkumat/React-Node-MySql