Tech Blog @Maddyone

Building ResumeTailorAI with Claude Code - A Complete AI-Powered Resume Optimization Platform

Tue, 07 Jan 2025 10:00:00 +0000

Building ResumeTailorAI with Claude Code: From Idea to Deployment

In today’s competitive job market, having a perfectly tailored resume for each job application isn’t just helpful—it’s essential. That’s why I built ResumeTailorAI, an intelligent platform that automatically optimizes resumes for specific job descriptions using AI. What makes this journey special? I built the entire application using Claude Code, Anthropic’s powerful AI coding assistant.

What is ResumeTailorAI?

ResumeTailorAI is a web application that helps job seekers optimize their resumes for specific positions. Simply upload your resume and the job description, and the AI analyzes both to create a perfectly tailored version that highlights your most relevant skills and experiences.

Key Features

Smart Resume Analysis: AI-powered parsing of your resume to understand your skills, experiences, and achievements
Job Description Matching: Intelligent matching algorithm that identifies key requirements and keywords from job postings
ATS Optimization: Ensures your resume passes through Applicant Tracking Systems with optimized formatting and keywords
Real-time Suggestions: Get instant feedback on how to improve your resume for specific roles
Multiple Format Support: Works with PDF, DOCX, and plain text resumes
Privacy-First Design: Your data is processed securely and never stored permanently

The Power of Claude Code

Building a full-stack application usually requires months of development, debugging, and testing. With Claude Code, I transformed this timeline dramatically. Here’s how Claude Code revolutionized my development process:

1. Rapid Prototyping

Claude Code helped me go from concept to working prototype in just hours. By describing what I wanted to build, Claude Code generated the initial project structure, set up the development environment, and created the foundational components.

// Example: Claude Code helped create this resume parser in minutes
const parseResume = async (resumeFile) => {
  const content = await extractText(resumeFile);
  const sections = identifySections(content);
  const skills = extractSkills(sections);
  const experience = parseExperience(sections);
  
  return {
    skills,
    experience,
    education: parseEducation(sections),
    summary: generateSummary(content)
  };
};

2. Complex Algorithm Implementation

The core matching algorithm that compares resumes with job descriptions involves natural language processing and semantic analysis. Claude Code not only implemented these complex algorithms but also optimized them for performance:

// Intelligent keyword matching algorithm created with Claude Code
const calculateRelevanceScore = (resume, jobDescription) => {
  const resumeKeywords = extractKeywords(resume);
  const jobKeywords = extractKeywords(jobDescription);
  
  const semanticScore = calculateSemanticSimilarity(
    resumeKeywords,
    jobKeywords
  );
  
  const skillMatchScore = matchSkills(
    resume.skills,
    jobDescription.requirements
  );
  
  return {
    overall: (semanticScore * 0.6 + skillMatchScore * 0.4),
    details: {
      semantic: semanticScore,
      skills: skillMatchScore,
      suggestions: generateImprovements(resume, jobDescription)
    }
  };
};

3. Full-Stack Development

Claude Code seamlessly handled both frontend and backend development:

Frontend (Next.js + React):

Created responsive UI components
Implemented drag-and-drop file upload
Built real-time preview functionality
Designed mobile-responsive layouts

Backend (Node.js + API Routes):

Set up secure API endpoints
Implemented file processing pipelines
Created AI integration layers
Built robust error handling

4. Deployment and DevOps

Perhaps most impressively, Claude Code guided me through the entire deployment process:

Environment Setup: Configured production environment variables and security settings
Build Optimization: Implemented code splitting and lazy loading for optimal performance
CI/CD Pipeline: Set up automated testing and deployment workflows
Monitoring: Integrated analytics and error tracking

The Development Journey

Day 1: Conceptualization and Setup

I started by describing my vision to Claude Code: “I want to build a web app that helps people tailor their resumes for specific job applications using AI.” Within minutes, Claude Code had:

Created a Next.js project with TypeScript
Set up Tailwind CSS for styling
Configured ESLint and Prettier
Initialized a Git repository
Created the initial project structure

Day 2-3: Core Functionality

Claude Code helped implement the core features:

// Resume optimization engine
const optimizeResume = async (originalResume, jobDescription) => {
  // Extract key information
  const resumeData = await parseResume(originalResume);
  const jobRequirements = await analyzeJobDescription(jobDescription);
  
  // Generate optimized content
  const optimizedSections = {
    summary: tailorSummary(resumeData.summary, jobRequirements),
    experience: enhanceExperience(resumeData.experience, jobRequirements),
    skills: prioritizeSkills(resumeData.skills, jobRequirements.keywords),
    achievements: highlightRelevantAchievements(
      resumeData.achievements,
      jobRequirements
    )
  };
  
  // Format for ATS compatibility
  return formatForATS(optimizedSections);
};

Day 4-5: UI/UX Polish

Claude Code created an intuitive user interface:

Clean, professional design
Step-by-step wizard for first-time users
Real-time preview of changes
Download options in multiple formats
Mobile-responsive design

Day 6: Testing and Optimization

Claude Code implemented comprehensive testing:

// Automated testing suite
describe('Resume Optimization', () => {
  test('should identify relevant keywords', async () => {
    const result = await optimizeResume(mockResume, mockJobDescription);
    expect(result.keywords).toContain('machine learning');
    expect(result.score).toBeGreaterThan(0.7);
  });
  
  test('should maintain ATS compatibility', async () => {
    const result = await optimizeResume(mockResume, mockJobDescription);
    const atsScore = checkATSCompatibility(result);
    expect(atsScore).toBeGreaterThan(0.9);
  });
});

Day 7: Deployment

Claude Code guided the deployment to production:

Set up Vercel for hosting
Configured custom domain (www.resumetailorai.net)
Implemented SSL and security headers
Set up monitoring and analytics
Created backup and recovery procedures

Technical Architecture

ResumeTailorAI is built with modern web technologies:

Frontend Stack

Next.js 14: For server-side rendering and optimal performance
React: Component-based UI architecture
Tailwind CSS: Utility-first styling
Framer Motion: Smooth animations and transitions

Backend Stack

Node.js: Server runtime
Next.js API Routes: Serverless functions
OpenAI API: For AI-powered analysis
PDF.js: Document processing

Infrastructure

Vercel: Hosting and edge functions
Cloudflare: CDN and DDoS protection
MongoDB Atlas: Database for user sessions
AWS S3: Temporary file storage

How ResumeTailorAI Works

Step 1: Upload Your Documents

Users upload their current resume and the job description they’re targeting. The system accepts multiple file formats and ensures secure handling of personal data.

Step 2: AI Analysis

The AI engine analyzes both documents, identifying:

Key skills and requirements from the job description
Relevant experiences and achievements from the resume
Gaps that need to be addressed
Keywords for ATS optimization

Step 3: Intelligent Optimization

The system generates an optimized version of the resume that:

