Skip to content
Tutorials
Python
Java
Data Structures & Algorithms
ML & Data Science
Interview Corner
Programming Languages
Web Development
CS Subjects
DevOps And Linux
Software and Tools
School Learning
Practice Coding Problems
Courses
DSA to Development
Get IBM Certification
Newly Launched!
Master Django Framework
Become AWS Certified
For Working Professionals
Interview 101: DSA & System Design
Data Science Training Program
JAVA Backend Development (Live)
DevOps Engineering (LIVE)
Data Structures & Algorithms in Python
For Students
Placement Preparation Course
Data Science (Live)
Data Structure & Algorithm-Self Paced (C++/JAVA)
Master Competitive Programming (Live)
Full Stack Development with React & Node JS (Live)
Full Stack Development
Data Science Program
All Courses
HTML Tutorial
HTML Exercises
HTML Tags
HTML Attributes
Global Attributes
Event Attributes
HTML Interview Questions
HTML DOM
DOM Audio/Video
HTML 5
HTML Examples
Color Picker
A to Z Guide
HTML Formatter
Sign In
▲
Open In App
Next Article:
HTML
marginheight Attribute </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-347696 post type-post status-publish format-standard hentry category-web-technologies category-html tag-html-attributes" id="post-347696"> <!-- 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>HTML | <frame> marginheight Attribute</h1> </div> <div class="last_updated_parent"> <div> <span class="strong">Last Updated : </span> <span>30 Sep, 2019</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="347696" ptitle="HTML | <frame> marginheight Attribute" 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="347696" ptitle="HTML | <frame> marginheight Attribute" 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="347696" ptitle="HTML | <frame> marginheight Attribute" 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="347696" ptitle="HTML | <frame> marginheight Attribute" 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="347696" 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="347696" 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="347696" 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> The <strong>HTML <frame> marginheight attribute</strong> is used to specifies the top and bottom margin of the content in an frame element. <strong>Syntax: </strong> <pre><frame marginheight="pixels"></pre> <strong>Attribute Values: </strong> <ul> <strong>pixels:</strong> It contains single value <strong>pixels</strong> which specifies the top and bottom margin of content in an frame element. <strong>Note:</strong> This attribute is not supported by HTML 5. CSS property is used instead of this attribute. Below example illustrates the <frame> marginheight attribute in HTML: <strong>Example:</strong> <gfg-tabs allow-code-exec=true data-run-ide="true"> <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> HTML frame marginheight Attribute <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>frameset</span> <span class=na>cols</span><span class=o>=</span><span class=s>"30%, 40%, 30%"</span><span class=p>></span> <span class=p><</span><span class=nt>frame</span> <span class=na>name</span><span class=o>=</span><span class=s>"left"</span> <span class=na>src</span><span class=o>=</span> <span class=s>"https://media.geeksforgeeks.org/wp-content/uploads/20190401113144/gfg_200X2001.png"</span> <span class=na>marginheight </span><span class=o>=</span><span class=s>"40"</span> <span class=p>/></span> <span class=p><</span><span class=nt>frame</span> <span class=na>name</span><span class=o>=</span><span class=s>"main"</span> <span class=na>src</span><span class=o>=</span> <span class=s>"https://media.geeksforgeeks.org/wp-content/uploads/20190328185307/gfg28.png"</span> <span class=na>marginheight</span><span class=o>=</span><span class=s>"30"</span> <span class=p>/></span> <span class=p><</span><span class=nt>frame</span> <span class=na>name</span><span class=o>=</span><span class=s>"bottom"</span> <span class=na>src</span><span class=o>=</span> <span class=s>"https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png"</span> <span class=na>marginheight </span><span class=o>=</span><span class=s>"40"</span> <span class=p>/></span> <span class=p></</span><span class=nt>frameset</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><strong>Output:</strong> <img src="https://media.geeksforgeeks.org/wp-content/uploads/20190930120133/frame3.png" alt="frameheight" /> <strong>Supported Browsers:</strong> The browsers supported by HTML <frame> marginheight attribute are listed below: <ul> <li>Google Chrome</li> <li>Internet Explorer</li> <li>Firefox</li> <li>Safari</li> <li>Opera</li> </ul> <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/html-iframe-marginheight-attribute/" 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/html-iframe-marginheight-attribute/">HTML <iframe> marginheight Attribute</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/manaschhabra2/" style="text-decoration: none;"><div class="image-wrap" style="position: relative"><p class="profileCard-profile-picture" style="background-color:#FFC8AF; margin:0px;">M</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/manaschhabra2/" style="display: block;overflow: hidden;width: 65px;text-decoration: none;text-overflow: ellipsis;color: var(--gfg-title-color);font-weight: bold;white-space: nowrap;">manaschhabra2</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="manaschhabra2"> <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="347696" 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/">Web Technologies</a> </li> <li style="border-radius: 25px;" class=""> <a href="https://www.geeksforgeeks.org/category/web-technologies/html/">HTML</a> </li> <li style="border-radius: 25px;" class=""> <a href="https://www.geeksforgeeks.org/tag/html-attributes/">HTML-Attributes</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/html-frame-marginwidth-attribute/">HTML <frame> marginwidth Attribute <div class="gfg-similar-read-item-subheading">The HTML <frame> element's marginwidth attribute defines the horizontal space (in pixels) between the frame's content and its left and right borders. This attribute is deprecated in HTML5, with CSS and <iframe> recommended instead.Syntax<frame marginwidth="pixels">Attribute Valuesp</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/html-iframe-marginheight-attribute/">HTML <iframe> marginheight Attribute <div class="gfg-similar-read-item-subheading">The HTML <iframe> marginheight attribute specifies the vertical margin space, in pixels, between the iframe's content and its top and bottom borders. Syntax<iframe marginheight="pixels">Attribute Valuespixels: It contains the value i.e. pixel which specifies the top and bottom margin of</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/html-frame-scrolling-attribute/">HTML | <frame> scrolling Attribute <div class="gfg-similar-read-item-subheading">The HTML <frame> scrolling attribute is used to specify that whether the scrollbar will be displayed or not in the <frame> element. Basically, the scrollbar is used when the content is larger than the Iframe Element.Syntax: <frame scrolling="auto|yes|no"> Attribute Values: auto: It</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;">1 min read</span> </div></a><a class="similarReadDropdownItem" href="https://www.geeksforgeeks.org/html-frame-noresize-attribute/">HTML | <frame> noresize Attribute <div class="gfg-similar-read-item-subheading">The HTML <frame> noresize attribute is used to specify that the frame element can not be resize by the user. This type of attribute is used to lock the size of the frame element. Syntax: <frame noresize="noresize"> Attribute Values: noresize: It defines the frame element that can not be</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;">1 min read</span> </div></a><a class="similarReadDropdownItem" href="https://www.geeksforgeeks.org/html-iframe-marginwidth-attribute/">HTML <iframe> marginwidth Attribute <div class="gfg-similar-read-item-subheading">The HTML <iframe> marginwidth attribute defines the horizontal margin space, in pixels, between the iframe's content and its left and right borders. Syntax<iframe marginwidth="pixels">Attribute Values:pixels: It contains the value i.e. pixel which specifies the right and left margin of t</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/html-embed-width-attribute/">HTML | <embed> width Attribute <div class="gfg-similar-read-item-subheading">The HTML embed width attribute is used to specify the width of the embedded content. Syntax: <embed width="pixels"> Attribute Values: pixels: The width of embed value are set in terms of pixels. It is used to specify the width of embedded content. Example: html <!DOCTYPE html> <html</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;">1 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:\/\/round-lake.dustinice.workers.dev: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:\/\/round-lake.dustinice.workers.dev: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:\/\/round-lake.dustinice.workers.dev: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:\/\/round-lake.dustinice.workers.dev: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:\/\/round-lake.dustinice.workers.dev: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:\/\/round-lake.dustinice.workers.dev: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:\/\/round-lake.dustinice.workers.dev: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:\/\/round-lake.dustinice.workers.dev: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:\/\/round-lake.dustinice.workers.dev: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:\/\/round-lake.dustinice.workers.dev: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:\/\/round-lake.dustinice.workers.dev: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:\/\/round-lake.dustinice.workers.dev: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:\/\/round-lake.dustinice.workers.dev: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:\/\/round-lake.dustinice.workers.dev: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:\/\/round-lake.dustinice.workers.dev: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:\/\/round-lake.dustinice.workers.dev: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:\/\/round-lake.dustinice.workers.dev: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:\/\/round-lake.dustinice.workers.dev: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:\/\/round-lake.dustinice.workers.dev: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:\/\/round-lake.dustinice.workers.dev: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:\/\/round-lake.dustinice.workers.dev: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>