| HTML Element |
</code></td>
<td><code><meta name="description"></code></td>
</tr>
<tr>
<td>Location</td>
<td>Inside the HTML head.</td>
<td>Inside the HTML head.</td>
</tr>
<tr>
<td>Search Appearance</td>
<td>Often contributes to the clickable title link.</td>
<td>May contribute to the search result snippet.</td>
</tr>
<tr>
<td>Primary Goal</td>
<td>Help users understand the page topic.</td>
<td>Help users understand the page's value and relevance.</td>
</tr>
<tr>
<td>Keyword Usage</td>
<td>Include the main topic naturally.</td>
<td>Include relevant terms naturally when useful.</td>
</tr>
<tr>
<td>Length</td>
<td>No fixed character limit; display may be truncated.</td>
<td>No fixed character limit; display may be truncated.</td>
</tr>
<tr>
<td>SEO Impact</td>
<td>Supports relevance and search result presentation.</td>
<td>Can help communicate relevance and encourage qualified clicks.</td>
</tr>
</tbody>
</table>
<h2>6. Why Title Tags Are Important for SEO</h2>
<h3>6.1 Communicate Page Relevance</h3>
<p>A descriptive title helps search engines and users understand the subject of a page. It should accurately match the content available after the user clicks the result.</p>
<h3>6.2 Improve Search Result Presentation</h3>
<p>A well-written title can make a search result easier to understand and distinguish from competing results. Search engines may rewrite the displayed title when another page element better represents the content.</p>
<h3>6.3 Support User Experience</h3>
<p>Clear titles help users recognize relevant pages quickly. They are especially useful when several pages cover similar subjects.</p>
<h3>6.4 Reinforce the Main Topic</h3>
<p>Including the main subject in a natural way helps communicate the page's focus. Repeating the same keyword multiple times is unnecessary and may make the title appear spammy.</p>
<h3>6.5 Help Differentiate Pages</h3>
<p>Unique titles make it easier to distinguish a service page from a blog post, product page, course page, or contact page.</p>
<h2>7. Why Meta Descriptions Are Important</h2>
<h3>7.1 Provide a Quick Summary</h3>
<p>A meta description can help users understand what a webpage offers before visiting it.</p>
<h3>7.2 Encourage Relevant Clicks</h3>
<p>A useful description explains the page's value and helps users determine whether it meets their needs. This can support click-through performance, although a description does not guarantee more clicks.</p>
<h3>7.3 Match Search Intent</h3>
<p>Descriptions should reflect the likely purpose of the searcher, such as learning a topic, comparing services, finding a course, or contacting a business.</p>
<h3>7.4 Improve Search Result Clarity</h3>
<p>Specific descriptions can distinguish similar pages by mentioning relevant information, features, benefits, or content covered.</p>
<h2>8. Understanding Search Intent Before Writing Metadata</h2>
<p>Search intent is the reason behind a user's search query. Understanding intent helps marketers create titles and descriptions that match what people are looking for.</p>
<table border="1" cellspacing="0" cellpadding="8">
<tbody>
<tr>
<th>Search Intent</th>
<th>Example Keyword</th>
<th>Suitable Title</th>
</tr>
<tr>
<td>Informational</td>
<td>What is SEO?</td>
<td>What Is SEO? A Beginner's Guide</td>
</tr>
<tr>
<td>Educational</td>
<td>Learn digital marketing</td>
<td>Learn Digital Marketing: Beginner's Guide</td>
</tr>
<tr>
<td>Commercial Investigation</td>
<td>Best SEO course</td>
<td>How to Choose an SEO Course for Beginners</td>
</tr>
<tr>
<td>Transactional</td>
<td>Enroll digital marketing course</td>
<td>Explore Digital Marketing Training at JustAcademy</td>
</tr>
<tr>
<td>Local</td>
<td>Digital marketing course Mumbai</td>
<td>Digital Marketing Training in Mumbai | JustAcademy</td>
</tr>
</tbody>
</table>
<p>These are sample titles. Use location-specific wording only when the page genuinely describes a service or course available in that location.</p>
<h2>9. Step-by-Step Process for Optimizing Title Tags</h2>
<h3>Step 1: Identify the Purpose of the Page</h3>
<p>Determine whether the page is a homepage, service page, course page, product page, category page, or educational article. The title should reflect the page's main purpose.</p>
<h3>Step 2: Perform Keyword Research</h3>
<p>Identify the primary search phrase and relevant variations using keyword research tools, search suggestions, competitor analysis, and actual audience questions.</p>
<p>Example:</p>
<pre><code>Primary Keyword: Digital Marketing Course
Related Keywords:
- Digital marketing training
- Learn digital marketing
- Online marketing course
- Digital marketing skills</code></pre>
<h3>Step 3: Place the Main Topic Naturally</h3>
<p>Use the primary topic where it helps users understand the page. It often works well near the beginning, but clarity and natural wording are more important than following a rigid formula.</p>
<h3>Step 4: Write a Clear and Specific Title</h3>
<p>Avoid vague titles such as "Welcome" or "Our Services" when a more descriptive title can explain the page.</p>
<p><strong>Weak:</strong> Our Courses</p>
<p><strong>Improved:</strong> Digital Marketing Course for Beginners | JustAcademy</p>
<h3>Step 5: Add the Brand Name When Useful</h3>
<p>Including a brand can reinforce recognition, particularly on important landing pages. Keep branding concise and avoid repeating it unnecessarily across every title.</p>
<h3>Step 6: Check the Display Length</h3>
<p>There is no official fixed character limit for title tags. A practical editorial starting point is approximately 50–60 characters, but the actual display depends on pixel width, device, and search presentation.</p>
<p>Write the most useful information early so the main topic remains clear if the title is truncated.</p>
<h3>Step 7: Avoid Keyword Stuffing</h3>
<p>Do not repeat the same phrase in an attempt to manipulate rankings.</p>
<p><strong>Bad:</strong> SEO Course, SEO Training, SEO Classes, Best SEO Course, SEO Learning</p>
<p><strong>Better:</strong> SEO Training Course for Beginners | JustAcademy</p>
<h3>Step 8: Check Accuracy and Uniqueness</h3>
<p>Ensure the title matches the page's visible heading and actual content. Check for duplicated titles across important pages.</p>
<h2>10. Step-by-Step Process for Optimizing Meta Descriptions</h2>
<h3>Step 1: Understand the Page Content</h3>
<p>Identify the main topic, audience, useful features, and information the visitor will find on the page.</p>
<h3>Step 2: Write a Short, Meaningful Summary</h3>
<p>Explain what the page offers in natural language. Avoid vague descriptions that could apply to almost any webpage.</p>
<h3>Step 3: Include Relevant Keywords Naturally</h3>
<p>Use the main search phrase if it fits the sentence. Avoid lists of keywords that do not form a helpful description.</p>
<h3>Step 4: Explain the Benefit or Value</h3>
<p>Where relevant, mention useful learning outcomes, services, product features, or information the visitor can expect to find.</p>
<h3>Step 5: Use a Suitable Call to Action</h3>
<p>A call to action can guide users when appropriate. Examples include "Explore the course," "Read the complete guide," and "Compare available options." Do not make unsupported promises.</p>
<h3>Step 6: Check the Length and Readability</h3>
<p>A common editorial starting point is approximately 150–160 characters, but this is not a strict Google limit. Search snippets may be shortened according to device width and query context.</p>
<h3>Step 7: Keep Each Description Unique</h3>
<p>Write descriptions that match individual pages rather than copying the same description across the entire website.</p>
<h3>Step 8: Review the Description Against the Page</h3>
<p>Make sure every claim is accurate and that the webpage contains the information mentioned in the description.</p>
<hr>
<h2>11. Examples of Optimized Title Tags and Meta Descriptions</h2>
<h3>Example 1: Digital Marketing Course Page</h3>
<pre><code><title>Digital Marketing Course for Beginners | JustAcademy</title>
<meta name="description" content="Explore digital marketing
training covering SEO, social media, content marketing,
and online advertising with JustAcademy."></code></pre>
<p><strong>Why it works:</strong> It identifies the course topic, introduces the brand, and summarizes relevant learning areas.</p>
<h3>Example 2: SEO Blog Article</h3>
<pre><code><title>On-Page SEO: A Practical Beginner's Guide</title>
<meta name="description" content="Learn on-page SEO basics,
including title tags, meta descriptions, headings,
internal links, and content optimization."></code></pre>
<p><strong>Why it works:</strong> It accurately describes an educational article and names the key subjects covered.</p>
<h3>Example 3: Web Development Course Page</h3>
<pre><code><title>Web Development Training for Beginners | JustAcademy</title>
<meta name="description" content="Explore web development
fundamentals, HTML, CSS, JavaScript, and practical projects
to build your technical skills."></code></pre>
<p><strong>Why it works:</strong> The title identifies the subject and audience, while the description summarizes the page's learning focus.</p>
<h3>Example 4: Local Service Page</h3>
<pre><code><title>Digital Marketing Services in Mumbai | Example Brand</title>
<meta name="description" content="Explore digital marketing
services in Mumbai, including SEO, content strategy,
and campaign management for businesses."></code></pre>
<p><strong>Why it works:</strong> It includes a location because the sample page is intended to describe services in that location.</p>
<h3>Example 5: E-Commerce Product Page</h3>
<pre><code><title>Wireless Headphones with Noise Cancellation | Example Store</title>
<meta name="description" content="Explore wireless headphones
with noise cancellation, battery details, connectivity
features, and available product options."></code></pre>
<p><strong>Why it works:</strong> It communicates the product category and useful product information without making unsupported claims.</p>
<h2>12. Good and Bad Metadata Practices</h2>
<table border="1" cellspacing="0" cellpadding="8">
<tbody>
<tr>
<th>Bad Practice</th>
<th>Improved Practice</th>
</tr>
<tr>
<td>Using the same title on every page.</td>
<td>Write a unique title for each important page.</td>
</tr>
<tr>
<td>Repeating keywords unnaturally.</td>
<td>Use the primary topic naturally and clearly.</td>
</tr>
<tr>
<td>Writing vague titles such as "Home".</td>
<td>Describe the page's actual purpose.</td>
</tr>
<tr>
<td>Using a description unrelated to the page.</td>
<td>Summarize the real page content accurately.</td>
</tr>
<tr>
<td>Copying one meta description across many URLs.</td>
<td>Create page-specific descriptions.</td>
</tr>
<tr>
<td>Adding false offers or guarantees.</td>
<td>Use accurate and verifiable information.</td>
</tr>
<tr>
<td>Making titles excessively long.</td>
<td>Keep titles concise and place important information early.</td>
</tr>
<tr>
<td>Writing only a list of keywords in the description.</td>
<td>Write a useful, readable summary.</td>
</tr>
<tr>
<td>Assuming Google must display your exact metadata.</td>
<td>Understand that Google may generate its own title link or snippet.</td>
</tr>
</tbody>
</table>
<h2>13. HTML Implementation of Title Tags and Meta Descriptions</h2>
<p>The title tag and meta description belong inside the document's <code><head></code> element. They are not normally added as visible paragraphs inside the page body.</p>
<pre><code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Digital Marketing Course for Beginners | JustAcademy</title>
<meta name="description" content="Explore digital marketing
training covering SEO, social media, content marketing,
and online advertising with JustAcademy.">
</head>
<body>
<h1>Digital Marketing Course</h1>
<p>Explore digital marketing concepts and practical skills.</p>
</body>
</html></code></pre>
<h3>Explanation of the Code</h3>
<ul>
<li><code><!DOCTYPE html></code> declares the HTML document type.</li>
<li><code><html lang="en"></code> identifies the primary language of the document.</li>
<li><code><meta charset="UTF-8"></code> specifies character encoding.</li>
<li><code><meta name="viewport"></code> helps the page adapt to different screen sizes.</li>
<li><code><title></code> defines the document title.</li>
<li><code><meta name="description"></code> provides a description that search engines may use in the snippet.</li>
<li><code><h1></code> displays the main heading on the webpage.</li>
</ul>
<h2>14. Title Tags, Meta Descriptions, and Keywords</h2>
<p>Keyword research helps identify the terms people use when searching for information, products, or services. Metadata should reflect the page's topic and user intent, rather than simply repeat a list of popular keywords.</p>
<h3>Primary Keyword</h3>
<p>The primary keyword represents the main subject of the page. For example, "digital marketing course" could be the main phrase for a course landing page.</p>
<h3>Secondary Keywords</h3>
<p>Secondary keywords are closely related phrases that add context. Examples include "digital marketing training" and "learn digital marketing."</p>
<h3>Keyword Placement</h3>
<p>Use keywords where they naturally improve clarity, particularly in the title and relevant page content. Avoid forced repetition.</p>
<h3>Important Note About Meta Keywords</h3>
<p>Google Search does not use the <code><meta name="keywords"></code> tag for indexing or ranking. Focus on useful page content, descriptive titles, and relevant meta descriptions instead.</p>
<h2>15. Optimizing Metadata for Different Page Types</h2>
<table border="1" cellspacing="0" cellpadding="8">
<tbody>
<tr>
<th>Page Type</th>
<th>Title Optimization</th>
<th>Description Optimization</th>
</tr>
<tr>
<td>Homepage</td>
<td>Describe the main business or website.</td>
<td>Summarize the business and its main offering.</td>
</tr>
<tr>
<td>Course Page</td>
<td>Include the course subject and useful qualifier.</td>
<td>Summarize the course topics and learning focus.</td>
</tr>
<tr>
<td>Blog Article</td>
<td>Clearly state the article's subject.</td>
<td>Describe what readers will learn.</td>
</tr>
<tr>
<td>Product Page</td>
<td>Include the product name and distinguishing detail.</td>
<td>Summarize relevant features and specifications.</td>
</tr>
<tr>
<td>Category Page</td>
<td>Identify the product or service category.</td>
<td>Explain what users can browse or compare.</td>
</tr>
<tr>
<td>Contact Page</td>
<td>Use a clear contact-related title.</td>
<td>Explain how users can contact the business.</td>
</tr>
<tr>
<td>Location Page</td>
<td>Include the genuine service area where relevant.</td>
<td>Describe the local offering accurately.</td>
</tr>
</tbody>
</table>
<h2>16. Common SEO Tools for Metadata Optimization</h2>
<ul>
<li><strong>Google Search Console:</strong> Review search impressions, clicks, CTR, queries, and page performance.</li>
<li><strong>Google Analytics:</strong> Analyze website traffic and visitor behavior.</li>
<li><strong>Screaming Frog SEO Spider:</strong> Crawl websites to identify missing, duplicated, or long titles and descriptions.</li>
<li><strong>Ahrefs:</strong> Research keywords and analyze competing pages.</li>
<li><strong>Semrush:</strong> Research keywords and perform SEO audits.</li>
<li><strong>Yoast SEO:</strong> Manage and review metadata on supported WordPress websites.</li>
<li><strong>Rank Math:</strong> Configure titles and descriptions on supported WordPress websites.</li>
</ul>
<p>Tool features and availability may vary. Always verify important recommendations against the actual webpage and current search performance.</p>
<h2>17. How to Audit Title Tags and Meta Descriptions</h2>
<ol>
<li>List the important URLs on the website.</li>
<li>Crawl the website or inspect each page's HTML.</li>
<li>Identify pages with missing title tags.</li>
<li>Find duplicated or overly generic titles.</li>
<li>Review descriptions for missing content, duplication, and poor relevance.</li>
<li>Compare metadata with the visible heading and actual page content.</li>
<li>Check whether the metadata matches the page's target search intent.</li>
<li>Prioritize important landing pages and pages with meaningful search impressions.</li>
<li>Update the metadata and publish the changes.</li>
<li>Monitor performance over time and refine where necessary.</li>
</ol>
<h3>Sample Metadata Audit Checklist</h3>
<table border="1" cellspacing="0" cellpadding="8">
<tbody>
<tr>
<th>Audit Item</th>
<th>What to Check</th>
</tr>
<tr>
<td>Title present</td>
<td>Every important page has a meaningful title.</td>
</tr>
<tr>
<td>Title uniqueness</td>
<td>Similar pages have titles that distinguish their purpose.</td>
</tr>
<tr>
<td>Title accuracy</td>
<td>The title matches the visible content.</td>
</tr>
<tr>
<td>Description present</td>
<td>Important pages have a useful meta description.</td>
</tr>
<tr>
<td>Description uniqueness</td>
<td>Descriptions are specific to their respective pages.</td>
</tr>
<tr>
<td>Keyword relevance</td>
<td>Keywords fit naturally and reflect search intent.</td>
</tr>
<tr>
<td>Readability</td>
<td>Metadata is clear, concise, and grammatically correct.</td>
</tr>
<tr>
<td>Performance</td>
<td>Search Console data is reviewed after changes.</td>
</tr>
</tbody>
</table>
<h2>18. Measuring Metadata Performance</h2>
<p>After publishing changes, use Google Search Console to review how the pages perform in Google Search. Compare a suitable period before and after the update while considering other factors that may affect traffic.</p>
<ul>
<li><strong>Impressions:</strong> How often a page appears in search results.</li>
<li><strong>Clicks:</strong> How often users click the result.</li>
<li><strong>Click-Through Rate (CTR):</strong> The percentage of impressions that result in clicks.</li>
<li><strong>Average Position:</strong> A summary of the page's average ranking position under Google's reporting methodology.</li>
</ul>
<p><strong>CTR Formula:</strong></p>
<pre><code>CTR = (Total Clicks / Total Impressions) × 100</code></pre>
<p><strong>Example:</strong> A webpage receives 80 clicks from 2,000 impressions.</p>
<pre><code>CTR = (80 / 2000) × 100
CTR = 4%</code></pre>
<p>A change in CTR does not automatically prove that metadata caused the change. Search intent, ranking position, competition, device type, and the search query can also influence performance.</p>
<h2>19. Troubleshooting Common Metadata Problems</h2>
<h3>Problem 1: Google Displays a Different Title</h3>
<p><strong>Possible cause:</strong> The title may be vague, inaccurate, repetitive, or inconsistent with the main page heading.</p>
<p><strong>Solution:</strong> Write a clear title that matches the page content, align the main heading with the page topic, and allow time for recrawling and reprocessing.</p>
<h3>Problem 2: Google Shows a Different Description</h3>
<p><strong>Possible cause:</strong> Google may select text from the page because it better matches the user's search query.</p>
<p><strong>Solution:</strong> Write a useful meta description and ensure the visible content also contains a clear summary of the page.</p>
<h3>Problem 3: Several Pages Have the Same Title</h3>
<p><strong>Possible cause:</strong> A website template may automatically assign identical titles to multiple pages.</p>
<p><strong>Solution:</strong> Review the page templates and add meaningful page-specific information.</p>
<h3>Problem 4: The Title Looks Too Long</h3>
<p><strong>Possible cause:</strong> The title contains unnecessary wording or repeated brand and keyword phrases.</p>
<p><strong>Solution:</strong> Remove filler words, prioritize the main topic, and check how the title appears across devices.</p>
<h3>Problem 5: The Description Is Not Appealing</h3>
<p><strong>Possible cause:</strong> It may be too vague, repetitive, misleading, or disconnected from search intent.</p>
<p><strong>Solution:</strong> Rewrite it to summarize the actual page, emphasize useful information, and use a natural call to action when appropriate.</p>
<h2>20. Best Practices for Professional SEO Metadata</h2>
<ul>
<li>Write unique metadata for important pages.</li>
<li>Make titles and descriptions accurate and relevant.</li>
<li>Place important information early when practical.</li>
<li>Use keywords naturally rather than stuffing them into every field.</li>
<li>Write for people first, not just search engines.</li>
<li>Use a consistent but non-repetitive brand style.</li>
<li>Match metadata with visible headings and page content.</li>
<li>Do not promise offers, prices, results, or features that are not supported by the page.</li>
<li>Do not assume that a specific character count guarantees full display in search results.</li>
<li>Review metadata after significant page changes.</li>
<li>Monitor results and make changes based on evidence.</li>
<li>Remember that search engines retain control over the final title link and snippet shown.</li>
</ul>
<hr>
<h2>21. Practical Exercise: Optimize a Digital Marketing Course Page</h2>
<p><strong>Scenario:</strong> You are optimizing a webpage that introduces a digital marketing course for beginners.</p>
<p><strong>Original Title:</strong> Courses</p>
<p><strong>Original Meta Description:</strong> Welcome to our website. Visit us for more information.</p>
<h3>Your Task</h3>
<ol>
<li>Identify why the original title is too vague.</li>
<li>Write a title that describes the course and optionally includes the brand.</li>
<li>Write a description that summarizes the course's real topics.</li>
<li>Check that the wording is natural and not repetitive.</li>
<li>Ensure that the page actually contains the information mentioned.</li>
</ol>
<h3>Sample Improved Answer</h3>
<pre><code><title>Digital Marketing Course for Beginners | JustAcademy</title>
<meta name="description" content="Explore digital marketing
training covering SEO, social media, content marketing,
and online advertising with JustAcademy."></code></pre>
<p><strong>Expected Result:</strong> The metadata becomes more descriptive and relevant. Actual changes in rankings, impressions, and clicks should be evaluated after publication.</p>
<h2>22. Interview Questions and Answers</h2>
<h3>Q1. What is a title tag?</h3>
<p><strong>Answer:</strong> A title tag is an HTML element inside the head section that specifies a webpage's title and can contribute to the title link displayed in search results.</p>
<h3>Q2. What is a meta description?</h3>
<p><strong>Answer:</strong> A meta description is an HTML element that summarizes a webpage and may be used by a search engine to generate a search result snippet.</p>
<h3>Q3. What is the difference between a title tag and a meta description?</h3>
<p><strong>Answer:</strong> The title tag identifies the webpage, while the meta description summarizes its content and helps users understand what they may find after clicking.</p>
<h3>Q4. What is the ideal title tag length?</h3>
<p><strong>Answer:</strong> There is no fixed Google character limit. Around 50–60 characters is a common editorial guideline, but display depends on pixel width and device.</p>
<h3>Q5. What is the ideal meta description length?</h3>
<p><strong>Answer:</strong> There is no fixed Google character limit. Around 150–160 characters is a common writing guideline, but search snippets may be truncated based on the device and query.</p>
<h3>Q6. Do meta descriptions directly improve Google rankings?</h3>
<p><strong>Answer:</strong> Meta descriptions are not a direct ranking factor in the usual sense. They help describe the page and may influence how appealing the search result is to users.</p>
<h3>Q7. Can Google rewrite title tags?</h3>
<p><strong>Answer:</strong> Yes. Google may generate a different title link using page headings, visible text, anchor text, and other sources when it considers them more representative.</p>
<h3>Q8. Can Google rewrite meta descriptions?</h3>
<p><strong>Answer:</strong> Yes. Google primarily generates snippets from page content and may use a meta description when it better summarizes the page for a particular query.</p>
<h3>Q9. Should every page have a unique title?</h3>
<p><strong>Answer:</strong> Important pages should have distinct, descriptive titles that help users understand how each page differs from others.</p>
<h3>Q10. What is keyword stuffing?</h3>
<p><strong>Answer:</strong> Keyword stuffing is the excessive or unnatural repetition of keywords. It reduces readability and should be avoided.</p>
<h3>Q11. Does Google use the meta keywords tag?</h3>
<p><strong>Answer:</strong> No. Google Search ignores the meta keywords tag for indexing and ranking purposes.</p>
<h3>Q12. How can I check title tag performance?</h3>
<p><strong>Answer:</strong> Google Search Console can help review impressions, clicks, CTR, queries, and average position for pages appearing in Google Search.</p>
<h3>Q13. What makes a good meta description?</h3>
<p><strong>Answer:</strong> A good meta description is unique, accurate, readable, relevant to search intent, and useful to the person deciding whether to visit the page.</p>
<h3>Q14. Should I include my brand name in every title?</h3>
<p><strong>Answer:</strong> Include the brand when it adds value, but avoid repetitive branding that makes titles unnecessarily long or indistinguishable.</p>
<h3>Q15. What should I do after updating metadata?</h3>
<p><strong>Answer:</strong> Publish the changes, check the page implementation, allow search engines to recrawl the page, and monitor performance over a suitable period.</p>
<h2>23. Quick Revision Checklist</h2>
<ul>
<li>Understand the purpose of title tags and meta descriptions.</li>
<li>Write a unique and descriptive title for every important page.</li>
<li>Summarize the page accurately in the meta description.</li>
<li>Use keywords naturally and avoid repetition.</li>
<li>Keep metadata concise without treating character guidelines as strict limits.</li>
<li>Match metadata to visible content and search intent.</li>
<li>Check for missing, duplicated, or misleading metadata.</li>
<li>Remember that Google may generate its own title link or snippet.</li>
<li>Use Search Console to monitor search performance.</li>
<li>Review and improve metadata as the website evolves.</li>
</ul>
<h2>24. Conclusion</h2>
<p>Optimizing title tags and meta descriptions is an essential part of on-page SEO. Descriptive titles help communicate a webpage's topic, while useful meta descriptions can give searchers a clear summary of the content.</p>
<p>Effective optimization requires keyword research, an understanding of search intent, accurate page-specific wording, readable language, and regular performance monitoring. There are no guaranteed title or description lengths that force Google to display the exact text, so prioritize relevance and clarity over rigid formulas.</p>
<p>To learn more about digital marketing, visit <a href="https://www.justacademy.co/course-detail/digital-marketing" target="_blank" rel="noopener noreferrer">JustAcademy Digital Marketing Course</a> or <a href="https://www.justacademy.co/register-for-course-demo" target="_blank" rel="noopener noreferrer">register for a course demo</a>.</p>
<h2>25. References and Further Learning</h2>
<ul>
<li><a href="https://developers.google.com/search/docs/appearance/title-link" target="_blank" rel="noopener noreferrer">Google Search Central: Influencing Your Title Links in Search Results</a></li>
<li><a href="https://developers.google.com/search/docs/appearance/snippet" target="_blank" rel="noopener noreferrer">Google Search Central: Control Your Snippets in Search Results</a></li>
<li><a href="https://developers.google.com/search/docs/crawling-indexing/special-tags" target="_blank" rel="noopener noreferrer">Google Search Central: Meta Tags and Attributes Supported by Google</a></li>
<li><a href="https://developers.google.com/search/docs/fundamentals/seo-starter-guide" target="_blank" rel="noopener noreferrer">Google Search Central: SEO Starter Guide</a></li>
</ul>
<hr>
<p><strong>Course Resources:</strong> <a href="https://www.justacademy.co/course-detail/digital-marketing" target="_blank" rel="noopener noreferrer">JustAcademy Digital Marketing Training</a> | <a href="https://www.justacademy.co/register-for-course-demo" target="_blank" rel="noopener noreferrer">Register for Digital Marketing Course Demo</a></p>
</div>
</div>
</div>
<!-- Previous/Next Navigation -->
<div class="topic-navigation">
<a href="https://www.justacademy.co/resources/digital-marketing-a-complete-guide-to-online-marketing-strategies-copy-title/introduction-to-on-page-seo" class="btn">
<i class="fas fa-arrow-left"></i> Previous
</a>
<a href="https://www.justacademy.co/resources/digital-marketing-a-complete-guide-to-online-marketing-strategies-copy-title/heading-tags-and-content-structure" class="btn btn-primary">
Next <i class="fas fa-arrow-right"></i>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Optimizing Title Tags and Meta Descriptions",
"description": "
Optimizing Title Tags and Meta Descriptions in SEO
Course: Digital Marketing
Topic: On-Page SEO Optimization
Learning Focus: Search Engine Optimization, Organ...",
"image": "https://www.justacademy.co/assets/images/logo.png",
"datePublished": "2026-10-15T10:56:48+05:30",
"author": {"@type": "Organization", "name": "JustAcademy"},
"publisher": {"@type": "Organization", "name": "JustAcademy"}
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{"@type": "ListItem", "position": 1, "name": "Home", "item": "https://www.justacademy.co"},
{"@type": "ListItem", "position": 2, "name": "Resources", "item": "https://www.justacademy.co/resources"},
{"@type": "ListItem", "position": 3, "name": "Digital Marketing: A Complete Guide to Online Marketing Strategies Copy Title", "item": "https://www.justacademy.co/resources/digital-marketing-a-complete-guide-to-online-marketing-strategies-copy-title"},
{"@type": "ListItem", "position": 4, "name": "Optimizing Title Tags and Meta Descriptions", "item": "https://www.justacademy.co/resources/digital-marketing-a-complete-guide-to-online-marketing-strategies-copy-title/optimizing-title-tags-and-meta-descriptions"}
]
}
</script>
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-autoloader.min.js" defer></script>
<script>
// Highlight code blocks with Prism after page load (for TinyMCE codesample blocks)
document.addEventListener('DOMContentLoaded', function() {
// Legacy support: Convert Quill .ql-syntax blocks to Prism language-markup
var legacyBlocks = document.querySelectorAll('pre.ql-syntax');
legacyBlocks.forEach(function(el) {
el.className = 'language-markup';
// Wrap content in code tag if missing (Prism expects pre > code)
if (!el.querySelector('code')) {
var code = document.createElement('code');
code.innerHTML = el.innerHTML;
el.innerHTML = '';
el.appendChild(code);
}
});
if (typeof Prism !== 'undefined') {
Prism.highlightAll();
}
});
// Add copy button to each code block
document.querySelectorAll('.topic-content pre').forEach(function(pre) {
var btn = document.createElement('button');
btn.className = 'code-copy-btn';
btn.textContent = 'Copy';
pre.appendChild(btn);
btn.addEventListener('click', function() {
// Collect only text nodes and code elements, excluding the button
var text = '';
pre.childNodes.forEach(function(node) {
if (node === btn) return;
if (node.nodeType === Node.TEXT_NODE) {
text += node.textContent;
} else if (node.tagName) {
text += node.innerText || node.textContent;
}
});
text = text.trim();
navigator.clipboard.writeText(text).then(function() {
btn.textContent = 'Copied!';
btn.classList.add('copied');
setTimeout(function() { btn.textContent = 'Copy'; btn.classList.remove('copied'); }, 2000);
}).catch(function() {
var ta = document.createElement('textarea');
ta.value = text;
document.body.appendChild(ta);
ta.select();
document.execCommand('copy');
document.body.removeChild(ta);
btn.textContent = 'Copied!';
btn.classList.add('copied');
setTimeout(function() { btn.textContent = 'Copy'; btn.classList.remove('copied'); }, 2000);
});
});
});
</script>
<!-- Collapsible Query Form -->
<div id="dropQueryContainer" class="drop-query-container collapsed">
<div id="dropQueryToggle" class="drop-query-toggle">
<span class="query-text">Drop us a Query</span>
<i class="fas fa-chevron-down toggle-icon"></i>
</div>
<div id="dropQueryForm" class="drop-query-form">
<div class="query-form-content">
<div class="query-header">
<div class="query-contact">
<div class="contact-info">
<div class="contact-details">
<div class="phone-number">
<i class="fas fa-phone"></i>
<span>+91 99871 84296</span>
</div>
<div class="availability">Available 24x7 for your queries</div>
</div>
</div>
</div>
</div>
<form id="dropQueryFormSubmit" method="post" action="https://www.justacademy.co/enquiry">
<input type="hidden" name="_token" value="lkunKqVId1HQ3Kx3ei2Zu0YKAr1fg6NntemhifoY" autocomplete="off"> <input type="hidden" name="form_id" value="drop_query_global">
<input type="hidden" name="source_url" value="https://www.justacademy.co/resources/digital-marketing-a-complete-guide-to-online-marketing-strategies-copy-title/optimizing-title-tags-and-meta-descriptions">
<div class="form-group">
<textarea name="description" class="form-control query-textarea" placeholder="Type your query here*" rows="4" required></textarea>
</div>
<div class="form-group">
<label for="phone_number">Phone Number</label>
<div class="phone-input-container">
<select name="country_id" class="country-select" id="countrySelect" required>
<option value="1" >
Afghanistan (+93)
</option>
<option value="2" >
Albania (+355)
</option>
<option value="3" >
Algeria (+213)
</option>
<option value="4" >
American Samoa (+1)
</option>
<option value="5" >
Andorra (+376)
</option>
<option value="6" >
Angola (+244)
</option>
<option value="7" >
Anguilla (+1)
</option>
<option value="8" >
Antarctica (+672)
</option>
<option value="9" >
Antigua And Barbuda (+1)
</option>
<option value="10" >
Argentina (+54)
</option>
<option value="11" >
Armenia (+374)
</option>
<option value="12" >
Aruba (+297)
</option>
<option value="13" >
Australia (+61)
</option>
<option value="14" >
Austria (+43)
</option>
<option value="15" >
Azerbaijan (+994)
</option>
<option value="16" >
Bahamas The (+1)
</option>
<option value="17" >
Bahrain (+973)
</option>
<option value="18" >
Bangladesh (+880)
</option>
<option value="19" >
Barbados (+1)
</option>
<option value="20" >
Belarus (+375)
</option>
<option value="21" >
Belgium (+32)
</option>
<option value="22" >
Belize (+501)
</option>
<option value="23" >
Benin (+229)
</option>
<option value="24" >
Bermuda (+1)
</option>
<option value="25" >
Bhutan (+975)
</option>
<option value="26" >
Bolivia (+591)
</option>
<option value="27" >
Bosnia and Herzegovina (+387)
</option>
<option value="28" >
Botswana (+267)
</option>
<option value="29" >
Bouvet Island (+47)
</option>
<option value="30" >
Brazil (+55)
</option>
<option value="31" >
British Indian Ocean Territory (+246)
</option>
<option value="32" >
Brunei (+673)
</option>
<option value="33" >
Bulgaria (+359)
</option>
<option value="34" >
Burkina Faso (+226)
</option>
<option value="35" >
Burundi (+257)
</option>
<option value="36" >
Cambodia (+855)
</option>
<option value="37" >
Cameroon (+237)
</option>
<option value="38" >
Canada (+1)
</option>
<option value="39" >
Cape Verde (+238)
</option>
<option value="40" >
Cayman Islands (+1)
</option>
<option value="41" >
Central African Republic (+236)
</option>
<option value="42" >
Chad (+235)
</option>
<option value="43" >
Chile (+56)
</option>
<option value="44" >
China (+86)
</option>
<option value="45" >
Christmas Island (+61)
</option>
<option value="46" >
Cocos (Keeling) Islands (A$)
</option>
<option value="47" >
Colombia (+57)
</option>
<option value="48" >
Comoros (+269)
</option>
<option value="49" >
Republic Of The Congo (+242)
</option>
<option value="50" >
Democratic Republic Of The Congo (+243)
</option>
<option value="51" >
Cook Islands (+682)
</option>
<option value="52" >
Costa Rica (+506)
</option>
<option value="53" >
Cote D'Ivoire (Ivory Coast) (+225)
</option>
<option value="54" >
Croatia (Hrvatska) (+385)
</option>
<option value="55" >
Cuba (+53)
</option>
<option value="56" >
Cyprus (+357)
</option>
<option value="57" >
Czech Republic (+420)
</option>
<option value="58" >
Denmark (+45)
</option>
<option value="59" >
Djibouti (+253)
</option>
<option value="60" >
Dominica (+1)
</option>
<option value="61" >
Dominican Republic (+1)
</option>
<option value="62" >
East Timor (+670)
</option>
<option value="63" >
Ecuador (+593)
</option>
<option value="64" >
Egypt (+20)
</option>
<option value="65" >
El Salvador (+503)
</option>
<option value="66" >
Equatorial Guinea (+240)
</option>
<option value="67" >
Eritrea (+291)
</option>
<option value="68" >
Estonia (+372)
</option>
<option value="69" >
Ethiopia (+251)
</option>
<option value="70" >
External Territories of Australia (+672)
</option>
<option value="71" >
Falkland Islands (+500)
</option>
<option value="72" >
Faroe Islands (+298)
</option>
<option value="73" >
Fiji Islands (+679)
</option>
<option value="74" >
Finland (+358)
</option>
<option value="75" >
France (+33)
</option>
<option value="76" >
French Guiana (+594)
</option>
<option value="77" >
French Polynesia (+689)
</option>
<option value="78" >
French Southern Territories (+262)
</option>
<option value="79" >
Gabon (+241)
</option>
<option value="80" >
Gambia The (+220)
</option>
<option value="81" >
Georgia (+995)
</option>
<option value="82" >
Germany (+49)
</option>
<option value="83" >
Ghana (+233)
</option>
<option value="84" >
Gibraltar (+350)
</option>
<option value="85" >
Greece (+30)
</option>
<option value="86" >
Greenland (+299)
</option>
<option value="87" >
Grenada (+1)
</option>
<option value="88" >
Guadeloupe (+590)
</option>
<option value="89" >
Guam (+1)
</option>
<option value="90" >
Guatemala (+502)
</option>
<option value="91" >
Guernsey and Alderney (+44-1481)
</option>
<option value="92" >
Guinea (+224)
</option>
<option value="93" >
Guinea-Bissau (+245)
</option>
<option value="94" >
Guyana (+592)
</option>
<option value="95" >
Haiti (+509)
</option>
<option value="96" >
Heard and McDonald Islands (+672)
</option>
<option value="97" >
Honduras (+504)
</option>
<option value="98" >
Hong Kong S.A.R. (+852)
</option>
<option value="99" >
Hungary (+36)
</option>
<option value="100" >
Iceland (+354)
</option>
<option value="101" selected >
India (+91)
</option>
<option value="102" >
Indonesia (+62)
</option>
<option value="103" >
Iran (+98)
</option>
<option value="104" >
Iraq (+964)
</option>
<option value="105" >
Ireland (+353)
</option>
<option value="106" >
Israel (+972)
</option>
<option value="107" >
Italy (+39)
</option>
<option value="108" >
Jamaica (+1)
</option>
<option value="109" >
Japan (+81)
</option>
<option value="110" >
Jersey (+44)
</option>
<option value="111" >
Jordan (+962)
</option>
<option value="112" >
Kazakhstan (+7)
</option>
<option value="113" >
Kenya (+254)
</option>
<option value="114" >
Kiribati (+686)
</option>
<option value="115" >
Korea North (+850)
</option>
<option value="116" >
Korea South (+82)
</option>
<option value="117" >
Kuwait (+965)
</option>
<option value="118" >
Kyrgyzstan (+996)
</option>
<option value="119" >
Laos (+856)
</option>
<option value="120" >
Latvia (+371)
</option>
<option value="121" >
Lebanon (+961)
</option>
<option value="122" >
Lesotho (+266)
</option>
<option value="123" >
Liberia (+231)
</option>
<option value="124" >
Libya (+218)
</option>
<option value="125" >
Liechtenstein (+423)
</option>
<option value="126" >
Lithuania (+370)
</option>
<option value="127" >
Luxembourg (+352)
</option>
<option value="128" >
Macau S.A.R. (+853)
</option>
<option value="129" >
Macedonia (+389)
</option>
<option value="130" >
Madagascar (+261)
</option>
<option value="131" >
Malawi (+265)
</option>
<option value="132" >
Malaysia (+60)
</option>
<option value="133" >
Maldives (+960)
</option>
<option value="134" >
Mali (+223)
</option>
<option value="135" >
Malta (+356)
</option>
<option value="136" >
Man (Isle of) (+44)
</option>
<option value="137" >
Marshall Islands (+692)
</option>
<option value="138" >
Martinique (+596)
</option>
<option value="139" >
Mauritania (+222)
</option>
<option value="140" >
Mauritius (+230)
</option>
<option value="141" >
Mayotte (+262)
</option>
<option value="142" >
Mexico (+52)
</option>
<option value="143" >
Micronesia (+691)
</option>
<option value="144" >
Moldova (+373)
</option>
<option value="145" >
Monaco (+377)
</option>
<option value="146" >
Mongolia (+976)
</option>
<option value="147" >
Montserrat (+1)
</option>
<option value="148" >
Morocco (+212)
</option>
<option value="149" >
Mozambique (+258)
</option>
<option value="150" >
Myanmar (+95)
</option>
<option value="151" >
Namibia (+264)
</option>
<option value="152" >
Nauru (+674)
</option>
<option value="153" >
Nepal (+977)
</option>
<option value="154" >
Netherlands Antilles (+599)
</option>
<option value="155" >
Netherlands The (+31)
</option>
<option value="156" >
New Caledonia (+687)
</option>
<option value="157" >
New Zealand (+64)
</option>
<option value="158" >
Nicaragua (+505)
</option>
<option value="159" >
Niger (+227)
</option>
<option value="160" >
Nigeria (+234)
</option>
<option value="161" >
Niue (+683)
</option>
<option value="162" >
Norfolk Island (+672)
</option>
<option value="163" >
Northern Mariana Islands (+672)
</option>
<option value="164" >
Norway (+47)
</option>
<option value="165" >
Oman (+968)
</option>
<option value="166" >
Pakistan (+92)
</option>
<option value="167" >
Palau (+680)
</option>
<option value="168" >
Palestinian Territory Occupied (+970)
</option>
<option value="169" >
Panama (+507)
</option>
<option value="170" >
Papua new Guinea (+675)
</option>
<option value="171" >
Paraguay (+595)
</option>
<option value="172" >
Peru (+51)
</option>
<option value="173" >
Philippines (+63)
</option>
<option value="174" >
Pitcairn Island (+64)
</option>
<option value="175" >
Poland (+48)
</option>
<option value="176" >
Portugal (+351)
</option>
<option value="177" >
Puerto Rico (+1)
</option>
<option value="178" >
Qatar (+974)
</option>
<option value="179" >
Reunion (+262)
</option>
<option value="180" >
Romania (+40)
</option>
<option value="181" >
Russia (+7)
</option>
<option value="182" >
Rwanda (+250)
</option>
<option value="183" >
Saint Helena (+290)
</option>
<option value="184" >
Saint Kitts And Nevis (+1)
</option>
<option value="185" >
Saint Lucia (+1)
</option>
<option value="186" >
Saint Pierre and Miquelon (+508)
</option>
<option value="187" >
Saint Vincent And The Grenadines (+1)
</option>
<option value="188" >
Samoa (+685)
</option>
<option value="189" >
San Marino (+378)
</option>
<option value="190" >
Sao Tome and Principe (+239)
</option>
<option value="191" >
Saudi Arabia (+966)
</option>
<option value="192" >
Senegal (+221)
</option>
<option value="193" >
Serbia (+381)
</option>
<option value="194" >
Seychelles (+248)
</option>
<option value="195" >
Sierra Leone (+232)
</option>
<option value="196" >
Singapore (+65)
</option>
<option value="197" >
Slovakia (+421)
</option>
<option value="198" >
Slovenia (+386)
</option>
<option value="199" >
Smaller Territories of the UK (+44)
</option>
<option value="200" >
Solomon Islands (+677)
</option>
<option value="201" >
Somalia (+252)
</option>
<option value="202" >
South Africa (+27)
</option>
<option value="203" >
South Georgia (+500)
</option>
<option value="204" >
South Sudan (+211)
</option>
<option value="205" >
Spain (+34)
</option>
<option value="206" >
Sri Lanka (+94)
</option>
<option value="207" >
Sudan (+249)
</option>
<option value="208" >
Suriname (+597)
</option>
<option value="209" >
Svalbard And Jan Mayen Islands (+47)
</option>
<option value="210" >
Swaziland (+268)
</option>
<option value="211" >
Sweden (+46)
</option>
<option value="212" >
Switzerland (+41)
</option>
<option value="213" >
Syria (+963)
</option>
<option value="214" >
Taiwan (+886)
</option>
<option value="215" >
Tajikistan (+992)
</option>
<option value="216" >
Tanzania (+255)
</option>
<option value="217" >
Thailand (+66)
</option>
<option value="218" >
Togo (+228)
</option>
<option value="219" >
Tokelau (+690)
</option>
<option value="220" >
Tonga (+676)
</option>
<option value="221" >
Trinidad And Tobago (+1)
</option>
<option value="222" >
Tunisia (+216)
</option>
<option value="223" >
Turkey (+90)
</option>
<option value="224" >
Turkmenistan (+993)
</option>
<option value="225" >
Turks And Caicos Islands (+1)
</option>
<option value="226" >
Tuvalu (+688)
</option>
<option value="227" >
Uganda (+256)
</option>
<option value="228" >
Ukraine (+380)
</option>
<option value="229" >
United Arab Emirates (+971)
</option>
<option value="230" >
United Kingdom (+44)
</option>
<option value="231" >
United States (+1)
</option>
<option value="232" >
United States Minor Outlying Islands (+1)
</option>
<option value="233" >
Uruguay (+598)
</option>
<option value="234" >
Uzbekistan (+998)
</option>
<option value="235" >
Vanuatu (+678)
</option>
<option value="236" >
Vatican City State (Holy See) (+379)
</option>
<option value="237" >
Venezuela (+58)
</option>
<option value="238" >
Vietnam (+84)
</option>
<option value="239" >
Virgin Islands (British) (+1)
</option>
<option value="240" >
Virgin Islands (US) (+1)
</option>
<option value="241" >
Wallis And Futuna Islands (+681)
</option>
<option value="242" >
Western Sahara (+212)
</option>
<option value="243" >
Yemen (+967)
</option>
<option value="244" >
Yugoslavia (+38)
</option>
<option value="245" >
Zambia (+260)
</option>
<option value="246" >
Zimbabwe (+263)
</option>
</select>
<input type="text" name="phone" class="form-control phone-input" placeholder="Enter Phone Number*" required>
</div>
</div>
<div class="form-group">
<label for="email">Email Id</label>
<div class="email-input-container">
<input type="email" name="email" class="form-control email-input" placeholder="Enter your email*" required>
<i class="fas fa-envelope email-icon"></i>
</div>
</div>
<!-- Add Google reCAPTCHA -->
<div class="form-group recaptcha-container">
<div id="drop-query-recaptcha" class="g-recaptcha" data-sitekey="6LfrXv4nAAAAADudm8X0oYnxC8M7GIOJ_pMfS8TS" data-form="drop-query"></div>
</div>
<button type="submit" class="btn btn-submit-query">SUBMIT QUERY</button>
</form>
</div>
</div>
</div>
<!--=================================
footer-->
<footer class="footer">
<!--<div class="space-ptb bg-overlay-white-97" style="background-image: url('images/bg/footer-bg.webp');">-->
<div class="space-ptb pb-2" style=" background-color: #f8f8f8;">
<div class="container">
<div class="row position-relative">
<div class="col-sm-6 col-lg-3 mb-4 mb-lg-0">
<div class="footer-contact-info">
<div class="footer-logo mb-2">
<a href="https://www.justacademy.co"><img class="img-fluid" src="https://www.justacademy.co/logo.png" alt=""></a>
</div>
<div class="contact-address">
<div class="contact-item mb-3 mb-md-4">
<p>1201, 12th Floor, Star Plaza, <br>Mahatma Gandhi Rd, Chinchpada, <br>Opp Borivali East Station, <br>Borivali - East, Mumbai - 400066</p>
</div>
<div class="contact-item mb-3 mb-md-4">
<h4 class="mb-0 fw-normal"><a href="tel:+919987184296">+91-9987184296</a></h4>
</div>
<div class="contact-item">
<a href="mailto:info@justacademy.co">info@justacademy.co</a>
</div>
<div class="contact-item mt-3" id="google-play-badge">
<a href="https://play.google.com/store/apps/details?id=com.pc.justacademy&hl=en_IN" target="_blank">
<img src="https://www.justacademy.co/images/google-play.png" alt="Get it on Google Play" class="img-fluid">
</a>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-xl-3 col-lg-4 mb-4 mb-lg-0">
<h5 class="footer-title">Explore</h5>
<div class="footer-link">
<ul class="list-unstyled mb-0">
<li><a href="https://www.justacademy.co/job-bootcamp">Job Bootcamp</a></li>
<li><a href="https://www.justacademy.co/program">Programs</a></li>
<li><a href="https://www.justacademy.co/learning">Learning Resources</a></li>
<li><a href="https://www.justacademy.co/about-us">About Us</a></li>
<li><a href="https://www.justacademy.co/contact-us">Contact Us</a></li>
<li><a href="https://www.justacademy.co/connect-with-us">Connect With Us</a></li>
<li><a href="https://www.justacademy.co/become-a-instructor">Become an Instructor</a></li>
<li><a href="https://www.justacademy.co/all-courses">All Courses</a></li>
<li><a href="https://www.justacademy.co/webinars">Webinars</a></li>
<li><a href="https://www.justacademy.co/contact-us">Contact us</a></li>
<li><a href="https://www.justacademy.co/blog-site-map">Blog Sitemap</a></li>
<li><a href="https://www.justacademy.co/gallery">Gallery</a></li>
<li><a href="https://www.justacademy.co/blog">Blog</a></li>
<li><a href="https://www.justacademy.co/news">News</a></li>
<li><a href="https://www.justacademy.co/article">Articles</a></li>
</ul>
<!--<ul class="list-unstyled mb-0">-->
<!-- <li><a href="https://www.justacademy.co/term-conditions">Terms & Conditions</a></li>-->
<!-- <li><a href="https://www.justacademy.co/privacy-policy">Privacy Policy</a></li>-->
<!--</ul>-->
</div>
</div>
<div class="col-sm-6 col-xl-3 col-lg-2 mb-4 mb-sm-0">
<h5 class="footer-title">Information</h5>
<div class="footer-link">
<ul class="list-unstyled mb-0">
<li><a href="https://www.justacademy.co/faq">FAQs</a></li>
<li><a href="https://www.justacademy.co/tools">Tools</a></li>
<li><a href="https://www.justacademy.co/term-conditions">Terms & Conditions</a></li>
<li><a href="https://www.justacademy.co/privacy-policy">Privacy Policy</a></li>
<li><a href="https://www.justacademy.co/sitemap.xml">Site Map</a></li>
<li><a href="https://www.justacademy.co/courses-location-list">City Wise Courses</a></li>
<li><a href="https://www.justacademy.co/corporate-training">Corporate Training</a></li>
<li><a href="https://www.justacademy.co/job-bootcamp">Job Bootcamp</a></li>
<li><a href="https://www.justacademy.co/interview-questions">Interview Questions</a></li>
<li><a href="https://www.justacademy.co/reviews">Reviews</a></li>
<li><a href="https://www.justacademy.co/hire-from-justacademy">Hire from Justacademy</a></li>
<li><a href="https://www.justacademy.co/media">Media</a></li>
<li><a href="https://www.justacademy.co/instructors">Instructors</a></li>
<li><a href="https://www.justacademy.co/workshop">Workshops</a></li>
<li><a href="https://www.justacademy.co/press-media">Press & Media</a></li>
<li><a href="https://www.justacademy.co/resources">Resources</a></li>
</ul>
</div>
</div>
<div class="col-sm-6 col-lg-3">
<h5 class="footer-title">Subscribe us</h5>
<p>Sign up to our newsletter to get the latest news and offers.</p>
<form action="https://www.justacademy.co/email_subscribe" method="POST">
<input type="hidden" name="_token" value="lkunKqVId1HQ3Kx3ei2Zu0YKAr1fg6NntemhifoY" autocomplete="off"> <div class="mb-3">
<input id="email" type="email" class="form-control " placeholder="Email*" name="email" required autocomplete="email">
</div>
<button type="submit" class="btn btn-sm btn-primary">Subscribe</button>
</form>
</div>
</div>
<hr class="mb-5 mt-5">
<div class="row position-relative">
<div class="col-sm-12 col-lg-12">
<h5 class="footer-tile">Career Bootcamps</h5>
<div class="contact-item mb-3 mb-md-4">
<a href="https://www.justacademy.co/job-bootcamp-detail/mumbai/full-stack-developer-pro-bootcamp-in-mumbai-job-oriented-web-development-training" target="_blank" style="display: inline;">Full Stack Pro Bootcamp in Mumbai | </a>
<a href="https://www.justacademy.co/job-bootcamp-detail/mumbai/front-end-development-bootcamp-in-mumbai-html-css-javascript-react-classroom-training" target="_blank" style="display: inline;">Frontend Development Bootcamp in Mumbai | </a>
<a href="https://www.justacademy.co/job-bootcamp-detail/mumbai/back-end-development-bootcamp-in-mumbai-nodejs-expressjs-mongodb-classroom-training" target="_blank" style="display: inline;">Backend Development Bootcamp in Mumbai | </a>
<a href="https://www.justacademy.co/job-bootcamp-detail/mumbai/mern-stack-developer-bootcamp-in-mumbai-full-stack-web-development-classroom-training" target="_blank" style="display: inline;">MERN Stack Bootcamp in Mumbai | </a>
<a href="https://www.justacademy.co/job-bootcamp-detail/mumbai/mean-stack-developer-bootcamp-in-mumbai-full-stack-web-development-classroom-training" target="_blank" style="display: inline;">MEAN Stack Bootcamp in Mumbai | </a>
<a href="https://www.justacademy.co/job-bootcamp-detail/mumbai/full-stack-qa-automation-bootcamp-in-mumbai-end-to-end-testing-automation-training" target="_blank" style="display: inline;">Full Stack QA Automation Bootcamp in Mumbai | </a>
<a href="https://www.justacademy.co/job-bootcamp-detail/mumbai/full-stack-mobile-app-development-bootcamp-in-mumbai-flutter-nodejs-mongodb-express-offline-training" target="_blank" style="display: inline;">Full Stack Mobile App Development Bootcamp in Mumbai | </a>
<a href="https://www.justacademy.co/job-bootcamp-detail/mumbai/full-stack-java-developer-bootcamp-in-mumbai-classroom-training-with-real-projects" target="_blank" style="display: inline;">Full Stack Java Bootcamp in Mumbai | </a>
<a href="https://www.justacademy.co/job-bootcamp-detail/mumbai/data-analytics-bootcamp-in-mumbai-classroom-training-with-real-world-projects" target="_blank" style="display: inline;">Data Analytics Bootcamp in Mumbai | </a>
<a href="https://www.justacademy.co/job-bootcamp-detail/mean-stack-developer-bootcamp-full-stack-web-development-training-program" target="_blank" style="display: inline;">MEAN Stack Bootcamp Online | </a>
<a href="https://www.justacademy.co/job-bootcamp-detail/full-stack-qa-automation-bootcamp-end-to-end-testing-training" target="_blank" style="display: inline;">Full Stack QA Testing Bootcamp Online | </a>
<a href="https://www.justacademy.co/job-bootcamp-detail/mern-stack-developer-bootcamp-full-stack-web-development-training-program" target="_blank" style="display: inline;">MERN Stack Bootcamp Online | </a>
<a href="https://www.justacademy.co/job-bootcamp-detail/full-stack-mobile-app-development-bootcamp-flutter-nodejs-mongodb-express" target="_blank" style="display: inline;">Mobile App Development Bootcamp Online | </a>
<a href="https://www.justacademy.co/job-bootcamp-detail/data-analytics-bootcamp-online-live-training-with-real-world-projects" target="_blank" style="display: inline;">Data Analytics Bootcamp Online | </a>
<a href="https://www.justacademy.co/job-bootcamp-detail/full-stack-java-developer-bootcamp-online-live-interactive-training-with-real-projects" target="_blank" style="display: inline;">Full Stack Java Bootcamp Online</a>
</div>
</div>
</div>
<div class="row position-relative">
<div class="col-sm-12 col-lg-12">
<h5 class="footer-tile">In-Demand Courses</h5>
<div class="contact-item mb-3 mb-md-4">
<a href="https://www.justacademy.co/course-detail/mumbai/microsoft-power-bi-training-in-mumbai" target="_blank" style="display: inline;">Power BI Training in Mumbai | </a>
<a href="https://www.justacademy.co/course-detail/mumbai/digital-marketing-in-mumbai" target="_blank" style="display: inline;">Digital Marketing Training in Mumbai | </a>
<a href="https://www.justacademy.co/course-detail/mumbai/mobile-app-testing-using-appium-training-in-mumbai" target="_blank" style="display: inline;">Mobile App Automation Testing Training in Mumbai | </a>
<a href="https://www.justacademy.co/course-detail/mumbai/figma-training-in-mumbai" target="_blank" style="display: inline;">Figma Training in Mumbai | </a>
<a href="https://www.justacademy.co/course-detail/mumbai/selenium-training-in-mumbai" target="_blank" style="display: inline;">Selenium Training in Mumbai | </a>
<a href="https://www.justacademy.co/course-detail/mumbai/flutter-training-in-mumbai" target="_blank" style="display: inline;">Flutter Training in Mumbai | </a>
<a href="https://www.justacademy.co/course-detail/digital-marketing" target="_blank" style="display: inline;">Digital Marketing Training Online | </a>
<a href="https://www.justacademy.co/course-detail/mobile-app-testing-using-appium-training" target="_blank" style="display: inline;">Mobile App Automation Testing Online | </a>
<a href="https://www.justacademy.co/course-detail/figma-training" target="_blank" style="display: inline;">Figma Training Online | </a>
<a href="https://www.justacademy.co/course-detail/selenium-training" target="_blank" style="display: inline;">Selenium Training Online | </a>
<a href="https://www.justacademy.co/course-detail/flutter-training" target="_blank" style="display: inline;">Flutter Training Online</a>
</div>
</div>
</div>
<div class="row position-relative">
<div class="col-sm-12 col-lg-12">
<h5 class="footer-tile">Training Locations</h5>
<div class="contact-item mb-3 mb-md-4">
<a href="https://www.justacademy.co/course-detail/delhi/digital-marketing-in-delhi" target="_blank" style="display: inline;">Digital Marketing Training in Delhi | </a>
<a href="https://www.justacademy.co/course-detail/hyderabad/selenium-training-in-hyderabad" target="_blank" style="display: inline;">Selenium Training in Hyderabad | </a>
<a href="https://www.justacademy.co/course-detail/bangalore/microsoft-power-bi-training-in-bangalore" target="_blank" style="display: inline;">Power BI Training in Bangalore | </a>
<a href="https://www.justacademy.co/course-detail/pune/flutter-training-in-pune" target="_blank" style="display: inline;">Flutter Training in Pune</a>
</div>
</div>
</div>
<div class="row position-relative">
<div class="col-sm-12 col-lg-12">
<h5 class="footer-tile">Explore Courses by City</h5>
<div class="contact-item mb-3 mb-md-4">
<a href="/course-list/mumbai" style="display: inline;">Mumbai Courses</a> |
<a href="/course-list/pune" style="display: inline;">Pune Courses</a> |
<a href="/course-list/bangalore" style="display: inline;">Bangalore Courses</a> |
<a href="/course-list/hyderabad" style="display: inline;">Hyderabad Courses</a> |
<a href="/course-list/delhi" style="display: inline;">Delhi Courses</a>
</div>
</div>
</div>
<hr class="mb-1 ">
PMP®,PMI®, PMI-ACP® and PMBOK® are registered marks of the Project Management Institute, Inc. MongoDB®, Mongo and the leaf logo are the registered trademarks of MongoDB, Inc.
</div>
</div>
<div class="footer-bottom bg-light">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="social-icon text-md-start text-center mb-3 mb-md-0">
<ul>
<li><a href="https://www.facebook.com/JustAcademyIN/" target="_blank"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="https://twitter.com/justacademy23" target="_blank"><i class="fab fa-twitter"></i></a>
</li>
<li><a href="https://www.linkedin.com/company/justacademy/" target="_blank"><i class="fab fa-linkedin-in"></i></a></li>
<li><a href="https://www.instagram.com/justacademyin/" target="_blank"><i class="fab fa-instagram"></i></a></li>
<li><a href="https://g.page/r/CTktA68zNHUcEAI/review" target="_blank"><i class="fab fa-google"></i></a></li>
<li><a href="https://play.google.com/store/apps/details?id=com.pc.justacademy&hl=en_IN" target="_blank" title="Download on Google Play" style="color: #01875f !important;"><i class="fab fa-google-play"></i></a></li>
</ul>
</div>
</div>
<div class="col-md-6">
<div class="copyright text-md-end text-center">
<p class="mb-0 small">© Copyright 2024 <a href="javascript:void(0)">TRRev Technology</a> All
Rights Reserved.
</p>
</div>
</div>
</div>
</div>
</div>
</footer>
<!--=================================
footer-->
<!--=================================
Modal Popup -->
<!-- Want To Connect Modal -->
<div class="modal login fade" id="popupModal" tabindex="-1" role="dialog" aria-labelledby="popupModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-advertisement" role="document" style="max-width: 980px; width: 92%;">
<div class="modal-content" style="border-radius: 0px !important;">
<div class="modal-header border-0" style="background-color: #b51d74; border-radius: 0px !important; padding: 15px 20px;">
<h5 class="modal-title text-center" style="width: 100%; text-align: center; color:#fff; font-size: 1.3rem; margin: 0;" id="popupModalLabel">Want To Connect with us</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body modal-body-advertisement" style="padding: 0;">
<div class="row" style="margin: 0;">
<div class="col-sm-7 d-none d-sm-block connect-modal-info-col" style="border-right: 1px solid #ddd; padding: 25px; background: #ffffff; position: relative;">
<div class="text-content" style="color: #333; height: 100%; display: flex; flex-direction: column; justify-content: center;">
<div style="text-align: center; margin-bottom: 20px;">
<h3 style="color: #b51d74; font-weight: bold; margin-bottom: 8px; font-size: 1.3rem; text-shadow: 1px 1px 2px rgba(0,0,0,0.1);">🚀 Kickstart Your IT Career</h3>
<p style="color: #b51d74; font-weight: 600; font-size: 0.95rem; margin: 0 0 6px;">with JustAcademy</p>
<p style="color: #555; font-size: 0.8rem; margin: 0;">Learn Industry-Focused Courses with Live Projects & Placement Assistance</p>
</div>
<div style="background:#f8f9fa; padding:12px; border-radius:10px; margin-bottom:12px;">
<ul style="list-style:none; padding:0; margin:0; font-size:0.8rem; color:#333;">
<li style="margin-bottom:6px;"><strong>Full Stack Java</strong> <span style="color:#777;">(Java, Spring Boot, Hibernate, REST API, React JS)</span></li>
<li style="margin-bottom:6px;"><strong>Data Analytics</strong> <span style="color:#777;">(Excel, SQL, Power BI, Python, Tableau)</span></li>
<li style="margin-bottom:6px;"><strong>MERN Stack</strong> <span style="color:#777;">(MongoDB, Express JS, React JS, Node JS)</span></li>
<li style="margin-bottom:6px;"><strong>Full Stack Python</strong> <span style="color:#777;">(Python, Django, Flask, MySQL, React JS)</span></li>
<li style="margin-bottom:6px;"><strong>Full Stack QA</strong> <span style="color:#777;">(Manual Testing, Selenium, API Testing, Appium)</span></li>
<li style="margin-bottom:0;"><strong>Full Stack Mobile App Dev</strong> <span style="color:#777;">(Flutter, React Native, Firebase, REST API)</span></li>
</ul>
</div>
<div style="background: #fff; padding: 12px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); border: 1px solid #e9ecef; margin-bottom: 15px;">
<ul style="color: #333; list-style: none; padding: 0; margin: 0;">
<li style="margin-bottom: 5px; position: relative; padding-left: 20px; font-size: 0.82rem;"><i class="fas fa-check-circle" style="position: absolute; left: 0; top: 1px; color: #28a745;"></i>100% Practical Training</li>
<li style="margin-bottom: 5px; position: relative; padding-left: 20px; font-size: 0.82rem;"><i class="fas fa-check-circle" style="position: absolute; left: 0; top: 1px; color: #28a745;"></i>Internship & Certification</li>
<li style="margin-bottom: 5px; position: relative; padding-left: 20px; font-size: 0.82rem;"><i class="fas fa-check-circle" style="position: absolute; left: 0; top: 1px; color: #28a745;"></i>Live Project Experience</li>
<li style="margin-bottom: 5px; position: relative; padding-left: 20px; font-size: 0.82rem;"><i class="fas fa-check-circle" style="position: absolute; left: 0; top: 1px; color: #28a745;"></i>Resume & Interview Preparation</li>
<li style="margin-bottom: 5px; position: relative; padding-left: 20px; font-size: 0.82rem;"><i class="fas fa-check-circle" style="position: absolute; left: 0; top: 1px; color: #28a745;"></i>Online + Mumbai Classroom Training</li>
<li style="margin-bottom: 0; position: relative; padding-left: 20px; font-size: 0.82rem;"><i class="fas fa-check-circle" style="position: absolute; left: 0; top: 1px; color: #28a745;"></i>Placement Assistance & Career Support</li>
</ul>
</div>
<div style="padding: 12px; background: linear-gradient(135deg, #b51d74 0%, #8e1554 100%); border-radius: 10px; box-shadow: 0 4px 12px rgba(181, 29, 116, 0.3); text-align: center;">
<p style="color: #fff; font-weight: bold; margin: 0; font-size: 0.9rem;">
🎯 Fill the form now and book your <span style="color: #ffd700;">FREE</span> career counseling + demo session
</p>
</div>
</div>
</div>
<div class="col-sm-5 connect-modal-form-col" style="padding: 25px;">
<form action="https://www.justacademy.co/advertisement-enquiry" method="post" id="advertisementEnquiryForm">
<input type="hidden" name="_token" value="lkunKqVId1HQ3Kx3ei2Zu0YKAr1fg6NntemhifoY" autocomplete="off"> <div class="form-group mb-2 col-lg-12">
<input type="text" name="name" class="form-control" placeholder="Your name" required style=" font-size: 0.9rem;" />
</div>
<div class="form-group mb-2 col-lg-12">
<input type="email" name="email" class="form-control" placeholder="Your email" required style=" font-size: 0.9rem;" />
</div>
<style>
/* Interested In - flat single bar, no rounded corners */
.btn-outline-brand {
color: #b51d74;
background-color: #fff;
border-color: #b51d74;
}
.btn-outline-brand:hover {
color: #8e1554;
background-color: #f8e8f2;
border-color: #b51d74;
}
.btn-check:checked + .btn-outline-brand {
color: #fff;
background-color: #b51d74;
border-color: #b51d74;
}
#popupModal .btn-group label.btn.btn-outline-brand:first-of-type {
border-radius: 0.375rem 0 0 0.375rem !important;
}
#popupModal .btn-group label.btn.btn-outline-brand:last-of-type {
border-radius: 0 0.375rem 0.375rem 0 !important;
}
/* Select2 styles */
#popupModal .select2-container {
width: 100% !important;
display: block;
}
#popupModal .select2-container--default .select2-selection--single {
height: 38px !important;
padding: 6px 12px !important;
border: 1px solid #ced4da !important;
border-radius: 0.375rem !important;
font-size: 0.9rem !important;
line-height: 24px !important;
background: white !important;
}
#popupModal .select2-container--default .select2-selection--single .select2-selection__rendered {
padding-left: 0 !important;
line-height: 24px !important;
color: #333 !important;
}
#popupModal .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 36px !important;
top: 0 !important;
}
#popupModal .select2-container--default.select2-container--open .select2-selection--single,
#popupModal .select2-container--default.select2-container--focus .select2-selection--single {
border-color: #b51d74 !important;
outline: none !important;
box-shadow: none !important;
}
#popupModal .select2-dropdown {
border: 1px solid #ced4da !important;
border-radius: 0.375rem !important;
z-index: 10001 !important;
}
#popupModal .select2-results__option--highlighted[aria-selected] {
background-color: #b51d74 !important;
color: #fff !important;
}
#popupModal .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) {
background-color: #f8e8f2 !important;
color: #b51d74 !important;
}
#popupModal .select2-search__field {
border-radius: 0.25rem !important;
font-size: 0.9rem !important;
}
/* Country + Phone joined unit */
#popupModal .modal-country-phone {
display: flex;
border: 1px solid #ced4da;
border-radius: 0.375rem;
overflow: hidden;
position: relative;
}
#popupModal .modal-country-phone .country-wrapper {
width: 35%;
border-right: 1px solid #ced4da;
flex-shrink: 0;
position: relative;
z-index: 2;
}
#popupModal .modal-country-phone .country-wrapper .select2-container--default .select2-selection--single {
border: none !important;
border-radius: 0 !important;
height: 38px !important;
}
#popupModal .modal-country-phone .phone-input {
flex: 1;
border: none;
outline: none;
padding: 6px 12px;
font-size: 0.9rem;
min-width: 0;
}
#popupModal .modal-country-phone .phone-input:focus {
outline: none;
box-shadow: none;
}
</style>
<div class="form-group mb-3 col-lg-12">
<label class="form-label text-muted" style="font-size: 0.85rem; font-weight: 600; margin-bottom: 5px;">Interested In</label>
<div class="btn-group w-100" role="group" aria-label="Course Type">
<input type="radio" class="btn-check" name="course_type" id="courseTypeRadio" value="course" autocomplete="off" checked>
<label class="btn btn-outline-brand m-0" for="courseTypeRadio" style="font-size: 0.85rem;">Courses</label>
<input type="radio" class="btn-check" name="course_type" id="bootcampTypeRadio" value="bootcamp" autocomplete="off">
<label class="btn btn-outline-brand m-0" for="bootcampTypeRadio" style="font-size: 0.85rem;">Career Programs</label>
</div>
</div>
<div class="form-group mb-3 col-lg-12">
<select name="course" id="modalCourseSelect" required>
<option value="" selected disabled>Select Course</option>
<option value="1" >HTML Training</option>
<option value="2" >Android App Development</option>
<option value="3" >Manual Training</option>
<option value="4" >Adobe Training</option>
<option value="5" >Digital Marketing</option>
<option value="6" >Core Java Training</option>
<option value="7" >CSS Training</option>
<option value="8" >Bootstrap Training</option>
<option value="9" >Javascript Training</option>
<option value="10" >React JS Training</option>
<option value="11" >Node JS Training</option>
<option value="12" >Angular Training</option>
<option value="13" >Django Training</option>
<option value="14" >PHP Training</option>
<option value="16" >Laravel Training</option>
<option value="17" >Codeignitor Training</option>
<option value="18" >Wordpress Training</option>
<option value="19" >jQuery Training</option>
<option value="20" >IOS Training</option>
<option value="21" >Flutter Training</option>
<option value="22" >Ionic Training</option>
<option value="23" >React Native Training</option>
<option value="24" >Augmented Reality Training</option>
<option value="25" >Advance Java Training</option>
<option value="26" >Selenium Training</option>
<option value="27" >Performance Training</option>
<option value="28" >Photoshop Training</option>
<option value="29" >Illustrator Training</option>
<option value="30" >Figma Training</option>
<option value="31" >SEO Training</option>
<option value="379" >SAP ABAP Training</option>
<option value="382" >Microsoft Azure Training</option>
<option value="392" >ASP .NET Training</option>
<option value="400" >SAP ABAP On HANA Training</option>
<option value="429" >SAP FIORI Training</option>
<option value="459" >SAP MM Training</option>
<option value="461" >SAP SD Training</option>
<option value="508" >PMP Certification Training</option>
<option value="521" >PMI® Agile Certified Practitioner Training</option>
<option value="522" >Python Training</option>
<option value="523" >Machine Learning</option>
<option value="528" >Microsoft Power BI Training</option>
<option value="538" >Tableau Training</option>
<option value="569" >Alteryx Training</option>
<option value="572" >MySQL Training</option>
<option value="585" >SalesForce Training</option>
<option value="634" >Mobile App Testing Using Appium Training</option>
<option value="635" >Continuous Testing in DevOps Training</option>
<option value="636" >AWS Training</option>
<option value="637" >Deep Learning</option>
<option value="638" >DevOps Training</option>
<option value="640" >Certified Scrum Master® (CSM) Certification Training</option>
<option value="641" >PRINCE2® Foundation & Practitioner Certification Course Training</option>
<option value="642" >GCP Certification Training</option>
<option value="23220" >Advanced Excel & Power BI</option>
<option value="23221" >Power BI and SQL</option>
<option value="23222" >Data Analyst Foundation - Advanced Excel & SQL +&Power BI</option>
</select>
</div>
<div class="form-group mb-3 col-lg-12">
<div class="modal-country-phone">
<div class="country-wrapper">
<select name="country_id" id="modalCountrySelect" required>
<option value="1" data-abbr="AF" data-isd="+93">Afghanistan (+93)</option>
<option value="2" data-abbr="AL" data-isd="+355">Albania (+355)</option>
<option value="3" data-abbr="DZ" data-isd="+213">Algeria (+213)</option>
<option value="4" data-abbr="AS" data-isd="+1">American Samoa (+1)</option>
<option value="5" data-abbr="AD" data-isd="+376">Andorra (+376)</option>
<option value="6" data-abbr="AO" data-isd="+244">Angola (+244)</option>
<option value="7" data-abbr="AI" data-isd="+1">Anguilla (+1)</option>
<option value="8" data-abbr="AQ" data-isd="+672">Antarctica (+672)</option>
<option value="9" data-abbr="AG" data-isd="+1">Antigua And Barbuda (+1)</option>
<option value="10" data-abbr="AR" data-isd="+54">Argentina (+54)</option>
<option value="11" data-abbr="AM" data-isd="+374">Armenia (+374)</option>
<option value="12" data-abbr="AW" data-isd="+297">Aruba (+297)</option>
<option value="13" data-abbr="AU" data-isd="+61">Australia (+61)</option>
<option value="14" data-abbr="AT" data-isd="+43">Austria (+43)</option>
<option value="15" data-abbr="AZ" data-isd="+994">Azerbaijan (+994)</option>
<option value="16" data-abbr="BS" data-isd="+1">Bahamas The (+1)</option>
<option value="17" data-abbr="BH" data-isd="+973">Bahrain (+973)</option>
<option value="18" data-abbr="BD" data-isd="+880">Bangladesh (+880)</option>
<option value="19" data-abbr="BB" data-isd="+1">Barbados (+1)</option>
<option value="20" data-abbr="BY" data-isd="+375">Belarus (+375)</option>
<option value="21" data-abbr="BE" data-isd="+32">Belgium (+32)</option>
<option value="22" data-abbr="BZ" data-isd="+501">Belize (+501)</option>
<option value="23" data-abbr="BJ" data-isd="+229">Benin (+229)</option>
<option value="24" data-abbr="BM" data-isd="+1">Bermuda (+1)</option>
<option value="25" data-abbr="BT" data-isd="+975">Bhutan (+975)</option>
<option value="26" data-abbr="BO" data-isd="+591">Bolivia (+591)</option>
<option value="27" data-abbr="BA" data-isd="+387">Bosnia and Herzegovina (+387)</option>
<option value="28" data-abbr="BW" data-isd="+267">Botswana (+267)</option>
<option value="29" data-abbr="BV" data-isd="+47">Bouvet Island (+47)</option>
<option value="30" data-abbr="BR" data-isd="+55">Brazil (+55)</option>
<option value="31" data-abbr="IO" data-isd="+246">British Indian Ocean Territory (+246)</option>
<option value="32" data-abbr="BN" data-isd="+673">Brunei (+673)</option>
<option value="33" data-abbr="BG" data-isd="+359">Bulgaria (+359)</option>
<option value="34" data-abbr="BF" data-isd="+226">Burkina Faso (+226)</option>
<option value="35" data-abbr="BI" data-isd="+257">Burundi (+257)</option>
<option value="36" data-abbr="KH" data-isd="+855">Cambodia (+855)</option>
<option value="37" data-abbr="CM" data-isd="+237">Cameroon (+237)</option>
<option value="38" data-abbr="CA" data-isd="+1">Canada (+1)</option>
<option value="39" data-abbr="CV" data-isd="+238">Cape Verde (+238)</option>
<option value="40" data-abbr="KY" data-isd="+1">Cayman Islands (+1)</option>
<option value="41" data-abbr="CF" data-isd="+236">Central African Republic (+236)</option>
<option value="42" data-abbr="TD" data-isd="+235">Chad (+235)</option>
<option value="43" data-abbr="CL" data-isd="+56">Chile (+56)</option>
<option value="44" data-abbr="CN" data-isd="+86">China (+86)</option>
<option value="45" data-abbr="CX" data-isd="+61">Christmas Island (+61)</option>
<option value="46" data-abbr="CC" data-isd="A$">Cocos (Keeling) Islands (A$)</option>
<option value="47" data-abbr="CO" data-isd="+57">Colombia (+57)</option>
<option value="48" data-abbr="KM" data-isd="+269">Comoros (+269)</option>
<option value="49" data-abbr="CG" data-isd="+242">Republic Of The Congo (+242)</option>
<option value="50" data-abbr="CD" data-isd="+243">Democratic Republic Of The Congo (+243)</option>
<option value="51" data-abbr="CK" data-isd="+682">Cook Islands (+682)</option>
<option value="52" data-abbr="CR" data-isd="+506">Costa Rica (+506)</option>
<option value="53" data-abbr="CI" data-isd="+225">Cote D'Ivoire (Ivory Coast) (+225)</option>
<option value="54" data-abbr="HR" data-isd="+385">Croatia (Hrvatska) (+385)</option>
<option value="55" data-abbr="CU" data-isd="+53">Cuba (+53)</option>
<option value="56" data-abbr="CY" data-isd="+357">Cyprus (+357)</option>
<option value="57" data-abbr="CZ" data-isd="+420">Czech Republic (+420)</option>
<option value="58" data-abbr="DK" data-isd="+45">Denmark (+45)</option>
<option value="59" data-abbr="DJ" data-isd="+253">Djibouti (+253)</option>
<option value="60" data-abbr="DM" data-isd="+1">Dominica (+1)</option>
<option value="61" data-abbr="DO" data-isd="+1">Dominican Republic (+1)</option>
<option value="62" data-abbr="TP" data-isd="+670">East Timor (+670)</option>
<option value="63" data-abbr="EC" data-isd="+593">Ecuador (+593)</option>
<option value="64" data-abbr="EG" data-isd="+20">Egypt (+20)</option>
<option value="65" data-abbr="SV" data-isd="+503">El Salvador (+503)</option>
<option value="66" data-abbr="GQ" data-isd="+240">Equatorial Guinea (+240)</option>
<option value="67" data-abbr="ER" data-isd="+291">Eritrea (+291)</option>
<option value="68" data-abbr="EE" data-isd="+372">Estonia (+372)</option>
<option value="69" data-abbr="ET" data-isd="+251">Ethiopia (+251)</option>
<option value="70" data-abbr="XA" data-isd="+672">External Territories of Australia (+672)</option>
<option value="71" data-abbr="FK" data-isd="+500">Falkland Islands (+500)</option>
<option value="72" data-abbr="FO" data-isd="+298">Faroe Islands (+298)</option>
<option value="73" data-abbr="FJ" data-isd="+679">Fiji Islands (+679)</option>
<option value="74" data-abbr="FI" data-isd="+358">Finland (+358)</option>
<option value="75" data-abbr="FR" data-isd="+33">France (+33)</option>
<option value="76" data-abbr="GF" data-isd="+594">French Guiana (+594)</option>
<option value="77" data-abbr="PF" data-isd="+689">French Polynesia (+689)</option>
<option value="78" data-abbr="TF" data-isd="+262">French Southern Territories (+262)</option>
<option value="79" data-abbr="GA" data-isd="+241">Gabon (+241)</option>
<option value="80" data-abbr="GM" data-isd="+220">Gambia The (+220)</option>
<option value="81" data-abbr="GE" data-isd="+995">Georgia (+995)</option>
<option value="82" data-abbr="DE" data-isd="+49">Germany (+49)</option>
<option value="83" data-abbr="GH" data-isd="+233">Ghana (+233)</option>
<option value="84" data-abbr="GI" data-isd="+350">Gibraltar (+350)</option>
<option value="85" data-abbr="GR" data-isd="+30">Greece (+30)</option>
<option value="86" data-abbr="GL" data-isd="+299">Greenland (+299)</option>
<option value="87" data-abbr="GD" data-isd="+1">Grenada (+1)</option>
<option value="88" data-abbr="GP" data-isd="+590">Guadeloupe (+590)</option>
<option value="89" data-abbr="GU" data-isd="+1">Guam (+1)</option>
<option value="90" data-abbr="GT" data-isd="+502">Guatemala (+502)</option>
<option value="91" data-abbr="XU" data-isd="+44-1481">Guernsey and Alderney (+44-1481)</option>
<option value="92" data-abbr="GN" data-isd="+224">Guinea (+224)</option>
<option value="93" data-abbr="GW" data-isd="+245">Guinea-Bissau (+245)</option>
<option value="94" data-abbr="GY" data-isd="+592">Guyana (+592)</option>
<option value="95" data-abbr="HT" data-isd="+509">Haiti (+509)</option>
<option value="96" data-abbr="HM" data-isd="+672">Heard and McDonald Islands (+672)</option>
<option value="97" data-abbr="HN" data-isd="+504">Honduras (+504)</option>
<option value="98" data-abbr="HK" data-isd="+852">Hong Kong S.A.R. (+852)</option>
<option value="99" data-abbr="HU" data-isd="+36">Hungary (+36)</option>
<option value="100" data-abbr="IS" data-isd="+354">Iceland (+354)</option>
<option value="101" selected data-abbr="IN" data-isd="+91">India (+91)</option>
<option value="102" data-abbr="ID" data-isd="+62">Indonesia (+62)</option>
<option value="103" data-abbr="IR" data-isd="+98">Iran (+98)</option>
<option value="104" data-abbr="IQ" data-isd="+964">Iraq (+964)</option>
<option value="105" data-abbr="IE" data-isd="+353">Ireland (+353)</option>
<option value="106" data-abbr="IL" data-isd="+972">Israel (+972)</option>
<option value="107" data-abbr="IT" data-isd="+39">Italy (+39)</option>
<option value="108" data-abbr="JM" data-isd="+1">Jamaica (+1)</option>
<option value="109" data-abbr="JP" data-isd="+81">Japan (+81)</option>
<option value="110" data-abbr="XJ" data-isd="+44">Jersey (+44)</option>
<option value="111" data-abbr="JO" data-isd="+962">Jordan (+962)</option>
<option value="112" data-abbr="KZ" data-isd="+7">Kazakhstan (+7)</option>
<option value="113" data-abbr="KE" data-isd="+254">Kenya (+254)</option>
<option value="114" data-abbr="KI" data-isd="+686">Kiribati (+686)</option>
<option value="115" data-abbr="KP" data-isd="+850">Korea North (+850)</option>
<option value="116" data-abbr="KR" data-isd="+82">Korea South (+82)</option>
<option value="117" data-abbr="KW" data-isd="+965">Kuwait (+965)</option>
<option value="118" data-abbr="KG" data-isd="+996">Kyrgyzstan (+996)</option>
<option value="119" data-abbr="LA" data-isd="+856">Laos (+856)</option>
<option value="120" data-abbr="LV" data-isd="+371">Latvia (+371)</option>
<option value="121" data-abbr="LB" data-isd="+961">Lebanon (+961)</option>
<option value="122" data-abbr="LS" data-isd="+266">Lesotho (+266)</option>
<option value="123" data-abbr="LR" data-isd="+231">Liberia (+231)</option>
<option value="124" data-abbr="LY" data-isd="+218">Libya (+218)</option>
<option value="125" data-abbr="LI" data-isd="+423">Liechtenstein (+423)</option>
<option value="126" data-abbr="LT" data-isd="+370">Lithuania (+370)</option>
<option value="127" data-abbr="LU" data-isd="+352">Luxembourg (+352)</option>
<option value="128" data-abbr="MO" data-isd="+853">Macau S.A.R. (+853)</option>
<option value="129" data-abbr="MK" data-isd="+389">Macedonia (+389)</option>
<option value="130" data-abbr="MG" data-isd="+261">Madagascar (+261)</option>
<option value="131" data-abbr="MW" data-isd="+265">Malawi (+265)</option>
<option value="132" data-abbr="MY" data-isd="+60">Malaysia (+60)</option>
<option value="133" data-abbr="MV" data-isd="+960">Maldives (+960)</option>
<option value="134" data-abbr="ML" data-isd="+223">Mali (+223)</option>
<option value="135" data-abbr="MT" data-isd="+356">Malta (+356)</option>
<option value="136" data-abbr="XM" data-isd="+44">Man (Isle of) (+44)</option>
<option value="137" data-abbr="MH" data-isd="+692">Marshall Islands (+692)</option>
<option value="138" data-abbr="MQ" data-isd="+596">Martinique (+596)</option>
<option value="139" data-abbr="MR" data-isd="+222">Mauritania (+222)</option>
<option value="140" data-abbr="MU" data-isd="+230">Mauritius (+230)</option>
<option value="141" data-abbr="YT" data-isd="+262">Mayotte (+262)</option>
<option value="142" data-abbr="MX" data-isd="+52">Mexico (+52)</option>
<option value="143" data-abbr="FM" data-isd="+691">Micronesia (+691)</option>
<option value="144" data-abbr="MD" data-isd="+373">Moldova (+373)</option>
<option value="145" data-abbr="MC" data-isd="+377">Monaco (+377)</option>
<option value="146" data-abbr="MN" data-isd="+976">Mongolia (+976)</option>
<option value="147" data-abbr="MS" data-isd="+1">Montserrat (+1)</option>
<option value="148" data-abbr="MA" data-isd="+212">Morocco (+212)</option>
<option value="149" data-abbr="MZ" data-isd="+258">Mozambique (+258)</option>
<option value="150" data-abbr="MM" data-isd="+95">Myanmar (+95)</option>
<option value="151" data-abbr="NA" data-isd="+264">Namibia (+264)</option>
<option value="152" data-abbr="NR" data-isd="+674">Nauru (+674)</option>
<option value="153" data-abbr="NP" data-isd="+977">Nepal (+977)</option>
<option value="154" data-abbr="AN" data-isd="+599">Netherlands Antilles (+599)</option>
<option value="155" data-abbr="NL" data-isd="+31">Netherlands The (+31)</option>
<option value="156" data-abbr="NC" data-isd="+687">New Caledonia (+687)</option>
<option value="157" data-abbr="NZ" data-isd="+64">New Zealand (+64)</option>
<option value="158" data-abbr="NI" data-isd="+505">Nicaragua (+505)</option>
<option value="159" data-abbr="NE" data-isd="+227">Niger (+227)</option>
<option value="160" data-abbr="NG" data-isd="+234">Nigeria (+234)</option>
<option value="161" data-abbr="NU" data-isd="+683">Niue (+683)</option>
<option value="162" data-abbr="NF" data-isd="+672">Norfolk Island (+672)</option>
<option value="163" data-abbr="MP" data-isd="+672">Northern Mariana Islands (+672)</option>
<option value="164" data-abbr="NO" data-isd="+47">Norway (+47)</option>
<option value="165" data-abbr="OM" data-isd="+968">Oman (+968)</option>
<option value="166" data-abbr="PK" data-isd="+92">Pakistan (+92)</option>
<option value="167" data-abbr="PW" data-isd="+680">Palau (+680)</option>
<option value="168" data-abbr="PS" data-isd="+970">Palestinian Territory Occupied (+970)</option>
<option value="169" data-abbr="PA" data-isd="+507">Panama (+507)</option>
<option value="170" data-abbr="PG" data-isd="+675">Papua new Guinea (+675)</option>
<option value="171" data-abbr="PY" data-isd="+595">Paraguay (+595)</option>
<option value="172" data-abbr="PE" data-isd="+51">Peru (+51)</option>
<option value="173" data-abbr="PH" data-isd="+63">Philippines (+63)</option>
<option value="174" data-abbr="PN" data-isd="+64">Pitcairn Island (+64)</option>
<option value="175" data-abbr="PL" data-isd="+48">Poland (+48)</option>
<option value="176" data-abbr="PT" data-isd="+351">Portugal (+351)</option>
<option value="177" data-abbr="PR" data-isd="+1">Puerto Rico (+1)</option>
<option value="178" data-abbr="QA" data-isd="+974">Qatar (+974)</option>
<option value="179" data-abbr="RE" data-isd="+262">Reunion (+262)</option>
<option value="180" data-abbr="RO" data-isd="+40">Romania (+40)</option>
<option value="181" data-abbr="RU" data-isd="+7">Russia (+7)</option>
<option value="182" data-abbr="RW" data-isd="+250">Rwanda (+250)</option>
<option value="183" data-abbr="SH" data-isd="+290">Saint Helena (+290)</option>
<option value="184" data-abbr="KN" data-isd="+1">Saint Kitts And Nevis (+1)</option>
<option value="185" data-abbr="LC" data-isd="+1">Saint Lucia (+1)</option>
<option value="186" data-abbr="PM" data-isd="+508">Saint Pierre and Miquelon (+508)</option>
<option value="187" data-abbr="VC" data-isd="+1">Saint Vincent And The Grenadines (+1)</option>
<option value="188" data-abbr="WS" data-isd="+685">Samoa (+685)</option>
<option value="189" data-abbr="SM" data-isd="+378">San Marino (+378)</option>
<option value="190" data-abbr="ST" data-isd="+239">Sao Tome and Principe (+239)</option>
<option value="191" data-abbr="SA" data-isd="+966">Saudi Arabia (+966)</option>
<option value="192" data-abbr="SN" data-isd="+221">Senegal (+221)</option>
<option value="193" data-abbr="RS" data-isd="+381">Serbia (+381)</option>
<option value="194" data-abbr="SC" data-isd="+248">Seychelles (+248)</option>
<option value="195" data-abbr="SL" data-isd="+232">Sierra Leone (+232)</option>
<option value="196" data-abbr="SG" data-isd="+65">Singapore (+65)</option>
<option value="197" data-abbr="SK" data-isd="+421">Slovakia (+421)</option>
<option value="198" data-abbr="SI" data-isd="+386">Slovenia (+386)</option>
<option value="199" data-abbr="XG" data-isd="+44">Smaller Territories of the UK (+44)</option>
<option value="200" data-abbr="SB" data-isd="+677">Solomon Islands (+677)</option>
<option value="201" data-abbr="SO" data-isd="+252">Somalia (+252)</option>
<option value="202" data-abbr="ZA" data-isd="+27">South Africa (+27)</option>
<option value="203" data-abbr="GS" data-isd="+500">South Georgia (+500)</option>
<option value="204" data-abbr="SS" data-isd="+211">South Sudan (+211)</option>
<option value="205" data-abbr="ES" data-isd="+34">Spain (+34)</option>
<option value="206" data-abbr="LK" data-isd="+94">Sri Lanka (+94)</option>
<option value="207" data-abbr="SD" data-isd="+249">Sudan (+249)</option>
<option value="208" data-abbr="SR" data-isd="+597">Suriname (+597)</option>
<option value="209" data-abbr="SJ" data-isd="+47">Svalbard And Jan Mayen Islands (+47)</option>
<option value="210" data-abbr="SZ" data-isd="+268">Swaziland (+268)</option>
<option value="211" data-abbr="SE" data-isd="+46">Sweden (+46)</option>
<option value="212" data-abbr="CH" data-isd="+41">Switzerland (+41)</option>
<option value="213" data-abbr="SY" data-isd="+963">Syria (+963)</option>
<option value="214" data-abbr="TW" data-isd="+886">Taiwan (+886)</option>
<option value="215" data-abbr="TJ" data-isd="+992">Tajikistan (+992)</option>
<option value="216" data-abbr="TZ" data-isd="+255">Tanzania (+255)</option>
<option value="217" data-abbr="TH" data-isd="+66">Thailand (+66)</option>
<option value="218" data-abbr="TG" data-isd="+228">Togo (+228)</option>
<option value="219" data-abbr="TK" data-isd="+690">Tokelau (+690)</option>
<option value="220" data-abbr="TO" data-isd="+676">Tonga (+676)</option>
<option value="221" data-abbr="TT" data-isd="+1">Trinidad And Tobago (+1)</option>
<option value="222" data-abbr="TN" data-isd="+216">Tunisia (+216)</option>
<option value="223" data-abbr="TR" data-isd="+90">Turkey (+90)</option>
<option value="224" data-abbr="TM" data-isd="+993">Turkmenistan (+993)</option>
<option value="225" data-abbr="TC" data-isd="+1">Turks And Caicos Islands (+1)</option>
<option value="226" data-abbr="TV" data-isd="+688">Tuvalu (+688)</option>
<option value="227" data-abbr="UG" data-isd="+256">Uganda (+256)</option>
<option value="228" data-abbr="UA" data-isd="+380">Ukraine (+380)</option>
<option value="229" data-abbr="AE" data-isd="+971">United Arab Emirates (+971)</option>
<option value="230" data-abbr="UK" data-isd="+44">United Kingdom (+44)</option>
<option value="231" data-abbr="US" data-isd="+1">United States (+1)</option>
<option value="232" data-abbr="UM" data-isd="+1">United States Minor Outlying Islands (+1)</option>
<option value="233" data-abbr="UY" data-isd="+598">Uruguay (+598)</option>
<option value="234" data-abbr="UZ" data-isd="+998">Uzbekistan (+998)</option>
<option value="235" data-abbr="VU" data-isd="+678">Vanuatu (+678)</option>
<option value="236" data-abbr="VA" data-isd="+379">Vatican City State (Holy See) (+379)</option>
<option value="237" data-abbr="VE" data-isd="+58">Venezuela (+58)</option>
<option value="238" data-abbr="VN" data-isd="+84">Vietnam (+84)</option>
<option value="239" data-abbr="VG" data-isd="+1">Virgin Islands (British) (+1)</option>
<option value="240" data-abbr="VI" data-isd="+1">Virgin Islands (US) (+1)</option>
<option value="241" data-abbr="WF" data-isd="+681">Wallis And Futuna Islands (+681)</option>
<option value="242" data-abbr="EH" data-isd="+212">Western Sahara (+212)</option>
<option value="243" data-abbr="YE" data-isd="+967">Yemen (+967)</option>
<option value="244" data-abbr="YU" data-isd="+38">Yugoslavia (+38)</option>
<option value="245" data-abbr="ZM" data-isd="+260">Zambia (+260)</option>
<option value="246" data-abbr="ZW" data-isd="+263">Zimbabwe (+263)</option>
</select>
</div>
<input type="text" name="phone" class="phone-input" placeholder="Phone Number" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" required />
</div>
</div>
<div class="form-group mb-3 col-lg-12">
<textarea class="form-control" name="description" rows="2" placeholder="Your message" required style="font-size: 0.9rem; resize: none;"></textarea>
</div>
<div class="mb-3 col-sm-12">
<div class="g-recaptcha" data-sitekey="6LfrXv4nAAAAADudm8X0oYnxC8M7GIOJ_pMfS8TS"></div>
</div>
<div class="col-md-12">
<input type="submit" class="btn btn-primary w-100" value="Submit" />
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var radioCourse = document.getElementById('courseTypeRadio');
var radioBootcamp = document.getElementById('bootcampTypeRadio');
var courseSelect = document.getElementById('modalCourseSelect');
function loadCourseOptions(type) {
var url = type === 'bootcamp' ? '/api/homepage/bootcamps' : '/api/homepage/courses';
var $select = $(courseSelect);
$select.empty().append('<option value="" selected disabled>Loading...</option>');
if (typeof $.fn.select2 !== 'undefined') $select.trigger('change.select2');
$.get(url, function(response) {
$select.empty().append('<option value="" selected disabled>Select Course</option>');
if (response.success && response.data) {
response.data.forEach(function(item) {
$select.append(new Option(item.name, item.id));
});
}
if (typeof $.fn.select2 !== 'undefined') $select.trigger('change.select2');
});
}
if (radioCourse && radioBootcamp) {
radioCourse.addEventListener('change', function() {
if (this.checked) loadCourseOptions('course');
});
radioBootcamp.addEventListener('change', function() {
if (this.checked) loadCourseOptions('bootcamp');
});
}
var select2Initialized = false;
$('#popupModal').on('shown.bs.modal', function() {
if (typeof $.fn.select2 === 'undefined') return;
if (!select2Initialized) {
var $rightCol = $('#popupModal .connect-modal-form-col');
$('#modalCourseSelect').select2({
dropdownParent: $rightCol,
placeholder: 'Select Course',
allowClear: false,
width: '100%'
});
$('#modalCountrySelect').select2({
dropdownParent: $rightCol,
placeholder: 'Country',
allowClear: false,
width: '100%',
templateResult: function(data) {
if (!data.id) return data.text;
return $('<span>' + data.text + '</span>');
},
templateSelection: function(data) {
if (!data.id) return data.text;
var abbr = $(data.element).data('abbr');
var isd = $(data.element).data('isd');
return abbr + ' (' + isd + ')';
}
});
$('#modalCountrySelect').on('select2:open', function() {
setTimeout(function() {
$rightCol.find('.select2-dropdown').css('width', $rightCol.width() + 'px');
}, 0);
});
select2Initialized = true;
}
});
$('#popupModal').on('hidden.bs.modal', function() {
if (typeof $.fn.select2 === 'undefined') return;
$('#modalCourseSelect').select2('destroy');
$('#modalCountrySelect').select2('destroy');
select2Initialized = false;
});
// Handle form submission via AJAX
$('#advertisementEnquiryForm').on('submit', function(e) {
e.preventDefault();
var $form = $(this);
var formData = new FormData(this);
$.ajax({
url: $form.attr('action'),
type: 'POST',
data: formData,
contentType: false,
processData: false,
headers: {
'Accept': 'application/json'
},
success: function(response) {
if (response.success) {
showCustomNotification(response.message, 'success');
$form[0].reset();
setTimeout(function() {
$('#popupModal').modal('hide');
}, 1000);
} else {
showCustomNotification(response.message, 'error');
}
},
error: function(xhr) {
var errorMessage = 'An error occurred. Please try again.';
if (xhr.status === 422) {
var response = xhr.responseJSON;
if (response.message) {
errorMessage = response.message;
} else if (response.errors) {
var errors = Object.values(response.errors).flat();
errorMessage = errors[0] || errorMessage;
}
} else if (xhr.status === 429) {
var response = xhr.responseJSON;
errorMessage = response.message || 'Rate limit exceeded. Please try again later.';
} else if (xhr.responseJSON && xhr.responseJSON.message) {
errorMessage = xhr.responseJSON.message;
}
showCustomNotification(errorMessage, 'error');
}
});
});
});
</script>
<!--=================================
Modal Popup -->
<!--=================================
Back To Top -->
<!--<div id="back-to-top" class="back-to-top">-->
<!-- <a href="#"><i class="fas fa-chevron-up"></i></a>-->
<!--</div>-->
<!-- Floating WhatsApp Button -->
<div id="whatsapp-floating">
<a href="https://api.whatsapp.com/send?phone=9987184296" target="_blank" title="Chat with us on WhatsApp">
<img src="https://www.justacademy.co/images/whatsapp.webp" alt="whatsapp">
</a>
</div>
<!-- Mobile Bottom Buttons -->
<div class="mobile-bottom-buttons d-block d-md-none">
<button class="mobile-chat-btn" onclick="window.open('https://api.whatsapp.com/send?phone=9987184296', '_blank')">
<i class="fab fa-whatsapp"></i>
<span>Chat with us</span>
</button>
<button class="mobile-query-btn" onclick="toggleMobileQuery()">
<i class="fas fa-comment-dots"></i>
<span>Drop us a Query</span>
</button>
</div>
<!--=================================
Modal Popup -->
<!-- Book Mentor Session Modal -->
<div class="modal login fade" id="mentorSessionModal" tabindex="-1" role="dialog" aria-labelledby="mentorSessionModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header border-0" style="background-color: #b51d74;">
<h5 class="modal-title text-white" id="mentorSessionModalLabel">Book Mentor Session</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form method="post" class="form-flat-style" action="https://www.justacademy.co/mentor-session-booking">
<input type="hidden" name="_token" value="lkunKqVId1HQ3Kx3ei2Zu0YKAr1fg6NntemhifoY" autocomplete="off"> Desktop WhatsApp Button -->
<div id="" class="back-to-top d-none d-md-block">
<a href="https://api.whatsapp.com/send?phone=9987184296" target="_blank"><img src="https://www.justacademy.co/images/whatsapp.webp" alt="whatsapp" height="60px" width="60px"></a>
</div>
<div class="form-group mb-3 col-lg-6">
<label class="form-label">Your email</label>
<input type="email" name="email" class="form-control" placeholder="Your email" required />
</div>
<div class="form-group mb-3 col-lg-6">
<label class="form-label">Phone</label>
<input type="text" name="phone" class="form-control" placeholder="Phone" maxlength="10" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" required />
</div>
<div class="form-group mb-3 col-lg-6">
<label class="form-label">Country</label>
<select class="form-control ja-select2" name="country_id" data-placeholder="Select Country" required>
<option value="0" selected disabled>Select Country</option>
<option value="1">Afghanistan</option>
<option value="2">Albania</option>
<option value="3">Algeria</option>
<option value="4">American Samoa</option>
<option value="5">Andorra</option>
<option value="6">Angola</option>
<option value="7">Anguilla</option>
<option value="8">Antarctica</option>
<option value="9">Antigua And Barbuda</option>
<option value="10">Argentina</option>
<option value="11">Armenia</option>
<option value="12">Aruba</option>
<option value="13">Australia</option>
<option value="14">Austria</option>
<option value="15">Azerbaijan</option>
<option value="16">Bahamas The</option>
<option value="17">Bahrain</option>
<option value="18">Bangladesh</option>
<option value="19">Barbados</option>
<option value="20">Belarus</option>
<option value="21">Belgium</option>
<option value="22">Belize</option>
<option value="23">Benin</option>
<option value="24">Bermuda</option>
<option value="25">Bhutan</option>
<option value="26">Bolivia</option>
<option value="27">Bosnia and Herzegovina</option>
<option value="28">Botswana</option>
<option value="29">Bouvet Island</option>
<option value="30">Brazil</option>
<option value="31">British Indian Ocean Territory</option>
<option value="32">Brunei</option>
<option value="33">Bulgaria</option>
<option value="34">Burkina Faso</option>
<option value="35">Burundi</option>
<option value="36">Cambodia</option>
<option value="37">Cameroon</option>
<option value="38">Canada</option>
<option value="39">Cape Verde</option>
<option value="40">Cayman Islands</option>
<option value="41">Central African Republic</option>
<option value="42">Chad</option>
<option value="43">Chile</option>
<option value="44">China</option>
<option value="45">Christmas Island</option>
<option value="46">Cocos (Keeling) Islands</option>
<option value="47">Colombia</option>
<option value="48">Comoros</option>
<option value="49">Republic Of The Congo</option>
<option value="50">Democratic Republic Of The Congo</option>
<option value="51">Cook Islands</option>
<option value="52">Costa Rica</option>
<option value="53">Cote D'Ivoire (Ivory Coast)</option>
<option value="54">Croatia (Hrvatska)</option>
<option value="55">Cuba</option>
<option value="56">Cyprus</option>
<option value="57">Czech Republic</option>
<option value="58">Denmark</option>
<option value="59">Djibouti</option>
<option value="60">Dominica</option>
<option value="61">Dominican Republic</option>
<option value="62">East Timor</option>
<option value="63">Ecuador</option>
<option value="64">Egypt</option>
<option value="65">El Salvador</option>
<option value="66">Equatorial Guinea</option>
<option value="67">Eritrea</option>
<option value="68">Estonia</option>
<option value="69">Ethiopia</option>
<option value="70">External Territories of Australia</option>
<option value="71">Falkland Islands</option>
<option value="72">Faroe Islands</option>
<option value="73">Fiji Islands</option>
<option value="74">Finland</option>
<option value="75">France</option>
<option value="76">French Guiana</option>
<option value="77">French Polynesia</option>
<option value="78">French Southern Territories</option>
<option value="79">Gabon</option>
<option value="80">Gambia The</option>
<option value="81">Georgia</option>
<option value="82">Germany</option>
<option value="83">Ghana</option>
<option value="84">Gibraltar</option>
<option value="85">Greece</option>
<option value="86">Greenland</option>
<option value="87">Grenada</option>
<option value="88">Guadeloupe</option>
<option value="89">Guam</option>
<option value="90">Guatemala</option>
<option value="91">Guernsey and Alderney</option>
<option value="92">Guinea</option>
<option value="93">Guinea-Bissau</option>
<option value="94">Guyana</option>
<option value="95">Haiti</option>
<option value="96">Heard and McDonald Islands</option>
<option value="97">Honduras</option>
<option value="98">Hong Kong S.A.R.</option>
<option value="99">Hungary</option>
<option value="100">Iceland</option>
<option value="101">India</option>
<option value="102">Indonesia</option>
<option value="103">Iran</option>
<option value="104">Iraq</option>
<option value="105">Ireland</option>
<option value="106">Israel</option>
<option value="107">Italy</option>
<option value="108">Jamaica</option>
<option value="109">Japan</option>
<option value="110">Jersey</option>
<option value="111">Jordan</option>
<option value="112">Kazakhstan</option>
<option value="113">Kenya</option>
<option value="114">Kiribati</option>
<option value="115">Korea North</option>
<option value="116">Korea South</option>
<option value="117">Kuwait</option>
<option value="118">Kyrgyzstan</option>
<option value="119">Laos</option>
<option value="120">Latvia</option>
<option value="121">Lebanon</option>
<option value="122">Lesotho</option>
<option value="123">Liberia</option>
<option value="124">Libya</option>
<option value="125">Liechtenstein</option>
<option value="126">Lithuania</option>
<option value="127">Luxembourg</option>
<option value="128">Macau S.A.R.</option>
<option value="129">Macedonia</option>
<option value="130">Madagascar</option>
<option value="131">Malawi</option>
<option value="132">Malaysia</option>
<option value="133">Maldives</option>
<option value="134">Mali</option>
<option value="135">Malta</option>
<option value="136">Man (Isle of)</option>
<option value="137">Marshall Islands</option>
<option value="138">Martinique</option>
<option value="139">Mauritania</option>
<option value="140">Mauritius</option>
<option value="141">Mayotte</option>
<option value="142">Mexico</option>
<option value="143">Micronesia</option>
<option value="144">Moldova</option>
<option value="145">Monaco</option>
<option value="146">Mongolia</option>
<option value="147">Montserrat</option>
<option value="148">Morocco</option>
<option value="149">Mozambique</option>
<option value="150">Myanmar</option>
<option value="151">Namibia</option>
<option value="152">Nauru</option>
<option value="153">Nepal</option>
<option value="154">Netherlands Antilles</option>
<option value="155">Netherlands The</option>
<option value="156">New Caledonia</option>
<option value="157">New Zealand</option>
<option value="158">Nicaragua</option>
<option value="159">Niger</option>
<option value="160">Nigeria</option>
<option value="161">Niue</option>
<option value="162">Norfolk Island</option>
<option value="163">Northern Mariana Islands</option>
<option value="164">Norway</option>
<option value="165">Oman</option>
<option value="166">Pakistan</option>
<option value="167">Palau</option>
<option value="168">Palestinian Territory Occupied</option>
<option value="169">Panama</option>
<option value="170">Papua new Guinea</option>
<option value="171">Paraguay</option>
<option value="172">Peru</option>
<option value="173">Philippines</option>
<option value="174">Pitcairn Island</option>
<option value="175">Poland</option>
<option value="176">Portugal</option>
<option value="177">Puerto Rico</option>
<option value="178">Qatar</option>
<option value="179">Reunion</option>
<option value="180">Romania</option>
<option value="181">Russia</option>
<option value="182">Rwanda</option>
<option value="183">Saint Helena</option>
<option value="184">Saint Kitts And Nevis</option>
<option value="185">Saint Lucia</option>
<option value="186">Saint Pierre and Miquelon</option>
<option value="187">Saint Vincent And The Grenadines</option>
<option value="188">Samoa</option>
<option value="189">San Marino</option>
<option value="190">Sao Tome and Principe</option>
<option value="191">Saudi Arabia</option>
<option value="192">Senegal</option>
<option value="193">Serbia</option>
<option value="194">Seychelles</option>
<option value="195">Sierra Leone</option>
<option value="196">Singapore</option>
<option value="197">Slovakia</option>
<option value="198">Slovenia</option>
<option value="199">Smaller Territories of the UK</option>
<option value="200">Solomon Islands</option>
<option value="201">Somalia</option>
<option value="202">South Africa</option>
<option value="203">South Georgia</option>
<option value="204">South Sudan</option>
<option value="205">Spain</option>
<option value="206">Sri Lanka</option>
<option value="207">Sudan</option>
<option value="208">Suriname</option>
<option value="209">Svalbard And Jan Mayen Islands</option>
<option value="210">Swaziland</option>
<option value="211">Sweden</option>
<option value="212">Switzerland</option>
<option value="213">Syria</option>
<option value="214">Taiwan</option>
<option value="215">Tajikistan</option>
<option value="216">Tanzania</option>
<option value="217">Thailand</option>
<option value="218">Togo</option>
<option value="219">Tokelau</option>
<option value="220">Tonga</option>
<option value="221">Trinidad And Tobago</option>
<option value="222">Tunisia</option>
<option value="223">Turkey</option>
<option value="224">Turkmenistan</option>
<option value="225">Turks And Caicos Islands</option>
<option value="226">Tuvalu</option>
<option value="227">Uganda</option>
<option value="228">Ukraine</option>
<option value="229">United Arab Emirates</option>
<option value="230">United Kingdom</option>
<option value="231">United States</option>
<option value="232">United States Minor Outlying Islands</option>
<option value="233">Uruguay</option>
<option value="234">Uzbekistan</option>
<option value="235">Vanuatu</option>
<option value="236">Vatican City State (Holy See)</option>
<option value="237">Venezuela</option>
<option value="238">Vietnam</option>
<option value="239">Virgin Islands (British)</option>
<option value="240">Virgin Islands (US)</option>
<option value="241">Wallis And Futuna Islands</option>
<option value="242">Western Sahara</option>
<option value="243">Yemen</option>
<option value="244">Yugoslavia</option>
<option value="245">Zambia</option>
<option value="246">Zimbabwe</option>
</select>
</div>
<div class="form-group mb-3 col-lg-12">
<label class="form-label">Course Interest</label>
<div class="btn-group btn-group-sm mb-2 w-100" role="group">
<input type="radio" class="btn-check" name="course_type" id="layoutMentorCourseRadio" value="course" autocomplete="off" checked>
<label class="btn btn-outline-brand m-0" for="layoutMentorCourseRadio" style="font-size:0.85rem;">Courses</label>
<input type="radio" class="btn-check" name="course_type" id="layoutMentorBootcampRadio" value="bootcamp" autocomplete="off">
<label class="btn btn-outline-brand m-0" for="layoutMentorBootcampRadio" style="font-size:0.85rem;">Career Programs</label>
</div>
<select class="form-control ja-select2" name="course" id="layoutMentorCourseSelect" data-placeholder="Select Course" required>
<option value="0" selected disabled>Select Course</option>
<option value="1">HTML Training</option>
<option value="2">Android App Development</option>
<option value="3">Manual Training</option>
<option value="4">Adobe Training</option>
<option value="5">Digital Marketing</option>
<option value="6">Core Java Training</option>
<option value="7">CSS Training</option>
<option value="8">Bootstrap Training</option>
<option value="9">Javascript Training</option>
<option value="10">React JS Training</option>
<option value="11">Node JS Training</option>
<option value="12">Angular Training</option>
<option value="13">Django Training</option>
<option value="14">PHP Training</option>
<option value="16">Laravel Training</option>
<option value="17">Codeignitor Training</option>
<option value="18">Wordpress Training</option>
<option value="19">jQuery Training</option>
<option value="20">IOS Training</option>
<option value="21">Flutter Training</option>
<option value="22">Ionic Training</option>
<option value="23">React Native Training</option>
<option value="24">Augmented Reality Training</option>
<option value="25">Advance Java Training</option>
<option value="26">Selenium Training</option>
<option value="27">Performance Training</option>
<option value="28">Photoshop Training</option>
<option value="29">Illustrator Training</option>
<option value="30">Figma Training</option>
<option value="31">SEO Training</option>
<option value="379">SAP ABAP Training</option>
<option value="382">Microsoft Azure Training</option>
<option value="392">ASP .NET Training</option>
<option value="400">SAP ABAP On HANA Training</option>
<option value="429">SAP FIORI Training</option>
<option value="459">SAP MM Training</option>
<option value="461">SAP SD Training</option>
<option value="508">PMP Certification Training</option>
<option value="521">PMI® Agile Certified Practitioner Training</option>
<option value="522">Python Training</option>
<option value="523">Machine Learning</option>
<option value="528">Microsoft Power BI Training</option>
<option value="538">Tableau Training</option>
<option value="569">Alteryx Training</option>
<option value="572">MySQL Training</option>
<option value="585">SalesForce Training</option>
<option value="634">Mobile App Testing Using Appium Training</option>
<option value="635">Continuous Testing in DevOps Training</option>
<option value="636">AWS Training</option>
<option value="637">Deep Learning</option>
<option value="638">DevOps Training</option>
<option value="640">Certified Scrum Master® (CSM) Certification Training</option>
<option value="641">PRINCE2® Foundation & Practitioner Certification Course Training</option>
<option value="642">GCP Certification Training</option>
<option value="23220">Advanced Excel & Power BI</option>
<option value="23221">Power BI and SQL</option>
<option value="23222">Data Analyst Foundation - Advanced Excel & SQL +&Power BI</option>
</select>
</div>
<div class="form-group mb-3 col-lg-12">
<label class="form-label">Preferred Date & Time</label>
<input type="datetime-local" name="preferred_datetime" class="form-control" required />
</div>
<div class="form-group mb-3 col-lg-12">
<label class="form-label">Your message</label>
<textarea class="form-control" name="description" rows="3" placeholder="Your message" required></textarea>
</div>
<div class="mb-3 col-sm-12">
<div class="g-recaptcha" data-sitekey="6LfrXv4nAAAAADudm8X0oYnxC8M7GIOJ_pMfS8TS"></div>
</div>
<div class="col-md-12">
<input type="submit" class="btn btn-primary w-100" value="Book Session" />
</div>
</div>
</form>
<script>
document.getElementById('layoutMentorCourseRadio').addEventListener('change', function() { if (this.checked) window.loadCourseTypeOptions('course', '#layoutMentorCourseSelect'); });
document.getElementById('layoutMentorBootcampRadio').addEventListener('change', function() { if (this.checked) window.loadCourseTypeOptions('bootcamp', '#layoutMentorCourseSelect'); });
</script>
</div>
</div>
</div>
</div>
<!--=================================
Back To Top -->
<!--=================================
Javascript -->
<!-- JS Global Compulsory (Critical path) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.8/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script>
<!-- Custom Template Scripts (must run before inline code) -->
<script src="https://www.justacademy.co/js/custom.js?v=8"></script>
<script src="https://www.justacademy.co/js/custom2.js?v=1"></script>
<!-- Page JS Implementing Plugins (Deferred - non-critical) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" defer></script>
<script src="https://www.justacademy.co/js/counter/jquery.countTo.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js" defer></script>
<script src="https://www.justacademy.co/js/swiperanimation/SwiperAnimation.min.js" defer></script>
<script src="https://www.justacademy.co/js/shuffle/shuffle.min.js" defer></script>
<script src="https://www.justacademy.co/js/jarallax/jarallax.min.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js" defer></script>
<script src="https://www.justacademy.co/js/jquery.appear.js" defer></script>
<!-- Global Error Handling -->
<!-- Template Scripts (Do not remove)-->
<script src="https://www.justacademy.co/js/custom.js?v=8" defer></script>
<script src="https://www.justacademy.co/js/custom2.js?v=1" defer></script>
<script>
function openMentorModal() {
$('#mentorSessionModal').modal('show');
}
window.loadCourseTypeOptions = function(type, selectEl) {
var url = type === 'bootcamp' ? '/api/homepage/bootcamps' : '/api/homepage/courses';
var label = type === 'bootcamp' ? 'Career Program' : 'Course';
var $sel = $(selectEl);
$sel.empty().append('<option value="" selected disabled>Loading...</option>');
if (typeof $.fn.select2 !== 'undefined' && $sel.data('select2')) $sel.trigger('change.select2');
$.get(url, function(resp) {
$sel.empty().append('<option value="" selected disabled>Select ' + label + '</option>');
(resp.data || []).forEach(function(item) { $sel.append(new Option(item.name, item.id)); });
if (typeof $.fn.select2 !== 'undefined' && $sel.data('select2')) $sel.trigger('change.select2');
});
};
</script>
<script type="text/javascript">
$("document").ready(function() {
setTimeout(function() {
$("div.alert").remove();
}, 5000);
});
</script>
<script>
// Countdown function for timers
function countDown(endDate, elementId) {
if (!endDate) {
document.getElementById(elementId).innerHTML = "Offer Expired";
return;
}
var timer = setInterval(function() {
var now = new Date().getTime();
var endTime = new Date(endDate).getTime();
var distance = endTime - now;
if (distance < 0) {
clearInterval(timer);
document.getElementById(elementId).innerHTML = "Offer Expired";
return;
}
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
var timeString = "";
if (days > 0) {
timeString += days + "d ";
}
timeString += hours.toString().padStart(2, '0') + "h " +
minutes.toString().padStart(2, '0') + "m " +
seconds.toString().padStart(2, '0') + "s";
document.getElementById(elementId).innerHTML = timeString;
}, 1000);
}
// Search overlay functionality - Version 2024-08-23-v3 - FINAL DB ONLY
window.addEventListener('load', function() {
var offer = [];
if (offer.length > 0) {
countDown(offer[0].last_date, 'timer');
// Show header offer banner with animation
setTimeout(function() {
$('#header-offer').addClass('show');
}, 2000); // Show banner after 2 seconds
} else {
// No offers available, hide timer elements
if (document.getElementById('timer')) {
document.getElementById('timer').innerHTML = "No active offers";
}
}
});
// Check if the session variable is set
var popupShown = sessionStorage.getItem('popupShown');
var showPopupFromPHP = true; // Respect PHP popup logic
// Reset popup session daily
var lastResetDate = localStorage.getItem('lastResetDate');
var today = new Date().toDateString();
if (lastResetDate !== today) {
// Reset popup session for new day
sessionStorage.removeItem('popupShown');
localStorage.setItem('lastResetDate', today);
popupShown = null;
}
// Popup will only show when user clicks "GRAB NOW" - no automatic popup
// The modal is triggered manually by the .grab-now-link click event
// Search functionality
$(document).ready(function() {
const searchTrigger = $('#searchTrigger');
const searchTriggerMobile = $('#searchTriggerMobile');
const searchOverlay = $('#searchOverlay');
const searchClose = $('#searchClose');
const searchInputFullscreen = $('#courseSearchFullscreen');
// Store original body overflow state
var originalBodyOverflow = $('body').css('overflow');
// Open full-screen search (desktop)
searchTrigger.on('click', function() {
searchOverlay.fadeIn(300);
searchInputFullscreen.focus();
$('body').css('overflow', 'hidden'); // Prevent background scrolling
// Load search suggestions
loadSearchSuggestions();
});
// Open full-screen search (mobile)
searchTriggerMobile.on('click', function() {
searchOverlay.fadeIn(300);
searchInputFullscreen.focus();
$('body').css('overflow', 'hidden'); // Prevent background scrolling
// Load search suggestions
loadSearchSuggestions();
});
// Close full-screen search
searchClose.on('click', function() {
// Clear any pending search timeout
if (searchTimeout) {
clearTimeout(searchTimeout);
searchTimeout = null;
}
// Reset search input
searchInputFullscreen.val('');
// Show left sidebar
$('#leftSidebarSection').show();
// Return right column to normal width
$('#rightColumnSection').removeClass('col-lg-12').addClass('col-lg-8');
// Reset to original layout and title
$('.search-section-fullscreen h6').text('Popular Courses');
// Display default courses
if (allCoursesData.length > 0) {
displayDefaultCourses(allCoursesData);
} else {
// No fallback - if no admin-managed courses, hide the section
$('#rightColumnSection').hide();
}
// Close overlay
searchOverlay.fadeOut(300);
$('body').css('overflow', originalBodyOverflow); // Restore original scroll state
});
// Close on escape key
$(document).on('keydown', function(e) {
if (e.key === 'Escape' && searchOverlay.is(':visible')) {
searchClose.click();
}
});
// Close when clicking on overlay background
searchOverlay.on('click', function(e) {
if (e.target === this) {
searchClose.click();
}
});
// Global variable to store courses data
let allCoursesData = [];
let searchTimeout = null;
// Load courses data on page load - DISABLED to use only search_index popular courses
// loadCoursesData('');
// Load search suggestions on page load
loadSearchSuggestions();
function loadSearchSuggestions() {
// Add cache-busting parameter
const cacheKey = Date.now();
$.get("https://www.justacademy.co/api/search-suggestions" + "?_=" + cacheKey, function(response) {
if (response.success) {
// Load popular searches
const popularSearchesList = $('#popularSearchesList');
popularSearchesList.empty();
if (response.popular_searches && response.popular_searches.length > 0) {
response.popular_searches.forEach(function(search) {
popularSearchesList.append(`
<a href="javascript:void(0)" class="search-item-fullscreen">${search.text}</a>
`);
});
}
// Load popular categories
const popularCategoriesList = $('#popularCategoriesList');
popularCategoriesList.empty();
if (response.popular_categories && response.popular_categories.length > 0) {
response.popular_categories.forEach(function(category) {
popularCategoriesList.append(`
<span class="category-tag-fullscreen">${category.text}</span>
`);
});
}
// Load popular courses from database (new implementation)
if (response.popular_courses && response.popular_courses.length > 0) {
allCoursesData = response.popular_courses;
displayDefaultCourses(response.popular_courses);
// Show the popular courses section
$('#rightColumnSection').show();
} else {
// Hide the entire popular courses section if no admin-managed courses found
$('#rightColumnSection').hide();
allCoursesData = [];
}
} else {
// API response not successful
}
}).fail(function(xhr, status, error) {
// Failed to load search suggestions
// No fallback - if API fails, don't show anything
const popularSearchesList = $('#popularSearchesList');
const popularCategoriesList = $('#popularCategoriesList');
popularSearchesList.empty();
popularCategoriesList.empty();
// Hide popular courses section on API failure
$('#rightColumnSection').hide();
allCoursesData = [];
});
}
function loadCoursesData(searchTerm = '') {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
url: "https://www.justacademy.co/search/" + encodeURIComponent(searchTerm || 'all'),
type: 'POST',
success: function(response) {
if (response.success) {
allCoursesData = response.courses;
if (searchTerm) {
displaySearchResults(response.courses, searchTerm);
} else {
displayDefaultCourses(response.courses);
}
}
},
error: function(xhr, status, error) {
displayError('Search failed. Please try again.');
}
});
}
function displaySearchResults(courses, searchTerm) {
// Change title to "Search Results"
$('.search-title').text('Search Results');
let coursesHTML = '';
if (courses.length > 0) {
// Show search results in flexible grid
coursesHTML = '<div class="d-flex flex-wrap gap-3 justify-content-start">';
courses.forEach((course, index) => {
const isAuthorized = course.name.includes('PMP') ?
'<div style="background-color: #ff6b35; color: white; padding: 10px; text-align: center; font-size: 12px; font-weight: bold;">Authorized Training Provider</div>' :
`<img src="${course.image}" alt="${course.image_alt}" class="course-image-fullscreen">`;
// Limit description to 3 lines (approximately 100 characters)
const limitedDescription = course.description.length > 100 ?
course.description.substring(0, 100) + '...' :
course.description;
coursesHTML += `
<div class="course-card-fullscreen" style="flex: 1 1 300px; min-width: 280px; max-width: 350px;">
${isAuthorized}
<div class="course-info-fullscreen">
<h6>${course.name}</h6>
<p class="course-description-fullscreen" style="color: #666; font-size: 14px; line-height: 1.4; margin-bottom: 15px;">${limitedDescription}</p>
<a href="${course.url}" class="know-more-btn">
KNOW MORE <i class="fas fa-arrow-right"></i>
</a>
</div>
</div>
`;
});
coursesHTML += '</div>';
} else {
// Show "Course Not found" with popular courses as recommendations
$('.search-title').text('Course Not found');
coursesHTML = `
<div class="text-center mb-4">
<p class="text-muted mb-3">No courses found matching "${searchTerm}". Here are some popular courses you might like:</p>
</div>
<div class="d-flex flex-wrap gap-3 justify-content-start">`;
// Show all courses as recommendations
allCoursesData.slice(0, 6).forEach((course, index) => {
const isAuthorized = course.name.includes('PMP') ?
'<div style="background-color: #ff6b35; color: white; padding: 10px; text-align: center; font-size: 12px; font-weight: bold;">Authorized Training Provider</div>' :
`<img src="${course.image}" alt="${course.image_alt}" class="course-image-fullscreen">`;
// Limit description to 3 lines (approximately 100 characters)
const limitedDescription = course.description.length > 100 ?
course.description.substring(0, 100) + '...' :
course.description;
coursesHTML += `
<div class="course-card-fullscreen" style="flex: 1 1 300px; min-width: 280px; max-width: 350px;">
${isAuthorized}
<div class="course-info-fullscreen">
<h6>${course.name}</h6>
<p class="course-description-fullscreen" style="color: #666; font-size: 14px; line-height: 1.4; margin-bottom: 15px;">${limitedDescription}</p>
<a href="${course.url}" class="know-more-btn">
KNOW MORE <i class="fas fa-arrow-right"></i>
</a>
</div>
</div>
`;
});
coursesHTML += '</div>';
}
$('#coursesGrid').html(coursesHTML);
}
function displayDefaultCourses(courses) {
$('.search-title').text('Popular Courses');
let coursesHTML = '';
courses.slice(0, 4).forEach((course, index) => {
const isAuthorized = course.name.includes('PMP') ?
'<div style="background-color: #ff6b35; color: white; padding: 10px; text-align: center; font-size: 12px; font-weight: bold;">Authorized Training Provider</div>' :
`<img src="${course.image}" alt="${course.image_alt}" class="course-image-fullscreen">`;
// Limit description to 3 lines (approximately 100 characters)
const limitedDescription = course.description.length > 100 ?
course.description.substring(0, 100) + '...' :
course.description;
coursesHTML += `
<div class="course-card-fullscreen" style="flex: 1 1 300px; min-width: 280px; max-width: 350px;">
${isAuthorized}
<div class="course-info-fullscreen">
<h6>${course.name}</h6>
<p class="course-description-fullscreen" style="color: #666; font-size: 14px; line-height: 1.4; margin-bottom: 15px;">${limitedDescription}</p>
<a href="${course.url}" class="know-more-btn">
KNOW MORE <i class="fas fa-arrow-right"></i>
</a>
</div>
</div>
`;
});
$('#coursesGrid').html(coursesHTML);
}
function displayError(message) {
$('#coursesGrid').html(`<div class="text-center col-12"><p class="text-danger">${message}</p></div>`);
}
// Search functionality in fullscreen
searchInputFullscreen.on('input', function() {
const searchTerm = $(this).val().trim();
// Clear previous timeout
if (searchTimeout) {
clearTimeout(searchTimeout);
}
if (searchTerm.length > 0) {
// Hide left sidebar (categories + searches) when searching
$('#leftSidebarSection').hide();
// Expand right column to full width when searching
$('#rightColumnSection').removeClass('col-lg-8').addClass('col-lg-12');
// Debounce search requests
searchTimeout = setTimeout(() => {
loadCoursesData(searchTerm);
}, 100);
} else {
// Show left sidebar when search is empty
$('#leftSidebarSection').show();
// Return right column to normal width
$('#rightColumnSection').removeClass('col-lg-12').addClass('col-lg-8');
// Reset to original layout and title
$('.search-title').text('Popular Courses');
// Display default courses
if (allCoursesData.length > 0) {
displayDefaultCourses(allCoursesData);
} else {
// No fallback - if no admin-managed courses, hide the section
$('#rightColumnSection').hide();
}
}
});
// Handle clicks on popular search items
$(document).on('click', '.search-item-fullscreen', function(e) {
e.preventDefault();
const searchTerm = $(this).text().trim();
// Set the search input value
searchInputFullscreen.val(searchTerm);
// Hide left sidebar
$('#leftSidebarSection').hide();
// Expand right column to full width when searching
$('#rightColumnSection').removeClass('col-lg-8').addClass('col-lg-12');
// Trigger search
loadCoursesData(searchTerm);
});
// Handle clicks on popular category tags
$(document).on('click', '.category-tag-fullscreen', function(e) {
e.preventDefault();
const categoryTerm = $(this).text().trim();
// Set the search input value
searchInputFullscreen.val(categoryTerm);
// Hide left sidebar
$('#leftSidebarSection').hide();
// Expand right column to full width when searching
$('#rightColumnSection').removeClass('col-lg-8').addClass('col-lg-12');
// Trigger search
loadCoursesData(categoryTerm);
});
});
// Offer Carousel Management
$(document).ready(function() {
const carousel = $('#offer-carousel');
const slides = $('.offer-slide');
const indicators = $('.indicator');
const totalSlides = slides.length;
let currentSlide = 0;
let carouselInterval;
let isCarouselPaused = false;
let timerIntervals = {};
// Check for closed offers from localStorage
function getClosedOffers() {
const today = new Date().toDateString();
const stored = localStorage.getItem('closedOffers_' + today);
return stored ? JSON.parse(stored) : [];
}
// Save closed offer to localStorage
function saveClosedOffer(offerId) {
const today = new Date().toDateString();
let closedOffers = getClosedOffers();
if (!closedOffers.includes(offerId)) {
closedOffers.push(offerId);
localStorage.setItem('closedOffers_' + today, JSON.stringify(closedOffers));
}
}
// Hide closed offers
function hideClosedOffers() {
const closedOffers = getClosedOffers();
closedOffers.forEach(function(offerId) {
$(`[data-offer-id="${offerId}"]`).hide();
});
// Update visible slides
updateVisibleSlides();
}
// Update visible slides and reset carousel
function updateVisibleSlides() {
const visibleSlides = $('.offer-slide:visible');
const visibleIndicators = $('.indicator');
if (visibleSlides.length === 0) {
$('#offer-carousel-container').hide();
return;
}
// Hide indicators if only one or no visible slides
if (visibleSlides.length <= 1) {
$('.carousel-indicators').hide();
stopCarousel(); // Stop auto-scrolling when only one offer
} else {
$('.carousel-indicators').show();
// Update indicators to match visible slides
visibleIndicators.each(function() {
const indicatorIndex = $(this).data('index');
const correspondingSlide = $(`.offer-slide[data-index="${indicatorIndex}"]`);
if (correspondingSlide.is(':visible')) {
$(this).show();
} else {
$(this).hide();
}
});
// Restart carousel if stopped
if (!carouselInterval) {
startCarousel();
}
}
// Reset current slide if it's hidden
if (!slides.eq(currentSlide).is(':visible')) {
currentSlide = 0;
// Find first visible slide
visibleSlides.each(function(index) {
const slideIndex = $(this).data('index');
if (slideIndex !== undefined) {
currentSlide = slideIndex;
return false;
}
});
}
updateCarousel();
updateIndicators();
}
// Initialize offer timers
function initTimers() {
const offerData = [];
offerData.forEach(function(offer) {
if (offer.last_date) {
startTimer(offer.id, offer.last_date);
}
});
}
// Start countdown timer for specific offer
function startTimer(offerId, lastDate) {
const timerElements = $(`.offer-timer[data-offer-id="${offerId}"]`);
timerIntervals[offerId] = setInterval(function() {
const now = new Date().getTime();
const endTime = new Date(lastDate).getTime();
const distance = endTime - now;
if (distance < 0) {
timerElements.text("EXPIRED");
clearInterval(timerIntervals[offerId]);
return;
}
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
let timeString = "";
if (days > 0) timeString += days + "d ";
timeString += hours.toString().padStart(2, '0') + "h " +
minutes.toString().padStart(2, '0') + "m " +
seconds.toString().padStart(2, '0') + "s";
timerElements.text(timeString);
}, 1000);
}
// Update carousel position
function updateCarousel() {
const visibleSlides = $('.offer-slide:visible');
if (visibleSlides.length === 0) return;
// Find the index of the current visible slide
let actualIndex = 0;
visibleSlides.each(function(index) {
if ($(this).data('index') === currentSlide) {
actualIndex = index;
return false;
}
});
const translateX = -actualIndex * 100;
carousel.css('transform', `translateX(${translateX}%)`);
}
// Update indicators
function updateIndicators() {
indicators.removeClass('active').css('background', 'rgba(255,255,255,0.6)');
$(`.indicator[data-index="${currentSlide}"]`).addClass('active').css('background', 'rgba(255,255,255,1)');
}
// Next slide
function nextSlide() {
const visibleSlides = $('.offer-slide:visible');
if (visibleSlides.length <= 1) return;
let found = false;
for (let i = currentSlide + 1; i < totalSlides; i++) {
if ($(`[data-index="${i}"]`).is(':visible')) {
currentSlide = i;
found = true;
break;
}
}
if (!found) {
// Go to first visible slide
visibleSlides.each(function() {
const slideIndex = $(this).data('index');
if (slideIndex !== undefined) {
currentSlide = slideIndex;
return false;
}
});
}
updateCarousel();
updateIndicators();
}
// Start automatic carousel
function startCarousel() {
if (isCarouselPaused) return;
carouselInterval = setInterval(function() {
if (!isCarouselPaused && $('.offer-slide:visible').length > 1) {
nextSlide();
}
}, 10000); // 10 seconds
}
// Stop carousel
function stopCarousel() {
clearInterval(carouselInterval);
}
// Pause carousel
function pauseCarousel() {
isCarouselPaused = true;
stopCarousel();
}
// Resume carousel
function resumeCarousel() {
isCarouselPaused = false;
startCarousel();
}
// Update modal content based on current offer
function updateModalContent() {
const currentOfferSlide = $(`.offer-slide[data-index="${currentSlide}"]`);
if (currentOfferSlide.length) {
const offerId = currentOfferSlide.data('offer-id');
const offerData = [];
const currentOffer = offerData.find(o => o.id == offerId);
if (currentOffer) {
let offerText = '';
if (currentOffer.offer) offerText += currentOffer.offer;
if (currentOffer.course_id && currentOffer.course) {
offerText += ' | ' + currentOffer.course.name;
}
$('#current-offer-text').html('<b>' + offerText + '</b>');
$('#modal-timer').attr('data-offer-id', offerId).addClass('offer-timer');
// Auto-select course if available in offer and hide dropdown
if (currentOffer.course_id) {
const courseSelect = $('#courseOffer select[name="course"]');
const courseFormGroup = courseSelect.closest('.form-group');
if (courseSelect.length) {
courseSelect.val(currentOffer.course_id);
// Hide the course selection dropdown
courseFormGroup.hide();
// Trigger change event for selectpicker if used
if (courseSelect.hasClass('ja-select2')) {
courseSelect.trigger('change');
}
}
} else {
// Show course dropdown if no course_id in offer
const courseSelect = $('#courseOffer select[name="course"]');
const courseFormGroup = courseSelect.closest('.form-group');
courseFormGroup.show();
}
// Start timer for modal if not already started
if (currentOffer.last_date && !timerIntervals[offerId + '_modal']) {
startModalTimer(offerId, currentOffer.last_date);
}
}
}
}
// Start modal timer
function startModalTimer(offerId, lastDate) {
const modalTimer = $('#modal-timer');
timerIntervals[offerId + '_modal'] = setInterval(function() {
const now = new Date().getTime();
const endTime = new Date(lastDate).getTime();
const distance = endTime - now;
if (distance < 0) {
modalTimer.text("EXPIRED");
clearInterval(timerIntervals[offerId + '_modal']);
return;
}
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
let timeString = "";
if (days > 0) timeString += days + "d ";
timeString += hours.toString().padStart(2, '0') + "h " +
minutes.toString().padStart(2, '0') + "m " +
seconds.toString().padStart(2, '0') + "s";
modalTimer.text(timeString);
}, 1000);
}
// Event Handlers
// Close individual offer
$(document).on('click', '.offer-close-btn', function(e) {
e.preventDefault();
e.stopPropagation();
const offerId = $(this).data('offer-id');
saveClosedOffer(offerId);
$(`[data-offer-id="${offerId}"]`).fadeOut(300, function() {
updateVisibleSlides();
});
});
// Grab now clicked - pause carousel
$(document).on('click', '.grab-now-link', function() {
pauseCarousel();
updateModalContent();
// Auto-select course if there's a single offer available
const offerData = [];
if (offerData.length > 0 && offerData[0].course_id) {
setTimeout(function() {
const courseSelect = $('#courseOffer select[name="course"]');
const courseFormGroup = courseSelect.closest('.form-group');
if (courseSelect.length) {
courseSelect.val(offerData[0].course_id);
// Hide the course selection dropdown
courseFormGroup.hide();
// Trigger change event for selectpicker if used
if (courseSelect.hasClass('selectpicker')) {
courseSelect.selectpicker('refresh');
}
}
}, 300); // Small delay to ensure modal is fully loaded
} else if (offerData.length > 0) {
// Show course dropdown if no course_id in offer
setTimeout(function() {
const courseSelect = $('#courseOffer select[name="course"]');
const courseFormGroup = courseSelect.closest('.form-group');
courseFormGroup.show();
}, 300);
}
});
// Modal closed - resume carousel
$(document).on('hidden.bs.modal', '#courseOffer', function() {
resumeCarousel();
// Reset course dropdown visibility for next time
const courseSelect = $('#courseOffer select[name="course"]');
const courseFormGroup = courseSelect.closest('.form-group');
courseFormGroup.show();
courseSelect.val('0'); // Reset to default
if (courseSelect.hasClass('selectpicker')) {
courseSelect.selectpicker('refresh');
}
});
// Form submitted - resume carousel after delay
$(document).on('submit', '#courseOffer form', function() {
setTimeout(function() {
resumeCarousel();
}, 2000);
});
// Indicator clicked
$(document).on('click', '.indicator', function() {
const targetIndex = parseInt($(this).data('index'));
if ($(`[data-index="${targetIndex}"]`).is(':visible')) {
currentSlide = targetIndex;
updateCarousel();
updateIndicators();
// Restart carousel timer
stopCarousel();
startCarousel();
}
});
// Initialize
hideClosedOffers();
initTimers();
// Check if we need indicators after hiding closed offers
const initialVisibleSlides = $('.offer-slide:visible');
if (initialVisibleSlides.length <= 1) {
$('.carousel-indicators').hide();
} else {
$('.carousel-indicators').show();
}
updateCarousel();
updateIndicators();
// Only start carousel if there are multiple visible offers
if (initialVisibleSlides.length > 1) {
startCarousel();
}
});
</script>
<script>
$(document).ready(function() {
// Want To Connect Modal Auto-Show Logic
const MODAL_DELAY = 30 * 60 * 1000; // 30 minutes in milliseconds
const STORAGE_KEY = 'wantToConnect_lastClosed'; // Unique key for this modal only
let nextModalTimer = null;
// Clear any old storage keys that might conflict
function clearOldStorageKeys() {
const keysToRemove = [];
for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i);
if (key && key.includes('popup') && key !== STORAGE_KEY) {
keysToRemove.push(key);
}
}
keysToRemove.forEach(key => {
localStorage.removeItem(key);
});
}
function showPopupModal() {
const modalElement = document.getElementById('popupModal');
if (modalElement) {
if (typeof bootstrap !== 'undefined' && bootstrap.Modal) {
bootstrap.Modal.getOrCreateInstance(modalElement).show();
} else if (typeof $ !== 'undefined' && $.fn.modal) {
$('#popupModal').modal('show');
}
}
}
function setModalClosedTime() {
const timestamp = Date.now().toString();
localStorage.setItem(STORAGE_KEY, timestamp);
}
function shouldShowModal() {
const lastClosed = localStorage.getItem(STORAGE_KEY);
if (!lastClosed) {
return true; // Never been closed, show it
}
const timeSinceLastClose = Date.now() - parseInt(lastClosed);
const shouldShow = timeSinceLastClose >= MODAL_DELAY;
return shouldShow;
}
function scheduleNextModal() {
const lastClosed = localStorage.getItem(STORAGE_KEY);
if (!lastClosed) return;
const timeSinceLastClose = Date.now() - parseInt(lastClosed);
const timeUntilNext = MODAL_DELAY - timeSinceLastClose;
clearTimeout(nextModalTimer);
if (timeUntilNext > 0) {
nextModalTimer = setTimeout(showPopupModal, timeUntilNext);
} else {
showPopupModal();
}
}
// Clear old storage that might interfere
clearOldStorageKeys();
// Single close listener — fires after modal fully hidden and backdrop cleanly removed
$(document).on('hidden.bs.modal', '#popupModal', function() {
setModalClosedTime();
clearTimeout(nextModalTimer);
nextModalTimer = setTimeout(showPopupModal, MODAL_DELAY);
});
// Check if modal should be shown on page load
if (shouldShowModal()) {
// Show modal after 15 seconds to allow users to view page content first
setTimeout(function() {
showPopupModal();
}, 10000); // 10 seconds delay to ensure everything is loaded
} else {
// Schedule the next show based on when it was last closed
scheduleNextModal();
}
});
// Drop Query Form JavaScript
$(document).ready(function() {
const dropQueryContainer = $('#dropQueryContainer');
const dropQueryToggle = $('#dropQueryToggle');
const dropQueryForm = $('#dropQueryForm');
const toggleIcon = $('.toggle-icon');
// Resets the drop-query recaptcha by finding its widget index at call-time.
// Called after any AJAX response so the consumed token is cleared.
function resetDropQueryCaptcha() {
try {
if (typeof grecaptcha === 'undefined') return;
var divs = document.querySelectorAll('.g-recaptcha');
for (var i = 0; i < divs.length; i++) {
if (divs[i].id === 'drop-query-recaptcha') {
grecaptcha.reset(i);
return;
}
}
} catch(e) {}
}
// Initialize Select2 for country dropdown
if (typeof $.fn.select2 !== 'undefined') {
$('#countrySelect').select2({
placeholder: "Select Country",
allowClear: false,
width: '100%',
dropdownParent: $('#dropQueryContainer'),
templateResult: function(option) {
if (!option.id) {
return option.text;
}
return $('<span>' + option.text + '</span>');
},
templateSelection: function(option) {
if (!option.id) {
return option.text;
}
return option.text;
}
});
// Global init for all .ja-select2 elements (bootstrap-select replacement)
$('.ja-select2').each(function() {
var $this = $(this);
var $modal = $this.closest('.modal');
var inPhoneGroup = $this.closest('.search_select_box').length > 0;
var options = {
placeholder: $this.attr('data-placeholder') || 'Select',
allowClear: false,
width: '100%',
};
if ($modal.length) {
options.dropdownParent = $modal;
}
// Phone input group: show abbr when selected, full name in dropdown
if (inPhoneGroup) {
options.dropdownAutoWidth = true;
options.templateResult = function(opt) {
if (!opt.id) return opt.text;
return $(opt.element).attr('data-full') || opt.text;
};
options.templateSelection = function(opt) {
if (!opt.id) return opt.text;
return $(opt.element).attr('data-abbr') || opt.text;
};
}
$this.select2(options);
// Tag container so CSS can target it
if ($this.data('select2') && $this.data('select2').$container) {
$this.data('select2').$container.addClass('ja-select2-container');
}
});
}
// Check localStorage for user preference
const isCollapsed = localStorage.getItem('dropQueryCollapsed') === 'true';
// Start with collapsed state initially (hide on page load)
dropQueryContainer.addClass('collapsed');
dropQueryForm.removeClass('expanded');
dropQueryToggle.removeClass('expanded');
// Ensure body scroll is enabled when page loads
if ($(window).width() <= 768) {
$('body').removeClass('modal-open');
}
// Do NOT auto-expand Drop Query form on page load
// This was causing scroll to freeze after 5 seconds
// Users can click the toggle button to expand manually
// Toggle functionality
dropQueryToggle.on('click', function() {
const isCurrentlyCollapsed = dropQueryContainer.hasClass('collapsed');
if (isCurrentlyCollapsed) {
// Expand
dropQueryContainer.removeClass('collapsed');
dropQueryForm.addClass('expanded');
dropQueryToggle.addClass('expanded');
localStorage.setItem('dropQueryCollapsed', 'false');
// Prevent body scroll on mobile when expanded
if ($(window).width() <= 768) {
$('body').addClass('modal-open');
}
} else {
// Collapse
dropQueryContainer.addClass('collapsed');
dropQueryForm.removeClass('expanded');
dropQueryToggle.removeClass('expanded');
localStorage.setItem('dropQueryCollapsed', 'true');
// Restore body scroll on mobile when collapsed
if ($(window).width() <= 768) {
$('body').removeClass('modal-open');
}
}
});
// Form submission handling
$('#dropQueryFormSubmit .btn-submit-query').on('click', function(e) {
e.preventDefault();
const recaptchaToken = $('#dropQueryFormSubmit textarea[name="g-recaptcha-response"]').val();
if (!recaptchaToken) {
showCustomNotification('Please complete the reCAPTCHA verification.', 'danger');
return false;
}
const submitBtn = $(this);
const originalText = submitBtn.text();
submitBtn.text('SUBMITTING...').prop('disabled', true);
$.ajax({
url: 'https://www.justacademy.co/enquiry',
method: 'POST',
data: {
_token: 'lkunKqVId1HQ3Kx3ei2Zu0YKAr1fg6NntemhifoY',
description: $('#dropQueryFormSubmit textarea[name="description"]').val(),
phone: $('#dropQueryFormSubmit input[name="phone"]').val(),
email: $('#dropQueryFormSubmit input[name="email"]').val(),
country_id: $('#dropQueryFormSubmit select[name="country_id"]').val(),
form_id: 'drop_query_global',
source_url: window.location.href,
'g-recaptcha-response': recaptchaToken
},
success: function(response) {
// Success - collapse the form and show success message
dropQueryContainer.addClass('collapsed');
dropQueryForm.removeClass('expanded');
dropQueryToggle.removeClass('expanded');
localStorage.setItem('dropQueryCollapsed', 'true');
// Reset form
$('#dropQueryFormSubmit')[0].reset();
// Reset the reCAPTCHA widget
resetDropQueryCaptcha();
// Show success notification
showCustomNotification(response.message || 'Your query has been submitted successfully! We will contact you soon.', 'success');
// Restore body scroll on mobile
if ($(window).width() <= 768) {
$('body').removeClass('modal-open');
}
},
error: function(xhr) {
// Show error notification
let errorMessage = 'Something went wrong. Please try again.';
if (xhr.responseJSON && xhr.responseJSON.message) {
errorMessage = xhr.responseJSON.message;
}
showCustomNotification(errorMessage, 'error');
// Token was consumed server-side; reset widget so user can re-verify
resetDropQueryCaptcha();
},
complete: function() {
// Reset button state
submitBtn.text(originalText).prop('disabled', false);
}
});
});
// Add source URL to form submission
$('#dropQueryFormSubmit input[name="source_url"]').val(window.location.href);
// Handle window resize to manage body scroll on mobile
$(window).on('resize', function() {
const isMobile = $(window).width() <= 768;
const isExpanded = !dropQueryContainer.hasClass('collapsed');
if (isMobile && isExpanded) {
$('body').addClass('modal-open');
} else {
$('body').removeClass('modal-open');
}
});
});
// Mobile Query Button Function - Uses Desktop Drop Query
window.toggleMobileQuery = function() {
const dropQueryContainer = $('#dropQueryContainer');
const isCurrentlyCollapsed = dropQueryContainer.hasClass('collapsed');
if (isCurrentlyCollapsed) {
// Show and expand the query form
dropQueryContainer.show();
dropQueryContainer.removeClass('collapsed');
dropQueryContainer.addClass('expanded');
$('#dropQueryToggle').addClass('expanded');
$('#dropQueryForm').addClass('expanded');
// For mobile, make it full screen
if (window.innerWidth <= 768) {
$('body').addClass('modal-open');
}
} else {
// Collapse and hide the query form
dropQueryContainer.addClass('collapsed');
dropQueryContainer.removeClass('expanded');
$('#dropQueryToggle').removeClass('expanded');
$('#dropQueryForm').removeClass('expanded');
$('body').removeClass('modal-open');
// Hide after animation on mobile
if (window.innerWidth <= 768) {
setTimeout(() => {
dropQueryContainer.hide();
}, 400);
}
}
};
// Initialize drop query container as collapsed/hidden on mobile
$(document).ready(function() {
if (window.innerWidth <= 768) {
const dropQueryContainer = $('#dropQueryContainer');
dropQueryContainer.addClass('collapsed');
dropQueryContainer.hide();
}
});
// Custom notification function (replaces browser alerts) - GLOBAL FUNCTION
window.showCustomNotification = function(message, type = 'info') {
// Remove existing notifications
$('.custom-notification').remove();
const notificationClass = type === 'success' ? 'alert-success' :
type === 'error' ? 'alert-danger' : 'alert-info';
const notification = $(`
<div class="custom-notification alert ${notificationClass} alert-dismissible fade show" style="
position: fixed;
top: 20px;
right: 20px;
z-index: 10000;
max-width: 400px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
border-radius: 8px;
">
<strong>${type === 'success' ? 'Success!' : type === 'error' ? 'Error!' : 'Info!'}</strong>
${message}
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
`);
$('body').append(notification);
// Auto dismiss after 5 seconds
setTimeout(function() {
notification.fadeOut(500, function() {
$(this).remove();
});
}, 5000);
};
</script>
<!-- Book Free Demo Modal -->
<div class="modal fade" id="bookFreeDemoModal" tabindex="-1" role="dialog" aria-labelledby="bookFreeDemoModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header bg-primary text-white">
<h4 class="modal-title text-white" id="bookFreeDemoModalLabel">
Book Your Free Live Demo
</h4>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<form id="bookFreeDemoForm" method="POST" action="https://www.justacademy.co/demo-enquiry-form">
<input type="hidden" name="_token" value="lkunKqVId1HQ3Kx3ei2Zu0YKAr1fg6NntemhifoY" autocomplete="off">
<div class="row">
<div class="col-md-6 mb-3">
<label for="demo_name" class="form-label">Full Name *</label>
<input type="text" class="form-control" id="demo_name" name="name"
placeholder="Enter your full name" maxlength="30" required>
</div>
<div class="col-md-6 mb-3">
<label for="demo_email" class="form-label">Email Address *</label>
<input type="email" class="form-control" id="demo_email" name="email"
placeholder="Enter your email" maxlength="50" required>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<label for="demo_country" class="form-label">Country *</label>
<select name="country_id" id="demo_country" class="form-control select2" required>
<option value="">Select Country</option>
<option value="1" >
Afghanistan
</option>
<option value="2" >
Albania
</option>
<option value="3" >
Algeria
</option>
<option value="4" >
American Samoa
</option>
<option value="5" >
Andorra
</option>
<option value="6" >
Angola
</option>
<option value="7" >
Anguilla
</option>
<option value="8" >
Antarctica
</option>
<option value="9" >
Antigua And Barbuda
</option>
<option value="10" >
Argentina
</option>
<option value="11" >
Armenia
</option>
<option value="12" >
Aruba
</option>
<option value="13" >
Australia
</option>
<option value="14" >
Austria
</option>
<option value="15" >
Azerbaijan
</option>
<option value="16" >
Bahamas The
</option>
<option value="17" >
Bahrain
</option>
<option value="18" >
Bangladesh
</option>
<option value="19" >
Barbados
</option>
<option value="20" >
Belarus
</option>
<option value="21" >
Belgium
</option>
<option value="22" >
Belize
</option>
<option value="23" >
Benin
</option>
<option value="24" >
Bermuda
</option>
<option value="25" >
Bhutan
</option>
<option value="26" >
Bolivia
</option>
<option value="27" >
Bosnia and Herzegovina
</option>
<option value="28" >
Botswana
</option>
<option value="29" >
Bouvet Island
</option>
<option value="30" >
Brazil
</option>
<option value="31" >
British Indian Ocean Territory
</option>
<option value="32" >
Brunei
</option>
<option value="33" >
Bulgaria
</option>
<option value="34" >
Burkina Faso
</option>
<option value="35" >
Burundi
</option>
<option value="36" >
Cambodia
</option>
<option value="37" >
Cameroon
</option>
<option value="38" >
Canada
</option>
<option value="39" >
Cape Verde
</option>
<option value="40" >
Cayman Islands
</option>
<option value="41" >
Central African Republic
</option>
<option value="42" >
Chad
</option>
<option value="43" >
Chile
</option>
<option value="44" >
China
</option>
<option value="45" >
Christmas Island
</option>
<option value="46" >
Cocos (Keeling) Islands
</option>
<option value="47" >
Colombia
</option>
<option value="48" >
Comoros
</option>
<option value="49" >
Republic Of The Congo
</option>
<option value="50" >
Democratic Republic Of The Congo
</option>
<option value="51" >
Cook Islands
</option>
<option value="52" >
Costa Rica
</option>
<option value="53" >
Cote D'Ivoire (Ivory Coast)
</option>
<option value="54" >
Croatia (Hrvatska)
</option>
<option value="55" >
Cuba
</option>
<option value="56" >
Cyprus
</option>
<option value="57" >
Czech Republic
</option>
<option value="58" >
Denmark
</option>
<option value="59" >
Djibouti
</option>
<option value="60" >
Dominica
</option>
<option value="61" >
Dominican Republic
</option>
<option value="62" >
East Timor
</option>
<option value="63" >
Ecuador
</option>
<option value="64" >
Egypt
</option>
<option value="65" >
El Salvador
</option>
<option value="66" >
Equatorial Guinea
</option>
<option value="67" >
Eritrea
</option>
<option value="68" >
Estonia
</option>
<option value="69" >
Ethiopia
</option>
<option value="70" >
External Territories of Australia
</option>
<option value="71" >
Falkland Islands
</option>
<option value="72" >
Faroe Islands
</option>
<option value="73" >
Fiji Islands
</option>
<option value="74" >
Finland
</option>
<option value="75" >
France
</option>
<option value="76" >
French Guiana
</option>
<option value="77" >
French Polynesia
</option>
<option value="78" >
French Southern Territories
</option>
<option value="79" >
Gabon
</option>
<option value="80" >
Gambia The
</option>
<option value="81" >
Georgia
</option>
<option value="82" >
Germany
</option>
<option value="83" >
Ghana
</option>
<option value="84" >
Gibraltar
</option>
<option value="85" >
Greece
</option>
<option value="86" >
Greenland
</option>
<option value="87" >
Grenada
</option>
<option value="88" >
Guadeloupe
</option>
<option value="89" >
Guam
</option>
<option value="90" >
Guatemala
</option>
<option value="91" >
Guernsey and Alderney
</option>
<option value="92" >
Guinea
</option>
<option value="93" >
Guinea-Bissau
</option>
<option value="94" >
Guyana
</option>
<option value="95" >
Haiti
</option>
<option value="96" >
Heard and McDonald Islands
</option>
<option value="97" >
Honduras
</option>
<option value="98" >
Hong Kong S.A.R.
</option>
<option value="99" >
Hungary
</option>
<option value="100" >
Iceland
</option>
<option value="101" selected >
India
</option>
<option value="102" >
Indonesia
</option>
<option value="103" >
Iran
</option>
<option value="104" >
Iraq
</option>
<option value="105" >
Ireland
</option>
<option value="106" >
Israel
</option>
<option value="107" >
Italy
</option>
<option value="108" >
Jamaica
</option>
<option value="109" >
Japan
</option>
<option value="110" >
Jersey
</option>
<option value="111" >
Jordan
</option>
<option value="112" >
Kazakhstan
</option>
<option value="113" >
Kenya
</option>
<option value="114" >
Kiribati
</option>
<option value="115" >
Korea North
</option>
<option value="116" >
Korea South
</option>
<option value="117" >
Kuwait
</option>
<option value="118" >
Kyrgyzstan
</option>
<option value="119" >
Laos
</option>
<option value="120" >
Latvia
</option>
<option value="121" >
Lebanon
</option>
<option value="122" >
Lesotho
</option>
<option value="123" >
Liberia
</option>
<option value="124" >
Libya
</option>
<option value="125" >
Liechtenstein
</option>
<option value="126" >
Lithuania
</option>
<option value="127" >
Luxembourg
</option>
<option value="128" >
Macau S.A.R.
</option>
<option value="129" >
Macedonia
</option>
<option value="130" >
Madagascar
</option>
<option value="131" >
Malawi
</option>
<option value="132" >
Malaysia
</option>
<option value="133" >
Maldives
</option>
<option value="134" >
Mali
</option>
<option value="135" >
Malta
</option>
<option value="136" >
Man (Isle of)
</option>
<option value="137" >
Marshall Islands
</option>
<option value="138" >
Martinique
</option>
<option value="139" >
Mauritania
</option>
<option value="140" >
Mauritius
</option>
<option value="141" >
Mayotte
</option>
<option value="142" >
Mexico
</option>
<option value="143" >
Micronesia
</option>
<option value="144" >
Moldova
</option>
<option value="145" >
Monaco
</option>
<option value="146" >
Mongolia
</option>
<option value="147" >
Montserrat
</option>
<option value="148" >
Morocco
</option>
<option value="149" >
Mozambique
</option>
<option value="150" >
Myanmar
</option>
<option value="151" >
Namibia
</option>
<option value="152" >
Nauru
</option>
<option value="153" >
Nepal
</option>
<option value="154" >
Netherlands Antilles
</option>
<option value="155" >
Netherlands The
</option>
<option value="156" >
New Caledonia
</option>
<option value="157" >
New Zealand
</option>
<option value="158" >
Nicaragua
</option>
<option value="159" >
Niger
</option>
<option value="160" >
Nigeria
</option>
<option value="161" >
Niue
</option>
<option value="162" >
Norfolk Island
</option>
<option value="163" >
Northern Mariana Islands
</option>
<option value="164" >
Norway
</option>
<option value="165" >
Oman
</option>
<option value="166" >
Pakistan
</option>
<option value="167" >
Palau
</option>
<option value="168" >
Palestinian Territory Occupied
</option>
<option value="169" >
Panama
</option>
<option value="170" >
Papua new Guinea
</option>
<option value="171" >
Paraguay
</option>
<option value="172" >
Peru
</option>
<option value="173" >
Philippines
</option>
<option value="174" >
Pitcairn Island
</option>
<option value="175" >
Poland
</option>
<option value="176" >
Portugal
</option>
<option value="177" >
Puerto Rico
</option>
<option value="178" >
Qatar
</option>
<option value="179" >
Reunion
</option>
<option value="180" >
Romania
</option>
<option value="181" >
Russia
</option>
<option value="182" >
Rwanda
</option>
<option value="183" >
Saint Helena
</option>
<option value="184" >
Saint Kitts And Nevis
</option>
<option value="185" >
Saint Lucia
</option>
<option value="186" >
Saint Pierre and Miquelon
</option>
<option value="187" >
Saint Vincent And The Grenadines
</option>
<option value="188" >
Samoa
</option>
<option value="189" >
San Marino
</option>
<option value="190" >
Sao Tome and Principe
</option>
<option value="191" >
Saudi Arabia
</option>
<option value="192" >
Senegal
</option>
<option value="193" >
Serbia
</option>
<option value="194" >
Seychelles
</option>
<option value="195" >
Sierra Leone
</option>
<option value="196" >
Singapore
</option>
<option value="197" >
Slovakia
</option>
<option value="198" >
Slovenia
</option>
<option value="199" >
Smaller Territories of the UK
</option>
<option value="200" >
Solomon Islands
</option>
<option value="201" >
Somalia
</option>
<option value="202" >
South Africa
</option>
<option value="203" >
South Georgia
</option>
<option value="204" >
South Sudan
</option>
<option value="205" >
Spain
</option>
<option value="206" >
Sri Lanka
</option>
<option value="207" >
Sudan
</option>
<option value="208" >
Suriname
</option>
<option value="209" >
Svalbard And Jan Mayen Islands
</option>
<option value="210" >
Swaziland
</option>
<option value="211" >
Sweden
</option>
<option value="212" >
Switzerland
</option>
<option value="213" >
Syria
</option>
<option value="214" >
Taiwan
</option>
<option value="215" >
Tajikistan
</option>
<option value="216" >
Tanzania
</option>
<option value="217" >
Thailand
</option>
<option value="218" >
Togo
</option>
<option value="219" >
Tokelau
</option>
<option value="220" >
Tonga
</option>
<option value="221" >
Trinidad And Tobago
</option>
<option value="222" >
Tunisia
</option>
<option value="223" >
Turkey
</option>
<option value="224" >
Turkmenistan
</option>
<option value="225" >
Turks And Caicos Islands
</option>
<option value="226" >
Tuvalu
</option>
<option value="227" >
Uganda
</option>
<option value="228" >
Ukraine
</option>
<option value="229" >
United Arab Emirates
</option>
<option value="230" >
United Kingdom
</option>
<option value="231" >
United States
</option>
<option value="232" >
United States Minor Outlying Islands
</option>
<option value="233" >
Uruguay
</option>
<option value="234" >
Uzbekistan
</option>
<option value="235" >
Vanuatu
</option>
<option value="236" >
Vatican City State (Holy See)
</option>
<option value="237" >
Venezuela
</option>
<option value="238" >
Vietnam
</option>
<option value="239" >
Virgin Islands (British)
</option>
<option value="240" >
Virgin Islands (US)
</option>
<option value="241" >
Wallis And Futuna Islands
</option>
<option value="242" >
Western Sahara
</option>
<option value="243" >
Yemen
</option>
<option value="244" >
Yugoslavia
</option>
<option value="245" >
Zambia
</option>
<option value="246" >
Zimbabwe
</option>
</select>
</div>
<div class="col-md-6 mb-3">
<label for="demo_phone" class="form-label">Phone Number *</label>
<input type="text" class="form-control" id="demo_phone" name="phone"
placeholder="Enter phone number" maxlength="10"
onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" required>
</div>
</div>
<div class="row">
<div class="col-md-12 mb-3">
<label for="demo_course" class="form-label">Course Interested In *</label>
<select class="form-control select2" name="course" id="demo_course" required>
<option value="">Select Course</option>
<option value="1">HTML Training</option>
<option value="2">Android App Development</option>
<option value="3">Manual Training</option>
<option value="4">Adobe Training</option>
<option value="5">Digital Marketing</option>
<option value="6">Core Java Training</option>
<option value="7">CSS Training</option>
<option value="8">Bootstrap Training</option>
<option value="9">Javascript Training</option>
<option value="10">React JS Training</option>
<option value="11">Node JS Training</option>
<option value="12">Angular Training</option>
<option value="13">Django Training</option>
<option value="14">PHP Training</option>
<option value="16">Laravel Training</option>
<option value="17">Codeignitor Training</option>
<option value="18">Wordpress Training</option>
<option value="19">jQuery Training</option>
<option value="20">IOS Training</option>
<option value="21">Flutter Training</option>
<option value="22">Ionic Training</option>
<option value="23">React Native Training</option>
<option value="24">Augmented Reality Training</option>
<option value="25">Advance Java Training</option>
<option value="26">Selenium Training</option>
<option value="27">Performance Training</option>
<option value="28">Photoshop Training</option>
<option value="29">Illustrator Training</option>
<option value="30">Figma Training</option>
<option value="31">SEO Training</option>
<option value="379">SAP ABAP Training</option>
<option value="382">Microsoft Azure Training</option>
<option value="392">ASP .NET Training</option>
<option value="400">SAP ABAP On HANA Training</option>
<option value="429">SAP FIORI Training</option>
<option value="459">SAP MM Training</option>
<option value="461">SAP SD Training</option>
<option value="508">PMP Certification Training</option>
<option value="521">PMI® Agile Certified Practitioner Training</option>
<option value="522">Python Training</option>
<option value="523">Machine Learning</option>
<option value="528">Microsoft Power BI Training</option>
<option value="538">Tableau Training</option>
<option value="569">Alteryx Training</option>
<option value="572">MySQL Training</option>
<option value="585">SalesForce Training</option>
<option value="634">Mobile App Testing Using Appium Training</option>
<option value="635">Continuous Testing in DevOps Training</option>
<option value="636">AWS Training</option>
<option value="637">Deep Learning</option>
<option value="638">DevOps Training</option>
<option value="640">Certified Scrum Master® (CSM) Certification Training</option>
<option value="641">PRINCE2® Foundation & Practitioner Certification Course Training</option>
<option value="642">GCP Certification Training</option>
<option value="23220">Advanced Excel & Power BI</option>
<option value="23221">Power BI and SQL</option>
<option value="23222">Data Analyst Foundation - Advanced Excel & SQL +&Power BI</option>
<option value="other">Other Course</option>
</select>
</div>
</div>
<div class="row" id="demo_other_course_container" style="display: none;">
<div class="col-md-12 mb-3">
<label for="demo_other_course" class="form-label">Specify Other Course</label>
<input type="text" class="form-control" id="demo_other_course" name="other_course"
placeholder="Enter course name" maxlength="50">
</div>
</div>
<div class="row">
<div class="col-md-12 mb-3">
<label for="demo_message" class="form-label">Additional Message (Optional)</label>
<textarea class="form-control" id="demo_message" name="description"
rows="3" maxlength="500" placeholder="Any specific questions or requirements?"></textarea>
</div>
</div>
<div class="row">
<div class="col-md-12 mb-3">
<div class="g-recaptcha" data-sitekey="6LfrXv4nAAAAADudm8X0oYnxC8M7GIOJ_pMfS8TS"
data-form="book-free-demo"></div>
</div>
</div>
<input type="hidden" name="pincode" value="1" />
<div class="row">
<div class="col-md-12 text-center">
<button type="submit" class="btn btn-primary btn-lg px-5">
<i class="fas fa-calendar-check me-2"></i>Book Free Demo
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
#bookFreeDemoModal .modal-content {
border: none;
border-radius: 15px;
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}
#bookFreeDemoModal .modal-header {
border-radius: 15px 15px 0 0;
background: linear-gradient(135deg, #b51d74, #d63384) !important;
padding: 20px 30px;
}
#bookFreeDemoModal .modal-body {
padding: 30px;
}
#bookFreeDemoModal .form-label {
font-weight: 600;
color: #333;
margin-bottom: 8px;
}
#bookFreeDemoModal .form-control {
border: 2px solid #e9ecef;
border-radius: 8px;
padding: 12px 15px;
font-size: 14px;
transition: border-color 0.3s ease;
}
#bookFreeDemoModal .form-control:focus {
border-color: #b51d74;
box-shadow: 0 0 0 0.2rem rgba(181, 29, 116, 0.25);
}
#bookFreeDemoModal .btn-primary {
background: linear-gradient(135deg, #b51d74, #d63384);
border: none;
border-radius: 8px;
padding: 12px 30px;
font-weight: 600;
transition: all 0.3s ease;
}
#bookFreeDemoModal .btn-primary:hover {
background: linear-gradient(135deg, #d63384, #b51d74);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(181, 29, 116, 0.3);
}
#bookFreeDemoModal .alert-info {
background-color: #e3f2fd;
border-color: #2196f3;
color: #1565c0;
border-radius: 8px;
}
/* Select2 Custom Styling for Modal */
#bookFreeDemoModal .select2-container {
width: 100% !important;
}
#bookFreeDemoModal .select2-container .select2-selection--single {
height: 50px !important;
border: 1px solid #ced4da !important;
border-radius: 8px !important;
padding: 0 !important;
background-color: #fff !important;
}
#bookFreeDemoModal .select2-container .select2-selection--single .select2-selection__rendered {
line-height: 48px !important;
padding-left: 15px !important;
padding-right: 40px !important;
font-size: 14px !important;
color: #495057 !important;
}
#bookFreeDemoModal .select2-container .select2-selection--single .select2-selection__arrow {
height: 48px !important;
right: 10px !important;
}
#bookFreeDemoModal .select2-container--default .select2-selection--single:focus,
#bookFreeDemoModal .select2-container--default.select2-container--focus .select2-selection--single,
#bookFreeDemoModal .select2-container--default.select2-container--open .select2-selection--single {
border-color: #b51d74 !important;
box-shadow: 0 0 0 0.2rem rgba(181, 29, 116, 0.15) !important;
outline: none !important;
}
#bookFreeDemoModal .select2-dropdown {
border: 1px solid #ced4da !important;
border-radius: 8px !important;
z-index: 9999 !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}
#bookFreeDemoModal .select2-search--dropdown {
padding: 8px !important;
}
#bookFreeDemoModal .select2-search--dropdown .select2-search__field {
border: 1px solid #ced4da !important;
border-radius: 6px !important;
padding: 8px 12px !important;
}
#bookFreeDemoModal .select2-results__option {
padding: 10px 15px !important;
font-size: 14px !important;
border: none !important;
}
#bookFreeDemoModal .select2-results__option--highlighted {
background-color: #f8f9fa !important;
color: #b51d74 !important;
}
#bookFreeDemoModal .select2-results__option--selected {
background-color: #b51d74 !important;
color: #fff !important;
}
#bookFreeDemoModal .select2-results__option:hover {
background-color: #f8f9fa !important;
color: #b51d74 !important;
}
/* Remove any outline on container */
#bookFreeDemoModal .select2-container--default:focus {
outline: none !important;
}
</style>
<script>
// Handle Book Free Demo Modal
document.addEventListener('DOMContentLoaded', function() {
// Initialize Select2 for dropdowns
if (typeof $.fn.select2 !== 'undefined') {
$('#demo_country').select2({
dropdownParent: $('#bookFreeDemoModal'),
placeholder: 'Select Country',
allowClear: true
});
$('#demo_course').select2({
dropdownParent: $('#bookFreeDemoModal'),
placeholder: 'Select Course',
allowClear: true
});
}
// Handle course selection change
const demoCourseSel = document.getElementById('demo_course');
const demoOtherContainer = document.getElementById('demo_other_course_container');
if (demoCourseSel && demoOtherContainer) {
// Use jQuery for Select2 compatibility
$('#demo_course').on('change', function() {
if (this.value === 'other') {
demoOtherContainer.style.display = 'block';
document.getElementById('demo_other_course').required = true;
} else {
demoOtherContainer.style.display = 'none';
document.getElementById('demo_other_course').required = false;
}
});
}
// Handle form submission
const demoForm = document.getElementById('bookFreeDemoForm');
if (demoForm) {
demoForm.addEventListener('submit', function(e) {
e.preventDefault();
// Let backend handle reCAPTCHA validation
// Submit the form
this.submit();
});
}
});
// Function to open Book Free Demo modal with course pre-selected
window.openBookFreeDemoModal = function(courseName = '') {
const modal = new bootstrap.Modal(document.getElementById('bookFreeDemoModal'));
// Pre-fill course if provided
if (courseName) {
const courseSelect = $('#demo_course');
const options = courseSelect.find('option');
options.each(function() {
if ($(this).text().toLowerCase().includes(courseName.toLowerCase())) {
courseSelect.val($(this).val()).trigger('change');
return false; // break
}
});
}
// Reset reCAPTCHA
if (typeof grecaptcha !== 'undefined') {
setTimeout(() => {
try {
grecaptcha.reset();
} catch(e) {
}
}, 500);
}
modal.show();
}
</script>
<script>
(function() {
var ol = document.querySelector('ol.breadcrumb');
if (!ol) return;
var existing = document.querySelectorAll('script[type="application/ld+json"]');
for (var i = 0; i < existing.length; i++) {
try { if (JSON.parse(existing[i].textContent)['@type'] === 'BreadcrumbList') return; } catch(e) {}
}
var items = ol.querySelectorAll('li.breadcrumb-item');
if (items.length < 2) return;
var listItems = [];
items.forEach(function(li, idx) {
var a = li.querySelector('a');
var name = (a ? a.textContent : li.textContent).trim();
var url = a ? a.href : window.location.href;
if (!name) return;
listItems.push({ "@type": "ListItem", "position": idx + 1, "name": name, "item": url });
});
if (listItems.length < 2) return;
var s = document.createElement('script');
s.type = 'application/ld+json';
s.textContent = JSON.stringify({ "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": listItems });
document.head.appendChild(s);
})();
</script>
</body>
</html> |