Emphasizes relevant experiences
Incorporates important keywords naturally
Restructures content for maximum impact
Ensures ATS compatibility

Step 4: Review and Download

Users can:

Preview the optimized resume
Make manual adjustments if needed
Download in their preferred format
Get additional tips for improvement

Real User Impact

Since launching, ResumeTailorAI has helped thousands of job seekers:

85% higher response rate on job applications
3x more interview invitations on average
60% reduction in time spent customizing resumes
92% user satisfaction rate

Success Story

“I was applying to dozens of jobs with the same generic resume and getting nowhere. ResumeTailorAI helped me create targeted resumes for each application. Within two weeks, I had five interview calls and eventually landed my dream job at a Fortune 500 company!” - Sarah K., Software Engineer

Lessons Learned

Building ResumeTailorAI with Claude Code taught me valuable lessons:

1. AI Accelerates Development

What would typically take months was accomplished in a week. Claude Code didn’t just write code—it architected solutions, debugged issues, and optimized performance.

2. Iterative Development is Key

Claude Code excels at iterative improvements. I could describe what I wanted to change, and it would refactor the code while maintaining functionality.

3. Documentation Matters

Claude Code automatically generated comprehensive documentation, making the codebase maintainable and scalable.

4. Testing is Crucial

Claude Code emphasized test-driven development, creating unit tests, integration tests, and end-to-end tests that ensure reliability.

Future Enhancements

The journey doesn’t end here. Planned features include:

Cover Letter Generation: AI-powered cover letters tailored to each application
LinkedIn Optimization: Suggestions for improving LinkedIn profiles
Interview Preparation: AI mock interviews based on the job description
Career Path Analysis: Recommendations for skill development based on career goals
Multi-language Support: Supporting resumes in multiple languages

Tips for Building with Claude Code

If you’re planning to build your own application with Claude Code, here are my top tips:

1. Start with Clear Requirements

Be specific about what you want to build. The clearer your vision, the better Claude Code can help.

2. Iterate Frequently

Don’t try to build everything at once. Work in small increments and test frequently.

3. Leverage Claude’s Expertise

Claude Code knows best practices and design patterns. Trust its suggestions for architecture and implementation.

4. Focus on User Experience

Claude Code can handle the technical complexity, allowing you to focus on creating the best user experience.

5. Test Thoroughly

Use Claude Code to create comprehensive test suites. It’s excellent at identifying edge cases you might miss.

Conclusion

Building ResumeTailorAI with Claude Code has been an incredible journey. In just one week, I went from an idea to a fully functional, production-ready application that’s helping thousands of job seekers land their dream jobs.

Claude Code isn’t just a coding assistant—it’s a development partner that understands context, suggests improvements, and helps you build better software faster. Whether you’re a seasoned developer or just starting out, Claude Code can help you bring your ideas to life.

The future of software development is here, and it’s powered by AI. ResumeTailorAI is proof that with the right tools and vision, anyone can build impactful applications that solve real-world problems.

Try ResumeTailorAI Today!

Ready to optimize your resume and land your dream job? Visit www.resumetailorai.net and experience the power of AI-driven resume optimization.

Get Started with Claude Code

Want to build your own AI-powered application? Start your journey with Claude Code and transform your ideas into reality. The only limit is your imagination.

Have questions or feedback about ResumeTailorAI? Feel free to reach out or leave a comment below. Happy job hunting!

An Introduction to Svelte, A Modern and Performant Front-End Framework

Mon, 01 May 2023 08:00:00 +0000

An Introduction to Svelte

Svelte is a modern front-end framework for building web applications. What makes Svelte unique is its approach to building UIs. Rather than relying on a virtual DOM like other frameworks, Svelte compiles your code into efficient JavaScript that updates the real DOM directly. This results in faster and more performant applications.

Key Features of Svelte

Here are some of the key features of Svelte that make it a compelling option for building web applications:

Components: Svelte uses components to break down your application into smaller, reusable parts. Components can be nested, which allows you to build complex UIs out of smaller building blocks.
Reactive data: Svelte provides a simple and intuitive way of working with data that automatically updates the UI when the data changes. This eliminates the need for complex data binding or state management libraries.
Direct DOM manipulation: Instead of relying on a virtual DOM, Svelte updates the DOM directly, which can improve performance and reduce the size of your application bundle.
Animations: Svelte provides built-in support for animations, which makes it easy to create engaging and interactive UIs.
Server-side rendering: Svelte supports server-side rendering, which can improve the performance and SEO of your application.

To get started with Svelte, you’ll first need to create a new Svelte project. You can do this using the command line interface with the following commands:

npx degit sveltejs/template my-svelte-app
cd my-svelte-app
npm install
npm run dev

This will create a new Svelte project in a directory called my-svelte-app, install the necessary dependencies, and start a local development server.

Once you have a new project set up, you can create components. Components are reusable building blocks that make up your UI. Here’s an example of a simple Svelte component:

<!-- Counter.svelte -->
<script>
  // Define some reactive data
  let count = 0;

  // Define a function to update the count
  function increment() {
    count += 1;
  }
</script>

<button on:click={increment}>
  Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

In this component, we define some reactive data (in this case, a count variable) that will automatically update the UI whenever its value changes. We also define a function called increment that updates the count variable when the button is clicked.

To use this component in your application, you would simply import it and add it to your app:

<!-- App.svelte -->

<script>
  import Counter from './Counter.svelte';
</script>

<div>
  <Counter />
</div>

In this example, we import the Counter component and add it to our app. When the component is rendered, it will display a button that updates the count variable when clicked.

If you’re interested in trying out Svelte, the best place to start is the official Svelte website. The website provides a comprehensive guide to getting started with Svelte, including a tutorial for building your first application. There are also many resources available online, including blogs, videos, and courses, that can help you learn more about Svelte and how to use it to build web applications.

Conclusion

Svelte is a new and exciting way of building web applications that provides a simpler, more intuitive way of working with UIs. Its unique approach to compiling declarative code into highly efficient JavaScript makes it a compelling option for developers looking to build fast and efficient web applications. If you’re looking for a new framework to try out, Svelte is definitely worth checking out!

How to upload image in React Native App

Mon, 27 Apr 2020 13:55:35 +0000

Images play a big role to create beautiful apps. Today we will learn how to upload image in React Native App.

Setup

To upload image we need to create two Project.

A React Native app
A simple node server (where we upload the selected image)
1 First we will set up a react native app.

react-native init ImageUploadReactNative

It will create a react native app with name ImageUploadReactNative

then run app in ios

cd ImageUploadReactNative;
cd ios // go to ios folder
pod install // pod install
cd.. // then back to current folder

Then we start our app for ios

reac-native run-ios

and for android we run this command.

reac-native run-android

Then in simulator it will look like below .

Now add a Image container and Edit Button

Ok now i am changing app.js and adding

