DEV Community: Anoop Patel

Mood Driven Theme Changer

Anoop Patel — Wed, 20 Nov 2024 15:46:08 +0000

Step by step code
(https://github.com/anooppatel12/Mood-Driven-Website-Theme-Changer)

Live Preview
(https://mood-driven-website-theme-changer.vercel.app/)

Image To PDF Convertor

Anoop Patel — Wed, 20 Nov 2024 15:24:21 +0000

View Full Code on Github

( https://github.com/anooppatel12/ImgToPdf )

Live Preview

( https://img-to-pdf-omega.vercel.app/ )

Cursor Follower using JS

Anoop Patel — Wed, 20 Nov 2024 12:45:59 +0000

Cursor follower using html, css and js

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3D Cursor Follower</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
      background: #000;
    }
    canvas {
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>
  <script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

    // Set canvas to full screen
    function resizeCanvas() {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
    }
    resizeCanvas();
    window.addEventListener('resize', resizeCanvas);

    // Circle object
    const circle = {
      x: canvas.width / 2,
      y: canvas.height / 2,
      size: 30,
      z: 0, // Simulated depth
      maxZ: 300, // Maximum depth
      color: '#ff0000'
    };

    // Mouse coordinates
    const mouse = {
      x: canvas.width / 2,
      y: canvas.height / 2
    };

    // Update mouse position
    window.addEventListener('mousemove', (event) => {
      mouse.x = event.clientX;
      mouse.y = event.clientY;

      // Simulate depth by mapping x and y distance to z
      const distX = Math.abs(canvas.width / 2 - mouse.x);
      const distY = Math.abs(canvas.height / 2 - mouse.y);
      circle.z = Math.min(circle.maxZ, distX + distY);
    });

    function drawCircle() {
      const scale = 1 - circle.z / circle.maxZ; // Scale based on depth
      ctx.beginPath();
      ctx.arc(circle.x, circle.y, circle.size * scale, 0, Math.PI * 2);
      ctx.fillStyle = circle.color;
      ctx.fill();
      ctx.closePath();
    }

    function animate() {
      // Clear canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      // Move circle toward the mouse smoothly
      circle.x += (mouse.x - circle.x) * 0.1;
      circle.y += (mouse.y - circle.y) * 0.1;

      // Draw circle
      drawCircle();

      requestAnimationFrame(animate);
    }

    animate();
  </script>
</body>
</html>

Add Flip Card in your Project

Anoop Patel — Wed, 20 Nov 2024 12:23:15 +0000

Add Flip card effect in your project just copy and paste the code..

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flip card</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>



  <!-- Projects Section -->
  <section class="projects">
    <div class="container">
      <h2 class="section-title">My Projects</h2>
      <div class="projects-grid">
        <div class="project-card">
          <div class="card-inner">
            <div class="card-front">
              <img src="qw.jpg" alt="Project 1">
              <h3>Project One</h3>
            </div>
            <div class="card-back">
              <p>A MERN stack application with real-time features and dynamic design.</p>
              <a href="#" class="cta">View Project</a>
            </div>
          </div>
        </div>
        <div class="project-card">
          <div class="card-inner">
            <div class="card-front">
              <img src="qw.jpg" alt="Project 2">
              <h3>Project Two</h3>
            </div>
            <div class="card-back">
              <p>An Android app featuring modern UI/UX and seamless functionality.</p>
              <a href="#" class="cta">View Project</a>
            </div>
          </div>
        </div>
        <div class="project-card">
          <div class="card-inner">
            <div class="card-front">
              <img src="qw.jpg" alt="Project 3">
              <h3>Project Three</h3>
            </div>
            <div class="card-back">
              <p>A creative portfolio showcasing animations and responsive design.</p>
              <a href="#" class="cta">View Project</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>



</body>
</html>

CSS

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

body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    color: #333;
    scroll-behavior: smooth;
}



/* Projects Section */
.projects {
    padding: 50px 20px;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.project-card {
    perspective: 1000px;
    height: 200px;
}

.card-inner {
    transition: transform 0.8s;
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

.project-card:hover .card-inner {
    transform: rotateY(180deg);
}

.card-front,
.card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 10px;
    overflow: hidden;
}

.card-front {
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.card-back {
    background: #2575fc;
    color: #fff;
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

Add Flip Card in your Project

Anoop Patel — Wed, 20 Nov 2024 12:23:15 +0000

Add Flip card effect in your project just copy and paste the code..

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flip card</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>



  <!-- Projects Section -->
  <section class="projects">
    <div class="container">
      <h2 class="section-title">My Projects</h2>
      <div class="projects-grid">
        <div class="project-card">
          <div class="card-inner">
            <div class="card-front">
              <img src="qw.jpg" alt="Project 1">
              <h3>Project One</h3>
            </div>
            <div class="card-back">
              <p>A MERN stack application with real-time features and dynamic design.</p>
              <a href="#" class="cta">View Project</a>
            </div>
          </div>
        </div>
        <div class="project-card">
          <div class="card-inner">
            <div class="card-front">
              <img src="qw.jpg" alt="Project 2">
              <h3>Project Two</h3>
            </div>
            <div class="card-back">
              <p>An Android app featuring modern UI/UX and seamless functionality.</p>
              <a href="#" class="cta">View Project</a>
            </div>
          </div>
        </div>
        <div class="project-card">
          <div class="card-inner">
            <div class="card-front">
              <img src="qw.jpg" alt="Project 3">
              <h3>Project Three</h3>
            </div>
            <div class="card-back">
              <p>A creative portfolio showcasing animations and responsive design.</p>
              <a href="#" class="cta">View Project</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>



</body>
</html>

CSS

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

body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    color: #333;
    scroll-behavior: smooth;
}



/* Projects Section */
.projects {
    padding: 50px 20px;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.project-card {
    perspective: 1000px;
    height: 200px;
}

.card-inner {
    transition: transform 0.8s;
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

.project-card:hover .card-inner {
    transform: rotateY(180deg);
}

.card-front,
.card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 10px;
    overflow: hidden;
}

.card-front {
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.card-back {
    background: #2575fc;
    color: #fff;
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

Futuristic Portfolio

Anoop Patel — Sun, 10 Nov 2024 10:39:39 +0000

Portfolio Design For Frontend Developers

Github

Live

Add Crazy Cursor Click Effect on your website..

Anoop Patel — Sun, 10 Nov 2024 09:54:22 +0000

Click And See Magic !

Github

Preview

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Happy Diwali - Bomb Blast Animation</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container" id="container">Click and See Magic</div>
    <script src="script.js"></script>
</body>
</html>

CSS

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

body {
    background: linear-gradient(to bottom, #2c3e50, #4ca1af);
    height: 100vh;
    overflow: hidden;
    color: white;
    font-family: 'Arial', sans-serif;
}

.container {
    position: relative;
    width: 100%;
    height: 100%;
}

.container {
    position: relative;
    text-align: center; /* Center text */
    font-size: 2em; /* Increase font size */
    font-weight: bold; /* Make text bold */
    color: #ffcc00; /* Text color */
    text-shadow: 2px 2px 10px rgba(255, 255, 0, 0.8); /* Add shadow for effect */
}

.bomb {
    position: absolute;
    width: 20px;
    height: 20px;
    background: #ffcc00;
    border-radius: 50%;
    animation: pulse 0.4s forwards;
}

.light {
    position: absolute;
    border-radius: 50%;
    animation: lightSpread 1s forwards;
    opacity: 0;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

@keyframes lightSpread {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

JavaScript

document.addEventListener('DOMContentLoaded', () => {
    const container = document.getElementById('container');

    container.addEventListener('click', (e) => {
        // Create the bomb element
        const bomb = document.createElement('div');
        bomb.className = 'bomb';
        bomb.style.left = e.clientX + 'px';
        bomb.style.top = e.clientY + 'px';
        container.appendChild(bomb);

        // Create light effects
        for (let i = 0; i < 10; i++) {
            const light = document.createElement('div');
            light.className = 'light';
            light.style.left = e.clientX + 'px';
            light.style.top = e.clientY + 'px';
            light.style.background = `hsl(${Math.random() * 360}, 100%, 50%)`;
            light.style.width = Math.random() * 20 + 10 + 'px'; // Random width
            light.style.height = light.style.width; // Keep it circular

            // Set a random angle and distance for spreading lights
            const angle = Math.random() * 2 * Math.PI; // Random angle
            const distance = Math.random() * 200 + 50; // Random distance

            light.style.transform = `translate(${Math.cos(angle) * distance}px, ${Math.sin(angle) * distance}px)`;
            container.appendChild(light);

            // Remove the light effect after animation
            setTimeout(() => {
                light.remove();
            }, 1000);
        }

        // Remove the bomb after animation
        setTimeout(() => {
            bomb.remove();
        }, 400);
    });
});

How To Pass Data To Another Activity

Anoop Patel — Sun, 22 Sep 2024 10:27:49 +0000

there are two activities

MainActivity.java
SettingActivity.java

MainActivity.java

 public void launchSettings(View v){

        //Launch a new activity

        Intent i = new Intent(this,SettingActivity.class);
        String message = ((EditText)findViewById(R.id.editTextText)).getText().toString();
        i.putExtra("cool", message);
        startActivity(i);
    }

SettingActivity.java

public class SettingActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        EdgeToEdge.enable(this);
        setContentView(R.layout.activity_setting);

        Intent i = getIntent();
        String message = i.getStringExtra("cool");
        TextView t = findViewById(R.id.textview);
        t.setText(message);
    }
}

There are XMl Files

1.activity_main.xl


<LinearLayout
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <EditText
        android:id="@+id/editTextText"
        android:layout_width="470dp"
        android:layout_height="64dp"
        android:ems="10"
        android:inputType="text"
        android:text="Name"
        tools:ignore="MissingConstraints"
        tools:layout_editor_absoluteX="7dp"
        tools:layout_editor_absoluteY="30dp" />
    <Button
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="launchSettings"
        android:text="button"
        app:layout_constraintEnd_toEndOf="parent"
        tools:ignore="MissingConstraints"
        tools:layout_editor_absoluteY="125dp" />
</LinearLayout>

2.activitysetting.xml

 <TextView
        android:id="@+id/textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="50sp"
        android:text="hello activity"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.224"
        tools:layout_editor_absoluteX="139dp"
        tools:ignore="MissingConstraints" />

Launch new Activity(Intent)

Anoop Patel — Sun, 22 Sep 2024 05:19:57 +0000

XML file:

 <Button
           android:id="@+id/btn"
           android:onClick="launchSettings"
           android:text="button"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"/>

java file:

 public void launchSettings(View v){

        //Launch a new activity

        Intent i = new Intent(this,SettingActivity.class);
        startActivity(i);
    }

After adding these functionality you will be able to launch new Activity.

Get Text From Input Field..

Anoop Patel — Sun, 22 Sep 2024 04:23:27 +0000

Java Code

public class MainActivity extends AppCompatActivity {

    Button btn;
    TextView textView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        btn = findViewById(R.id.btn);
        textView = findViewById(R.id.editText);

        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                String input = textView.getText().toString().trim();
                TextView text = findViewById(R.id.result);
                text.setText(input);
                Log.d("View", input);
            }
        });
    }

}

Disable buttons and change the text of all buttons..

Anoop Patel — Sat, 21 Sep 2024 14:05:20 +0000

change button text

 public void disable(View v){
        v.setEnabled(false);
        Button button = (Button) v;
        button.setText("Disabled");
    }

How to Disable Button in Android Studio

Anoop Patel — Sat, 21 Sep 2024 13:30:26 +0000

*First Way: *

button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                view.setEnabled(false);
            }
        });

Second way: Without setOnClickListner

 public void disable(View v){
        v.setEnabled(false);
    }

*XMl code file: *

 <Button
        android:id="@+id/button"
        android:onClick="disable"
        android:layout_margin="8dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button" />