JavaScript - How to Change the Content of a ? </div> </div> </div> <img src="https://media.geeksforgeeks.org/auth-dashboard-uploads/ep_right.svg" alt="Next article icon" /> </a> <div class="sideBar autoLeftBar_oin_non_sticky" style="height: unset !important"> <!-- <div class="sideBar--wrap newLeftbar oinLeftbar autoLeftBar_oin_child"> --> <div class="sideBar--wrap newLeftbar autoLeftBar_oin_child"> <div id="GFG_AD_Leftsidebar_300x250_chained_1"></div> <div id="GFG_AD_Leftsidebar_300x250_chained_2"></div> <div id="GFG_AD_Leftsidebar_300x250_chained_3"></div> <div id="GFG_AD_Leftsidebar_300x600_chained_1"></div> </div> </div> <div id="GFG_AD_Desktop_LeftSideBar_Docked_160x600" style="max-width:160px; max-height:600px"></div> </div> <div class="leftBar"> <div class="article--viewer"> <div class="article--viewer_content"> <div class="a-wrapper"> <div class="" style="z-index:9999 !important;position:relative;"> </div> <article class="content post-396304 post type-post status-publish format-standard hentry category-javascript category-web-technologies tag-javascript-questions" id="post-396304"> <!-- when comment system will be scalable from practice side then we will display Article/Discussion tab--> <div class="main_wrapper" style="display:flex;"> <div style="width: 100%;"> <div class="article-title"> <h1>How to detect If textbox content has changed using JavaScript ?</h1> </div> <div class="last_updated_parent"> <div> <span class="strong">Last Updated : </span> <span>23 Sep, 2024</span> </div> <!-- three dot menu --> <div class="three_dot_dropdown"> <div style="display: flex;"> <!-- summarize button is placed along with share button on 26/06/25 for task T1G-3459 --> <div pid="396304" ptitle="How to detect If textbox content has changed using JavaScript ?" class="top-summary-icon-div "> <div class="three_dot_dropdown_div tooltip"> <span class="summary_tooltiptext">Summarize</span> <div class="summarize_header"> <i class= "summary_button" style="position: relative;"></i> </div> </div> </div> <div pid="396304" ptitle="How to detect If textbox content has changed using JavaScript ?" class="article--viewer_comment tooltip top-comment-icon-div"> <span class="comment_tooltiptext">Comments</span> <div class="three_dot_dropdown_div" data-gfg-action='loadComments'> <div class="comment_header"> <i class= "discussion_button" style="position: relative; transform: scale(0.9);"></i> </div> </div> </div> <div pid="396304" ptitle="How to detect If textbox content has changed using JavaScript ?" class="article--viewer_improve tooltip"> <span class="improve_tooltiptext">Improve</span> <div class="three_dot_dropdown_div three_dot_dropdown_improve" onclick="improveArticleCall()"> <div class="improve_wrapper_top"> <i class="gfg-icon gfg-icon-pencil gfg-icon_edit" style="position: relative; z-index: 3;"></i> </div> </div> </div> <!-- three dots --> <ul class="dropbtn icons btn-right showLeft" onclick="showDropdown()"> <li> </li> <li></li> <li></li> </ul> </div> </div> </div> </div> </div> <!-- menu --> <div id="myDropdown" class="three_dot_dropdown_content"> <div class="article-buttons drop" onmouseleave="closeKebabMenu()"> <!-- If the status of the summary API is true than we are showing the summarize button otherwise not --> <div pid="396304" ptitle="How to detect If textbox content has changed using JavaScript ?" class="improve_article--viewer tooltip"> <div class="three_dot_dropdown_div three_dot_dropdown_improve" onclick="suggestionArticleCall()" style="margin-top: 1px;"> <div class="three_dot_dropdown_inner_div improve_dot_dropdown_inner_div"> <i class="gfg-icon gfg-icon_suggest_changes gfg-icon_edit"></i> <span>Suggest changes</span> </div> </div> </div> <!-- share button is placed inside kebabMenu for mobile and desktop view --> <div pid="396304" class="article--viewer_share tooltip"> <div class="three_dot_dropdown_div three_dot_dropdown_share" onmouseleave="closeShareModal()" onmouseenter="openShareModal()"> <div style="display: flex;align-items: center;" class="three_dot_dropdown_inner_div" data-gfg-action="share-article" data-bookmark-value="0"> <i class="gfg-share-icon-mobile"></i> <span>Share</span> </div> </div> </div> <div pid="396304" class="article--viewer_like tooltip"> <div class="three_dot_dropdown_div three_dot_dropdown_likearticle" onmouseleave='toggleLikeElementVisibility("showLikesContainer", false)' onmouseenter='toggleLikeElementVisibility("showLikesContainer", true)'> <div class="showLikesContainer"> <span class="likeTooltip">Like Article</span> </div> <div class="three_dot_dropdown_inner_div" data-gfg-action="like-article" data-bookmark-value="0"> <i class="gfg-icon gfg-icon_thumbs"></i> <span>Like</span> </div> </div> <!-- <button data-gfg-action="like-article" data-bookmark-value="0"> <i class="gfg-icon gfg-icon_thumbs"></i> </button> --> </div> <!-- share button is removed from here for web view and placed at the place of summarize on 03/04/25 for task T1G-3293 --> <!-- <div pid="396304" class="article--viewer_share tooltip"> <div class="three_dot_dropdown_div three_dot_dropdown_share" onmouseleave="closeShareModal()" onmouseenter="openShareModal()"> <div style="display: flex;align-items: center;" class="three_dot_dropdown_inner_div" data-gfg-action="share-article" data-bookmark-value="0"> <i class="gfg-share-icon"></i> <span>Share</span> </div> </div> </div> --> <div class="article--viewer_report tooltip"> <div class="three_dot_dropdown_div three_dot_dropdown_reportarticle"> <div class="three_dot_dropdown_inner_div" data-gfg-action="report-article" onclick="report_article();"> <i class="gfg-icon gfg-icon_report"></i> <span>Report</span> </div> </div> <!-- <button data-gfg-action="like-article" data-bookmark-value="0"> <i class="gfg-icon gfg-icon_thumbs"></i> </button> --> </div> <!-- follow button is removed on 07/04/25 for task T1G-3307 --> <!-- <div class="article--viewer_Gnews tooltip"> <a class="three_dot_dropdown_inner_div Gnews_wrapper" href ='https://news.google.com/publications/CAAqBwgKMLTrzwsw44bnAw?hl=en-IN&gl=IN&ceid=IN%3Aen' target="_blank"> <img class="gfg-icon_Gnews no-zoom-in-cursor" src=https://media.geeksforgeeks.org/auth-dashboard-uploads/Google-news.svg loading="lazy" alt="News"></img> <span class='kebab_menu_news_text'>Follow</span> </a> </div> --> </div> </div> <div class="text"> <script> var video_api_response = JSON.parse("[]"); </script> <p dir="ltr"><b><strong>Detecting if the content of a textbox has changed</strong></b><span> in JavaScript means identifying when a user modifies the text within an input field. This can be achieved using events like input, change, or keyup, which trigger JavaScript functions in response to content alterations.</span></p><p dir="ltr"><span>There are some common approaches that are discussed below:</span></p><div id="table_of_content"><p style="margin:4px; font-size:20px; font-weight:bold;">Table of Content</p><ul><li><a href="#approach-1-using-onchange-event">Using onchange event</a></li><li><a href="#approach-2-using-onpropertychange-event">Using onpropertychange event</a></li><li><a href="#approach-3-using-addeventlistener-method">Using addEventListener() Method</a></li></ul></div><h2 id="approach-1-using-onchange-event"><b><strong>Approach 1:</strong></b><span> Using </span><b><strong>onchange event</strong></b></h2><p dir="ltr"><span>The onchange event in JavaScript triggers when the textbox loses focus after its content is modified. It doesn't fire immediately while typing but waits until the user finishes editing and clicks elsewhere, making it useful for detecting finalized changes in input fields.</span></p><p dir="ltr"><b><strong>Example: </strong></b><span>In this example, the onchange event on a textbox. When the user modifies the text and clicks outside the textbox, a JavaScript function triggers an alert with the message "Changed".</span></p><gfg-tabs allow-code-exec=true data-run-ide="true" data-mode="light"> <gfg-tab slot="tab">html</gfg-tab> <gfg-panel slot="panel" data-code-lang="html" data-main-code-start="None" data-main-code-end="None"> <code class="language-html"><div class=highlight><pre><span></span><span class=cp><!DOCTYPE html></span> <span class=p><</span><span class=nt>html</span><span class=p>></span> <span class=p><</span><span class=nt>head</span><span class=p>></span> <span class=p><</span><span class=nt>title</span><span class=p>></span> Using onchange event <span class=p></</span><span class=nt>title</span><span class=p>></span> <span class=p></</span><span class=nt>head</span><span class=p>></span> <span class=p><</span><span class=nt>body</span> <span class=na>style</span><span class=o>=</span><span class=s>"text-align:center;"</span><span class=p>></span> <span class=p><</span><span class=nt>h1</span> <span class=na>style</span><span class=o>=</span><span class=s>"color:green;"</span><span class=p>></span> GeeksforGeeks <span class=p></</span><span class=nt>h1</span><span class=p>></span> <span class=p><</span><span class=nt>p</span><span class=p>></span> Change the text of input text and click outside of it to see. <span class=p></</span><span class=nt>p</span><span class=p>></span> <span class=p><</span><span class=nt>input</span> <span class=na>id</span><span class=o>=</span><span class=s>"input"</span> <span class=na>name</span><span class=o>=</span><span class=s>"input"</span> <span class=na>onchange</span><span class=o>=</span><span class=s>"GFG_Fun()"</span> <span class=p>/></span> <span class=p><</span><span class=nt>br</span><span class=p>></span> <span class=p><</span><span class=nt>br</span><span class=p>></span> <span class=p><</span><span class=nt>script</span><span class=p>></span> <span class=w> </span><span class=kd>function</span><span class=w> </span><span class=nx>GFG_Fun</span><span class=p>()</span><span class=w> </span><span class=p>{</span> <span class=w> </span><span class=nx>alert</span><span class=p>(</span><span class=s1>'Changed'</span><span class=p>);</span> <span class=w> </span><span class=p>}</span> <span class=w> </span><span class=p></</span><span class=nt>script</span><span class=p>></span> <span class=p></</span><span class=nt>body</span><span class=p>></span> <span class=p></</span><span class=nt>html</span><span class=p>></span> </pre></div></code> </gfg-panel></gfg-tabs><p dir="ltr"><b><strong>Output:</strong></b></p><figure class="media"><oembed url="https://media.geeksforgeeks.org/wp-content/uploads/20240731194111/Untitled27.mp4"></oembed></figure><h2 id="approach-2-using-onpropertychange-event"><b><strong>Approach 2:</strong></b><span> Using onpropertychange event</span></h2><p dir="ltr"><span>The onpropertychange event in JavaScript is triggered when a property of an HTML element changes, specifically used in older versions of Internet Explorer (IE 8 and below). For textboxes, it detects changes in the value property, alerting when content is modified.</span></p><p dir="ltr"><b><strong>Example: </strong></b><span>In this example, we multiple events like onchange, onpropertychange, onkeyup, onpaste, and oninput on a textbox. Whenever the content changes, the JavaScript function triggers an alert displaying "Changed".</span></p><gfg-tabs allow-code-exec=true data-run-ide="true" data-mode="light"> <gfg-tab slot="tab">html</gfg-tab> <gfg-panel slot="panel" data-code-lang="html" data-main-code-start="None" data-main-code-end="None"> <code class="language-html"><div class=highlight><pre><span></span><span class=cp><!DOCTYPE html></span> <span class=p><</span><span class=nt>html</span><span class=p>></span> <span class=p><</span><span class=nt>head</span><span class=p>></span> <span class=p><</span><span class=nt>title</span><span class=p>></span> Using onpropertychange event <span class=p></</span><span class=nt>title</span><span class=p>></span> <span class=p></</span><span class=nt>head</span><span class=p>></span> <span class=p><</span><span class=nt>body</span> <span class=na>style</span><span class=o>=</span><span class=s>"text-align:center;"</span><span class=p>></span> <span class=p><</span><span class=nt>h1</span> <span class=na>style</span><span class=o>=</span><span class=s>"color:green;"</span><span class=p>></span> GeeksforGeeks <span class=p></</span><span class=nt>h1</span><span class=p>></span> <span class=p><</span><span class=nt>p</span><span class=p>></span> Change the text of input text and click outside of it to see. <span class=p></</span><span class=nt>p</span><span class=p>></span> <span class=p><</span><span class=nt>input</span> <span class=na>id</span><span class=o>=</span><span class=s>"input"</span> <span class=na>name</span><span class=o>=</span><span class=s>"input"</span> <span class=na>onchange</span> <span class=na>onpropertychange</span> <span class=na>onkeyuponpaste</span> <span class=na>oninput</span><span class=o>=</span><span class=s>"GFG_Fun()"</span> <span class=p>/></span> <span class=p><</span><span class=nt>br</span><span class=p>></span> <span class=p><</span><span class=nt>br</span><span class=p>></span> <span class=p><</span><span class=nt>script</span><span class=p>></span> <span class=w> </span><span class=kd>function</span><span class=w> </span><span class=nx>GFG_Fun</span><span class=p>()</span><span class=w> </span><span class=p>{</span> <span class=w> </span><span class=nx>alert</span><span class=p>(</span><span class=s1>'Changed'</span><span class=p>);</span> <span class=w> </span><span class=p>}</span> <span class=w> </span><span class=p></</span><span class=nt>script</span><span class=p>></span> <span class=p></</span><span class=nt>body</span><span class=p>></span> <span class=p></</span><span class=nt>html</span><span class=p>></span> </pre></div></code> </gfg-panel></gfg-tabs><p dir="ltr"><b><strong>Output:</strong></b></p><figure class="media"><oembed url="https://media.geeksforgeeks.org/wp-content/uploads/20240731194257/Untitled29.mp4"></oembed></figure><h2 id="approach-3-using-addeventlistener-method"><b><strong>Approach 3: Using addEventListener() Method</strong></b></h2><p dir="ltr"><span>The</span><a href="https://www.geeksforgeeks.org/javascript-addeventlistener-with-examples/" target="_blank" rel=""><span> addEventListener() method</span></a><span> attaches an event handler to an HTML element without overwriting existing events. For detecting textbox changes, you can use it to listen for events like input, change, or keyup, ensuring the callback function executes when content changes.</span></p><p dir="ltr"><b><strong>Example: </strong></b><span>In this example, we use addEventListener() to listen for the input event on a textbox. When the content of the textbox changes, an alert is triggered displaying the message "Changed!".</span></p><gfg-tabs allow-code-exec=true data-run-ide="true" data-mode="light"> <gfg-tab slot="tab">HTML</gfg-tab> <gfg-panel slot="panel" data-code-lang="html" data-main-code-start="None" data-main-code-end="None"> <code class="language-html"><div class=highlight><pre><span></span><span class=cp><!DOCTYPE html></span> <span class=p><</span><span class=nt>html</span> <span class=na>lang</span><span class=o>=</span><span class=s>"en"</span><span class=p>></span> <span class=p><</span><span class=nt>head</span><span class=p>></span> <span class=p><</span><span class=nt>title</span><span class=p>></span>Using addEventListener() method<span class=p></</span><span class=nt>title</span><span class=p>></span> <span class=p><</span><span class=nt>style</span><span class=p>></span> <span class=w> </span><span class=nt>h1</span><span class=w> </span><span class=p>{</span> <span class=w> </span><span class=k>text-align</span><span class=p>:</span><span class=w> </span><span class=kc>center</span><span class=p>;</span> <span class=w> </span><span class=p>}</span> <span class=w> </span><span class=p>.</span><span class=nc>abc</span><span class=w> </span><span class=p>{</span> <span class=w> </span><span class=k>display</span><span class=p>:</span><span class=w> </span><span class=kc>flex</span><span class=p>;</span> <span class=w> </span><span class=k>justify-content</span><span class=p>:</span><span class=w> </span><span class=kc>center</span><span class=p>;</span> <span class=w> </span><span class=k>text-align</span><span class=p>:</span><span class=w> </span><span class=kc>center</span><span class=p>;</span> <span class=w> </span><span class=p>}</span> <span class=w> </span><span class=p></</span><span class=nt>style</span><span class=p>></span> <span class=p></</span><span class=nt>head</span><span class=p>></span> <span class=p><</span><span class=nt>body</span><span class=p>></span> <span class=p><</span><span class=nt>h1</span> <span class=na>style</span><span class=o>=</span><span class=s>"color:green;"</span><span class=p>></span> GeeksforGeeks <span class=p></</span><span class=nt>h1</span><span class=p>></span> <span class=p><</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>"abc"</span><span class=p>></span> <span class=p><</span><span class=nt>input</span> <span class=na>id</span><span class=o>=</span><span class=s>"gfg"</span><span class=p>></span> <span class=p></</span><span class=nt>div</span><span class=p>></span> <span class=p><</span><span class=nt>script</span><span class=p>></span> <span class=w> </span><span class=nb>document</span><span class=p>.</span><span class=nx>getElementById</span><span class=p>(</span><span class=s2>"gfg"</span><span class=p>)</span> <span class=w> </span><span class=p>.</span><span class=nx>addEventListener</span><span class=p>(</span><span class=s2>"input"</span><span class=p>,</span><span class=w> </span><span class=p>(</span><span class=nx>event</span><span class=p>)</span><span class=w> </span><span class=p>=></span><span class=w> </span><span class=nx>alert</span><span class=p>(</span><span class=s2>"Changed!"</span><span class=p>));</span> <span class=w> </span><span class=p></</span><span class=nt>script</span><span class=p>></span> <span class=p></</span><span class=nt>body</span><span class=p>></span> <span class=p></</span><span class=nt>html</span><span class=p>></span> </pre></div></code> </gfg-panel></gfg-tabs><p dir="ltr"><b><strong>Output:</strong></b></p><figure class="media"><oembed url="https://media.geeksforgeeks.org/wp-content/uploads/20240731194502/Untitled30.mp4"></oembed></figure><p style="text-align: center;"><span> </span></p> <script> const rawVideoDataMap = null; // Convert it into a JS Map const videoDataMap = new Map(Object.entries(rawVideoDataMap)); document.addEventListener('DOMContentLoaded', function () { let currentlySelectedTile = document.getElementById("video-info-container-title"); let firstVideoH2; let firstSelectedVideo var videoPlayer = document.getElementById('video-iframe-container'); if (!videoPlayer) return; var videoIframe = videoPlayer.querySelector('iframe'); if (!videoIframe) return; // Safely inject PHP data as JSON into JavaScript var resp = null; function postToIframeWhenReady(iframe, data, maxAttempts = 20, intervalTime = 100) { let attempts = 0; const interval = setInterval(() => { if (iframe && iframe.contentWindow) { try { iframe.contentWindow.postMessage(data, '*'); clearInterval(interval); } catch (err) { console.warn("❌ Failed to postMessage, retrying..."); } } if (++attempts >= maxAttempts) { console.warn("⚠️ postMessage failed: iframe not ready after multiple attempts."); clearInterval(interval); } }, intervalTime); } // Call the function right after iframe is confirmed to exist videoIframe.onload = function () { postToIframeWhenReady(videoIframe, { resp: resp, inView: false }); }; const playlistContainer = document.getElementById("video-playlist-container"); if(playlistContainer) { firstSelectedVideo = playlistContainer.querySelectorAll('.playlist-video-tile')[0]; if(firstSelectedVideo) { firstVideoH2 = firstSelectedVideo.querySelector('h2'); firstVideoH2.style.setProperty('color', 'var(--discussion-button-color)', 'important'); } } function changeCurrentPlayingVideoTitle(tile, autoplayed = true) { const playlistVideoTileHeading = tile.querySelector('h2'); if (playlistVideoTileHeading) { if(!autoplayed && firstVideoH2.innerText !== playlistVideoTileHeading.innerText) { firstVideoH2.style.setProperty('color', '#EC4E20', 'important'); } if(autoplayed) { let siblingElement = tile.previousElementSibling; const siblingElementH2 = siblingElement.querySelector('h2'); siblingElementH2.style.setProperty('color', '#EC4E20', 'important'); firstVideoH2 = playlistVideoTileHeading; } playlistVideoTileHeading.style.setProperty('color', 'var(--discussion-button-color)', 'important'); if (currentlySelectedTile) { currentlySelectedTile.innerText = playlistVideoTileHeading.innerText; } } } // Inject the video data map as a JS object window.addEventListener('message', function (event) { if (event.data.type === 'AUTOPLAYED_NEXT_VIDEO' && event.data.autoplayPlaylistEnabled) { // Changing the current video index on autoplaying the next video from playlist const allVideoTiles = Array.from(document.querySelectorAll('.playlist-video-tile')); changeCurrentPlayingVideoTitle(allVideoTiles[event.data.currentVideoIndex]); } }); if(playlistContainer) { playlistContainer.addEventListener('click', (event) => { const tile = event.target.closest('.playlist-video-tile'); // Find the index of the clicked tile const allTiles = Array.from(playlistContainer.querySelectorAll('.playlist-video-tile')); const currentIndex = allTiles.findIndex((el) => el === tile); if (tile) { const videoId = tile.getAttribute('data-video-id'); const videoData = videoDataMap.get(videoId); videoIframe.contentWindow.postMessage({ playlist: [videoData], inView: true, clickedVideoFromPlaylist: true, currentIndex: currentIndex }, '*'); // handleVideoTitle([videoData]); changeCurrentPlayingVideoTitle(tile, false); firstVideoH2 = tile.querySelector('h2'); } }); } }); </script> <!-- Quiz Carousel --> <div class='article_bottom_text'></div><br> <div id="video-tab-content"> <script> var video_api_response = JSON.parse("[]"); </script> </div> <div class="d-row content-bw "style="margin-top: 20px;"> <div class="article-pgnavi_prev"><div class="comment_div" data-title="Comments"><button class="author_footer_btn" data-gfg-action="loadComments"> <div class='discussion_panel'> <i class='discussion_button'> </i> Comment </div></button></div><div class="trigger-div"><button class="author_footer_btn"><div class="more_info">More info<span class="more_info_uparrow gfg-icon gfg-icon_arrow-down-thin"></span></div></button></div><a href="https://www.geeksforgeeks.org/about/contact-us/?listicles" target="_blank" class="advertise-with-us-div"><button class="advertise-with-us-btn"><span class="advertise-with-us-text">Advertise with us</span></button></a></div> <div class="article-pgnavi_next"> <a href="https://www.geeksforgeeks.org/how-to-change-the-content-of-a-textarea-using-javascript/" class="pg-head"> <span>Next Article</span> <span class="gfg-icon gfg-icon_next"></span> </a> <!-- <div class="pg-meta">8 Min Read | <a href="#">Java</a></div> --> <div class="pg-main"> <a href="https://www.geeksforgeeks.org/how-to-change-the-content-of-a-textarea-using-javascript/">JavaScript - How to Change the Content of a <Textarea> ?</a> </div> </div> </div> <div class="more-info hidden-div "> <div class="article-meta-author-details "> <div class="article-meta-author-details-block"> <div class="article-meta-author-details-profile-display"> <div class="author_info"> <div class="article-meta-author-details-profile-display-icon"> <a href="https://www.geeksforgeeks.org/user/PranchalKatiyar/" style="text-decoration: none;"><div class="image-wrap" style="position: relative"><p class="profileCard-profile-picture" style="background-color:#E5F9DB; margin:0px;">P</p> <div style="position: absolute;top: -35px; left: -13px;"> <i class="gfg-badge-icon md master"></i> </div> </div> </a> </div> <div class="article-meta-author-details-profile-display-name" > <a aria-label="author profile" href="https://www.geeksforgeeks.org/user/PranchalKatiyar/" style="display: block;overflow: hidden;width: 65px;text-decoration: none;text-overflow: ellipsis;color: var(--gfg-title-color);font-weight: bold;white-space: nowrap;">PranchalKatiyar</a> </div> </div> <div class="author_follow_btn"><div class="article-meta-author-details-follow-button"> <div class="follow-container"> <div class="follow-btn" > <button id="followAuthor" type="button" onclick ="followOrUnfollowAuthor()" value="PranchalKatiyar"> <span role="img" aria-label="plus" class="plus-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true"><defs><style></style></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path></svg></span> <span>Follow</span></button></div></div></div></div> </div> </div> <div class="article_bottom_suggestion_wrapper"> <!-- <div class="article_bottom_suggestion" data-title="Follow"> <a href='https://news.google.com/publications/CAAqBwgKMLTrzwsw44bnAw?hl=en-IN&gl=IN&ceid=IN%3Aen' target="_blank"> <img class="gfg-icon_Gnews no-zoom-in-cursor" src=https://media.geeksforgeeks.org/auth-dashboard-uploads/Google-news.svg loading="lazy" alt="News"></img> </a> </div> --> <div pid="396304" class="article--viewer_like tooltip tooltipBottom" data-title="Like Article"> <!-- <span class="tooltiptext likeTooltipBottom">Like Article</span> --> <button id="likeButton" aria-label="like article" data-gfg-action="like-article" data-bookmark-value="0" data-liked="false" style="color: #5B5A5A !important; display: flex; align-items: center; background-color: unset; margin: 0px !important; padding: 5px 0px;"> <i class="author-badge-like-button"></i> <figure id="likeCount" style="margin-left: 3px; margin-top: 4px; color: var(--like-count-color); font-size: 14px; font-weight: 600;" class="favoriteText"></figure> </button> </div> <div class="article_bottom_suggestion" onclick="improveArticleCall()" data-title="Improve"> <span class="improveTooltipBottom">Improve</span> <i class="author-badge-improvement-button"></i> </div> </div> </div> <div class="bottom-wrap" style="margin-top: 12px; margin-bottom: 25px;"> <div class="improved"> <div class="t-head">Article Tags : </div> <ul> <li style="border-radius: 25px;" class=""> <a href="https://www.geeksforgeeks.org/category/web-technologies/javascript/">JavaScript</a> </li> <li style="border-radius: 25px;" class=""> <a href="https://www.geeksforgeeks.org/category/web-technologies/">Web Technologies</a> </li> <li style="border-radius: 25px;" class=""> <a href="https://www.geeksforgeeks.org/tag/javascript-questions/">JavaScript-Questions</a> </li> </ul> </div> </div> </div> </article> <div class="article--recommended article--recommended_wrapper" id="similar-reads"> <h3 class="new-top-bar top-bar-title">Similar Reads</h3> <div class="gfg-similar-reads-list"> <ul class="similarReadLeftBarList"><div class="second"><a class="similarReadDropdownItem" href="https://www.geeksforgeeks.org/how-to-detect-copy-paste-commands-ctrlv-ctrlc-using-javascript/">How to detect copy paste commands Ctrl+V, Ctrl+C using JavaScript ? <div class="gfg-similar-read-item-subheading">In this article, we will detect copy-paste commands Ctrl+V, and Ctrl+C using JavaScript. To detect the combination of keys with "Ctrl", we use the ctrl property of the keydown event. ApproachEvent Listener: The script adds an keydown event listener to the document.Element Access: It accesses the HTM</div> <div class="reading-time"> <i class="reading-time-icon" data-gfg-action="readingtime"></i> <span style="color: var(--recommendation-card-text-color);font-size: 14px;font-weight: 500;line-height: 17px;">2 min read</span> </div></a><a class="similarReadDropdownItem" href="https://www.geeksforgeeks.org/how-to-detect-and-change-the-content-style-of-a-div-using-jquery/">How to detect and change the content/style of a div using jQuery ? <div class="gfg-similar-read-item-subheading">The changes to the html/text of a div can be detected using jQuery on() method. The on() is used to attach one or more event handlers for the selected elements and child elements in the DOM tree. The on() method is the replacement of the bind(), live() and delegate() method from the jQuery version 1</div> <div class="reading-time"> <i class="reading-time-icon" data-gfg-action="readingtime"></i> <span style="color: var(--recommendation-card-text-color);font-size: 14px;font-weight: 500;line-height: 17px;">2 min read</span> </div></a><a class="similarReadDropdownItem" href="https://www.geeksforgeeks.org/how-to-change-the-content-of-a-textarea-using-javascript/">JavaScript - How to Change the Content of a <Textarea> ? <div class="gfg-similar-read-item-subheading">Here are the various methods to change the content of a textarea using JavaScript.1. Using value PropertyThe value property is the most common method to change or retrieve the content of a <textarea>.HTML<textarea id="myTextarea">Initial content</textarea> <button onclick="chang</div> <div class="reading-time"> <i class="reading-time-icon" data-gfg-action="readingtime"></i> <span style="color: var(--recommendation-card-text-color);font-size: 14px;font-weight: 500;line-height: 17px;">2 min read</span> </div></a><a class="similarReadDropdownItem" href="https://www.geeksforgeeks.org/how-to-detect-when-cancel-is-clicked-on-file-input-using-javascript/">How to detect when cancel is clicked on file input using JavaScript ? <div class="gfg-similar-read-item-subheading">This article describes the method to handle a situation when the user tries to input a file and later fails to upload the file. It gives the status to the user that the file is not uploaded. This may be useful in situations when an important file needs to be submitted or the application requires the</div> <div class="reading-time"> <i class="reading-time-icon" data-gfg-action="readingtime"></i> <span style="color: var(--recommendation-card-text-color);font-size: 14px;font-weight: 500;line-height: 17px;">3 min read</span> </div></a><a class="similarReadDropdownItem" href="https://www.geeksforgeeks.org/how-to-trigger-html-button-after-hitting-enter-button-in-textbox-using-javascript/">How to trigger HTML button after hitting enter button in textbox using JavaScript ? <div class="gfg-similar-read-item-subheading">In this article, we are given an HTML document containing a text area and the task is to trigger the button when the user hit Enter button. We can do it by using the "keyup", "keydown", or "keypress" event listener on the textbox depending on the need. When this event is triggered, we check if the k</div> <div class="reading-time"> <i class="reading-time-icon" data-gfg-action="readingtime"></i> <span style="color: var(--recommendation-card-text-color);font-size: 14px;font-weight: 500;line-height: 17px;">4 min read</span> </div></a><a class="similarReadDropdownItem" href="https://www.geeksforgeeks.org/jquery-detect-a-textbox-content-is-changed-or-not/">JQuery | Detect a textbox content is changed or not <div class="gfg-similar-read-item-subheading">In order to detect the text content of input is changed or not, We are using the .on() method of JQuery. .on() This is a built-in method provided by jQuery and is used to attach event handlers for the selected elements and their child elements. Syntax: $(selector).on(event, childSel, data, fun, map)</div> <div class="reading-time"> <i class="reading-time-icon" data-gfg-action="readingtime"></i> <span style="color: var(--recommendation-card-text-color);font-size: 14px;font-weight: 500;line-height: 17px;">2 min read</span> </div></a></div></ul> </div> </div> <div class="vote-wrap"> <div style="display:none;align-items:center;justify-content:center;width:100%;"> <button aria-label="like" data-type="like" class="vote-this" style="margin-right: 0; margin-left:0 ;"> <i class="gfg-icon gfg-icon_like favoriteIcon"></i> <span class="favoriteLike">Like</span> <figure class="favoriteText"></figure> </button> </div> </div> </div> <div class="article-meta"> <div class="bottom-wrap"> <div id="GFG_AD_InContent_Desktop_BTF_650x250" style="text-align:center;max-height: 300px;"></div> </div> <!-- end --> </div> </div> </div> </div> <div id="report_modal_content" class="report_modal_content" style="display:hidden;"></div> <div class="onopen-discussion-panel"> <div class="discussion-tab"> <div class="discussion_heading"> <div></div> <i class="gfg-icon close-tab-icon"></i> </div> <div class="discussion_content"> <div style="height:100%"> <div style="height:100%" id="comment-system"></div> </div> </div> </div> </div> <div class="rightBar" style="padding-right: 5px;"> <style> .article--container_content{ align-items: unset !important; } .sideBar { position: sticky !important; } .gfg-icon_switch::after { background-position: -40px -281px !important; } .gfg-icon_transaction::after { background-position: -40px -321px !important; } .header-main__profile.selected+.mega-dropdown{ width: 225px !important; } #courses-container .course-price{ display:none; } /* .side--container_wscard .card-content .content .meta:empty, .practiceBannerFromPlugin{ display:none !important; } */ .side--container_wscard .card-content .content .meta{ display:block !important; } .side--container_wscard .card-content .content .meta p{ background-color: rgba(254, 212, 91, 0.6); font-size: 10pt; font-weight: bold; display: inline-block; color: var(--color-black); margin-top: 15px; padding: 0px 5px; } #try-it{ display:initial !important; } #try-it .try-it-div{ line-height: 34px; } .gfg-icon_dark-mode::after { background-position: -40px -680px; } .side--container_wscard .head{ font-size: 14px !important; } .nineDot-menu, .gfg-icon_ndot{ display: none; } #text-15{ flex-direction: column; } .mtq_correct_marker, .mtq_wrong_marker{ display: none; } .sidebar_wrapper > :last-child{ margin: unset !important; margin-left: 5px !important; margin-top: 20px !important; top: 70px !important; } .darkMode-wrap{ bottom:1% !important; } #secondary .textwidget{ margin-left: auto; margin-right: 0; text-align: right; } #secondary .widget_text:last-child{ top: 70px !important; } @media(max-width:768px){ #scrollTopBtn{ display:none !important; } } .rightbar_loggedin_promo_cta{ display:flex; cursor:pointer; margin-bottom:20px; } </style> <div id="secondary" class="widget-area"> <!------------------------ text-15 (for Ads) ------------------------ --> <aside id="text-15" class="widget widget_text"> <div class="textwidget"> <div id="_GFG_ABP_Desktop_RightSideBar_ATF_300x600_2"></div> <div id="GFG_AD_Desktop_RightSideBar_ATF_300x250_2" style="min-width: 300px;margin-bottom:10px;"></div> <div id='GFG_AD_Desktop_RightSideBar_ATF_300x600' style='min-width: 300px; min-height: 600px;margin-bottom:10px;'></div> </div> </aside> <!------------------------ text-16 (For Ads)------------------------ --> <aside id="text-16" class="widget widget_text"> <div class="textwidget"> <div id="_GFG_ABP_Desktop_RightSideBar_MTF_300x600"></div> <div id='GFG_AD_Desktop_RightSideBar_MTF_300x250' style='min-width: 300px;'></div> <div id="_GFG_ABP_Desktop_RightSideBar_BTF_300x600"></div> <div id="_GFG_ABP_Desktop_RightSideBar_BTF_300x600_3"></div> </div> </aside> <!-- ---------------------- courses section ------------------------- --> <!-- <script> var rightBarExploreMoreList = `` </script> --> <!-------------------------------- Text-18 (explore more section + ads) ---------------------------> <aside id="text-18" class="widget widget_text"> <div class="textwidget"> <div id='GFG_AD_Desktop_RightSideBar_BTF_Sticky_300x250' style='min-width: 300px;margin-bottom:10px'></div> <div id='GFG_AD_Desktop_RightSideBar_Docked_160x600' style='min-width: 160px;'></div><div id='GFG_AD_Desktop_RightSideBar_BTFdocked_300x600' style='min-width: 300px;'></div> </aside> <!-------------------------- Text -20 (For maintaining some CSS) ---------------------- --> <aside id="text-20" class="widget widget_text"> <div class="textwidget"> <!-- Please do not delete this div --> </div> </aside> </div> <div id="user-personal-note" style="display: none;"></div> </div> </div> <section class="disqus-section"> <div class="article-page_flex"> <div class="leftBar"> </div> </div> </section> </div> <div id="video-popup" style="display:none"></div> <link rel="stylesheet" href='https://www.geeksforgeeks.org/wp-content/themes/iconic-one/css/articleList.min.css?ver=1.8'> <script> var commentConfig = function () { this.identifier = 'gfg_' + post_type + '_' + post_id; this.title = encodeURIComponent(post_title); this.domain = 'gfg'; this.pageURL = encodeURIComponent($(location).attr('href').replace('www.cdn.geeksforgeeks.org', 'www.geeksforgeeks.org')); this.mode = (getThemeFromCookie() === 'gfgThemeDark') ? 'dark' : 'light'; }; $(function () { if($('.main_wrapper').length){ var main_offset = $('.main_wrapper').offset().top; } var width = $(".main_wrapper").innerWidth() + 10; jQuery("#comment").on("click", function () { jQuery(this).hide(); }); $(document).on("click", "[data-gfg-action='loadComments']", function (e) { if ($("#comment-system").length === 0) { var commentSectionTemplate = ` <div class="disqus--viewer"> <div style="height:100%" class="comment-section" hidden> <div style="height:100%"> <div style="height:100%" id="comment-system"></div> </div> </div> </div`; $(commentSectionTemplate).insertBefore(".article--recommended"); } loadComments(); }); }); function loadComments() { if ($("iframe[id*='discuss-iframe']").length < 1) { (function () { var d = document, s = d.createElement("script"); s.src = commentSysUrl; (d.head || d.body).appendChild(s); })(); } if (!$('.comment-section').is(':visible')) { $('.comment-section').show(); } } function improveArticleCall() { $('.improve-modal--overlay').show(); $('.improve-modal--improvement').show(); $('.locked-status--impove-modal').css("display", "none"); $('.improve-modal--improvement').attr("status", "unlocked"); $('.unlocked-status--improve-modal-content').css("display", "block"); } function showDropdown() { document.getElementById("myDropdown").classList.toggle("show"); } // Close the dropdown if the user clicks outside of it $(window).click(function (e) { if ($('.three_dot_dropdown_content').hasClass("show") && !(e.target.matches('.dropbtn') || (e.target.closest('#myDropdown') && e.target.closest('#myDropdown').matches('#myDropdown')))) { $('.three_dot_dropdown_content').removeClass("show"); } }); function suggestionArticleCall() { $('.improve-modal--overlay').show(); $('.improve-modal--improvement').css("display", "none"); $('.thank-you-message').css("display","none"); $('.improve-modal--suggestion').show(); $('#suggestion-section-textarea').show(); if(suggestEditorInstance !== null){ suggestEditorInstance.setEditorValue(""); } $('.suggestion-section').css('display', 'block'); jQuery('.suggest-bottom-btn').css("display","block"); $('.suggest-bottom-btn').html("Suggest changes"); $('.left-arrow-icon_wrapper').hide(); $('.locked-status--impove-modal').css("display", "none"); $('.improve-modal--improvement').attr("status", "unlocked"); $('.unlocked-status--improve-modal-content').css("display", "block"); return; } $(document).ready(function() { var isfollowingApiCall = false; if ($('.follow-btn').length) { var articleRecommendedTop = $(".article--recommended").offset().top; var articleRecommendedBottom = articleRecommendedTop + $(".article--recommended").outerHeight(); $(window).scroll(function() { var top_of_element = $(".article--recommended").offset().top; var bottom_of_element = $(".article--recommended").offset().top + $(".article--recommended").outerHeight(); var bottom_of_screen = $(window).scrollTop() + $(window).innerHeight(); var top_of_screen = $(window).scrollTop(); if ((bottom_of_screen > top_of_element && top_of_screen < bottom_of_element) || (bottom_of_screen > articleRecommendedTop && top_of_screen < articleRecommendedBottom) || (top_of_screen > articleRecommendedBottom)) { if (!isfollowingApiCall) { isfollowingApiCall = true; setTimeout(function(){ if (loginData && loginData.isLoggedIn) { if (loginData.userName !== $('#followAuthor').val()) { is_following(); } else { $('.profileCard-profile-picture').css('background-color', '#E7E7E7'); } } else { $('.follow-btn').removeClass('hideIt'); } }, 3000); } } }); } $(".accordion-header").click(function() { var arrowIcon = $(this).find('.bottom-arrow-icon'); arrowIcon.toggleClass('rotate180'); }); }); window.isReportArticle = false; function report_article(){ if (!loginData || !loginData.isLoggedIn) { const loginModalButton = $('.login-modal-btn') if (loginModalButton.length) { loginModalButton.click(); } return; } if(!window.isReportArticle){ //to add loader $('.report-loader').addClass('spinner'); jQuery('#report_modal_content').load(gfgSiteUrl+'wp-content/themes/iconic-one/report-modal.php', { PRACTICE_API_URL: practiceAPIURL, PRACTICE_URL:practiceURL },function(responseTxt, statusTxt, xhr){ if(statusTxt == "error"){ alert("Error: " + xhr.status + ": " + xhr.statusText); } }); }else{ window.scrollTo({ top: 0, behavior: 'smooth' }); $("#report_modal_content").show(); } } function closeShareModal() { const shareOption = document.querySelector('[data-gfg-action="share-article"]'); shareOption.classList.remove("hover_share_menu"); let shareModal = document.querySelector(".hover__share-modal-container"); shareModal && shareModal.remove(); } function openShareModal() { closeShareModal(); // Remove existing modal if any let shareModal = document.querySelector(".three_dot_dropdown_share"); shareModal.appendChild(Object.assign(document.createElement("div"), { className: "hover__share-modal-container" })); document.querySelector(".hover__share-modal-container").append( Object.assign(document.createElement('div'), { className: "share__modal" }), ); document.querySelector(".share__modal").append(Object.assign(document.createElement('h1'), { className: "share__modal-heading" }, { textContent: "Share to" })); const socialOptions = ["LinkedIn", "WhatsApp","Twitter", "Copy Link"]; socialOptions.forEach((socialOption) => { const socialContainer = Object.assign(document.createElement('div'), { className: "social__container" }); const icon = Object.assign(document.createElement("div"), { className: `share__icon share__${socialOption.split(" ").join("")}-icon` }); const socialText = Object.assign(document.createElement("span"), { className: "share__option-text" }, { textContent: `${socialOption}` }); const shareLink = (socialOption === "Copy Link") ? Object.assign(document.createElement('div'), { role: "button", className: "link-container CopyLink" }) : Object.assign(document.createElement('a'), { className: "link-container" }); if (socialOption === "LinkedIn") { shareLink.setAttribute('href', `https://www.linkedin.com/sharing/share-offsite/?url=${window.location.href}`); shareLink.setAttribute('target', '_blank'); } if (socialOption === "WhatsApp") { shareLink.setAttribute('href', `https://api.whatsapp.com/send?text=${window.location.href}`); shareLink.setAttribute('target', "_blank"); } if (socialOption === "Twitter") { shareLink.setAttribute('href', `https://twitter.com/intent/tweet?url=${window.location.href}`); shareLink.setAttribute('target', "_blank"); } shareLink.append(icon, socialText); socialContainer.append(shareLink); document.querySelector(".share__modal").appendChild(socialContainer); //adding copy url functionality if(socialOption === "Copy Link") { shareLink.addEventListener("click", function() { var tempInput = document.createElement("input"); tempInput.value = window.location.href; document.body.appendChild(tempInput); tempInput.select(); tempInput.setSelectionRange(0, 99999); // For mobile devices document.execCommand('copy'); document.body.removeChild(tempInput); this.querySelector(".share__option-text").textContent = "Copied" }) } }); // document.querySelector(".hover__share-modal-container").addEventListener("mouseover", () => document.querySelector('[data-gfg-action="share-article"]').classList.add("hover_share_menu")); } function toggleLikeElementVisibility(selector, show) { document.querySelector(`.${selector}`).style.display = show ? "block" : "none"; } function closeKebabMenu(){ document.getElementById("myDropdown").classList.toggle("show"); } </script> <!-- Script for the new design of similar read --> <script> $(document).ready(function() { $("#showMoreTagsBtn").click(function() { $('.articles-hidden-tags').show(); $(this).hide(); }); $("#showMorePracticeTagsBtn").click(function() { $(".practice-tags li:nth-child(n+5)").show(); $(this).hide(); }); }); </script> <!-- Script end for similar read --> <style> .grecaptcha-badge { visibility: hidden !important; } .thank-you-message { height: 100%; display:flex; flex-direction: column; justify-content: center; align-items: center; } .thank-you-message-content { margin-top: 17px; font: 400 20px var(--font-secondary); color: var(--improve-modal-text); line-height: 180%; text-align: center; } .thank-you-message-content h2{ font-family: var(--font-secondary); } .all-footer-information{ width: 100% !important;; } .footer-wrapper_links-list{ margin-block-start: 0em !important; width: 16% !important; padding-inline-start: 18px !important; } .link-head{ margin-bottom: 0px; } @media only screen and (max-width:1340px) { .footer-wrapper_links-list{ overflow-wrap: break-word; } } @media screen and (min-width: 991px) { .all-footer-information{ padding-left:15px; } } @media only screen and (max-width:980px) { .footer-wrapper_branding-address{ padding-top: 10px; } } @media (max-width: 750px) { .thank-you-message-content{ font-size: 14px; line-height: 170%; } } /* CSS variable meant to handle the dark and light mode icon for three 90 event in header courses dropdown */ :root{ --three90headericon : url('https://media.geeksforgeeks.org/auth-dashboard-uploads/three90daylogocompressed.svg'); --three90headericonposition : 0px -40px; --three90leftbarimggrid : url('https://media.geeksforgeeks.org/auth-dashboard-uploads/three90leftbarspritecompressed.svg'); --three90leftbarimgposition : -5px -55px; --three90leftbarbgcolour : #b3abd0; } body[data-dark-mode="true"]{ --three90leftbarimgposition : -6px 1px; --three90headericonposition : 0px 0px; --three90leftbarbgcolour: #8c82b9; } .three90leftbarimg{ margin-left: -5px; height: 30px; background-image: var(--three90leftbarimggrid); background-repeat: no-repeat; background-position: var(--three90leftbarimgposition); background-size: 212px; } .courseTabShimmer{ position: absolute; height: 110%; width: 0; opacity: .7; -webkit-animation: courseShimmer 2s cubic-bezier(0,0,.07,.61) infinite; animation: courseShimmer 2s cubic-bezier(0,0,.07,.61) infinite; box-shadow: 0 0 25px 5px #dddcdc; -webkit-transform: rotate(90deg); transform: rotate(90deg); padding:0px !important; border:unset !important; } @keyframes courseShimmer{ 0% { left: 0; } 55% { left: 100%; } 99% { left: 110%; } } </style> </div><!-- #main .wrapper --> <div id="displayModal" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- <div class="upper-box"> <h3 style="font: normal normal bold 18px/31px var(--font-primary); color: var(--color-black);">Improve your Coding Skills with Practice</h3> <button class="upper-box-btn"><a style="color: white !important;" href="https://practice.geeksforgeeks.org/explore?page=1&sortBy=submissions">Try It!</a></button> </div> --> <div class="modal-content"> <div class="error-message"></div> <!-- <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" data-modal="displayModal">×</button> <h2 class="modal-title" id="dmTitle"></h2> </div> --> <div class="modal-body" id="dmBody"> <div id="modal-dm-content"></div> <div class="modal-overlay" aria-hidden=true> <span class="loader__animation"></span> </div> <!-- body --> </div> </div> </div> </div> <div id="displayModalBackdrop" class="backdrop"></div> <!-- Footer start --> <footer class="gfg-footer" id="gfg-footer"> <div class="footer-wrapper"> <div class="footer-wrapper_branding"> <a class="footer-wrapper_branding-anchor" aria-label="GeeksforGeeks Logo" href="https://www.geeksforgeeks.org/"> <img loading="lazy" style="height: 32px; width: 230px; max-width: fit-content;" class="footer-wrapper_branding-nlogo" src="https://media.geeksforgeeks.org/auth-dashboard-uploads/gfgFooterLogo.png" alt="geeksforgeeks-footer-logo"/> </a> <div class="footer-wrapper_branding-address"> <div class="address_section"> <div class="address-icon-wrapper"> <i class="gfg-icon gfg-icon_pin"></i> <div class="address_div"> <div class="address_name">Corporate & Communications Address:</div> <div class="footer-address"> A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305) </div> </div> </div> <div class="address-icon-wrapper"> <i class="gfg-icon gfg-icon_pin"></i> <div class="address_div"> <div class="address_name">Registered Address:</div> K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305 </div> </div> </div> </div> <div class="footer-wrapper_branding-social"> <a href="https://www.facebook.com/geeksforgeeks.org/" rel="noopener noreferrer" aria-label="GeeksforGeeks Facebook" target="_blank"> <div class="facebook"></div> </a> <a href="https://www.instagram.com/geeks_for_geeks/" rel="noopener noreferrer" aria-label="GeeksforGeeks Instagram" target="_blank"> <div class="instagram"></div> </a> <a href="https://in.linkedin.com/company/geeksforgeeks" rel="noopener noreferrer" aria-label="GeeksforGeeks LinkedIn" target="_blank"> <div class="linkedin"></div> </a> <a href="https://twitter.com/geeksforgeeks" rel="noopener noreferrer" aria-label="GeeksforGeeks Twitter" target="_blank"> <div class="twitter"></div> </a> <a href="https://www.youtube.com/geeksforgeeksvideos" rel="noopener noreferrer" aria-label="GeeksforGeeks YouTube" target="_blank"> <div class="youtube"></div> </a> </div> <div class="footer-wrapper_branding-app"> <a aria-label="GeeksforGeeks App Link" href="https://geeksforgeeksapp.page.link/gfg-app" target="_blank" ><img src="https://media.geeksforgeeks.org/auth-dashboard-uploads/googleplay.png" alt="GFG App on Play Store" id="gplay" loading="lazy"></a> <a aria-label="GeeksforGeeks App Link" href="https://geeksforgeeksapp.page.link/gfg-app" target="_blank"><img src="https://media.geeksforgeeks.org/auth-dashboard-uploads/appstore.png" alt="GFG App on App Store" id="appstore" loading="lazy"></a> </div> <div class="footer_advertise_btn_box"> <a href="https://www.geeksforgeeks.org/advertise-with-us/" target="_blank" class="footer_advertise_btn">Advertise with us</a> </div> </div> <div class="all-footer-information"> <div class="footer-wrapper_links" style="justify-content: space-between; text-align: -webkit-left;"><ul class="footer-wrapper_links-list" ><li>Company</li><li><a href=https://www.geeksforgeeks.org/about/>About Us</a></li><li><a href=https://www.geeksforgeeks.org/legal/>Legal</a></li><li><a href=https://www.geeksforgeeks.org/legal/privacy-policy/>Privacy Policy</a></li><li><a href=https://www.geeksforgeeks.org/press-release/>In Media</a></li><li><a href=https://www.geeksforgeeks.org/about/contact-us/>Contact Us</a></li><li><a href=https://www.geeksforgeeks.org/advertise-with-us/>Advertise with us</a></li><li><a href=https://www.geeksforgeeks.org/gfg-corporate-solution/>GFG Corporate Solution</a></li><li><a href=https://www.geeksforgeeks.org/campus-training-program/>Placement Training Program</a></li></ul><ul class="footer-wrapper_links-list" ><li><a class="link-head" href=https://www.geeksforgeeks.org/introduction-to-programming-languages/>Languages</a></li><li><a href=https://www.geeksforgeeks.org/python-programming-language/>Python</a></li><li><a href=https://www.geeksforgeeks.org/java/>Java</a></li><li><a href=https://www.geeksforgeeks.org/c-plus-plus/>C++</a></li><li><a href=https://www.geeksforgeeks.org/php-tutorials/>PHP</a></li><li><a href=https://www.geeksforgeeks.org/golang/>GoLang</a></li><li><a href=https://www.geeksforgeeks.org/sql-tutorial/>SQL</a></li><li><a href=https://www.geeksforgeeks.org/r-tutorial/>R Language</a></li><li><a href=https://www.geeksforgeeks.org/android-tutorial/>Android Tutorial</a></li><li><a href=https://www.geeksforgeeks.org/geeksforgeeks-online-tutorials-free/>Tutorials Archive</a></li></ul><ul class="footer-wrapper_links-list" ><li><a class="link-head" href=https://www.geeksforgeeks.org/learn-data-structures-and-algorithms-dsa-tutorial/>DSA</a></li><li><a href=https://www.geeksforgeeks.org/data-structures/>Data Structures</a></li><li><a href=https://www.geeksforgeeks.org/fundamentals-of-algorithms/>Algorithms</a></li><li><a href=https://www.geeksforgeeks.org/complete-guide-to-dsa-for-beginners/>DSA for Beginners</a></li><li><a href=https://www.geeksforgeeks.org/basic-coding-problems-in-dsa-for-beginners/>Basic DSA Problems</a></li><li><a href=https://www.geeksforgeeks.org/complete-roadmap-to-learn-dsa-from-scratch/>DSA Roadmap</a></li><li><a href=https://www.geeksforgeeks.org/top-100-data-structure-and-algorithms-dsa-interview-questions-topic-wise/>Top 100 DSA Interview Problems</a></li><li><a href=https://www.geeksforgeeks.org/dsa-roadmap-for-beginner-to-advanced-by-sandeep-jain/>DSA Roadmap by Sandeep Jain</a></li><li><a href=https://www.geeksforgeeks.org/geeksforgeeks-master-sheet-list-of-all-cheat-sheets/>All Cheat Sheets</a></li></ul><ul class="footer-wrapper_links-list" ><li><a class="link-head" href=https://www.geeksforgeeks.org/ai-ml-ds/>Data Science & ML</a></li><li><a href=https://www.geeksforgeeks.org/data-science-tutorial/>Data Science With Python</a></li><li><a href=https://www.geeksforgeeks.org/data-science-for-beginners/>Data Science For Beginner</a></li><li><a href=https://www.geeksforgeeks.org/machine-learning/>Machine Learning</a></li><li><a href=https://www.geeksforgeeks.org/machine-learning-mathematics/>ML Maths</a></li><li><a href=https://www.geeksforgeeks.org/python-data-visualization-tutorial/>Data Visualisation</a></li><li><a href=https://www.geeksforgeeks.org/pandas-tutorial/>Pandas</a></li><li><a href=https://www.geeksforgeeks.org/numpy-tutorial/>NumPy</a></li><li><a href=https://www.geeksforgeeks.org/natural-language-processing-nlp-tutorial/>NLP</a></li><li><a href=https://www.geeksforgeeks.org/deep-learning-tutorial/>Deep Learning</a></li></ul><ul class="footer-wrapper_links-list" ><li><a class="link-head" href=https://www.geeksforgeeks.org/web-technology/>Web Technologies</a></li><li><a href=https://www.geeksforgeeks.org/html/>HTML</a></li><li><a href=https://www.geeksforgeeks.org/css/>CSS</a></li><li><a href=https://www.geeksforgeeks.org/javascript/>JavaScript</a></li><li><a href=https://www.geeksforgeeks.org/typescript/>TypeScript</a></li><li><a href=https://www.geeksforgeeks.org/learn-reactjs/>ReactJS</a></li><li><a href=https://www.geeksforgeeks.org/nextjs/>NextJS</a></li><li><a href=https://www.geeksforgeeks.org/bootstrap/>Bootstrap</a></li><li><a href=https://www.geeksforgeeks.org/web-design/>Web Design</a></li></ul><ul class="footer-wrapper_links-list" ><li><a class="link-head" href=https://www.geeksforgeeks.org/python-programming-language/>Python Tutorial</a></li><li><a href=https://www.geeksforgeeks.org/python-programming-examples/>Python Programming Examples</a></li><li><a href=https://www.geeksforgeeks.org/python-projects-beginner-to-advanced/>Python Projects</a></li><li><a href=https://www.geeksforgeeks.org/python-tkinter-tutorial/>Python Tkinter</a></li><li><a href=https://www.geeksforgeeks.org/python-web-scraping-tutorial/>Python Web Scraping</a></li><li><a href=https://www.geeksforgeeks.org/opencv-python-tutorial/>OpenCV Tutorial</a></li><li><a href=https://www.geeksforgeeks.org/python-interview-questions/>Python Interview Question</a></li><li><a href=https://www.geeksforgeeks.org/django-tutorial/>Django</a></li></ul></div><div class="footer-wrapper_links" style="justify-content: space-between; text-align: -webkit-left;"><ul class="footer-wrapper_links-list" style="margin-block-start: 0em; width:16%; padding-inline-start: 18px;"><li>Computer Science</li><li><a href=https://www.geeksforgeeks.org/operating-systems/>Operating Systems</a></li><li><a href=https://www.geeksforgeeks.org/computer-network-tutorials/>Computer Network</a></li><li><a href=https://www.geeksforgeeks.org/dbms/>Database Management System</a></li><li><a href=https://www.geeksforgeeks.org/software-engineering/>Software Engineering</a></li><li><a href=https://www.geeksforgeeks.org/digital-electronics-logic-design-tutorials/>Digital Logic Design</a></li><li><a href=https://www.geeksforgeeks.org/engineering-mathematics-tutorials/>Engineering Maths</a></li><li><a href=https://www.geeksforgeeks.org/software-development/>Software Development</a></li><li><a href=https://www.geeksforgeeks.org/software-testing-tutorial/>Software Testing</a></li></ul><ul class="footer-wrapper_links-list" ><li><a class="link-head" href=https://www.geeksforgeeks.org/devops-tutorial/>DevOps</a></li><li><a href=https://www.geeksforgeeks.org/git-tutorial/>Git</a></li><li><a href=https://www.geeksforgeeks.org/linux-tutorial/>Linux</a></li><li><a href=https://www.geeksforgeeks.org/aws-tutorial/>AWS</a></li><li><a href=https://www.geeksforgeeks.org/docker-tutorial/>Docker</a></li><li><a href=https://www.geeksforgeeks.org/kubernetes-tutorial/>Kubernetes</a></li><li><a href=https://www.geeksforgeeks.org/microsoft-azure/>Azure</a></li><li><a href=https://www.geeksforgeeks.org/google-cloud-platform-tutorial/>GCP</a></li><li><a href=https://www.geeksforgeeks.org/devops-roadmap/>DevOps Roadmap</a></li></ul><ul class="footer-wrapper_links-list" ><li><a class="link-head" href=https://www.geeksforgeeks.org/system-design-tutorial/>System Design</a></li><li><a href=https://www.geeksforgeeks.org/what-is-high-level-design-learn-system-design/>High Level Design</a></li><li><a href=https://www.geeksforgeeks.org/what-is-low-level-design-or-lld-learn-system-design/>Low Level Design</a></li><li><a href=https://www.geeksforgeeks.org/unified-modeling-language-uml-introduction/>UML Diagrams</a></li><li><a href=https://www.geeksforgeeks.org/system-design-interview-guide/>Interview Guide</a></li><li><a href=https://www.geeksforgeeks.org/software-design-patterns/>Design Patterns</a></li><li><a href=https://www.geeksforgeeks.org/object-oriented-analysis-and-design/>OOAD</a></li><li><a href=https://www.geeksforgeeks.org/system-design-interview-bootcamp-guide/>System Design Bootcamp</a></li><li><a href=https://www.geeksforgeeks.org/most-commonly-asked-system-design-interview-problems-questions/>Interview Questions</a></li></ul><ul class="footer-wrapper_links-list" ><li><a class="link-head" href=https://www.geeksforgeeks.org/technical-interview-preparation/>Inteview Preparation</a></li><li><a href=https://www.geeksforgeeks.org/competitive-programming-a-complete-guide/>Competitive Programming</a></li><li><a href=https://www.geeksforgeeks.org/top-algorithms-and-data-structures-for-competitive-programming/>Top DS or Algo for CP</a></li><li><a href=https://www.geeksforgeeks.org/company-wise-recruitment-process/>Company-Wise Recruitment Process</a></li><li><a href=https://www.geeksforgeeks.org/company-preparation/>Company-Wise Preparation</a></li><li><a href=https://www.geeksforgeeks.org/aptitude-questions-and-answers/>Aptitude Preparation</a></li><li><a href=https://www.geeksforgeeks.org/puzzles/>Puzzles</a></li></ul><ul class="footer-wrapper_links-list" ><li>School Subjects</li><li><a href=https://www.geeksforgeeks.org/maths/>Mathematics</a></li><li><a href=https://www.geeksforgeeks.org/physics/>Physics</a></li><li><a href=https://www.geeksforgeeks.org/chemistry/>Chemistry</a></li><li><a href=https://www.geeksforgeeks.org/biology/>Biology</a></li><li><a href=https://www.geeksforgeeks.org/social-science/>Social Science</a></li><li><a href=https://www.geeksforgeeks.org/english-grammar/>English Grammar</a></li><li><a href=https://www.geeksforgeeks.org/commerce/>Commerce</a></li><li><a href=https://www.geeksforgeeks.org/tag/world-general-knowledge/>World GK</a></li></ul><ul class="footer-wrapper_links-list" ><li><a class="link-head" href=https://www.geeksforgeeks.org/videos/>GeeksforGeeks Videos</a></li><li><a href=https://www.geeksforgeeks.org/videos/category/sde-sheet/>DSA</a></li><li><a href=https://www.geeksforgeeks.org/videos/category/python/>Python</a></li><li><a href=https://www.geeksforgeeks.org/videos/category/java-w6y5f4/>Java</a></li><li><a href=https://www.geeksforgeeks.org/videos/category/c/>C++</a></li><li><a href=https://www.geeksforgeeks.org/videos/category/web-development/>Web Development</a></li><li><a href=https://www.geeksforgeeks.org/videos/category/data-science/>Data Science</a></li><li><a href=https://www.geeksforgeeks.org/videos/category/cs-subjects/>CS Subjects</a></li></ul></div> </div> </div> <!-- Jobs Fair 2024 related CSS changes --> <style> :root{ --home-jobs-section-jf-logo: url('https://media.geeksforgeeks.org/auth-dashboard-uploads/JobFair2024Logo.svg'); } body[data-dark-mode="true"] { --home-jobs-section-jf-logo: url('https://media.geeksforgeeks.org/auth-dashboard-uploads/JobFair2024LogoDark.svg'); } .hp_job_section_jf_logo, .job-a-thon-jf-sticky-header-logo{ background: var(--home-jobs-section-jf-logo); height: 50px; background-repeat: no-repeat; width: 105px; background-size: 100px; } @keyframes challenge { 0%{ transform: scale(1); } 50%{ transform: scale(1.03); } 100%{ transform: scale(1); } } .job-a-thon-jf-sticky-header-logo{ height: 45px; } </style> <!-- ---------------------------------- --> <div class="footer-strip" > <div class="copyright"> <a href="https://www.geeksforgeeks.org/" rel="noopener noreferrer" target="_blank">@GeeksforGeeks, Sanchhaya Education Private Limited</a><span>, <a href="https://www.geeksforgeeks.org/copyright-information/">All rights reserved</a></span> </div> <div class="social-links"> </div> </div> </footer> </div><!-- #page --> <script type='text/javascript' src='https://www.geeksforgeeks.org/wp-includes/js/wp-embed.min.js?ver=4.9.8'></script> <!-- Cookie Consent Div--> <div class="cookie-consent hide-consent"> <span class="cookie-text"> We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our <a href="https://www.geeksforgeeks.org/cookie-policy/" target="_blank"><u>Cookie Policy</u></a> & <a href="https://www.geeksforgeeks.org/privacy-policy/" target="_blank"><u>Privacy Policy</u></a> </span> <button class="consent-btn"> Got It ! </button> </div> <!-- Cookie Consent Div ends --> <!--Light Box Div starts--> <div class="lightbox-target"> <img id="lightbox-image" src="" alt="Lightbox"/> <span class="lightbox-close"></span> </div> <!--Light Box Div ends--> <!-- <link rel="stylesheet" href="https://use.typekit.net/mrg0hpc.css"/> --> <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&family=Source+Sans+3:wght@400;600&display=swap" rel="stylesheet"> <script> if(post_slug.includes('premium-plans-payment/') || post_slug.includes('premium-plans/')){ $('.darkMode-wrap').remove(); $('.toggle-darkMode').remove(); } function setGoogleRecaptcha() { var captchaSiteKey = '6LdMFNUZAAAAAIuRtzg0piOT-qXCbDF-iQiUi9KY'; grecaptcha.ready(function() { grecaptcha.execute(captchaSiteKey).then(function(token) { document.getElementById('g-recaptcha-response-suggestion-form').value = token; suggestionCall(); }); }); } </script> <div class="improve-modal--overlay" style="display: none;"> <div class="improve-modal--improvement" status="locked"> <div class="improve-modal--improve-header"> <div class="improve-header-fst-child">Improvement</div> <div class="improve-header-sec-child"> <i class="gfg-icon improve-cross-icon"></i> </div> </div> <div class="locked-status--impove-modal"> <div class="improve-modal--improve-content error-message"></div> <div class="improve-modal--improve-bottom"> <button class="improve-bottom-btn" type="button">Suggest changes</button> </div> </div> <div class="unlocked-status--improve-modal-content"> <div class="suggest-change_wrapper"> <div class="suggest-change-content_wrapper"> <div class="suggest-change">Suggest Changes</div> <div class="suggest-changes-about">Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.</div> </div> <div class="suggest-change-icon_wrapper"> <img loading="lazy" class="suggest-change-icon" src="https://media.geeksforgeeks.org/auth-dashboard-uploads/suggestChangeIcon.png" alt="geeksforgeeks-suggest-icon"/> </div> </div> <div class="create-improvement_wrapper"> <div class="create-improvement-content_wrapper"> <div class="create-improvement">Create Improvement</div> <div class="create-improvements-about">Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.</div> </div> <div class="create-improvement-icon_wrapper"> <img loading="lazy" class="create-improvement-icon" src="https://media.geeksforgeeks.org/auth-dashboard-uploads/createImprovementIcon.png" alt="geeksforgeeks-improvement-icon"/> </div> </div> <div class="error-status"></div> </div> </div> <div class="improve-modal--suggestion" style="display: none;"> <!-- Header of improve-modal--improvement and improve-modal--suggestion have same CSS rule that's why I use same class name --> <div class="improve-modal--improve-header"> <div class="left-arrow-icon_suggest_wrapper"> <div class="left-arrow-icon_wrapper"> <i class="gfg-icon improve-left-arrow-icon"></i> </div> <div class="improve-header-fst-child">Suggest Changes</div> </div> <div class="improve-header-sec-child"> <i class="gfg-icon improve-cross-icon"></i> </div> </div> <div class="suggestion-modal-section"> <div class="suggestion-section">min 4 words, max Words Limit:1000</div> <div id="suggestion-section-textarea"> </div> <input type="hidden" name="g-recaptcha-suggestion-response" id="g-recaptcha-response-suggestion-form"> <div class="thank-you-message" style="text-align: center; display:none"> <h2>Thank You!</h2> <div class="thank-you-message-content">Your suggestions are valuable to us.</div> </div> </div> <!-- Button of improve-modal--improvement and improve-modal--suggestion have same CSS rule that's why I use same class name --> <div class="improve-modal--improve-bottom suggestion-btn"> <p><span id="suggestion-modal-alert" style="display: none;"></span></p> <button class="suggest-bottom-btn" type="button"></button> </div> </div> <a href="#" style="visibility:hidden" class="create-improvement-redirection-to-write" target="_blank"></a> </div> <script> //code to add text editor on click in suggestion modal in improvements let suggestEditorInstance=null; //global variable to access editor instance let editorLoaded = false; $('.suggest-change_wrapper,.improve_dot_dropdown_inner_div, .locked-status--impove-modal .improve-bottom-btn ,#user-personal-note ').one('click',function() { //editor already loaded then return if(editorLoaded){ return; } // if($('.spinner-loading-overlay:eq(0)').length){ // $('.spinner-loading-overlay:eq(0)').remove(); // } // $('body').append('<div class="spinner-loading-overlay"></div>'); // $('.spinner-loading-overlay').show(); let script = document.createElement('script'); script.src = 'https://assets.geeksforgeeks.org/v2/editor-prod/static/js/bundle.min.js'; script.defer = true document.head.appendChild(script); script.onload = function() { suggestionModalEditor() //to add editor in suggestion modal if(loginData && loginData.premiumConsent){ personalNoteEditor() //to load editor in personal note } } script.onerror = function() { if($('.editorError').length){ $('.editorError').remove(); } var messageDiv = $('<div class="editorError"></div>').text('Editor not loaded due to some issues'); $('#suggestion-section-textarea').append(messageDiv); $('.suggest-bottom-btn').hide(); $('.suggestion-section').hide(); editorLoaded = false; } }); //suggestion modal editor function suggestionModalEditor(){ // editor params const params = { data: undefined, plugins: ["BOLD", "ITALIC", "UNDERLINE", "PREBLOCK"], } // loading editor try { suggestEditorInstance = new GFGEditorWrapper("suggestion-section-textarea", params, { appNode: true }) suggestEditorInstance._createEditor("") $('.spinner-loading-overlay:eq(0)').remove(); editorLoaded = true; } catch (error) { $('.spinner-loading-overlay:eq(0)').remove(); editorLoaded = false; } } //personal note editor function personalNoteEditor(){ // editor params const params = { data: undefined, plugins: ["UNDO", "REDO", "BOLD", "ITALIC", "NUMBERED_LIST", "BULLET_LIST", "TEXTALIGNMENTDROPDOWN"], placeholderText: "Description to be......", } // loading editor try { let notesEditorInstance = new GFGEditorWrapper("pn-editor", params, { appNode: true }) notesEditorInstance._createEditor(loginData&&loginData.user_personal_note?loginData.user_personal_note:"") $('.spinner-loading-overlay:eq(0)').remove(); editorLoaded = true; } catch (error) { $('.spinner-loading-overlay:eq(0)').remove(); editorLoaded = false; } } var lockedCasesHtml = `<span class="improve-modal--improve-content-modified"></span><span>You can suggest the changes for now and it will be under 'My Suggestions' Tab on Write.</span><br><br><span>You will be notified via email once the article is available for improvement. Thank you for your valuable feedback!</span>`; var badgesRequiredHtml = `<span>It seems that you do not meet the eligibility criteria to create improvements for this article, as only users who have earned specific badges are permitted to do so.</span><br><br><span>However, you can still create improvements through the <a href="https://write.geeksforgeeks.org/pick-improvements/pick" target='_blank'>Pick for Improvement</a> section.</span>`; jQuery('.improve-header-sec-child').on('click', function(){ jQuery('.improve-modal--overlay').hide(); $('.improve-modal--suggestion').hide(); jQuery('#suggestion-modal-alert').hide(); }); $('.suggest-change_wrapper, .locked-status--impove-modal .improve-bottom-btn').on('click',function(){ // when suggest changes option is clicked $('.ContentEditable__root').text(""); $('.suggest-bottom-btn').html("Suggest changes"); $('.thank-you-message').css("display","none"); $('.improve-modal--improvement').hide(); $('.improve-modal--suggestion').show(); $('#suggestion-section-textarea').show(); jQuery('#suggestion-modal-alert').hide(); if(suggestEditorInstance !== null){ suggestEditorInstance.setEditorValue(""); } $('.suggestion-section').css('display', 'block'); jQuery('.suggest-bottom-btn').css("display","block"); }); $('.create-improvement_wrapper').on('click',function(){ // when create improvement option clicked then improvement reason will be shown if(loginData && loginData.isLoggedIn) { $('body').append('<div class="spinner-loading-overlay"></div>'); $('.spinner-loading-overlay').show(); jQuery.ajax({ url: writeApiUrl + 'create-improvement-post/?v=1', type: "POST", contentType: 'application/json; charset=utf-8', dataType: 'json', xhrFields: { withCredentials: true }, data: JSON.stringify({ gfg_id: post_id }), success:function(result) { $('.spinner-loading-overlay:eq(0)').remove(); $('.improve-modal--overlay').hide(); $('.unlocked-status--improve-modal-content').css("display","none"); $('.create-improvement-redirection-to-write').attr('href',writeUrl + 'improve-post/' + `${result.id}` + '/', '_blank'); $('.create-improvement-redirection-to-write')[0].click(); }, error:function(e) { showErrorMessage(e.responseJSON,e.status) }, }); } else { if(loginData && !loginData.isLoggedIn) { $('.improve-modal--overlay').hide(); if ($('.header-main__wrapper').find('.header-main__signup.login-modal-btn').length) { $('.header-main__wrapper').find('.header-main__signup.login-modal-btn').click(); } return; } } }); $('.left-arrow-icon_wrapper').on('click',function(){ if($('.improve-modal--suggestion').is(":visible")) $('.improve-modal--suggestion').hide(); else{ } $('.improve-modal--improvement').show(); }); const showErrorMessage = (result,statusCode) => { if(!result) return; $('.spinner-loading-overlay:eq(0)').remove(); if(statusCode == 403) { $('.improve-modal--improve-content.error-message').html(result.message); jQuery('.improve-modal--overlay').show(); jQuery('.improve-modal--improvement').show(); $('.locked-status--impove-modal').css("display","block"); $('.unlocked-status--improve-modal-content').css("display","none"); $('.improve-modal--improvement').attr("status","locked"); return; } } function suggestionCall() { var editorValue = suggestEditorInstance.getValue(); var suggest_val = $(".ContentEditable__root").find("[data-lexical-text='true']").map(function() { return $(this).text().trim(); }).get().join(' '); suggest_val = suggest_val.replace(/\s+/g, ' ').trim(); var array_String= suggest_val.split(" ") //array of words var gCaptchaToken = $("#g-recaptcha-response-suggestion-form").val(); var error_msg = false; if(suggest_val != "" && array_String.length >=4){ if(editorValue.length <= 2000){ var payload = { "gfg_post_id" : `${post_id}`, "suggestion" : `${editorValue}`, } if(!loginData || !loginData.isLoggedIn) // User is not logged in payload["g-recaptcha-token"] = gCaptchaToken jQuery.ajax({ type:'post', url: "https://apiwrite.geeksforgeeks.org/suggestions/auth/create/", xhrFields: { withCredentials: true }, crossDomain: true, contentType:'application/json', data: JSON.stringify(payload), success:function(data) { if(!loginData || !loginData.isLoggedIn) { grecaptcha.reset(); } jQuery('.spinner-loading-overlay:eq(0)').remove(); jQuery('.suggest-bottom-btn').css("display","none"); $('#suggestion-section-textarea').hide() $('.thank-you-message').css('display', 'flex'); $('.suggestion-section').css('display', 'none'); jQuery('#suggestion-modal-alert').hide(); }, error:function(data) { if(!loginData || !loginData.isLoggedIn) { grecaptcha.reset(); } jQuery('.spinner-loading-overlay:eq(0)').remove(); jQuery('#suggestion-modal-alert').html("Something went wrong."); jQuery('#suggestion-modal-alert').show(); error_msg = true; } }); } else{ jQuery('.spinner-loading-overlay:eq(0)').remove(); jQuery('#suggestion-modal-alert').html("Minimum 4 Words and Maximum Words limit is 1000."); jQuery('#suggestion-modal-alert').show(); jQuery('.ContentEditable__root').focus(); error_msg = true; } } else{ jQuery('.spinner-loading-overlay:eq(0)').remove(); jQuery('#suggestion-modal-alert').html("Enter atleast four words !"); jQuery('#suggestion-modal-alert').show(); jQuery('.ContentEditable__root').focus(); error_msg = true; } if(error_msg){ setTimeout(() => { jQuery('.ContentEditable__root').focus(); jQuery('#suggestion-modal-alert').hide(); }, 3000); } } document.querySelector('.suggest-bottom-btn').addEventListener('click', function(){ jQuery('body').append('<div class="spinner-loading-overlay"></div>'); jQuery('.spinner-loading-overlay').show(); if(loginData && loginData.isLoggedIn) { suggestionCall(); return; } // script for grecaptcha loaded in loginmodal.html and call function to set the token setGoogleRecaptcha(); }); $('.improvement-bottom-btn.create-improvement-btn').click(function() { //create improvement button is clicked $('body').append('<div class="spinner-loading-overlay"></div>'); $('.spinner-loading-overlay').show(); // send this option via create-improvement-post api jQuery.ajax({ url: writeApiUrl + 'create-improvement-post/?v=1', type: "POST", contentType: 'application/json; charset=utf-8', dataType: 'json', xhrFields: { withCredentials: true }, data: JSON.stringify({ gfg_id: post_id }), success:function(result) { $('.spinner-loading-overlay:eq(0)').remove(); $('.improve-modal--overlay').hide(); $('.create-improvement-redirection-to-write').attr('href',writeUrl + 'improve-post/' + `${result.id}` + '/', '_blank'); $('.create-improvement-redirection-to-write')[0].click(); }, error:function(e) { showErrorMessage(e.responseJSON,e.status); }, }); }); </script> <script> var AdblockPlus = new function() { this.detect = function(px, callback) { var detected = false; var checksRemain = 2; var error1 = false; var error2 = false; if (typeof callback != "function") return; px += "?ch=*&rn=*"; function beforeCheck(callback, timeout) { if (checksRemain == 0 || timeout > 1E3) callback(checksRemain == 0 && detected); else setTimeout(function() { beforeCheck(callback, timeout * 2) }, timeout * 2) } function checkImages() { if (--checksRemain) return; detected = !error1 && error2 } var random = Math.random() * 11; var img1 = new Image; img1.onload = checkImages; img1.onerror = function() { error1 = true; checkImages() }; img1.src = px.replace(/\*/, 1).replace(/\*/, random); var img2 = new Image; img2.onload = checkImages; img2.onerror = function() { error2 = true; checkImages() }; img2.src = px.replace(/\*/, 2).replace(/\*/, random); beforeCheck(callback, 250) } }; /* AdblockPlus.detect("https://cdnads.geeksforgeeks.org/res/px.gif", function(abp){ window.googletag = window.googletag || {cmd: []}; window.abp=abp; var elms = [...document.querySelectorAll('div[id^=_GFG_ABP_]')]; const units=elms.map(elem=>elem.id) if(abp) { for(let curr_unit of units) { const iframe = document.createElement('iframe'); iframe.setAttribute('src',"https://aa.geeksforgeeks.org/iframe.html?code="+curr_unit.substr(1)) const elem = document.getElementById(curr_unit) const div = document.createElement('div'); div.setAttribute('id',curr_unit.substr(1)) let sizes = curr_unit.split("_"); sizes = sizes.filter(val => val.includes('x')); let [width, height] = sizes[0].split("x"); iframe.style.width = `${+width+20}px` iframe.style.height = `${+height+20}px` if(elem) { elem.appendChild(iframe); } } var gfgAdDivs = [...document.querySelectorAll('div[id^=GFG_AD_]')]; gfgAdDivs.forEach(gfgDiv => document.getElementById(gfgDiv.id).removeAttribute("style")); jQuery('#secondary .widget_text:last-child').css({"position": "unset"}); } });*/ AdblockPlus.detect("https://cdnads.geeksforgeeks.org/res/px.gif", function(abp){ window.googletag = window.googletag || {cmd: []}; window.abp=abp; var elms = [...document.querySelectorAll('div[id^=_GFG_ABP_]')]; //const units=elms.map(elem=>elem.id) const units = elms .filter(elem => !(window.innerWidth < 1500 && elem.id === "_GFG_ABP_Incontent_728x90")) .map(elem => elem.id); if(abp) { isAdBlockerPresent = true; for(let curr_unit of units) { const iframe = document.createElement('iframe'); iframe.addEventListener("load", () => { iframe.contentWindow.postMessage(JSON.stringify({host: window.location.host,category: window.arrPostCatName,parentWidth: window.innerWidth}),'https://aa.geeksforgeeks.org'); }); iframe.setAttribute('src',"https://aa.geeksforgeeks.org/iframe.html?code="+curr_unit.substr(1)) const elem = document.getElementById(curr_unit) const div = document.createElement('div'); div.setAttribute('id',curr_unit.substr(1)) let sizes = curr_unit.split("_"); sizes = sizes.filter(val => val.includes('x')); let [width, height] = sizes[0].split("x"); iframe.style.width = `${+width+20}px` iframe.style.height = `${+height+20}px` if(elem) { elem.appendChild(iframe); } } var gfgAdDivs = [...document.querySelectorAll('div[id^=GFG_AD_]')]; gfgAdDivs.forEach(gfgDiv => document.getElementById(gfgDiv.id).removeAttribute("style")); jQuery('#secondary .widget_text:last-child').css({"position": "unset"}); } else{ try { var isAdblockEnabled = t => fetch( new Request('https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js', { method: 'HEAD', mode: 'no-cors' }) ).catch(t); isAdblockEnabled(() => { // here goes modal pop-up code isAdBlockerPresent = true; }); } catch (err) {console.error(err);} } }); function closeAdBlockPopupModal(){ const modal = document.getElementById("adBlockerModal"); $('body').removeClass('body-for-ad-blocker'); $('#adBlockerModal').remove() localStorage.setItem('gfgAdBlockPopup',new Date()) } function showAdblockerModal(){ let randomNumberForButtonText = Math.round(Math.random()); let currTime = new Date(); let lastTime = new Date(localStorage.getItem('gfgAdBlockPopup')); if(((currTime-lastTime)/(1000*60*60))<1) { return; } const adBlockerModal = `<div id="adBlockerModal" class="ad-blocker-modal"> <div id="ad-blocker-modal-overlay"> <div id="ad-blocker-outer-div"> <div id="ad-blocker-div"> <p id="ad-blocker-div-warning" style="margin-bottom: 30px;">It seems that you are using an ad blocker.<br><span style="font-size: 22px;font-weight: normal;">Please disable it to support us!</span></p> <div id="ad-blocker-div-btns"> <button id="ad-blocker-div-button1" onclick="handleAdBlockerClick('disabled')"> I disabled my ad blocker </button> <a href="https://www.geeksforgeeks.org/geeksforgeeks-premium-subscription" target="_blank"> <button id="ad-blocker-div-button2" style=" background: linear-gradient(45deg, #f0bd36, #bf873f); border: 1px solid transparent; color: white; " > ${randomNumberForButtonText === 1 ? "Go Ad-Free with Premium" : "Upgrade for No Ads"} </button> </a> </div> <div id="ad-blocker-div-continue-premium-promo-text"> "For an ad-free experience and exclusive features, subscribe to our Premium Plan!"<br> </div> <div id="ad-blocker-div-continue-btn-div"> <a id="ad-blocker-div-continue-btn" href="#" onclick="closeAdBlockPopupModal()">Continue without supporting</a> </div> </div> </div> </div> </div>`; $('body').append(adBlockerModal); $('body').addClass('body-for-ad-blocker'); const modal = document.getElementById("adBlockerModal"); modal.style.display = "block"; } function handleAdBlockerClick(type){ if(type == 'disabled'){ window.location.reload(); } else if(type == 'info'){ document.getElementById("ad-blocker-div").style.display = "none"; document.getElementById("ad-blocker-info-div").style.display = "flex"; handleAdBlockerIconClick(0); } } var lastSelected= null; //Mapping of name and video URL with the index. const adBlockerVideoMap = [ ['Ad Block Plus','https://media.geeksforgeeks.org/auth-dashboard-uploads/abp-blocker-min.mp4'], ['Ad Block','https://media.geeksforgeeks.org/auth-dashboard-uploads/Ad-block-min.mp4'], ['uBlock Origin','https://media.geeksforgeeks.org/auth-dashboard-uploads/ub-blocke-min.mp4'], ['uBlock','https://media.geeksforgeeks.org/auth-dashboard-uploads/U-blocker-min.mp4'], ] function handleAdBlockerIconClick(currSelected){ const videocontainer = document.getElementById('ad-blocker-info-div-gif'); const videosource = document.getElementById('ad-blocker-info-div-gif-src'); if(lastSelected != null){ document.getElementById("ad-blocker-info-div-icons-"+lastSelected).style.backgroundColor = "white"; document.getElementById("ad-blocker-info-div-icons-"+lastSelected).style.borderColor = "#D6D6D6"; } document.getElementById("ad-blocker-info-div-icons-"+currSelected).style.backgroundColor = "#D9D9D9"; document.getElementById("ad-blocker-info-div-icons-"+currSelected).style.borderColor = "#848484"; document.getElementById('ad-blocker-info-div-name-span').innerHTML = adBlockerVideoMap[currSelected][0] videocontainer.pause(); videosource.setAttribute('src', adBlockerVideoMap[currSelected][1]); videocontainer.load(); videocontainer.play(); lastSelected = currSelected; } </script> <!-- <script async src="https://www.googleoptimize.com/optimize.js?id=OPT-5PGZ8MN"></script> --> <style> /* Temporary CSS for Three90 pop up modal (START)*/ .three90popup__container { width: 100vw; height: 100vh; position: fixed; top:0px; background: var(--job-tab-faded-background); z-index: 1024; display: flex; align-items: center; justify-content: center; } .three90modal__wrapper{ background-color: white; max-width: 350px; display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; } .three90modal__message-container { display: flex; flex-direction: column; align-items: center; font-family: var(--font-primary); } .three90modal__subheading { margin-top: 20px; font-size: 22px; font-weight: 600; } .three90modal__text-message { margin-top: 20px; font-size: 15px; font-weight: 400; text-align: center; padding: 0 5px; } .three90__modal__button-wrapper { width: 100%; padding: 20px 0px; display: flex; justify-content: space-evenly; } .three90__modal__button-wrapper > button { width: 105px; height: 35px; border-radius: 13px; border:none; font-weight: 600; cursor: pointer; } #three90__modal-close-btn:hover { background-color: #cacbcd; } #three90__modal-explore-btn { background-color: #0a0727; color: white } @media screen and (max-width: 441px) { .three90modal__wrapper { max-width: 300px; } } /* Temporary CSS for Three90 pop up modal (END)*/ </style> <script type="text/javascript" > const coursePromotionCities = JSON.parse(`{"NCR":{"LOCATIONS":["Noida","Greater Noida","Ghaziabad","Faridabad","Delhi","New Delhi"],"COURSES":[{"name":"Data Science Course","url":"https:\/\/fanyv88.com:443\/https\/www.geeksforgeeks.org\/courses\/data-science-classroom-program?itm_source=geeksforgeeks&itm_medium=main_header&itm_campaign=courses"},{"name":"Data Analytics Course","url":"https:\/\/fanyv88.com:443\/https\/www.geeksforgeeks.org\/courses\/complete-data-analytics-program?itm_source=geeksforgeeks&itm_medium=main_header&itm_campaign=courses"},{"name":"Complete Backend Development Course","url":"https:\/\/fanyv88.com:443\/https\/www.geeksforgeeks.org\/courses\/complete-java-backend-development-program?itm_source=geeksforgeeks&itm_medium=main_header&itm_campaign=courses"},{"name":"DSA for Interview Preparation","url":"https:\/\/fanyv88.com:443\/https\/www.geeksforgeeks.org\/courses\/dsa-interview-preparation-classroom?itm_source=geeksforgeeks&itm_medium=main_header&itm_campaign=courses"},{"name":"MERN Full Stack Web Development Course","url":"https:\/\/fanyv88.com:443\/https\/www.geeksforgeeks.org\/courses\/mern-full-stack-development-classroom?itm_source=geeksforgeeks&itm_medium=main_header&itm_campaign=courses"},{"name":"All Courses","url":"https:\/\/fanyv88.com:443\/https\/www.geeksforgeeks.org\/courses\/offline-courses?city=noida?itm_source=geeksforgeeks&itm_medium=main_header&itm_campaign=courses"}]},"NON_NCR":{"Bengaluru":[{"name":"Data Science Course","url":"https:\/\/fanyv88.com:443\/https\/www.geeksforgeeks.org\/courses\/data-science-classroom-program?itm_source=geeksforgeeks&itm_medium=main_header&itm_campaign=courses"},{"name":"Complete Data Analytics Program","url":"https:\/\/fanyv88.com:443\/https\/www.geeksforgeeks.org\/courses\/complete-data-analytics-program?itm_source=geeksforgeeks&itm_medium=main_header&itm_campaign=courses"},{"name":"Complete Backend Development Course","url":"https:\/\/fanyv88.com:443\/https\/www.geeksforgeeks.org\/courses\/complete-java-backend-development-program?itm_source=geeksforgeeks&itm_medium=main_header&itm_campaign=courses"},{"name":"DSA For Interview Preparation","url":"https:\/\/fanyv88.com:443\/https\/www.geeksforgeeks.org\/courses\/dsa-interview-preparation-classroom?itm_source=geeksforgeeks&itm_medium=main_header&itm_campaign=courses"},{"name":"MERN Full Stack Web Development Course","url":"https:\/\/fanyv88.com:443\/https\/www.geeksforgeeks.org\/courses\/mern-full-stack-development-classroom?itm_source=geeksforgeeks&itm_medium=main_header&itm_campaign=courses"},{"name":"All Courses","url":"https:\/\/fanyv88.com:443\/https\/www.geeksforgeeks.org\/courses\/offline-courses?city=bengaluru?itm_source=geeksforgeeks&itm_medium=main_header&itm_campaign=courses"}],"Pune":[{"name":"Data Analytics Course","url":"https:\/\/fanyv88.com:443\/https\/www.geeksforgeeks.org\/courses\/complete-data-analytics-program?itm_source=geeksforgeeks&itm_medium=main_header&itm_campaign=courses"},{"name":"DSA For Interview Preparation","url":"https:\/\/fanyv88.com:443\/https\/www.geeksforgeeks.org\/courses\/dsa-interview-preparation-classroom?itm_source=geeksforgeeks&itm_medium=main_header&itm_campaign=courses"},{"name":"MERN Full Stack Web Development Course","url":"https:\/\/fanyv88.com:443\/https\/www.geeksforgeeks.org\/courses\/mern-full-stack-development-classroom?itm_source=geeksforgeeks&itm_medium=main_header&itm_campaign=courses"},{"name":"All Courses","url":"https:\/\/fanyv88.com:443\/https\/www.geeksforgeeks.org\/courses\/offline-courses?city=pune?itm_source=geeksforgeeks&itm_medium=main_header&itm_campaign=courses"}],"Hyderabad":[{"name":"Complete Data Analytics Program","url":"https:\/\/fanyv88.com:443\/https\/www.geeksforgeeks.org\/courses\/complete-data-analytics-program?itm_source=geeksforgeeks&itm_medium=main_header&itm_campaign=courses"},{"name":"Complete Backend Development Course","url":"https:\/\/fanyv88.com:443\/https\/www.geeksforgeeks.org\/courses\/complete-java-backend-development-program?itm_source=geeksforgeeks&itm_medium=main_header&itm_campaign=courses"},{"name":"DSA for Interview Preparation","url":"https:\/\/fanyv88.com:443\/https\/www.geeksforgeeks.org\/courses\/dsa-interview-preparation-classroom?itm_source=geeksforgeeks&itm_medium=main_header&itm_campaign=courses"},{"name":"MERN Full Stack Web Development Course","url":"https:\/\/fanyv88.com:443\/https\/www.geeksforgeeks.org\/courses\/mern-full-stack-development-classroom?itm_source=geeksforgeeks&itm_medium=main_header&itm_campaign=courses"},{"name":"All Courses","url":"https:\/\/fanyv88.com:443\/https\/www.geeksforgeeks.org\/courses\/offline-courses?city=hyderabad?itm_source=geeksforgeeks&itm_medium=main_header&itm_campaign=courses"}]}}`); const offlineCourseTermMapper = JSON.parse(`{"ALL_TERMIDS":["2058","6263","2628","1745","1789","2601","2057","5037","2971","2023","2162","2795"],"COURSE_TERMID_MAP":{"JAVA":["2058"],"DATA_ANALYTICS":["1745","1789","2601","2057","5037","2971","2023","2162","2795"],"DSA":["6263"],"MERN":["2628"]}}`); </script> <script async src="https://www.geeksforgeeks.org/wp-content/themes/iconic-one/js/event-promotion.min.js?ver=4.8"></script> <!-- gfg tabs compatablity bundled js --> <!-- Google Tag Manager --> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-KDVRCT5');</script> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-DWCCJLKX3X"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); // gtag('config', 'AW-474915276'); gtag('config', 'G-DWCCJLKX3X'); gtag('config', 'AW-796001856'); </script> <!-- fancybar ad code start --> <div id="GFG_AD_Desktop_Stickyunit_1x1"></div> <!-- fancybar ad code ends --> <!-- <div id="GFG_AD_gfg_mobile_320x50"></div> --> <style> :root { --com-extra-icons-mobile-image: url(https://media.geeksforgeeks.org/auth-dashboard-uploads/Com-Extra-Icons13.svg); --write-experience-card-1: #ECF5F5; --write-experience-card-icon-1: #21898C; --write-experience-card-2: #EAF2F7; --write-experience-card-icon-2: #3079AC; --write-experience-card-3: #FDEFE6; --write-experience-card-icon-3: #F5A572; --write-experience-card-4: #F1F8F5; --write-experience-card-icon-4: #91C4AD; --write-experience-card-5: #EEE7FF; --write-experience-card-icon-5: #8B72C9; --write-experience-card-6: #F2F8E6; --write-experience-card-icon-6: #78C57F; --editor-button-text-color: #6E6E73; --write-modal-background: #fefefe; --experience-sidebar: #000; --left-bar-background: #FFFFFF; --write-redirect-container:#EAF2F7; --write-redirect-container-hover:#d6e7f2; } /* Dark Mode */ body[data-dark-mode="true"] { --write-modal-background: #161c23; --experience-sidebar: #000; --left-bar-background: #F0F3F5; } .popup-main { padding: 20px 18px 20px 18px; border-radius: 8px; } .popup-main .popup-heading { display: flex; align-items: center; color: #E9E9EA; margin-bottom: 10px; justify-content: space-between; } .popup-main .close-icon { background-image: var(--com-extra-icons-mobile-image);background-position: -15px -1651px;height: 22px;width: 22px;transform: scale(1); margin-bottom: 12px; cursor: pointer; } .popup-main .experience-card { color: #000; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; /* margin-bottom:10px; */ } .popup-main a:hover, .popup-main a:active, .popup-main a:visited { color: inherit; text-decoration: none; } .popup-main .exp-card1, .popup-main .exp-card2, .popup-main .exp-card3, .popup-main .exp-card4, .popup-main .exp-card5, .popup-main .exp-card6 { display: flex; align-items: center; border-radius: 10px; cursor: pointer; } .popup-main .exp-card1 .icon1, .popup-main .exp-card2 .icon2, .popup-main .exp-card3 .icon3, .popup-main .exp-card4 .icon4, .popup-main .exp-card5 .icon5, .popup-main .exp-card6 .icon6 { width: 80px; height: 80px; border-radius: 10px 0px 0px 10px; display: flex; align-items: center; justify-content: center; background: var(--write-experience-card-icon-1); } .popup-main .exp-card1 .icon1, .popup-main .exp-card2 .icon2, .popup-main .exp-card3 .icon3, .popup-main .exp-card4 .icon4, .popup-main .exp-card5 .icon5, .popup-main .exp-card6 .icon6 { width: 80px; height: 80px; border-radius: 10px 0px 0px 10px; display: flex; align-items: center; justify-content: center; } .popup-main .exp-card1 .icon1 { background: var(--write-experience-card-icon-1); } .popup-main .exp-card2 .icon2 { background: var(--write-experience-card-icon-2); } .popup-main .exp-card3 .icon3 { background: var(--write-experience-card-icon-3); } .popup-main .exp-card4 .icon4 { background: var(--write-experience-card-icon-4); } .popup-main .exp-card5 .icon5 { background: var(--write-experience-card-icon-5); } .popup-main .exp-card6 .icon6 { background: var(--write-experience-card-icon-6); } .popup-main .exp-card6 .icon6-image { background-image: url(https://media.geeksforgeeks.org/auth-dashboard-uploads/compass.svg); width: 46px; height: 30px; background-size: 30px; background-repeat: no-repeat; background-position: center; } .popup-main .exp-card1 .icon1-image { background-image: var(--com-extra-icons-mobile-image); width: 46px; height: 28px; background-position: -4px -812px; } .popup-main .exp-card2 .icon2-image { background-image: var(--com-extra-icons-mobile-image); width: 46px; height: 28px; background-position: -4px -888px; } .popup-main .exp-card3 .icon3-image { background-image: var(--com-extra-icons-mobile-image); width: 46px; height: 28px; background-position: -4px -848px; } .popup-main .exp-card4 .icon4-image { background-image: url(https://media.geeksforgeeks.org/auth-dashboard-uploads/competitive.svg); width: 46px; height: 30px; background-size: 30px; background-repeat: no-repeat; background-position: center; } .popup-main .exp-card5 .icon5-image { background-image: var(--com-extra-icons-mobile-image); width: 46px; height: 33px; background-position: -4px -1217px; } .popup-main .exp-card1 .exp-card1-text, .popup-main .exp-card2 .exp-card2-text, .popup-main .exp-card3 .exp-card3-text, .popup-main .exp-card4 .exp-card4-text, .popup-main .exp-card5 .exp-card5-text, .popup-main .exp-card6 .exp-card6-text { display: flex; align-items: center; border-radius: 0px 10px 10px 0px; height: 80px; width: calc(100% - 80px); } .popup-main .exp-card1 { justify-content: flex-start; background: var(--write-experience-card-1); } .popup-main .exp-card2 { justify-content: flex-start; background: var(--write-experience-card-2); } .popup-main .exp-card3 { justify-content: flex-start; background: var(--write-experience-card-3); } .popup-main .exp-card4 { justify-content: flex-start; background: var(--write-experience-card-4); } .popup-main .exp-card5 { justify-content: flex-start; background: var(--write-experience-card-5); } .popup-main .exp-card6 { justify-content: flex-start; background: var(--write-experience-card-6); } .popup-main span { font-family: var(--font-primary); font-size: 14px; font-style: normal; font-weight: 500; line-height: normal; padding-left: 5px; padding-right: 5px; } #popup { display: none; background-color: var(--write-modal-background); padding: 20px; text-align: center; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1026; width: min(650px, calc(100% - 20px)); } .link-container-write{ display:flex; flex-direction:column; } .link-container-write > a { margin:7px 0px; } .phrase__container{ color:var(--color-gfg); border-radius: 6px; width: 100%; background-color:var(--write-redirect-container); padding: 15px; text-align: justify; font-size:14px; } .phrase__container:hover { color:var(--color-gfg) !important; background-color:var(--write-redirect-container-hover); } </style> <div class="popup-container"> <div id="popup" accesskey="" class="popup-main"> <div class="popup-heading"> <h2>What kind of Experience do you want to share?</h2> <div class="close-icon share-experience-modal-close"></div> </div> <!-- <span class="description"style="color: #BEBEC2;">Tell us your type of experiences which can help other fellow Geeks for their future events and preparations.</span> --> <div class="experience-card"> <a class="exp-card5" href= "https://write.geeksforgeeks.org/posts-new?cid=e8fc46fe-75e7-4a4b-be3c-0c862d655ed0" target="_blank"> <div class="icon5"> <div class="icon5-image"></div> </div> <div class="exp-card5-text"> <span style="color: #000;">Interview Experiences</span> </div> </a> <a class="exp-card1" href="https://write.geeksforgeeks.org/posts-new?cid=82536bdb-84e6-4661-87c3-e77c3ac04ede" target="_blank"> <div class="icon1"> <div class="icon1-image"></div> </div> <div class="exp-card1-text"> <span style="color: #000;">Admission Experiences</span> </div> </a> <a class="exp-card6" href= "https://write.geeksforgeeks.org/posts-new?cid=5219b0b2-7671-40a0-9bda-503e28a61c31" target="_blank"> <div class="icon6"> <div class="icon6-image"></div> </div> <div class="exp-card6-text"> <span style="color: #000;">Career Journeys</span> </div> </a> <a class="exp-card2" href="https://write.geeksforgeeks.org/posts-new?cid=22ae3354-15b6-4dd4-a5b4-5c7a105b8a8f" target="_blank"> <div class="icon2"> <div class="icon2-image"></div> </div> <div class="exp-card2-text"> <span style="color: #000;">Work Experiences</span> </div> </a> <a class="exp-card3" href= "https://write.geeksforgeeks.org/posts-new?cid=c5e1ac90-9490-440a-a5fa-6180c87ab8ae" target="_blank"> <div class="icon3"> <div class="icon3-image"></div> </div> <div class="exp-card3-text"> <span style="color: #000;">Campus Experiences</span> </div> </a> <a class="exp-card4" href= "https://write.geeksforgeeks.org/posts-new?cid=5ebb8fe9-b980-4891-af07-f2d62a9735f2" target="_blank"> <div class="icon4"> <div class="icon4-image"></div> </div> <div class="exp-card4-text"> <span style="color: #000;">Competitive Exam Experiences</span> </div> </a> </div> <!-- <div class="link-container-write"> <a href="https://write.geeksforgeeks.org/pick-article?taxonomy=10261&page=1"> <div role="span" class="phrase__container"> Can't choose a topic to write? click here for suggested topics </div> </a> <a href="https://write.geeksforgeeks.org/posts-new"> <div role="span" class="phrase__container"> Write and publish your own Article </div> </a> </div> --> </div> <div id="overlay" onclick="toggleExperiencePopup()" style="display: block;min-height: 100vh;min-width: 100vw;position: fixed;top: 0;bottom: 0;right: 0;left: 0;display: none;justify-content: center;align-items: center;background: rgba(0,0,0,.702);z-index: 1025 !important;backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);word-break: keep-all;"></div> </div> <script> $('.share-experience-modal').click(function(e){ e.preventDefault(); var link = $(this).attr('href'); toggleExperiencePopup(link); }); function toggleExperiencePopup(link) { var popup = document.getElementById("popup"); var overlay = document.getElementById("overlay"); if (window.innerWidth < 992) { window.location.href = link; } else { popup.style.display = (popup.style.display === "block") ? "none" : "block"; overlay.style.display = (overlay.style.display === "block") ? "none" : "block"; } } $('.share-experience-modal-close').click(function(e){ var popup = document.getElementById("popup"); popup.style.display = 'none'; var overlay = document.getElementById("overlay"); overlay.style.display = 'none'; }); </script> </div><!-- Chat bot is being shown for these category articles (8 -> linked-list 9172 -> AI-ML-DS, 1789 -> python 4667 -> math) --> </body> </html>