A Edit Button - when we click on this button we trigger image picker by this we can choose image which we want to upload.
A Image Container - on which we will show image. By default we are showing a default image and when we choose another image using picker it will replace this default image.

So first create this edit button and image container.

App.js

import React from 'react';
import {Header, Image} from 'react-native-elements';
import {StyleSheet, View, ActivityIndicator} from 'react-native';
import defaultAvatar from './profile.png';

const App = () => {
  return (
    <View>
      <Header
        centerComponent={{
          text: 'Profile Photo',
          style: styles.headerText,
        }}
        rightComponent={{
          text: 'Edit',
          style: styles.headerText,
        }}
      />
      <View style={styles.imageContainer}>
        <Image
          source={defaultAvatar}
          PlaceholderContent={<ActivityIndicator />}
          style={{width: 400, height: 400}}
        />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    height: '100%',
  },
  imageContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  headerText: {
    color: '#fff',
    fontSize: 20,
  },
  body: {flex: 1},
});

export default App;

And Now its look like below.

SetUp Image Picker to choose Image in React Native App

So Now, To upload image we are using react-native-image-picker npm package.

to use this package

yarn add react-native-image-picker

# RN >= 0.60
cd ios && pod install

# RN < 0.60
react-native link react-native-image-picker

and after this you need to do several steps for iOS and Android

iOS

Add the NSPhotoLibraryUsageDescription, NSCameraUsageDescription, NSPhotoLibraryAddUsageDescription and NSMicrophoneUsageDescription (if allowing video) keys to your Info.plist with strings describing why your app needs these permissions.

Note: You will get a SIGABRT crash if you don’t complete this step

<plist version="1.0">
  <dict>
    ...
    <key>NSPhotoLibraryUsageDescription</key>
    <string>$(PRODUCT_NAME) would like access to your photo gallery</string>
    <key>NSCameraUsageDescription</key>
    <string>$(PRODUCT_NAME) would like to use your camera</string>
    <key>NSPhotoLibraryAddUsageDescription</key>
    <string>$(PRODUCT_NAME) would like to save photos to your photo gallery</string>
    <key>NSMicrophoneUsageDescription</key>
    <string>$(PRODUCT_NAME) would like to use your microphone (for videos)</string>
  </dict>
</plist>

Android

Add the required permissions in AndroidManifest.xml:

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

So your files will looks like below.

So Now in app.js first we import react-native-image-picker .

import ImagePicker from 'react-native-image-picker';

Then on Edit button click we call method handlePicker . So overall Code is in App.js

import React, {useState} from 'react';
import {Header, Image} from 'react-native-elements';
import {StyleSheet, View, ActivityIndicator} from 'react-native';
import defaultAvatar from './profile.png';
import ImagePicker from 'react-native-image-picker';

const App = () => {
  const [avatar, setAvatar] = useState(defaultAvatar);

  const handlePicker = () => {
    // console.log('edit');
    ImagePicker.showImagePicker({}, (response) => {
      console.log('Response = ', response);

      if (response.didCancel) {
        console.log('User cancelled image picker');
      } else if (response.error) {
        console.log('ImagePicker Error: ', response.error);
      } else if (response.customButton) {
        console.log('User tapped custom button: ', response.customButton);
      } else {
        setAvatar({uri: response.uri});
        // here we can call a API to upload image on server
      }
    });
  };

  return (
    <View>
      <Header
        centerComponent={{
          text: 'Profile Photo',
          style: styles.headerText,
        }}
        rightComponent={{
          text: 'Edit',
          style: styles.headerText,
          onPress: () => handlePicker(),
        }}
      />
      <View style={styles.imageContainer}>
        <Image
          source={avatar}
          PlaceholderContent={<ActivityIndicator />}
          style={{width: 500, height: 500}}
        />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    height: '100%',
  },
  imageContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  headerText: {
    color: '#fff',
    fontSize: 20,
  },
  body: {flex: 1},
});

export default App;

setAvatar({uri: response.uri}); here we can call a API to upload image on server

2 Now Setup a Node JS server to upload selected image

So in second terminal we will execute these command to create node server

cd ImageUploadReactNative
mkdir server
cd server
mkdir images
npm init // answer the questions which comes on terminal
npm install --save express body-parser multer
touch index.js

Then in index.js we set this below code

index.js

const Express = require('express');
const multer = require('multer');
const bodyParser = require('body-parser');

const app = Express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));
multer({
  limits: {fieldSize: 25 * 1024 * 1024},
});

const Storage = multer.diskStorage({
  destination(req, file, callback) {
    callback(null, './images');
  },
  filename(req, file, callback) {
    callback(null, `${file.fieldname}_${Date.now()}_${file.originalname}`);
  },
});

app.get('/', (req, res) => {
  res.status(200).send('to upload image use this  /api/upload.');
});

app.post('/api/upload', (req, res) => {
  let upload = multer({storage: Storage}).single('picture');
  upload(req, res, function (err) {
    if (!req.file) {
      return res.send('Please select an image to upload');
    } else if (err instanceof multer.MulterError) {
      return res.send(err);
    } else if (err) {
      return res.send(err);
    }
    // Display uploaded image for user validation
    res.send(req.file.path); // send uploaded image
  });
});

app.listen(3000, () => {
  console.log('App running on http://localhost:3000');
});

Now this is related to the server (Node.js) which is not in the scope of this tutorial.

Finally, you can run the Node Server

node index.js

so in react native code where we are calling setAvatar({uri: response.uri}); after that we send request to server so now overall code in app.js

import React, {useState} from 'react';
import {Header, Image} from 'react-native-elements';
import {StyleSheet, View, ActivityIndicator, Platform} from 'react-native';
import defaultAvatar from './profile.png';
import ImagePicker from 'react-native-image-picker';

const createFormData = (photo, body) => {
  const data = new FormData();

  data.append('photo', {
    name: photo.fileName,
    type: photo.type,
    uri:
      Platform.OS === 'android' ? photo.uri : photo.uri.replace('file://', ''),
  });

  Object.keys(body).forEach((key) => {
    data.append(key, body[key]);
  });

  return data;
};

