Closed HelloWorldDC closed 7 months ago
@HelloWorldDC please attach the log file
@anilabhadatta hi, the log file has only 1 line like the title, I will try download again.
@anilabhadatta this is log file I got it
2023-11-08 01:51:14,661 - DEBUG - HomeScreen - browseSaveDirectory completed
saveDirectoryPath: C:/Users/ThanhDC/educative.io_scraper/EducativeDownloaded
2023-11-08 01:51:34,777 - INFO - HomeScreen - Starting Chrome Driver...
Path: C:\Users\ThanhDC\educative.io_scraper\src\ChromeDrivers\win\chromedriver-win64/chromedriver.exe
2023-11-08 01:51:34,779 - DEBUG - HomeScreen - startChromeDriver completed
2023-11-08 01:51:41,257 - DEBUG - HomeScreen - loginAccount called
2023-11-08 01:51:41,282 - DEBUG - HomeScreen - loginAccount completed
2023-11-08 01:51:41,756 - INFO - LoginAccount - LoginAccount initiated...
Login your account in the browser...
To Terminate, Click on Logout Button
2023-11-08 01:51:41,756 - INFO - BrowserUtility - Loading Browser...
2023-11-08 01:51:44,201 - INFO - BrowserUtility - Browser Initiated
2023-11-08 01:51:54,945 - DEBUG - HomeScreen - terminateProcess called
2023-11-08 01:51:54,945 - INFO - HomeScreen - Terminating Process...
2023-11-08 01:51:54,959 - DEBUG - BrowserUtility - getCurrentUrlViaWebsocket called
2023-11-08 01:51:54,959 - DEBUG - BrowserUtility - getDevToolsUrl called
2023-11-08 01:51:54,960 - DEBUG - BrowserUtility - getDevToolsUrl completed with devToolUrl: ws://127.0.0.1:50183/devtools/browser/1f6dcbf7-9de1-4e09-af76-8c35d33e82c6
2023-11-08 01:51:54,966 - INFO - BrowserUtility - Current Url: https://www.educative.io/learn/home
2023-11-08 01:51:54,967 - DEBUG - BrowserUtility - shutdownChromeViaWebsocket called
2023-11-08 01:51:54,967 - DEBUG - BrowserUtility - getDevToolsUrl called
2023-11-08 01:51:54,967 - DEBUG - BrowserUtility - getDevToolsUrl completed with devToolUrl: ws://127.0.0.1:50183/devtools/browser/1f6dcbf7-9de1-4e09-af76-8c35d33e82c6
2023-11-08 01:51:55,021 - INFO - BrowserUtility - Browser closed via websocket
2023-11-08 01:51:55,025 - DEBUG - HomeScreen - terminateProcess completed
2023-11-08 01:51:58,070 - DEBUG - HomeScreen - startScraper called
2023-11-08 01:51:58,072 - DEBUG - HomeScreen - startScraper completed
2023-11-08 01:51:58,504 - INFO - StartScraper - StartScraper Initiated...
To Terminate, Click on Stop ScraperType Button
2023-11-08 01:51:58,510 - INFO - ExtensionScraper - ExtensionScraper initiated...
2023-11-08 01:51:58,511 - INFO - ExtensionScraper - Started Scraping from Text File URL: https://www.educative.io/courses/intermediate-javascript/getting-started?showContent=true
2023-11-08 01:51:58,511 - INFO - BrowserUtility - Loading Browser...
2023-11-08 01:51:59,391 - INFO - BrowserUtility - Browser Initiated
2023-11-08 01:52:02,192 - INFO - ApiUtility - Course Type Selector: a[href*='/courses/']
2023-11-08 01:52:02,232 - INFO - ApiUtility - Getting Next Data
2023-11-08 01:52:02,242 - INFO - ApiUtility - Getting Course Topic URLs List from URL: https://www.educative.io/courses/intermediate-javascript/getting-started?showContent=true
2023-11-08 01:52:03,555 - DEBUG - SeleniumBasicUtility - Expanding all sections function
2023-11-08 01:52:03,555 - INFO - SeleniumBasicUtility - Expanding all sections
2023-11-08 01:52:03,556 - INFO - OSUtility - Sleeping for 2 seconds
2023-11-08 01:52:05,565 - INFO - SeleniumBasicUtility - Expanding all sections
2023-11-08 01:52:05,565 - INFO - OSUtility - Sleeping for 2 seconds
2023-11-08 01:52:07,573 - INFO - SeleniumBasicUtility - Expanding all sections
2023-11-08 01:52:07,574 - INFO - OSUtility - Sleeping for 2 seconds
2023-11-08 01:52:09,580 - INFO - ApiUtility - Course URL Selector: //a[contains(@href, 'courses/intermediate-javascript/')]
2023-11-08 01:52:09,586 - INFO - LoginAccount - Checking if logged in...
2023-11-08 01:52:09,590 - INFO - ApiUtility - Getting Course Collections JSON from URL: https://educative.io/api/collection/10370001/5165314803236864?work_type=collection
2023-11-08 01:52:09,590 - INFO - ApiUtility - Executing JS to get JSON from URL
2023-11-08 01:52:10,257 - DEBUG - ExtensionScraper - Course Topic URLs: ['https://www.educative.io/courses/intermediate-javascript/getting-started?showContent=true', 'https://www.educative.io/courses/intermediate-javascript/important-features-of-a-menu?showContent=true', 'https://www.educative.io/courses/intermediate-javascript/basic-html-code?showContent=true', 'https://www.educative.io/courses/intermediate-javascript/styling-conventions?showContent=true', 'https://www.educative.io/courses/intermediate-javascript/submenu?showContent=true', 'https://www.educative.io/courses/intermediate-javascript/styling-your-submenu?showContent=true', 'https://www.educative.io/courses/intermediate-javascript/getting-data-from-the-server?showContent=true', 'https://www.educative.io/courses/intermediate-javascript/implementing-the-behavior-of-dropdown-menu?showContent=true', 'https://www.educative.io/courses/intermediate-javascript/getting-varied-responses-from-server?showContent=true', 'https://www.educative.io/courses/intermediate-javascript/extending-the-submenu-functionality?showContent=true', 'https://www.educative.io/courses/intermediate-javascript/understanding-the-autocomplete-search-functionality?showContent=true', 'https://www.educative.io/courses/intermediate-javascript/examining-googles-autocomplete-functionality?showContent=true', 'https://www.educative.io/courses/intermediate-javascript/setting-up-a-framework-to-build-googles-autocomplete?showContent=true', 'https://www.educative.io/courses/intermediate-javascript/building-a-server-endpoint-for-autocomplete?showContent=true', 'https://www.educative.io/courses/intermediate-javascript/displaying-autocomplete-suggestions?showContent=true', 'https://www.educative.io/courses/intermediate-javascript/formatting-the-autocomplete-suggestions?showContent=true', 'https://www.educative.io/courses/intermediate-javascript/styling-an-autocomplete-enabled-engine?showContent=true', 'https://www.educative.io/courses/intermediate-javascript/further-styling-an-autocomplete-enabled-engine?showContent=true', 'https://www.educative.io/courses/intermediate-javascript/final-styling-touches-to-the-autocomplete-enabled-engine?showContent=true', 'https://www.educative.io/courses/intermediate-javascript/what-is-a-tooltip?showContent=true', 'https://www.educative.io/courses/intermediate-javascript/examining-the-important-features?showContent=true', 'https://www.educative.io/courses/intermediate-javascript/how-to-determine-the-middle-of-cursor?showContent=true', 'https://www.educative.io/courses/intermediate-javascript/alternative-approach-to-find-the-middle?showContent=true', 'https://www.educative.io/courses/intermediate-javascript/lets-start-building-the-tooltip?showContent=true', 'https://www.educative.io/courses/intermediate-javascript/perfecting-the-position?showContent=true', 'https://www.educative.io/courses/intermediate-javascript/bug-1-selectable-tooltip?showContent=true', 'https://www.educative.io/courses/intermediate-javascript/bug-2-tooltip-displays-on-clicking?showContent=true', 'https://www.educative.io/courses/intermediate-javascript/bug-3-multiline-highlights?showContent=true', 'https://www.educative.io/courses/intermediate-javascript/adding-styling?showContent=true', 'https://www.educative.io/courses/intermediate-javascript/adding-animations?showContent=true', 'https://www.educative.io/courses/intermediate-javascript/what-is-an-autovalidating-form?showContent=true', 'https://www.educative.io/courses/intermediate-javascript/rules-for-user-input-categories?showContent=true', 'https://www.educative.io/courses/intermediate-javascript/building-the-form?showContent=true', 'https://www.educative.io/courses/intermediate-javascript/displaying-errors-when-validation-fails?showContent=true', 'https://www.educative.io/courses/intermediate-javascript/test-driven-development?showContent=true', 'https://www.educative.io/courses/intermediate-javascript/unit-tests?showContent=true', 'https://www.educative.io/courses/intermediate-javascript/integration-tests?showContent=true', 'https://www.educative.io/courses/intermediate-javascript/acceptance-tests?showContent=true', 'https://www.educative.io/courses/intermediate-javascript/unique-errors-for-each-field?showContent=true', 'https://www.educative.io/courses/intermediate-javascript/introduction-to-regular-expressions?showContent=true', 'https://www.educative.io/courses/intermediate-javascript/validation-of-user-input-with-regex?showContent=true', 'https://www.educative.io/courses/intermediate-javascript/displaying-actual-errors?showContent=true', 'https://www.educative.io/courses/intermediate-javascript/styling-the-form?showContent=true', 'https://www.educative.io/courses/intermediate-javascript/guide-to-implementing-rules-for-password?showContent=true', 'https://www.educative.io/courses/intermediate-javascript/restrictions-and-month-selector?showContent=true', 'https://www.educative.io/courses/intermediate-javascript/wrapping-up?showContent=true', 'https://www.educative.io/courses/intermediate-javascript/what-is-an-infinite-list?showContent=true', 'https://www.educative.io/courses/intermediate-javascript/building-an-html-template-for-infinite-lists?showContent=true', 'https://www.educative.io/courses/intermediate-javascript/styling-list-items?showContent=true', 'https://www.educative.io/courses/intermediate-javascript/server-client-communication?showContent=true', 'https://www.educative.io/courses/intermediate-javascript/generating-tweets-from-server?showContent=true', 'https://www.educative.io/courses/intermediate-javascript/client-side-hydration?showContent=true', 'https://www.educative.io/courses/intermediate-javascript/adding-a-loading-element?showContent=true', 'https://www.educative.io/courses/intermediate-javascript/autopopulation?showContent=true', 'https://www.educative.io/courses/intermediate-javascript/ship-it?showContent=true', 'https://www.educative.io/courses/intermediate-javascript/resourcing?showContent=true', 'https://www.educative.io/courses/intermediate-javascript/frameworks-and-libraries?showContent=true', 'https://www.educative.io/courses/intermediate-javascript/project-structure?showContent=true']
2023-11-08 01:52:10,258 - DEBUG - ExtensionScraper - Course Collections JSON: {'courseTitle': 'Intermediate JavaScript: Building Frontend Components', 'topicApiUrlList': ['https://educative.io/api/collection/10370001/5165314803236864/page/5645478960037888?work_type=collection', 'https://educative.io/api/collection/10370001/5165314803236864/page/5639274879778816?work_type=collection', 'https://educative.io/api/collection/10370001/5165314803236864/page/5676830073815040?work_type=collection', 'https://educative.io/api/collection/10370001/5165314803236864/page/5725643752865792?work_type=collection', 'https://educative.io/api/collection/10370001/5165314803236864/page/5733935958982656?work_type=collection', 'https://educative.io/api/collection/10370001/5165314803236864/page/5700735861784576?work_type=collection', 'https://educative.io/api/collection/10370001/5165314803236864/page/5673385510043648?work_type=collection', 'https://educative.io/api/collection/10370001/5165314803236864/page/5718998062727168?work_type=collection', 'https://educative.io/api/collection/10370001/5165314803236864/page/5689792285114368?work_type=collection', 'https://educative.io/api/collection/10370001/5165314803236864/page/5754903989321728?work_type=collection', 'https://educative.io/api/collection/10370001/5165314803236864/page/5643440998055936?work_type=collection', 'https://educative.io/api/collection/10370001/5165314803236864/page/5709068098338816?work_type=collection', 'https://educative.io/api/collection/10370001/5165314803236864/page/5697982787747840?work_type=collection', 'https://educative.io/api/collection/10370001/5165314803236864/page/5764640680181760?work_type=collection', 'https://educative.io/api/collection/10370001/5165314803236864/page/5631943370604544?work_type=collection', 'https://educative.io/api/collection/10370001/5165314803236864/page/5704837555552256?work_type=collection', 'https://educative.io/api/collection/10370001/5165314803236864/page/5665117697998848?work_type=collection', 'https://educative.io/api/collection/10370001/5165314803236864/page/5121099960418304?work_type=collection', 'https://educative.io/api/collection/10370001/5165314803236864/page/5758251144577024?work_type=collection', 'https://educative.io/api/collection/10370001/5165314803236864/page/5674248798470144?work_type=collection', 'https://educative.io/api/collection/10370001/5165314803236864/page/5752142325350400?work_type=collection', 'https://educative.io/api/collection/10370001/5165314803236864/page/5111298845048832?work_type=collection', 'https://educative.io/api/collection/10370001/5165314803236864/page/5659645909663744?work_type=collection', 'https://educative.io/api/collection/10370001/5165314803236864/page/5732694713434112?work_type=collection', 'https://educative.io/api/collection/10370001/5165314803236864/page/5073520312713216?work_type=collection', 'https://educative.io/api/collection/10370001/5165314803236864/page/5735735550279680?work_type=collection', 'https://educative.io/api/collection/10370001/5165314803236864/page/6136226336735232?work_type=collection', 'https://educative.io/api/collection/10370001/5165314803236864/page/6444131803987968?work_type=collection', 'https://educative.io/api/collection/10370001/5165314803236864/page/5655608640405504?work_type=collection', 'https://educative.io/api/collection/10370001/5165314803236864/page/6650089310257152?work_type=collection', 'https://educative.io/api/collection/10370001/5165314803236864/page/5663741160980480?work_type=collection', 'https://educative.io/api/collection/10370001/5165314803236864/page/5730192894984192?work_type=collection', 'https://educative.io/api/collection/10370001/5165314803236864/page/5148362265329664?work_type=collection', 'https://educative.io/api/collection/10370001/5165314803236864/page/6274262172172288?work_type=collection', 'https://educative.io/api/collection/10370001/5165314803236864/page/5630721452408832?work_type=collection', 'https://educative.io/api/collection/10370001/5165314803236864/page/6344768943554560?work_type=collection', 'https://educative.io/api/collection/10370001/5165314803236864/page/5676663945822208?work_type=collection', 'https://educative.io/api/collection/10370001/5165314803236864/page/5707274949492736?work_type=collection', 'https://educative.io/api/collection/10370001/5165314803236864/page/5667168544882688?work_type=collection', 'https://educative.io/api/collection/10370001/5165314803236864/page/5748475799011328?work_type=collection', 'https://educative.io/api/collection/10370001/5165314803236864/page/5740423507083264?work_type=collection', 'https://educative.io/api/collection/10370001/5165314803236864/page/5647308616105984?work_type=collection', 'https://educative.io/api/collection/10370001/5165314803236864/page/5725202142986240?work_type=collection', 'https://educative.io/api/collection/10370001/5165314803236864/page/5686306919153664?work_type=collection', 'https://educative.io/api/collection/10370001/5165314803236864/page/5758531089203200?work_type=collection', 'https://educative.io/api/collection/10370001/5165314803236864/page/5676325415157760?work_type=collection', 'https://educative.io/api/collection/10370001/5165314803236864/page/5077521074749440?work_type=collection', 'https://educative.io/api/collection/10370001/5165314803236864/page/5748755743637504?work_type=collection', 'https://educative.io/api/collection/10370001/5165314803236864/page/5656774724026368?work_type=collection', 'https://educative.io/api/collection/10370001/5165314803236864/page/5734977488551936?work_type=collection', 'https://educative.io/api/collection/10370001/5165314803236864/page/5694639155707904?work_type=collection', 'https://educative.io/api/collection/10370001/5165314803236864/page/5204544732528640?work_type=collection', 'https://educative.io/api/collection/10370001/5165314803236864/page/5710096743006208?work_type=collection', 'https://educative.io/api/collection/10370001/5165314803236864/page/5694771527942144?work_type=collection', 'https://educative.io/api/collection/10370001/5165314803236864/page/5081622768517120?work_type=collection', 'https://educative.io/api/collection/10370001/5165314803236864/page/5660850647990272?work_type=collection', 'https://educative.io/api/collection/10370001/5165314803236864/page/5726683906703360?work_type=collection', 'https://educative.io/api/collection/10370001/5165314803236864/page/5183361953824768?work_type=collection'], 'topicNameList': ['Getting Started', 'Important Features of a Menu', 'Basic HTML Code', 'Styling Conventions', 'Submenu', 'Styling your Submenu', 'Getting Data from the Server', 'Implementing the Behavior of Dropdown Menu', 'Getting Varied Responses from Server', 'Extending the Submenu Functionality', 'Understanding the Autocomplete Search Functionality', "Examining Google's Autocomplete Functionality", "Setting up a Framework to build Google's Autocomplete", 'Building a Server Endpoint for Autocomplete', 'Displaying Autocomplete Suggestions', 'Formatting the Autocomplete Suggestions', 'Styling an Autocomplete Enabled Engine', 'Further Styling an Autocomplete Enabled Engine', 'Final Styling Touches to the Autocomplete Enabled Engine', 'What is a Tooltip?', 'Examining the Important Features', 'How to Determine the Middle of Cursor?', 'Alternative Approach to find the Middle', "Let's Start Building the Tooltip", 'Perfecting the Position', 'Bug 1: Selectable Tooltip', 'Bug 2: Tooltip Displays on Clicking', 'Bug 3: Multiline Highlights', 'Adding Styling', 'Adding Animations', 'What is an Autovalidating form?', 'Rules for User Input Categories', 'Building the Form', 'Displaying Errors when Validation Fails', 'Test Driven Development', 'Unit Tests', 'Integration Tests', 'Acceptance Tests', 'Unique Errors for Each Field', 'Introduction to Regular Expressions', 'Validation of User Input with Regex', 'Displaying Actual Errors', 'Styling the Form', 'Guide to implementing Rules for Password', 'Restrictions and Month Selector', 'Wrapping Up', 'What is an Infinite List?', 'Building an HTML Template for Infinite Lists', 'Styling List items', 'Server Client Communication', 'Generating Tweets from Server', 'Client Side Hydration', "Adding a 'Loading' Element", 'Autopopulation', 'Ship it!', 'Resourcing', 'Frameworks and Libraries', 'Project Structure']}
2023-11-08 01:52:10,261 - INFO - ExtensionScraper - API Urls: 58 == 58 :Topic Urls
2023-11-08 01:52:10,262 - INFO - ExtensionScraper - -----------------------------------------------------------
Scraping Topic: 0-getting started: https://www.educative.io/courses/intermediate-javascript/getting-started?showContent=true
2023-11-08 01:52:10,262 - INFO - LoginAccount - Checking if logged in...
2023-11-08 01:52:10,266 - INFO - ApiUtility - Getting Course API Content JSON from URL: https://educative.io/api/collection/10370001/5165314803236864/page/5645478960037888?work_type=collection
2023-11-08 01:52:10,266 - INFO - ApiUtility - Executing JS to get JSON from URL
2023-11-08 01:52:10,318 - INFO - ApiUtility - Successfully fetched JSON API data
2023-11-08 01:52:10,318 - INFO - OSUtility - Sleeping for 10 seconds
2023-11-08 01:52:21,124 - INFO - SeleniumBasicUtility - Loading page and checking if something went wrong
2023-11-08 01:52:21,124 - INFO - OSUtility - Sleeping for 10 seconds
2023-11-08 01:52:31,169 - INFO - SeleniumBasicUtility - Waiting for webdriver to load topic page
2023-11-08 01:52:31,198 - INFO - SeleniumBasicUtility - Adding name attribute in next/back button
2023-11-08 01:52:31,202 - INFO - BrowserUtility - Scrolling Page
2023-11-08 01:52:31,891 - INFO - OSUtility - Sleeping for 2 seconds
2023-11-08 01:52:33,891 - INFO - RemoveUtility - Removing blur with CSS
2023-11-08 01:52:33,904 - INFO - RemoveUtility - Removing mark-as-completed/completed tick mark
2023-11-08 01:52:33,949 - INFO - RemoveUtility - Removing unwanted elements
2023-11-08 01:52:33,955 - INFO - ShowUtility - Showing single markdown quiz solution
2023-11-08 01:52:33,959 - INFO - ShowUtility - No single markdown quiz solution found
2023-11-08 01:52:33,960 - INFO - ShowUtility - Showing code solutions
2023-11-08 01:52:33,964 - INFO - ShowUtility - No code solution found
2023-11-08 01:52:33,964 - INFO - ShowUtility - Showing hints
2023-11-08 01:52:33,968 - INFO - ShowUtility - No hints found
2023-11-08 01:52:33,968 - INFO - ShowUtility - Showing slides
2023-11-08 01:52:33,972 - INFO - ShowUtility - No slides found
2023-11-08 01:52:33,972 - INFO - SingleFileUtility - Fixing all object tags
2023-11-08 01:52:33,977 - INFO - SingleFileUtility - No object tag found
2023-11-08 01:52:33,977 - INFO - SingleFileUtility - Injecting important scripts
2023-11-08 01:52:33,984 - INFO - OSUtility - Sleeping for 5 seconds
2023-11-08 01:52:38,993 - INFO - OSUtility - Sleeping for 5 seconds
2023-11-08 01:52:43,994 - INFO - SingleFileUtility - Making code selectable
2023-11-08 01:52:43,999 - INFO - SingleFileUtility - No code found
2023-11-08 01:52:43,999 - INFO - SingleFileUtility - getSingleFileHtml: Getting SingleFile Html...
2023-11-08 01:52:45,257 - INFO - ExtensionScraper - Topic File Successfully Created
2023-11-08 01:52:45,258 - DEBUG - ExtensionScraper - Course API Content JSON: [{'content': {'comp_id': 'f02f25f9-5133-4966-8905-93adc22f2438', 'cursorPosition': {'ch': 0, 'line': 18, 'sticky': None}, 'mdHtml': '<p>Hi, welcome to <em>Intermediate Javascript: Building Frontend Components</em>. The purpose of this course is to teach you how to apply the introductory HTML, CSS, and JavaScript that you’ve learned in order to build real-world components. The course will walk you through the process of building several complex components that you’ve likely encountered on popular websites. You’ll learn how to approach common frontend challenges, what questions to ask, how to design solutions once you’ve thought of them, how to debug and work with mistakes, and more. <em>The ultimate goal is to empower you so that you can point to any part of a website and say, “I can build that.”</em></p>\n<p class="katex-block "><span class="katex-display"><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><semantics><mrow></mrow><annotation encoding="application/x-tex"></annotation></semantics></math></span><span class="katex-html" aria-hidden="true"></span></span></span></p>\n<h2>Prerequisite</h2>\n<p>If you don’t know any HTML, CSS, or JavaScript, this course will be a bit difficult to follow, but not impossible. The target audience ranges from people who have gone through at least one introductory course on these topics (or at least, through JavaScript) to entry-level professionals who are looking to level up their front-end skills. If you’re completely new to the topic, I recommend taking <a href="https://www.educative.io/collection/10370001/5686791109607424">one of the excellent courses</a> on Educative before this one. If you’re feeling ambitious, however, complete beginners might be able to follow along by doing their own research on the aspects of the lessons that aren’t explained.</p>\n<p class="katex-block "><span class="katex-display"><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><semantics><mrow></mrow><annotation encoding="application/x-tex"></annotation></semantics></math></span><span class="katex-html" aria-hidden="true"></span></span></span></p>\n<h2>About</h2>\n<p>This course uses plain HTML, CSS, and JavaScript.</p>\n<p>The path to becoming a good frontend engineer includes learning the fundamentals and knowing how to build things with plain JavaScript before adding on libraries and frameworks, which often obscure what you’re really doing. You won’t always be writing and reading code with the library you’ve specialized in, and learning how to build components in native JavaScript makes things seem a lot less like magic.</p>\n<p>You’ll build five different components, and the chapters are meant to be taken in order. The reason for this is that in each chapter, the focus will be on the different aspects of frontend development while building off of what was covered in previous chapters. For example, an implementation detail might be explained in-depth in an earlier chapter, but in later chapters, it’ll be assumed you’ve already gotten enough exposure to it.</p>\n<p class="katex-block "><span class="katex-display"><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><semantics><mrow></mrow><annotation encoding="application/x-tex"></annotation></semantics></math></span><span class="katex-html" aria-hidden="true"></span></span></span></p>\n<h2>Notes</h2>\n<p>A lot of the working examples throughout this course will be self-contained in a tabbed iframe. Please spend time understanding each tab and the changes made.</p>\n<p>If you’re following along, you’ll want to separate your HTML, CSS, and JavaScript into different files, and reference the CSS and JavaScript from your HTML page. It’s omitted from the examples because that’s how the library that helps display them works. So for example, if you have <code>index.html</code>, you’ll want to include after <code><head></code>, something like <code><link rel="stylesheet" type="text/css" href="./index.css"></code>, and just before the <code></body></code> (the closing tag), something like <code><script src="./index.js"></script></code>. I encourage you to follow along with your own files, maybe even implementing pieces yourself before looking at the next example and comparing it.</p>\n', 'text': 'Hi, welcome to *Intermediate Javascript: Building Frontend Components*. The purpose of this course is to teach you how to apply the introductory HTML, CSS, and JavaScript that you\'ve learned in order to build real-world components. The course will walk you through the process of building several complex components that you\'ve likely encountered on popular websites. You\'ll learn how to approach common frontend challenges, what questions to ask, how to design solutions once you\'ve thought of them, how to debug and work with mistakes, and more. *The ultimate goal is to empower you so that you can point to any part of a website and say, "I can build that."*\n$$$$\n## Prerequisite\nIf you don\'t know any HTML, CSS, or JavaScript, this course will be a bit difficult to follow, but not impossible. The target audience ranges from people who have gone through at least one introductory course on these topics (or at least, through JavaScript) to entry-level professionals who are looking to level up their front-end skills. If you\'re completely new to the topic, I recommend taking [one of the excellent courses](https://www.educative.io/collection/10370001/5686791109607424) on Educative before this one. If you\'re feeling ambitious, however, complete beginners might be able to follow along by doing their own research on the aspects of the lessons that aren\'t explained.\n$$$$\n## About\nThis course uses plain HTML, CSS, and JavaScript. \n\nThe path to becoming a good frontend engineer includes learning the fundamentals and knowing how to build things with plain JavaScript before adding on libraries and frameworks, which often obscure what you\'re really doing. You won\'t always be writing and reading code with the library you\'ve specialized in, and learning how to build components in native JavaScript makes things seem a lot less like magic. \n\nYou\'ll build five different components, and the chapters are meant to be taken in order. The reason for this is that in each chapter, the focus will be on the different aspects of frontend development while building off of what was covered in previous chapters. For example, an implementation detail might be explained in-depth in an earlier chapter, but in later chapters, it\'ll be assumed you\'ve already gotten enough exposure to it.\n\n$$$$\n## Notes\nA lot of the working examples throughout this course will be self-contained in a tabbed iframe. Please spend time understanding each tab and the changes made.\n\nIf you\'re following along, you\'ll want to separate your HTML, CSS, and JavaScript into different files, and reference the CSS and JavaScript from your HTML page. It\'s omitted from the examples because that\'s how the library that helps display them works. So for example, if you have `index.html`, you\'ll want to include after `<head>`, something like `<link rel="stylesheet" type="text/css" href="./index.css">`, and just before the `</body>` (the closing tag), something like `<script src="./index.js"></script>`. I encourage you to follow along with your own files, maybe even implementing pieces yourself before looking at the next example and comparing it.', 'version': '2.0'}, 'hash': '1', 'iteration': 7, 'mode': 'edit', 'type': 'MarkdownEditor'}]
2023-11-08 01:52:45,260 - INFO - ExtensionScraper - Downloading Code and Quiz Files if found...
2023-11-08 01:52:45,260 - INFO - ExtensionScraper - Code and Quiz Files Downloaded if found.
2023-11-08 01:52:45,261 - INFO - ExtensionScraper - -----------------------------------------------------------
Scraping Topic: 1-important features of a menu: https://www.educative.io/courses/intermediate-javascript/important-features-of-a-menu?showContent=true
2023-11-08 01:52:45,261 - INFO - LoginAccount - Checking if logged in...
2023-11-08 01:52:45,266 - INFO - ApiUtility - Getting Course API Content JSON from URL: https://educative.io/api/collection/10370001/5165314803236864/page/5639274879778816?work_type=collection
2023-11-08 01:52:45,266 - INFO - ApiUtility - Executing JS to get JSON from URL
2023-11-08 01:52:45,965 - INFO - ApiUtility - Successfully fetched JSON API data
2023-11-08 01:52:45,965 - INFO - OSUtility - Sleeping for 10 seconds
2023-11-08 01:53:05,230 - INFO - SeleniumBasicUtility - Loading page and checking if something went wrong
2023-11-08 01:53:05,231 - INFO - OSUtility - Sleeping for 10 seconds
2023-11-08 01:53:15,334 - INFO - SeleniumBasicUtility - Waiting for webdriver to load topic page
2023-11-08 01:53:15,364 - INFO - SeleniumBasicUtility - Adding name attribute in next/back button
2023-11-08 01:53:15,371 - INFO - BrowserUtility - Scrolling Page
2023-11-08 01:53:16,064 - INFO - OSUtility - Sleeping for 2 seconds
2023-11-08 01:53:18,065 - INFO - RemoveUtility - Removing blur with CSS
2023-11-08 01:53:18,080 - INFO - RemoveUtility - Removing mark-as-completed/completed tick mark
2023-11-08 01:53:18,126 - INFO - RemoveUtility - Removing unwanted elements
2023-11-08 01:53:18,134 - INFO - ShowUtility - Showing single markdown quiz solution
2023-11-08 01:53:18,139 - INFO - ShowUtility - No single markdown quiz solution found
2023-11-08 01:53:18,139 - INFO - ShowUtility - Showing code solutions
2023-11-08 01:53:18,144 - INFO - ShowUtility - No code solution found
2023-11-08 01:53:18,144 - INFO - ShowUtility - Showing hints
2023-11-08 01:53:18,149 - INFO - ShowUtility - No hints found
2023-11-08 01:53:18,149 - INFO - ShowUtility - Showing slides
2023-11-08 01:53:18,153 - INFO - ShowUtility - No slides found
2023-11-08 01:53:18,153 - INFO - SingleFileUtility - Fixing all object tags
2023-11-08 01:53:18,157 - INFO - SingleFileUtility - No object tag found
2023-11-08 01:53:18,157 - INFO - SingleFileUtility - Injecting important scripts
2023-11-08 01:53:18,167 - INFO - OSUtility - Sleeping for 5 seconds
2023-11-08 01:53:23,179 - INFO - OSUtility - Sleeping for 5 seconds
2023-11-08 01:53:28,179 - INFO - SingleFileUtility - Making code selectable
2023-11-08 01:53:28,184 - INFO - SingleFileUtility - No code found
2023-11-08 01:53:28,184 - INFO - SingleFileUtility - getSingleFileHtml: Getting SingleFile Html...
2023-11-08 01:53:47,192 - INFO - ExtensionScraper - Topic File Successfully Created
2023-11-08 01:53:47,193 - DEBUG - ExtensionScraper - Course API Content JSON: [{'children': [{'text': ''}], 'content': {'comp_id': '34a3b76d-b94a-4c56-acb7-ad3364ab4315', 'cursorPosition': 44, 'mdHtml': '<p>Let’s get started by making a dropdown menu!</p>\n<p>Menus can be seen all over the web. Some are simple and expand a single column of options; some are more complex and can nest submenus. If you’re creating a website from scratch with any sort of navigation or extended options, the chances are good that you’ll be implementing a dropdown menu as well.</p>\n<p>We’ll base ours on one used by one of the most popular e-commerce websites: eBay.</p>\n', 'text': "Let’s get started by making a dropdown menu!\n\nMenus can be seen all over the web. Some are simple and expand a single column of options; some are more complex and can nest submenus. If you're creating a website from scratch with any sort of navigation or extended options, the chances are good that you'll be implementing a dropdown menu as well.\n\nWe'll base ours on one used by one of the most popular e-commerce websites: eBay. ", 'version': '2.0'}, 'hash': 0, 'iteration': 1, 'mode': 'view', 'type': 'MarkdownEditor'}, {'children': [{'text': ''}], 'content': {'caption': '', 'comp_id': '60aa7fba-fae6-4e87-b394-a660a0758851', 'image_id': 5717271485874176, 'metadata': {'height': 318, 'name': 'ebay_menu.gif', 'sizeInBytes': 12089751, 'width': 1254}, 'style': 'original'}, 'hash': 1, 'iteration': 0, 'mode': 'view', 'type': 'Image'}, {'children': [{'text': ''}], 'content': {'comp_id': 'c2fa58ea-b3e5-4609-b2ab-fe518138232f', 'cursorPosition': 660, 'mdHtml': '<p>Let’s take note of the features we want to implement.</p>\n<ul>\n<li>There’s a top-level menu bar that is always visible.</li>\n<li>Hovering over an item is what brings up submenus</li>\n<li>Submenus are separated into two, labeled columns</li>\n<li>Submenus include a portion for images</li>\n<li>Submenus are all the same size</li>\n<li>Transitioning from one submenu to another is seamless. Rather than closing and opening animations, the contents change</li>\n<li>The submenu columns have clickable links, but the top-level option is also clickable (e.g., users can click on “Electronics” but also a specific type of electronics)</li>\n<li>Submenu images are also clickable</li>\n<li>When a user’s mouse leaves the submenu, it closes</li>\n</ul>\n', 'text': 'Let\'s take note of the features we want to implement.\n- There\'s a top-level menu bar that is always visible.\n- Hovering over an item is what brings up submenus\n- Submenus are separated into two, labeled columns\n- Submenus include a portion for images\n- Submenus are all the same size\n- Transitioning from one submenu to another is seamless. Rather than closing and opening animations, the contents change\n- The submenu columns have clickable links, but the top-level option is also clickable (e.g., users can click on "Electronics" but also a specific type of electronics)\n- Submenu images are also clickable\n- When a user\'s mouse leaves the submenu, it closes', 'version': '2.0'}, 'hash': 2, 'iteration': 1, 'mode': 'edit', 'saveVersion': 1, 'type': 'MarkdownEditor'}]
2023-11-08 01:53:47,195 - INFO - ExtensionScraper - Downloading Code and Quiz Files if found...
2023-11-08 01:53:47,195 - INFO - ExtensionScraper - Code and Quiz Files Downloaded if found.
2023-11-08 01:53:47,210 - INFO - ExtensionScraper - -----------------------------------------------------------
Scraping Topic: 2-basic html code: https://www.educative.io/courses/intermediate-javascript/basic-html-code?showContent=true
2023-11-08 01:53:47,210 - INFO - LoginAccount - Checking if logged in...
2023-11-08 01:53:47,216 - INFO - ApiUtility - Getting Course API Content JSON from URL: https://educative.io/api/collection/10370001/5165314803236864/page/5676830073815040?work_type=collection
2023-11-08 01:53:47,217 - INFO - ApiUtility - Executing JS to get JSON from URL
2023-11-08 01:53:47,675 - INFO - ApiUtility - Successfully fetched JSON API data
2023-11-08 01:53:47,675 - INFO - OSUtility - Sleeping for 10 seconds
2023-11-08 01:54:01,915 - INFO - SeleniumBasicUtility - Loading page and checking if something went wrong
2023-11-08 01:54:01,916 - INFO - OSUtility - Sleeping for 10 seconds
2023-11-08 01:54:11,963 - INFO - SeleniumBasicUtility - Waiting for webdriver to load topic page
2023-11-08 01:54:11,985 - INFO - SeleniumBasicUtility - Adding name attribute in next/back button
2023-11-08 01:54:11,990 - INFO - BrowserUtility - Scrolling Page
2023-11-08 01:54:12,831 - INFO - OSUtility - Sleeping for 2 seconds
2023-11-08 01:54:14,832 - INFO - RemoveUtility - Removing blur with CSS
2023-11-08 01:54:14,850 - INFO - RemoveUtility - Removing mark-as-completed/completed tick mark
2023-11-08 01:54:14,905 - INFO - RemoveUtility - Removing unwanted elements
2023-11-08 01:54:14,918 - INFO - ShowUtility - Showing single markdown quiz solution
2023-11-08 01:54:14,933 - INFO - ShowUtility - No single markdown quiz solution found
2023-11-08 01:54:14,934 - INFO - ShowUtility - Showing code solutions
2023-11-08 01:54:14,939 - INFO - ShowUtility - No code solution found
2023-11-08 01:54:14,939 - INFO - ShowUtility - Showing hints
2023-11-08 01:54:14,945 - INFO - ShowUtility - No hints found
2023-11-08 01:54:14,945 - INFO - ShowUtility - Showing slides
2023-11-08 01:54:14,951 - INFO - ShowUtility - No slides found
2023-11-08 01:54:14,952 - INFO - SingleFileUtility - Fixing all object tags
2023-11-08 01:54:14,956 - INFO - SingleFileUtility - No object tag found
2023-11-08 01:54:14,957 - INFO - SingleFileUtility - Injecting important scripts
2023-11-08 01:54:14,984 - INFO - OSUtility - Sleeping for 5 seconds
2023-11-08 01:54:19,992 - INFO - OSUtility - Sleeping for 5 seconds
2023-11-08 01:54:24,993 - INFO - SingleFileUtility - Making code selectable
2023-11-08 01:54:24,998 - INFO - SingleFileUtility - getSingleFileHtml: Getting SingleFile Html...
2023-11-08 01:54:26,348 - INFO - ExtensionScraper - Topic File Successfully Created
2023-11-08 01:54:26,349 - DEBUG - ExtensionScraper - Course API Content JSON: [{'children': [{'text': ''}], 'content': {'comp_id': 'ec3a596b-b0ba-4059-98e6-267ebf0a12d4', 'cursorPosition': {'ch': 280, 'line': 2, 'sticky': None}, 'mdHtml': '<p>Let’s dive right into the top-level menu by putting the elements into HTML.</p>\n<p>When considering how to structure HTML, you should be thinking about how to group the things you want to build. For the top-level menu, we can create a group for the menu that encompasses the entire component and a group for each menu item. Let’s create some <code>div</code>s for our groups.</p>\n', 'text': "Let's dive right into the top-level menu by putting the elements into HTML.\n\nWhen considering how to structure HTML, you should be thinking about how to group the things you want to build. For the top-level menu, we can create a group for the menu that encompasses the entire component and a group for each menu item. Let's create some `div`s for our groups.", 'version': '2.0'}, 'hash': 0, 'iteration': 0, 'mode': 'view', 'saveVersion': 1, 'type': 'MarkdownEditor'}, {'children': [{'text': ''}], 'content': {'active': 'html', 'comp_id': '00742b26-e81d-49b0-85f3-7bc98587a8f2', 'filename': '', 'jotted': {'autoRun': True, 'caption': '', 'codePlaygroundTemplate': 'jottedTabs', 'exercise': False, 'files': [{'content': '', 'type': 'css'}, {'content': 'var TestResult = function() {\r\n this.succeeded = false;\r\n this.reason = "";\r\n this.input = "";\r\n this.expected_output = "";\r\n this.actual_output = "";\r\n}\r\n\r\nvar executeTests = function(userJsCode, userCssCode, userHtmlCode, userHtmlPage){\r\n var results = [];\r\n \r\n\tconst jsdom = require("jsdom");\r\n const { JSDOM } = jsdom;\r\n const dom = new JSDOM(userHtmlPage);\r\n \r\n const result = new TestResult();\r\n result.expected_output = \'Hello World\';\r\n result.input = \'Html page\';\r\n \r\n const pTag = dom.window.document.querySelector("p");\r\n if (!pTag) {\r\n result.actual_output = \'null\';\r\n result.succeeded = false;\r\n result.reason = \'No p tag found\'\r\n }\r\n else {\r\n\t const pTagText = pTag ? pTag.textContent : \'\';\r\n \tresult.actual_output = pTagText;\r\n if (pTagText.trim() != \'Hello World\') {\r\n result.reason = \'Did not match expected output (Hello World in a p tag).\'\r\n result.succeeded = false;\r\n } \r\n }\r\n\r\n results.push(result);\r\n\r\n return results;\r\n}\r\n', 'type': 'exercise'}, {'content': '\n\n', 'type': 'hiddenjs'}, {'content': '<html>\n <head>\n </head>\n <body>\n <div>\n <div>\n Home\n </div>\n <div>\n Motors\n </div>\n <div>\n Fashion \n </div>\n <div>\n Electronics\n </div>\n <div>\n Toys\n </div>\n </div>\n </body>\n</html>\n', 'type': 'html'}, {'content': '\n', 'type': 'js'}], 'height': None, 'heightCodepanel': None, 'hideCss': True, 'hideHtml': False, 'hideJs': True, 'hideNav': False, 'hideResult': False, 'hints': None, 'pane': 'result', 'panelsHighlightedLines': {'css': '', 'hiddenjs': '', 'html': '', 'js': ''}, 'plugins': [{'name': 'codemirror', 'options': {'lineNumbers': True, 'theme': 'default'}}, {'name': 'babel', 'options': {'presets': ['es2015', 'stage-2']}}], 'readOnlyState': {'css': False, 'html': False, 'js': False}, 'runOnLoad': False, 'showBabelTransformPane': False, 'showBlank': False, 'showLineNumbers': True, 'showSolution': False, 'solutionPanels': {'css': '', 'html': '', 'js': ''}, 'theme': 'default', 'toggleState': {'css': True, 'html': True, 'js': True, 'result': True}}, 'selectedApiKeys': {}, 'version': '11'}, 'hash': 1, 'iteration': 0, 'mode': 'view', 'type': 'RunJS'}, {'children': [{'text': ''}], 'content': {'comp_id': '1bb6ea83-8284-4465-84d7-d2bde98a65b2', 'cursorPosition': {'ch': 26, 'line': 2, 'sticky': None}, 'mdHtml': '<p>We have a basic HTML layout for a menu, and because this will be static (it won’t change), we can define it directly in our HTML. This is the equivalent of “hard-coding” information, meaning that rather than relying on some external source for the menu items, these menu items are listed directly in the front-end source code.</p>\n<p class="katex-block "><span class="katex-display"><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><semantics><mrow></mrow><annotation encoding="application/x-tex"></annotation></semantics></math></span><span class="katex-html" aria-hidden="true"></span></span></span></p>\n<h2>Dynamic vs Static HTML</h2>\n<p>The alternative is to have data be taken from the server. Take a moment to think about when we’d want to hardcode data to HTML. (Don’t worry if you don’t know the answer.)</p>\n', 'text': 'We have a basic HTML layout for a menu, and because this will be static (it won\'t change), we can define it directly in our HTML. This is the equivalent of "hard-coding" information, meaning that rather than relying on some external source for the menu items, these menu items are listed directly in the front-end source code.\n$$$$\n## Dynamic vs Static HTML\nThe alternative is to have data be taken from the server. Take a moment to think about when we\'d want to hardcode data to HTML. (Don\'t worry if you don\'t know the answer.)', 'version': '2.0'}, 'hash': 2, 'iteration': 0, 'mode': 'view', 'saveVersion': 1, 'type': 'MarkdownEditor'}, {'children': [{'text': ''}], 'content': {'comp_id': '1f4427ca-cbf9-4242-a0ea-ba66611f25f4', 'questions': [{'questionOptions': [{'correct': False, 'mdHtml': '<p>The data is different depending on the user</p>\n', 'text': 'The data is different depending on the user'}, {'correct': True, 'mdHtml': '<p>The data is updated infrequently</p>\n', 'text': 'The data is updated infrequently'}, {'correct': False, 'mdHtml': '<p>The size of the data set is large</p>\n', 'text': 'The size of the data set is large'}, {'correct': False, 'mdHtml': '<p>The data appears on every page</p>\n', 'text': 'The data appears on every page'}], 'questionText': 'When is it appropriate to hardcode data into HTML?', 'questionTextHtml': '<p>When is it appropriate to hardcode data into HTML?</p>\n'}], 'renderMode': 'slide', 'title': '', 'titleMdHtml': '', 'version': '1.0'}, 'hash': 3, 'iteration': 0, 'mode': 'view', 'type': 'Quiz'}, {'children': [{'text': ''}], 'content': {'comp_id': '9eba4229-f059-47b8-a637-22aad5346012', 'cursorPosition': 0, 'mdHtml': '<p>When data is different for each user, we have no way of implementing that in plain HTML. It certainly is possible with some server-side rendering, though. Server-side rendering is when the HTML is passed through the server first and has some data populated dynamically instead of being the same for every user. For example, <code><div id="user">{{user.username}}</div></code> might be a line in some HTML that’s passed through a templating engine on the server to populate the portion in the braces before being served to clients (don’t worry if this syntax looks foreign, it’s not JavaScript). In any case, that’s not considered hardcoding.</p>\n<p>When the data set is large, however, we’d be repeating a lot of code to put it all on the HTML. This violates not only code hygiene by making a page unwieldy to scroll through, but also the DRY (Don’t Repeat Yourself) principle, both of which hint at a more maintainable way to implement this.</p>\n<p>Finally, data appearing on every page is not enough reason by itself to hardcode into the HTML. For example, a username shown on every page is different depending on the user.</p>\n<p>When a user wants a page, loading data onto that page in server-side rendering can add time. For data that is rarely updated, manageable in size, and is the same for every user, hardcoding provides the benefit of having the data immediately available (since HTML loads before JavaScript).</p>\n', 'text': 'When data is different for each user, we have no way of implementing that in plain HTML. It certainly is possible with some server-side rendering, though. Server-side rendering is when the HTML is passed through the server first and has some data populated dynamically instead of being the same for every user. For example, `<div id="user">{{user.username}}</div>` might be a line in some HTML that\'s passed through a templating engine on the server to populate the portion in the braces before being served to clients (don\'t worry if this syntax looks foreign, it\'s not JavaScript). In any case, that\'s not considered hardcoding.\n\nWhen the data set is large, however, we\'d be repeating a lot of code to put it all on the HTML. This violates not only code hygiene by making a page unwieldy to scroll through, but also the DRY (Don\'t Repeat Yourself) principle, both of which hint at a more maintainable way to implement this.\n\nFinally, data appearing on every page is not enough reason by itself to hardcode into the HTML. For example, a username shown on every page is different depending on the user.\n\nWhen a user wants a page, loading data onto that page in server-side rendering can add time. For data that is rarely updated, manageable in size, and is the same for every user, hardcoding provides the benefit of having the data immediately available (since HTML loads before JavaScript).', 'version': '2.0'}, 'hash': 4, 'iteration': 2, 'mode': 'edit', 'saveVersion': 4, 'type': 'MarkdownEditor'}]
2023-11-08 01:54:26,351 - INFO - ExtensionScraper - Downloading Code and Quiz Files if found...
2023-11-08 01:54:26,351 - INFO - OSUtility - Sleeping for 1 seconds
2023-11-08 01:54:27,352 - INFO - CodeUtility - Downloading RunJS...
2023-11-08 01:54:27,354 - INFO - CodeUtility - RunJs Code Downloaded at: C:/Users/ThanhDC/educative.io_scraper/EducativeDownloaded\intermediate javascript building frontend components\2-basic html code\Codes_1
2023-11-08 01:54:27,354 - INFO - QuizUtility - Downloading Quiz...
2023-11-08 01:54:27,438 - ERROR - StartScraper - start: 20: ExtensionScraper:start: 50: ExtensionScraper:scrapeCourse: 91: ExtensionScraper:scrapeTopic: 152: QuizUtility:downloadQuizFiles: 25: QuizUtility:downloadQuiz: 69: 'explanation'
2023-11-08 01:54:27,440 - DEBUG - StartScraper - Exiting Scraper...
@HelloWorldDC git pull latest commit should be fixed
Hi, I got the error as title after scraper the this course. It only downloads the first 3 chapters then stops the browser. What should I do ? Thank you.