codeSnipet

Tuesday, 6 May 2025

3D card hover

import { motion } from "framer-motion";

import React from "react";

const Card = ({ title, price, image }) => {

return (

<motion.div

className="relative h-full w-full bg-cover bg-center bg-no-repeat transition-transform duration-[2300ms] transform-style-3d"

style={{ backgroundImage: `url(${image})` }}

whileHover={{ rotateY: 180 }}

{title}

</h1>

${price}

</span>

href="#"

className="px-6 py-3 text-lg font-light text-white border border-white transition-all duration-500 hover:bg-white hover:text-gray-900"

Add to Cart

</a>

</div>

</motion.div>

</div>

);

};

const CardContainer = () => {

const cards = [

{

title: "Little Bonsai",

price: "79",

image:

"https://images.unsplash.com/photo-1520412099551-62b6bafeb5bb?auto=format&fit=crop&w=600&q=80",

{

title: "Tropical Leaf",

price: "35",

image:

"https://images.unsplash.com/photo-1497250681960-ef046c08a56e?auto=format&fit=crop&w=600&q=80",

{

title: "Marijuana Chill",

price: "155",

image:

"https://images.unsplash.com/photo-1525945518069-b924046d1385?auto=format&fit=crop&w=600&q=80",

];

return (

{cards.map((card, index) => (

))}

</div>

);

};

export default CardContainer;

Thursday, 13 March 2025

OPT section in web site

import { useState } from "react";

import { useLocation, useNavigate } from "react-router-dom";
import axios from "axios";

const VerifyOtp = () => {
  const [otp, setOtp] = useState("");
  const location = useLocation();
  const navigate = useNavigate();
  const email = location.state?.email; // Get email from state

  const handleVerifyOtp = async (e) => {
    e.preventDefault();
    try {
      await axios.post("http://localhost:5000/api/auth/verify-otp", { email, otp });
      alert("Account verified successfully!");
      navigate("/signin"); // Redirect to Sign-in page
      setTimeout(() => {
        alert("Thank you! Now you can sign in and use your blog.");
      }, 1000);
    // eslint-disable-next-line no-unused-vars
    } catch (error) {
      alert("Invalid OTP");
    }
  };

  return (
    <div className="max-w-md mx-auto mt-10">
      <h2 className="text-2xl font-bold">Verify OTP</h2>
      <form onSubmit={handleVerifyOtp} className="flex flex-col gap-4">
        <input type="text" name="otp" placeholder="Enter OTP" className="border p-2" onChange={(e) => setOtp(e.target.value)} required />
        <button type="submit" className="bg-green-500 text-white p-2">Verify OTP</button>
      </form>
    </div>
  );
};

export default VerifyOtp;

// Generate OTP
const generateOTP = () => Math.floor(100000 + Math.random() * 900000).toString();

// Register User
router.post("/signup", async (req, res) => {
  try {
    const { name, email, password, contact } = req.body;

    const userExists = await User.findOne({ email });
    if (userExists) return res.status(400).json({ message: "User already exists" });

    const hashedPassword = await bcrypt.hash(password, 10);
    const otp = generateOTP();

    const user = new User({ name, email, password: hashedPassword, contact, otp });
    await user.save();

    // Send OTP Email
    await transporter.sendMail({
      from: process.env.EMAIL_USER,
      to: email,
      subject: "Your OTP Code",
      text: `Your OTP is: ${otp}`
    });

    res.status(201).json({ message: "User registered! Verify OTP." });
  } catch (error) {
    res.status(500).json({ message: error.message });
  }
});

// Verify OTP
router.post("/verify-otp", async (req, res) => {
  try {
    const { email, otp } = req.body;
    const user = await User.findOne({ email });

    if (!user) return res.status(400).json({ message: "User not found" });
    if (user.otp !== otp) return res.status(400).json({ message: "Invalid OTP" });

    user.verified = true;
    user.otp = "";
    await user.save();

    res.status(200).json({ message: "Account verified! You can now log in." });
  } catch (error) {
    res.status(500).json({ message: error.message });
  }
});

Wednesday, 12 March 2025

How to take image form the file and save in local storage and get form there ...

<h1> Input and Save Image </h1>

import React, { useEffect, useState } from 'react';

function Auth() {

const [file, setFile] = useState(null);

useEffect(() => {

// Load the image from localStorage on page load

const storedFile = localStorage.getItem('file');

if (storedFile) {

setFile(storedFile);

}

}, []);

function handleChange(e) {

const selectedFile = e.target.files[0];

if (selectedFile) {

const reader = new FileReader();

reader.onloadend = () => {

// Convert image to base64 and store in localStorage

localStorage.setItem('file', reader.result);

setFile(reader.result);

};

reader.readAsDataURL(selectedFile);

}

return (

<h2>Add Image:</h2>

{file && <img src={file} alt="Preview" style={{ width: '200px', marginTop: '10px' }} />}

</div>

);

}

export default Auth;

Friday, 14 February 2025

Email From by Node and express

2️⃣ Advanced: Node.js + Express Backend

If you want to store form data in MongoDB or send emails using Nodemailer,create a backend.

🔹 Backend (server.js) javascript Copy Edit const

express = require("express");

const cors = require("cors");

const nodemailer = require("nodemailer");

const app = express();

app.use(express.json());

app.use(cors());

const transporter = nodemailer.createTransport({ service: "gmail", auth: { user: "your-email@gmail.com", pass: "your-password", }, });

app.post("/send-email", (req, res) => { const { firstName, lastName, email, subject, message } = req.body;

const mailOptions = { from: email, to: "your-email@gmail.com", subject: `New Contact Form Submission: ${subject}`, text: `Name: ${firstName} ${lastName}\nEmail: ${email}\nMessage: ${message}`, };

transporter.sendMail(mailOptions, (error, info) => { if (error) { res.status(500).send("Email not sent"); } else { res.send("Email sent successfully"); } }); });

app.listen(5000, () => console.log("Server running on port 5000"));

🔹 React (Frontend) jsx Copy Edit

const handleSubmit = async (event) => { event.preventDefault();

const formData = { firstName: event.target.firstName.value, lastName: event.target.lastName.value, email: event.target.email.value, subject: event.target.subject.value, message: event.target.message.value, };

const response = await fetch("http://localhost:5000/send-email", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(formData), });

if (response.ok) { setStatus("Message sent successfully!");

event.target.reset();

} else { setStatus("Failed to send message."); } };

✅ How This Works: Backend uses Nodemailer to send emails Frontend sends data using fetch() Emails are delivered to your inbox

Hover Navbar

Document

1️⃣ Simple Method: Formspree (No Backend)


      import React, { useState } from "react";

function Contact() {
  const [status, setStatus] = useState("");

  const handleSubmit = async (event) => {
    event.preventDefault();
    const formData = new FormData(event.target);

    const response = await fetch("https://formspree.io/f/YOUR_FORM_ID", {
      method: "POST",
      body: formData,
      headers: { Accept: "application/json" },
    });

    if (response.ok) {
      setStatus("Thanks for your message!");
      event.target.reset(); // Clear form after successful submission
    } else {
      setStatus("Oops! Something went wrong.");
    }
  };

  return (
    
      {/* Contact Info */}
      
        Contact
        Looking forward to hearing from you

        
          Phone
          98575545525
        
        
        
          Email
          info@gmail.com
        
      

      {/* Contact Form */}
      
        
          {/* First & Last Name */}
          
            
              First Name*
              
            
            
              Last Name*
              
            
          

          {/* Email & Subject */}
          
            
              Email*
              
            
            
              Subject
              
            
          

          {/* Message */}
          
            Message
            
          

          {/* Submit Button */}
          

          {/* Status Message */}
          {status && {status}}
        
      
    
  );
}

export default Contact;