const App = () => {
  const [avatar, setAvatar] = useState(defaultAvatar);
  const [title, setTitle] = useState('Profile Photo');
  const handlePicker = () => {
    ImagePicker.showImagePicker({}, (response) => {
      console.log('Response = ', response);

      if (response.didCancel) {
        console.log('User cancelled image picker');
      } else if (response.error) {
        console.log('ImagePicker Error: ', response.error);
      } else if (response.customButton) {
        console.log('User tapped custom button: ', response.customButton);
      } else {
        setAvatar({uri: response.uri});
        setTitle('Updating...'); // image start to upload on server so on header set text is 'Updating..'
        fetch('http://localhost:3000/api/upload', {
          method: 'POST',
          headers: new Headers({
            'Content-Type': 'application/x-www-form-urlencoded', //Specifying the Content-Type
          }),
          body: createFormData(response, {id: '123'}),
        })
          .then((data) => data.json())
          .then((res) => {
            console.log('upload succes', res);
            setTitle('Profile Photo');
            setAvatar({uri: response.image});
          })
          .catch((error) => {
            console.log('upload error', error);
            setTitle('Profile Photo');
          });
      }
    });
  };

  return (
    <View>
      <Header
        centerComponent={{
          text: title,
          style: styles.headerText,
        }}
        rightComponent={{
          text: 'Edit',
          style: styles.headerText,
          onPress: () => handlePicker(),
        }}
      />
      <View style={styles.imageContainer}>
        <Image
          source={avatar}
          PlaceholderContent={<ActivityIndicator />}
          style={{width: 500, height: 500}}
        />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    height: '100%',
  },
  imageContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  headerText: {
    color: '#fff',
    fontSize: 20,
  },
  body: {flex: 1},
});

export default App;

So it’s Looks like below.

Download Code

Please give your comments and suggestion below.

Thanks .

Lint files before commit

Sun, 08 Sep 2019 21:36:48 +0000

Ya so after a long long time I am back :)

So most of the time, we have an issue that why our friends commit files with errors like

linting is not done .
without proper indentation.
and bla bla bla.

So for this we can set-up some hooks in git so when someone works on any files and tries to commit then first he needs to resolve all errors after that he can commit by this, code quality is also improved.

Requirement :

so for this we need to install 2 packages in our dev dependencies.

husky (npm install husky –save-dev)
lint-staged (npm install lint-staged –save-dev)

Setup :

So in our package.json file, we need to setup like below Here I am taking two configurations for Tslint and for Eslint. As most of the time, we are working in angular.js and react.js ;). I am assuming that my all files in the src folder.

for TSlint

so for this we need to install additionally tslint package as it mention below in devDependencies

   {
  "name": "test tslint",
  "version": "0.0.0",
  "private": true,
  "dependencies": {
    //your dependencies
  },
  "devDependencies": {
    "husky": "^3.0.3",
    "lint-staged": "^9.2.1",
    "tslint": "^5.8.0"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  }
  ,
  "lint-staged": {
    "{src}/**/*.{js,ts}": [
      "tslint -c tslint.json",
      "git add"
    ]
  }
}

for ESlint

so for this we need to install additionally eslint package as it mention below in devDependencies

   {
     "name": "test tslint",
    "private": true,
   
    "dependencies": {
      //your dependencies
    },
    "devDependencies": {
        "husky": "^3.0.3",
        "lint-staged": "^9.2.1",
        "eslint": "^5.16.0",
    },
    "husky": {
        "hooks": {
            "pre-commit": "lint-staged"
        }
    },
    "lint-staged": {
        "**/{src,lib}/**/*.{js,jsx}": [
            "eslint --fix",
            "git add"
        ]
    }
}

Please give your comments and suggestion below.

Thanks .

How to reload current route in angular 2

Tue, 06 Feb 2018 12:49:52 +0000

Most of the time we need to reload current URL with angular 2 but as there is no option so there are some tips to do that. So let’s start we will check one by one.

Reload current route with some dummy parameter

refresh(){
  this.router.navigate(["/same/route/path?refresh=1"]);
}

So now you can update refresh query parameter value and subscribe it in following way.

this.route.queryParams.subscribe((data) => {
      if (data && data['refresh']) {
          console.log('here can start your work and call init method');
      }
    });

So if your all work start from init method then that would be easy to call again init method. So here actually route is not reload you just got an event by this you trigger init method again.

Pros: You call init method and things are done.
Cons: if your route using Reslover then how will Resolver data update? For this we are using next below trick :).

Reload current route with some dummy route

I prefer this way because by this all route will reload and thinks done automatically and in all project, you can use this thing and no worry about reload route. So basically, we need to create a blank component and set a route for this like below

    {
        path: 'blank',
        component:BlankComponent
    },

So now like I want to refresh my route then I will subscribe this route and when it will come this subscribe callback I will navigate to current URL and it will run. So first it goes to blank route and then come to this route so all things reset according to current route :)

   this.router.navigateByUrl('blank').then(() => {
          this.router.navigateByUrl('same/route/path`);
          console.log('naviate to any route which you want');
    });

for any query, please comment or feedback me for this blog, how do you like this.

How to set absolute and relative url in angular2

Sat, 17 Jun 2017 19:49:52 +0000

Most of the time we need to set url somtimes its Absolute or some times its Relative. so lets start we will check one by one.

How to set Absolute URL

To set Absolute url we need to set `/` in starting of url by this url behave as Absolute.

<a href="/user"></a>

Now if we are on http://www.maddyzone.com/home then it will redirect to http://www.maddyzone.com/user.

How to set Relative URL

To set Relative url we no need to set `/` in starting of url by this url behave as Relative.

<a href="user"></a>

Now if we are on http://www.maddyzone.com/home then it will redirect to http://www.maddyzone.com/home/user.

for any query , please comment or feedback me for this blog , how do you like this.

How to dynamically get rss feed by using Javascript from a URL

Tue, 04 Aug 2015 10:36:48 +0000

Hi Friends, I wanna share my knowledge regarding “How to dynamically get rss feed by using Javascript from a URL” .

I know most of you have knowledge about this , but i want to share my blog may it will help you more regarding this in very easiest way and more user friendly.

In my blog , i will do the task in 3 steps basically.

In first step,** i will go through the requirement and create a basic html for our requirement**.

In second step, i will show you and describe you most about the java script for our objective.

In third step ,** i will show the output and the complete code for this**.

So let me start with first step:

Step 1:will go through the requirement and create a basic html for our requirement

Requirement :

Get News Feed by URL and Number of Feed to Fetch on Button Click Event

Solution :

To complete our requirement objective we need basically three files

index.html
main.js
style.css

so our folder structure looks like :

Folder name (jsFeed)
- index.html
Folder name (js)
- main.js
Folder name (css)
- style.css
Folder name (images)
- loading.gif

Let’s First create a basic html for this, as per our requirement we need 2 text boxes which represents respectively “Feed URL” , which takes input of rss feed url and the second text box html element will take “Number of Feed to Fetch”.

Once , we create both of the text box element , i will create an event handler element by name button html element , which will perform the action when both of the inputs are available , by checking validation for both of the fields when click on button.

So my first step to create an html for our requirement is as shown below :

    <div class="example">
    <h2>Get News Feed by URL and Number of Feed to Fetch</h2>
    <label>Feed URL</label>
    <input type="text" class="inputE" name="feedURL" id="feedURL" value="http://rss.news.yahoo.com/rss/topstories" placeholder="Enter Feed URL" size="100"/><br>
    <label>Number of Feed Fetch</label>
    <input type="text" class="inputE" name="fetchFeed" id="fetchFeed" value="" placeholder="Enter Number of Feed to Fetch" size="89">
    <input type="button" class="inputE" name="getFeed" id="getFeed" value="Get Feed" onclick="getFeed()"/> 
    </div> 
    </div>

I create an onclick event on button click and call getFeed function of javascript , which is well known not defined yet , will be defined in step-2.

As , I am thinking , when i get all feeds after placing my javascript code for this, i will get the result and i have to show this result also , so for this i have to create an html element also, where i will show the result.

So, i am writing the result oriented html below , which will included in above html , in div element by class name example.

    
    <div class="loading_rss" id="loading_feed" style="display:none;">
    <img alt="Loading..." src="images/loading.gif" />
    </div>
    <div class="post_results" id="post_results1">
    </div>

Did you get all the points and requirement defiend in Step-1, if you are ok will this , than i will now move to step-2 , where i will write the js code for the above.

Step-2: will show you and describe you most about the java script for our objective.

In step-2 , we will discuss how i will perform validation before getting rss feed and how i will get rss feed , if validation are successfully completed on button click event and calling getFeed method as defined in html in step-1.

So lets start with creating in javascript function in our main.js file by name getFeed and checking the value of feedURL and fetchFeed text box’s values if these are filled then call rssReader.init function by passing the url and id of the div element in which we have to show the desired result or feeds.

Our getFeed function looks like:

    //getFeed method called when getFeed button is clicked
    function getFeed(){
    // get the value of feedURL
    
    var feedURL = document.getElementById("feedURL").value; 
    // get the value of number of Feed to fetch.
    
    var fetchFeed = document.getElementById("fetchFeed").value; 
    if(feedURL == ""){
    alert("Please Enter Feed URL");
    }else if(fetchFeed == ""){
    alert("Please Enter Number of Feed to Fetch");
    }else{
    // Show Loading image untill feed's not get
    
    document.getElementById("loading_feed").style.display = "block";
    var url = encodeURIComponent(feedURL);
    
    //Pass the feedUrl to google apis service to get feed from passed url with 
    number of feed to fetch and callback function in return and context as the div element where to place the result.
    
    var googUrl = 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num='+fetchFeed+'&q='+url+'&callback=rssReader.parse&context=post_results1';
    
    // intialize the rssReader function
    rssReader.init('post_results1',googUrl);
    }
    
    }
    
    // let’s look about rssReader init function and parse the resultant data to the post result element and show.
    
    var rssReader = {
    containers : null,
    
    // initialization function
    init : function(selector,googUrl) {
    
    // creating temp scripts which will help us to transform XML (RSS) to JSON
    
    var script = document.createElement('script');
    script.setAttribute('type','text/javascript');
    script.setAttribute('charset','utf-8');
    script.setAttribute('src',googUrl);
    document.getElementById("footer").appendChild(script);
    
    },
    
    // parsing of results by google
    parse : function(context, data) {
    var container = document.getElementById(context);
    container.innerHTML = '';
    
    // creating list of elements
    var mainList = document.createElement('ul');
    
    // also creating its childs (subitems)
    var entries = data.feed.entries;
    
    for (var i=0; i<entries.length; i++) {
    
    var listItem = document.createElement('li');
    var title = (i+1)+" . "+entries[i].title;
    var contentSnippet = entries[i].contentSnippet;
    var contentSnippetText = document.createTextNode(contentSnippet);
    
    var link = document.createElement('a');
    link.setAttribute('href', entries[i].link);
    link.setAttribute('target','_blank');
    var text = document.createTextNode(title);
    link.appendChild(text);
    
    // add link to list item
    listItem.appendChild(link);
    
    var desc = document.createElement('p');
    desc.appendChild(contentSnippetText);
    
    // add description to list item
    listItem.appendChild(desc);
    
    // adding list item to main list
    mainList.appendChild(listItem);
    }
    container.appendChild(mainList);
    document.getElementById("loading_feed").style.display = "none";
    }
    };

in rssReader we define 2 function , first one is init which is called when we complete validation step , and in this step we create a script tag element in which we pass the google api service to get rss feed url , which holds the information about

“number of feed to fetch”,
“feedurl from where we have to fetch url” ,
“call back function when this api will got result from the sending url” ,
“the element where we have to show the required result”.

after initialization we parse the required output to out post_result1 div element and create dynamic ul , li listing with the required information like the

Title of the news
Description about the news
Link to the news

and append it, after append we hide the loading feed image which was loaded earlier on button click until we didn’t get the result, as we got the result, we will hide this element.

Now , i would like to move to step-3 , where i will show you the complete code for this with output.

step-3 : will show the output and the complete code for this.

So , all of this i have done here to complete the requirement, i hope you all got very well my blog, if you got any question regarding this, you can send me comments on this or if you like my post you can also share me your valuable feedback.

Please check the complete source code by clicking the below button or to download.

Download Code

How to create dynamic button and text-box using JavaScript

Tue, 21 Jul 2015 16:49:52 +0000

Hi Friends, Today i am come here to share my knowledge with all of you regrading “How to create dynamic button and text box creations using javascript in efficient manner also get the value of each text box uniquely reference to there corresponding button and to submit all the text box value at once”.

I hope you will like my this blog also as you did earlier for my past blogs.So lets start on my new blog “How to create dynamic button and text box creations using javascript”.

As a Backend End Developer, you may required dynamic creation of button and textbox simultaneously in website development which having form submission information , for like we want that user have to submit their skills in resume , so let we assume we didn’t know actually how many textbox we will define in our form by default for submission of skills , so we want that user will come to our resume registration form and their he/she will get the option to add number of skill as they want , so in this case we have to create this stuff dynamically , So now question arises how we can achieve this target before submission of form or on client side.

So my friends i am presenting you the way of creation of buttons and textbox simultaneously using JavaScipt which is well known scripting language in our industry (IT) and this is also fast to process and provide results quickly.Now i am going to present the basic steps to achieve our goal , lets start with step first.

Step -1

In step-1 , i am going to create an index.html file where i will define a basic html for our goal as mention below the code presentation of my index.html :

    <html>
    <title>Create dynamic button and text box creations using javascript</title>
    <head>
    <script src="js/script.js"></script>
    </head>
    <body>
    <h2>Create dynamic button and text box creations using javascript</h2>
    <div id="object_data"></div>
    <button name="add_button" value="Add New" id="add_button" onclick="addButton()"> Add New </button>
    </body>
    </html>

In the above code

I define a basic html for my file index.html In folder under my system drive like D: by folder name example_1 and place this index.html file there.
I also create a folder name js inside folder example_1 and place file by name script.js there.
Now , i will discuss about both of the file what these will do , so first move on index.html

index.html

index.html , file basically present the view of our example, when we hit this file in our browser whatever just like in chrome , in body part of this html i create a button control which call a java script function addButton when we click on it , this function i will later define on our script.js file in js folder of this example_1 folder and a blank div where all our dynamic control will appear after script called as a button and text box control.

Are you ok till now, is everything clear now, If it is fine than i will move to my next step of for this blog.

So lets start with next step by name step-2

Step -2

In step-2 , i will define the function addButton in script.js file , which will dynamically add controls to our html blank div , having id attribute object_data.

Code for script.js is below :

script.js

    var i = 1; // define global variable i to loop the button click event as much as we want
    
    function addButton(){
    
    var new_line = document.createElement("br");
    var new_line_2 = document.createElement("br");
    
    // these both of the lines will create dynamically new lines before putting any new textbox and button control.
    
    // create new text box control below using attribute of input type text box and assign name and id dynamically by using variable i defined as global variable above.
    
    var textbox = document.createElement("input");
    textbox.type= "text";
    textbox.name= "txt_" + i;
    textbox.id= "txtid" + i;
    textbox.placeholder ="txt_"+i;
    
    var btn = document.createElement("input");
    btn.type = "button";
    btn.name = "button"+i;
    btn.value = "Click Me";
    btn.id = "id"+i;
    
    // assign click event for each new button element created dynamically using attribiute of input type button and assign name and id dynamically using variable i defined as global variable above.
    
    btn.setAttribute("onClick","showMessage()");
    
    //on click on every newly created button a "showMessage" javascript function will call, which will show us the value of their corresponding text box.
    
    // assign both of these textbox and button controls to blank div by id "object_data" in html document using below code.
    
    document.getElementById("object_data").appendChild(textbox);
    document.getElementById("object_data").appendChild(btn);
    document.getElementById("object_data").appendChild(new_line);
    document.getElementById("object_data").appendChild(new_line_2);
    
    
    i++ //increment the counter
    }

The above code will do our motto in a manner , when we click on button add new , the JavaScript function addButton will called , as defined above this function will dynamically create all four element and append to our html blank div by id object_data respectively textbox, button, and two break lines , and append as much controls as much or how many times i will hit the add new button.

So, how you feel now my friends ,is its easier for you all to create all this stuff, now if you understand all this i wanna move to my next step of my blog by name step-3 which will present you the way how you can get the values of each dynamically created text box on button click.

so as you know , as i write earlier in above code a showMessage function will call as you click on dynamically created button , this function will do the rest of the work for step-3

Step -3

Code for showMessage function :

    function showMessage(){
    var currID = showMessage.caller.arguments[0].target.id;
    
    // this statement will returns us the value ofid attribute of button on which we currently click among dynamically created buttons.
    
    // this "document.getElementById("txt"+currID).value" statement , will get the value of corresponding text box to button on behalf of "id" attribute.
    alert(document.getElementById("txt"+currID).value);
    
    }

So, now using all the above code and below url for complete code, you can create dynamic controls to html using javascript easily.

for any query , please comment me or feedback me for this blog , how do you like this.

Code

Basic searching in AngularJS

Thu, 16 Jul 2015 15:09:19 +0000

Today I will describe that How we will do basic searching in AngularJS.For this we need Following File structure.

index.html     // in this we will define our all structure
script.js      // in this our all angular code

In this we use Bootstrap for styling purpose and angular.js to load angular in our page.

For a Basic Searching in AngularJS first we make a module in Angular to activate angular in our page like below.

var maddyApp= angular.module("maddyApp",[]);

Then we make a controller to do our all things. In our case we are making an array of article articleList with title , link and category like below. So

script.js

// Code goes here
var maddyApp= angular.module("maddyApp",[]);

maddyApp.controller('SearchingCtrl',['$scope',function($scope){
  // here we set some article data with title ,link and category of Maddyzone site :)
  
  $scope.articleList=[
    {
      'title':'conditionally apply classes in angularjs',
      'link':'http://maddyzone.com/javascript/conditionally-apply-classes-in-angularjs',
      'category':'Angular'
    },{
      'title':'Dynamic routing with AngularJS',
      'link':'http://maddyzone.com/javascript/dynamic-routing-angularjs',
      'category':'Angular'
    },{
      'title':'How to use multiple ng-view in a single page',
      'link':'http://maddyzone.com/javascript/use-multiple-ng-view-single-page',
      'category':'Angular'
    },{
      'title':'How to Setup Node.js on Amazon EC2',
      'link':'http://maddyzone.com/resources/how-to-setup-node-js-amazon-ec2',
      'category':'Node'
    },{
      'title':'How to add Google search in our website',
      'link':'http://maddyzone.com/resources/add-google-search-website',
      'category':'Google'
    }
    ];
  
}]);

Now talk about our HTML file index.html

index.html

<!DOCTYPE html>
<html ng-app="maddyApp">

<head>
  <!--load bootstrap for styling -->
  <link data-require="bootstrap-css@3.1.0" data-semver="3.1.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" />
  <!-- load angular.js -->
  <script data-require="angular.js@1.3.17" data-semver="1.3.17" src="https://code.angularjs.org/1.3.17/angular.js"></script>
  <!-- in the script.js our all angular code -->
  <script src="script.js"></script>
</head>

<body>
  <div class="container" ng-controller="SearchingCtrl">
    <div class="jumbotron">
      <img src="http://tech-blog.maddyzone.com/uploads/2013/10/maddyzone-logo-300x72.png">
      <br/>
      <h1>Basic Searching With AngularJS</h1>
      <br/>
    </div>
    <form>
      <label>Search </label>
      <input type="text" ng-model="search" />
    </form>

    <table class="table">
      <thead>

        <tr>
          <th colspan=3 align="center">
            Search With <i>""</i>
          </th>
        </tr>
        <tr>
          <th>
            S.N.
          </th>
          <th>
            Title (click on link to view)
          </th>
          <th>Category</th>
        </tr>

      </thead>
      <tbody>

        <tr ng-repeat="(key,value) in articleList | filter:search">
          <td>
            {{$index + 1}}
          </td>

          <td>
            <a ng-href="value.link" target="_blanck"></a>
          </td>

          <td>
            <label class="label label-info"></label>
          </td>
        </tr>
        
        <tr ng-show="(articleList | filter:search).length == 0">
          
          <td colspan="3">
            <p>oops ! No Article found with this search</p>
          </td>
        </tr>
      </tbody>

    </table>
  </div>
</body>

</html>

Now i am explaining above index.html.

<form>
      <label>Search </label>
      <input type="text" ng-model="search" />
    </form>

First we set a input box and set ng-model="search" then we will use this in below section.

Show Article List

Show Article List With $scope.articleList with ng-repeat in a table here just ignore filter:search in ng-repeat we will discuss in next .Now you will see all article come in list in a table.

Filter Data in Show Article List

Now when we apply filter:search in ng-repeat then it first take the input from ng-model="search" then search in All Article ListSection and show filter result .So Simple due to angular ;) .SO code you will see is like below

<tr ng-repeat="(key,value) in articleList | filter:search">
          <td>
            {{$index + 1}}
          </td>

          <td>
            <a ng-href="value.link" target="_blanck"></a>
          </td>

          <td>
            <label class="label label-info"></label>
          </td>
        </tr>

When No Result Found

When we search thing which is not exist then we need to show a message for this we will apply below code by this we know that result is not found in articleList as per keyword in search input box.

This below code (articleList | filter:search).length give us the filter result length.

(articleList | filter:search).length

So our full code for not result found is below

 <tr ng-show="(articleList | filter:search).length == 0">
          
          <td colspan="3">
            <p>oops ! No Article found with this search</p>
          </td>
        </tr>

See Working Demo Below

Now how to do search on some specific attribute like in this case if want to search base on only category then how we do .So we will see that how we do it.

Demo

Search with category name

If we want to search with category name then we need to ng-repeat :filter by single field

Then we need to apply ng-repeat with below logic.

ng-repeat="(key,value) in anydata | filter:{attribute-name:search-parameter}"

So here

anydata in our case is articleList
attribute-name for which we want to search that is category in articleData
and search-parameter is same is search from input searchbox

So our final code will be for search by category is

        <tr ng-repeat="(key,value) in articleList | filter:{category:search}">
          <td>
            {{$index + 1}}
          </td>

          <td>
            <a ng-href="value.link" target="_blanck"></a>
          </td>

          <td>
            <label class="label label-info"></label>
          </td>
        </tr>

See Working Demo for filter in specific attribute

Demo

Please give your comments and suggestion below.

Thanks .

How to Add Multiple Products into WooCommerce Cart on Same Time using jQuery

Mon, 22 Jun 2015 05:35:39 +0000

Hello friends, In my new blog i am here to present you How to create Woocommerce cart with drag and drop and add to click functionality to Add multiple products into Woocommerce cart on the same time.

As Title Saying to Add Multiple Products into Woocommerce Cart on Same Time , Questions arises in mind like :

Why this is required ?
How we can achieve this ?

Like for first question , i am answering you :

If you are some how familiar with WooCommerce Plugin for Wordpress and uses their functionality in your websites based on Wordpress , you even check that , when we want to purchase some products from the shop page of that website , we will choose a product and click on add to cart, than for second time we again go to shop page choose a product and add to cart, so we have to switch between cart page and product page for each time , to reduce this switching.

I am here to present you very simple example to add multiple products from multiple product categories into cart and checkout on the same time.

For second question “How we can achieve this ?” i am here to showing you with an example :

are you get excited about this? so let’s start on this :

We can achieve our motto in two ways :

Using Drag and Drop of products.
Using Add to Click on each Product item from category to add into cart.

In both of these ways , we need first of all the Woocommerce product category listing and also before going more on this we will first create a demo template file in our Wordpress themes folder on which we are currently working now by name like :

by copying page.php into themes folder and rename it to template-demo.php and assign the template name like “demo” in this file

as :

<?php

/* Template Name: Demo */

/* 
 *
 */

?>

After this we will move to our first step here is :

How to get the Woocommerce Product Categories.

To get these we will use the below statement in your php code:

$product_categories = get_terms( 'product_cat' );

If you want to exclude some categories from all product categories you can use the below statement in your php code like:

$product_cat_list = array(
             'exclude'    => '29,31,32'
);
$product_categories = get_terms( 'product_cat', $product_cat_list );

This statement will returns you all WooCommerce products categories listing in form of array.

When we get all categories , now we have to get all products listing for each of the category, to achieve this we will go to our next step :

How to get all of the products from each of the Woocommerce Product Categories.

To achieve this , we can use the below code snippet in our template file after the code of get all products categories array.First we will create a button to add all dragged products into cart by using the below html snippet.

<div class="demo_cart_controls">

   <input type="button" id="mul_add_cart" value="Proceed to Cart"/>

</div>

Secondly we will create a division or section of page in left side in which we have to show all WooCommerce products by category using the code snippet.

<div id="options">

<div id="all_products">

<h3> All Products </h3>

<div id="accordion_product">

<?php foreach($product_categories as $key=>$value){

                  $prod_category = $value->slug;?>

<h3><?php echo $prod_category;?></h3>

<div  class="acc_individual">

  <p>

<?php $args = array( 'post_type' => 'product','product_cat' => $prod_category , 'orderby' => 'rand' );

        $loop = new WP_Query( $args );

        while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>

                <div class="drag" id="<?php echo 'drag'.$post->ID;?>">   

                    <a href="#" title="<?php echo esc_attr($loop->post->post_title ? $loop->post->post_title : $loop->post->ID); ?>">

                        <?php woocommerce_show_product_sale_flash( $post, $product ); ?>

                        <?php if (has_post_thumbnail( $loop->post->ID )) echo get_the_post_thumbnail($loop->post->ID, 'shop_catalog'); else echo '<img src="'.woocommerce_placeholder_img_src().'" alt="Placeholder" width="300px" height="300px" />'; ?>

                                    <div class="ui-drag-detail">

                        <h3><?php the_title(); ?></h3>

                        <span class="price"><?php echo $product->get_price_html(); ?></span>

                        <span class="add_drag_prod">

                          <input type="button"  class="add_cart_prod" id="<?php echo 'add_id'.$post->ID;?>" rel_id="<?php echo $post->ID;?>" value="+" onclick="jQuery(this).add_prod(<?php echo $post->ID;?>);">

                            </span>

                        <span class="delete_drag_prod">

                          <input type="button"  class="del_cart_prod" id="<?php echo 'del_id'.$post->ID;?>" rel_id="<?php echo $post->ID;?>" value="X" onclick="jQuery(this).del_prod(<?php echo $post->ID;?>);">

                               </span>

                                    </div>

                    </a>

                    <?php woocommerce_template_loop_add_to_cart( $loop->post, $product ); ?>

                </div>

    <?php endwhile; ?>

    <?php wp_reset_query(); ?>

     </p>

        </div>

    <?php } ?>

    </div>

    </div>

The above code will returns you , the list of all products with their details like product image , product name , price etc. in response to each of the category.

As We got all products regarding each category in one part of the demo page template , now we create a second part of the page which we call Cart Area , where we will drag and drop products to cart from first dragged area.

so i am going to write the below html code snippet for Cart Area which will added just below the above code snippet.

  <div id="frame">
       <span id="title"><h3>  Drop your Products to Cart Here</h3></span>
        <table id="tbldevs" border="1">          
        </table>
     </div>

Now if you get all understanding of :

a) To get all Woo Commerce products categories
b) To get all Woo Commerce products category product listing with their detail in dragged area successfully we are able to move to over next stage of this blog which is our objective to add multiple products into

Cart Area which we will achieve using jQuery. So as we finish half of the part , we are now move to another half by writing jQuery for drag and drop functionality for first way to achieve our motto.

So now i am going to write jQuery code after footer section of template page by name template-demo.php

<script type="text/javascript">

   jQuery(document).ready(function($){       

        counter = 0;

            var total_ids_string = [];

            // accordion section

            $("#accordion_individual").accordion({active: false , collapsible: true});

            // Drop Products to "Cart Area" Section Start

        //Make element draggable

        $(".drag").draggable({

            helper:'clone',

            containment: 'frame',

            //When first dragged

            stop:function(ev, ui) {

                  var pos=$(ui.helper).offset();

                  objName = "#clonediv"+counter

                  $(objName).css({"left":0,"top":0});

                  $(objName).removeClass("drag");

                  //When an existiung object is dragged

                $(objName).draggable({

                  containment: 'parent',

                    stop:function(ev, ui) {

                        var pos=$(ui.helper).offset();

                        console.log($(this).attr("id"));

                                    console.log(pos.left)

                        console.log(pos.top)

                    }

                });

            }

        });

        //Make element droppable

        $("#frame").droppable({

                  drop: function(ev, ui) {

                        if (ui.draggable.attr('id').search(/drag[0-9]/) != -1){

                              var did = ui.draggable.attr('id');

                              var title = $("#"+did).children('a').attr('title');                          

                            var firstwords = title.split(" ");

                              counter++;

                              var element=$(ui.draggable).clone();

                              element.addClass("tempclass");

                              $(this).append(element);

                              $(".tempclass").attr("id","clonediv"+counter);

                              $("#clonediv"+counter).removeClass("tempclass");

                              //Get the dynamically added product id

                              draggedNumber = ui.draggable.attr('id').search(/drag([0-9])/)

                              // Get the ID of latest added product into "Cart area".

                              var latestID = $("#clonediv"+counter).children('a.add_to_cart_button').attr('data-product_id');

                              // Create an array of all products ID in Cart Area

                              total_ids_string.push(latestID);

                              // Print All Products ID's in Cart Area to console for confirmation.

                              console.log(total_ids_string);           

                              itemDragged = "dragged" + RegExp.$1

                              $("#clonediv"+counter).addClass(itemDragged);

                        }
            }
        });

Here As we got list of products from dragged area to cart area which we want to add into cart from cart area , now we will create an jQuery action on button click, define above to Add to Cart all the products which are in cart area by using below code snippet.

 $("#mul_add_cart").on('click',function(){

            // Firstly we will check if the "Cart Area" have any product in it while adding products by using the below code snippet

                           if(total_ids_string.length==0){                            

                                 alert("There is no product choosen to add into cart ");

                                 // if length is "0" then show alert that "There is no product choosen to add into cart " otherwise move to else part as below

                           }else{

                                  $(".response").css('display','block');     

                                    $(".response").delay(8000).fadeOut('slow');

                                    setTimeout(function(){

                                     window.location.href="http://localhost/maddyzone_test/cart/";

                                    },2000);

Motto is come here where we will create an loop upto the length of array of product ID’s in Cart Area and send an ajax request by using post method to WordPress ajax request page by url as http://localhost/maddyzone_test/wp-admin/admin-ajax.php having parameters “action, productID **, **quantity” in the form of object.

When this request is complete for all of the products in Cart Area we will auto redirected to cart page , where will get all of the products listing which we added in the Cart Area. Define cart page url in url attribute and window.location.

                for (var i=0; i<total_ids_string.length; i++) {

                                          if(total_ids_string[i]!== 'undefined'){

                                                var myKeyVals = { action: "woocommerce_add_to_cart", product_id: total_ids_string[i] , quantity: 1}

                                                 $.ajax({

                                                        type: 'POST',

                                                        url: "http://localhost/maddyzone_test/cart/",

                                                        data: myKeyVals,

                                                        dataType: "text",

                                                        async: false,

                                                        success: function(resultData) {

                                                        console.log("Save Complete") ;

                                                        }

                                                });              

                                          }

                                    }

                           }

            });

    });

      </script>

So by using all these stuff we will get our motto by using the one method drag and drop functionality using jQuery.

By click on the Proceed to Cart button after adding product to Cart Area below screen will show.

As you are now redirecting to your cart page, as you get cart page you will see your added product there in cart as shown in below screen.

Now we have to make some more customization on the above like

a) Delete product from cart area.
b) Remove All of the product at once from cart area.
c) Styling the popup’s

All these extra things we will get in knowledge , from the next part of this blog for drag and drop functionality then move to click functionality.

Tech Blog @Maddyone

Building ResumeTailorAI with Claude Code - A Complete AI-Powered Resume Optimization Platform

Building ResumeTailorAI with Claude Code: From Idea to Deployment

What is ResumeTailorAI?

Key Features

The Power of Claude Code

1. Rapid Prototyping

2. Complex Algorithm Implementation

3. Full-Stack Development

4. Deployment and DevOps

The Development Journey

Day 1: Conceptualization and Setup

Day 2-3: Core Functionality

Day 4-5: UI/UX Polish

Day 6: Testing and Optimization

Day 7: Deployment

Technical Architecture

Frontend Stack

Backend Stack

Infrastructure

How ResumeTailorAI Works

Step 1: Upload Your Documents

Step 2: AI Analysis

Step 3: Intelligent Optimization

Step 4: Review and Download

Real User Impact

Success Story

Lessons Learned

1. AI Accelerates Development

2. Iterative Development is Key

3. Documentation Matters

4. Testing is Crucial

Future Enhancements

Tips for Building with Claude Code

1. Start with Clear Requirements

2. Iterate Frequently

3. Leverage Claude’s Expertise

4. Focus on User Experience

5. Test Thoroughly

Conclusion

Try ResumeTailorAI Today!

Get Started with Claude Code

An Introduction to Svelte, A Modern and Performant Front-End Framework

An Introduction to Svelte

Key Features of Svelte

Conclusion

How to upload image in React Native App

Setup

1 First we will set up a react native app.

Now add a Image container and Edit Button

SetUp Image Picker to choose Image in React Native App

2 Now Setup a Node JS server to upload selected image

Lint files before commit

for TSlint

for ESlint

How to reload current route in angular 2

Reload current route with some dummy parameter

Reload current route with some dummy route

How to set absolute and relative url in angular2

How to set Absolute URL

How to set Relative URL

How to dynamically get rss feed by using Javascript from a URL

Step 1:will go through the requirement and create a basic html for our requirement

Step-2: will show you and describe you most about the java script for our objective.

step-3 : will show the output and the complete code for this.

How to create dynamic button and text-box using JavaScript

Step -1

index.html

Step -2

script.js

Step -3

Basic searching in AngularJS

Set a Search Box

Show Article List

Filter Data in Show Article List

When No Result Found

See Working Demo Below

Search with category name

See Working Demo for filter in specific attribute

How to Add Multiple Products into WooCommerce Cart on Same Time using jQuery