const PAGES = [ { "name": "Sololearn Discuss", "direct_link": "https://www.sololearn.com/discuss", "desc": "Sololearn is the service you are using now! The Sololearn Discuss section in particular (aka the Q&A) has a treasure trove of question and answers.", "image_links": { "mobile": { "bar_open": "https://i.imgur.com/q6pPUKw.jpg", "results": "https://i.imgur.com/qnmsCIL.jpg" }, "web": { "bar_open": "https://i.imgur.com/AGaocJI.png" } } }, { "name": "W3 Schools", "direct_link": "https://www.w3schools.com/", "useful_sublinks": ["https://www.w3schools.com/tags/"], "desc": "W3 Schools is extremely popular and is great for not just describing what you have searched for, but ways to use it by selecting their 'Try It Yourself' button.", "image_links": { "mobile": { "bar_open": "https://imgur.com/V4Zy3Ad.jpg", "bar_closed": "https://i.imgur.com/t81GZa3.jpg" }, "web": { "homepage": "https://i.imgur.com/BasP2yq.png", "bar_open": "https://i.imgur.com/9wvO601.png", "bar_closed": "https://i.imgur.com/PTwi09U.png" } } }, { "name": "Stack Overflow", "direct_link": "https://stackoverflow.com/", "desc": "Stackoverflow is a programmer's paradise. It is similar to the Sololearn Q&A, but has a much bigger audience and geared for all programming levels. You will find questions for almost every framework, error message or programming situation you can think of.

The beauty of SO is that they also have code formatting which helps user's state their exact problem. This additionally helps onlookers easily copy and paste answers into their code and adjust it to their needs. Just beware not to do so blindly and without understanding the answer in full.", "image_links": { "mobile": { "bar_open": "https://i.imgur.com/wkEpdz6.jpg", "bar_closed": "https://i.imgur.com/a9okelx.jpg", }, "web": { "bar_open": "https://i.imgur.com/LFq6hGR.png", } } }, { "name": "Reddit", "direct_link": "https://www.reddit.com/", "useful_sublinks": [ "https://www.reddit.com/r/learnprogramming/", "https://www.reddit.com/r/learnpython/", "https://www.reddit.com/r/webdev/", "https://www.reddit.com/r/cscareerquestions/" ], "desc": "Even though Reddit is a social media website, it is great for searches related to programming and computer science.", "image_links": { "mobile": { "bar_open": "https://i.imgur.com/Qvgn2hf.jpg", "bar_closed": "https://i.imgur.com/k9nXfYV.jpg", }, "web": { "bar_open": "https://i.imgur.com/yhq8wHs.png", "results": "https://i.imgur.com/4noOPQh.png" } } }, { "name": "Youtube", "direct_link": "https://www.youtube.com/", "useful_sublinks": [ { "name": "Web Dev Simplified", "link": "https://www.youtube.com/@WebDevSimplified", "pfp": "https://yt3.googleusercontent.com/ytc/AGIKgqMNnqfr-tuqVi_0YLkfx3-FGohChjCaNTNguHzp=s176-c-k-c0x00ffffff-no-rj", "for": "Amazing, simple but thorough tutorials on all things web dev including HTML, CSS and Javascript along their frameworks such as React and Typescript." }, { "name": "Programming with Mosh", "link": "https://www.youtube.com/@programmingwithmosh", "pfp": "https://yt3.googleusercontent.com/tBEPr-zTNXEeae7VZKSZYfiy6azzs9OHowq5ZvogJeHoVtKtEw2PXSwzMBKVR7W0MI7gyND8=s176-c-k-c0x00ffffff-no-rj", "for": "A variety of introductory but detailed tutorials for various topics in computer science and programming such as Git, OOP, SQL, etc." }, { "name": "Patrick Loeber", "link": "https://www.youtube.com/@patloeber", "pfp": "https://yt3.googleusercontent.com/FrsXA25vVOrWoN7g-UPh5hnZqpskAex0ilQ1LcWUsgtxTtWJAGaD51nMoiptonh_tIprjE9xKQ=s176-c-k-c0x00ffffff-no-rj", "for": "Python learners as well as those who want to get started with machine learning." }, { "name": "Bukoka", "link": "https://www.youtube.com/@Bukola1", "pfp": "https://yt3.googleusercontent.com/ytc/AGIKgqPn8sQAVIdOToLkuJ13RVDbGJHyI-4n_HrfCbM5Og=s176-c-k-c0x00ffffff-no-rj", "for": "Those who want a look into a major MAANG company, Google, and how to do so, especially studying for their interviews." }, { "name": "NeetCode", "link": "https://www.youtube.com/@NeetCode", "pfp": "https://yt3.googleusercontent.com/FqiGBOsNpeWbNw20ULboW0jy88JdpqFO9a-YRJ0C2oc4lZ8uoHYJ38PWSkrjdC_zQgNW9pGU=s176-c-k-c0x00ffffff-no-rj", "for": "Those who want to get better at using Leetcode, particularly for interviews as well as Data Structures and Algorithms." }, { "name": "Coding With John", "link": "https://www.youtube.com/@CodingWithJohn", "pfp": "https://yt3.googleusercontent.com/ytc/AGIKgqMq6EDgrDYNt3qYXp1o44iTGrY9IPU60wY8EKug=s176-c-k-c0x00ffffff-no-rj", "for": "Java AND Kotlin learners. He typically uses Java but his explainations are simple and concise with the bonus of being able to use that knowledge for Kotlin as well since they are interoperable languages." }, { "name": "Amigoscode", "link": "https://www.youtube.com/@amigoscode", "pfp": "https://yt3.googleusercontent.com/ytc/AGIKgqMh_Lda3vOJ89JKG05wBtMCoQGMdQ-6sZ4gAQD-jHw=s176-c-k-c0x00ffffff-no-rj", "for": "A myriad of different tools (especially those related to Java) such as FastAPI, Springboot, Android Development in Java, the IntelliJ IDE, Pycharm, etc." }, { "name": "Philipp Lackner", "link": "https://www.youtube.com/@PhilippLackner", "pfp": "https://yt3.googleusercontent.com/mhup7lzHh_c9b55z0edX65ReN9iJmTF2JU7vMGER9LTOora-NnXtvZdtn_vJmTvW6-y97z0Y=s176-c-k-c0x00ffffff-no-rj", "for": "Kotlin learners, especially those who would like to get into Android Development as well as using Jetpack Compose for their frontend framework." }, { "name": "Socratica", "link": "https://www.youtube.com/@Socratica", "pfp": "https://yt3.googleusercontent.com/ytc/AGIKgqNJRZxBUL4r3yU16qD0Zrc_nkVkLEMPbgXpz1yoDg=s176-c-k-c0x00ffffff-no-rj", "for": "Almost anything STEM related. They have great videos on Python, SQL and math topics that could actually strengthen your programming skills. Math and programming go very hand-in-hand." }, { "name": "CS50", "link": "https://www.youtube.com/@cs50", "pfp": "https://yt3.googleusercontent.com/ytc/AGIKgqPMEa0EKrtwhjtyc1JHNKeuxQY3aUM2-p4BZcvyKQ=s176-c-k-c0x00ffffff-no-rj", "for": "Those who want a very hard challenge in their introductions to differnt programming topics such as Computer Science (not the same as programming), Python, SQL, Game Development and much more. They require a lot of time and investment but are definitely worth it and be sure to check out the descriptions for each video which should have the assignments that go along with the lectures." } ], "tibor": [ { "name": "ByteByteGo", "link": "https://www.youtube.com/@ByteByteGo", "pfp": "https://yt3.googleusercontent.com/efrVnDJbJOQ5XcXrrFhA9V2wTXh6gP_i0KycoYjqhN3nEh6VbCgqMQakAcFqEsguw7wxhHEjnA=s176-c-k-c0x00ffffff-no-rj", "for": "Those who want to learn about system design" }, { "name": "Computerphile", "link": "https://www.youtube.com/@Computerphile", "pfp": "https://yt3.googleusercontent.com/ytc/AGIKgqN8YG6ACSnlzJYYrIIsiyDUmh9M9Wf4PNSOoc4wQw=s176-c-k-c0x00ffffff-no-rj", "for": "Deeper and advanced topics regarding computer science (I highly recommend this too!)" }, { "name": "A Byte of Code", "link": "https://www.youtube.com/@AByteofCode", "pfp": "https://yt3.googleusercontent.com/41KawMvSAv5taqrq--_WVaprt5_ftX6FovDKEQMB45Pnn8c0DKfRZkvxVcY6OadEWqQtiJtLEw=s176-c-k-c0x00ffffff-no-rj", "for": "Bite-sized videos on computer science" }, { "name": "CSDojo", "link": "https://www.youtube.com/@CSDojo", "pfp": "https://yt3.googleusercontent.com/ytc/AGIKgqNQQMLP6fIdYWuI3K-AOiNLEOjAPHToGjdioshH=s176-c-k-c0x00ffffff-no-rj", "for": "Algorithms, coding tips from a young ex-googler" }, { "name": "Andrej Karpathy", "link": "https://www.youtube.com/@AndrejKarpathy", "pfp": "https://yt3.googleusercontent.com/ytc/AGIKgqPJWIEjiRr4YxLCr7qnmXt9brmsslEHAqr6ZySyGj8=s176-c-k-c0x00ffffff-no-rj", "for": "Deep neural networks, build your own chatgpt" }, { "name": "Rock the JVM", "link": "https://www.youtube.com/@rockthejvm", "pfp": "https://yt3.googleusercontent.com/ytc/AGIKgqNNuArx2n1O_iXaLFEqqkXrWeJSipNDkEXxdzLk=s176-c-k-c0x00ffffff-no-rj", "for": "Scala and Kotlin lectures" }, { "name": "ArjanCodes ", "link": "https://www.youtube.com/@ArjanCodes", "pfp": "https://yt3.googleusercontent.com/kMuSQv3_WwPmGSk7XJvf5PvIK7ARMUKaB6AUB8I0y7vtjCqE5dDU8YNe1PaDrqriqVeR6BRW=s176-c-k-c0x00ffffff-no-rj", "for": "Practical modern Python" }, { "name": "freeCodeCamp.org", "link": "https://www.youtube.com/@freecodecamp", "pfp": "https://yt3.googleusercontent.com/ytc/AGIKgqMl9TL4OpwS8Zc5jHrNnfO01f_Wbovye9mQzfp36Q=s176-c-k-c0x00ffffff-no-rj", "for": "Loads of education, full programming language courses. Just make sure not to binge them and see if you can find problems to do along with them or break their code and personalize it for yourself. (Superb suggestion!)" }, { "name": "code_report ", "link": "https://youtube.com/@code_report", "pfp": "https://yt3.googleusercontent.com/ytc/AGIKgqObYSaWdL0SF5eZ_wh7w3zKP5zMGyfeD33yz-5V=s176-c-k-c0x00ffffff-no-rj", "for": "C++, array languages, competitive programming" } ], "ugulberto": [ { "name": "Curso de Java", "link": "https://www.youtube.com/watch?v=U709qY6S9rA&list=PLU8oAlHdN5BktAXdEVCLUYzvDyqRQJ2lk" }, { "name": "Curso de PHP/MySQL", "link": "https://www.youtube.com/watch?v=I75CUdSJifw&list=PLU8oAlHdN5BkinrODGXToK9oPAlnJxmW_" }, { "name": "C++", "link": "https://www.youtube.com/playlist?list=PLU8oAlHdN5BmoxxnllWdZfRcffMPCNck5" }, { "name": "Curso Angular", "link": "https://www.youtube.com/watch?v=fXpMiweCC_o&list=PLU8oAlHdN5BnNAe8zXnuBNzKID39DUwcO" }, { "name": "Curso Django", "link": "https://www.youtube.com/watch?v=7XO1AzwkPPE&list=PLU8oAlHdN5BmfvwxFO7HdPciOCmmYneAB" }, { "name": "Curso C#", "link": "https://www.youtube.com/watch?v=6EBNIgkrU74&list=PLU8oAlHdN5BmpIQGDSHo5e1r4ZYWQ8m4B" }, { "name": "Curso Python", "link": "https://www.youtube.com/watch?v=G2FCfQj-9ig&list=PLU8oAlHdN5BlvPxziopYZRd55pdqFwkeS" } ], "desc": "Youtube is great for those who would like to code along with an instructor and see demos of exactly what they want to do.", "image_links": { "mobile": { "results": "https://i.imgur.com/nUtI6lm.jpg", }, "web": { "bar_open": "https://i.imgur.com/tCKyw66.png", "results": "https://i.imgur.com/XzLM806.png" } } }, { "name": "MDN Web Docs (Mozilla)", "direct_link": "https://developer.mozilla.org/", "useful_sublinks": ["https://developer.mozilla.org/en-US/docs/Web/JavaScript"], "desc": "The MDN Web Docs by Mozilla are great for web development related inquries/questions, especially Javascript, and is one of my personal favorite doc pages. ", "image_links": { "mobile": { "bar_open": "https://i.imgur.com/7mySAy7.jpg", "bar_closed": "https://i.imgur.com/NzmVuRN.jpg" }, "web": { "homepage": "https://i.imgur.com/DTIhbkd.png", "bar_open": "https://i.imgur.com/W09z1qd.png", "bar_closed": "https://i.imgur.com/8tG7CVF.png" } } }, { "name": "Python Docs", "direct_link": "https://docs.python.org/3/", "desc": "The Python Documentation take a bit to get used to, but they will have all that you need for Python related inquiries.", "image_links": { "mobile": { "bar_open": "https://i.imgur.com/XID9keC.jpg", }, "web": { "bar_open": "https://i.imgur.com/SHJqlYH.png", } } }, { "name": "Google", "direct_link": "https://www.google.com/", "useful_sublinks": [ { "name": "DuckDuckGo", "direct_link": "https://duckduckgo.com/" }, { "name": "Brave Search", "direct_link": "https://search.brave.com/" }, { "name": "Ecosia", "direct_link": "https://www.ecosia.org/?c=en" }, { "name": "List of others", "direct_link": "https://alternativeto.net/software/google-search/" }, ], "desc": "The best was saved for last. Google searches will more than likely lead you to direct articles on the pages we have seen above. It's a super awesome tool and is typically most programmers' first option, especially since it is usually the search engine that can also be used in the url bar of a browser.

Instead of typing the webpage, then searching, then clicking the article, using Google is usualy much faster because you just type the question/keywords in the URL bar and you more than likely going to get direct links to get you to what you need. So it's 2 steps versus 3 of going to the webpages themselves.", "image_links": { "mobile": { "results": "https://i.imgur.com/cgsa6TA.jpg", }, "web": { "bar_open": "https://i.imgur.com/tCOhGhJ.png" } } } ] document.addEventListener('DOMContentLoaded', function() { intro(); howThough(); tableOfContents(); }); function intro() { const main = document.querySelector('main'); const title = document.createElement("h1"); title.setAttribute("id", "main-title") main.append(title); //title.innerText = "Before we answer that..."; title.innerText = "All About Research"; const titleGif = document.createElement("img"); titleGif.src = "https://media.tenor.com/yBSPAW9BN_gAAAAd/chewing-gum.gif"; titleGif.alt = "Lady chewing gum as she moves mouse around and types on keyboard acting like she is doing reserach." title.append(titleGif); const lineBr = document.createElement("hr"); title.append(lineBr); const parent = document.createElement("div"); parent.setAttribute("class", "intro-cont"); main.append(parent); const intro = document.createElement("p"); intro.setAttribute("id", "intro-text"); parent.append(intro); intro.innerText = "With any field, but especially in STEM (Science, Technology, Engineering and Mathematics), doing research is ultra important." + " But what exactly is research?"; const defList = document.createElement("ul"); defList.setAttribute("id", "research-def"); parent.append(defList); const noun = document.createElement("li"); defList.append(noun); noun.innerText = "As a noun, reserach means the collecting of information about a particular subject, " + "studious inquiry/examination, and careful/diligent search."; const verb = document.createElement("li"); defList.append(verb); verb.innerText = "As a verb, it means to search or investigate exhaustively."; // I would use a cite tag but they do not seem appropiate for web articles, only creative works. const citationOne = document.createElement("a"); citationOne.setAttribute("href", "https://www.merriam-webster.com/dictionary/research"); citationOne.innerText = " 1"; verb.append(citationOne); const whyDetails = document.createElement("details"); whyDetails.setAttribute("id", "why-det"); parent.append(whyDetails); const why = document.createElement("summary"); whyDetails.append(why); why.innerText = " Why do all of that if you can just ask though?"; const whyList = document.createElement("ul"); whyList.setAttribute("id", "why-list"); whyDetails.append(whyList); const skillOne = document.createElement("li"); whyList.append(skillOne); skillOne.innerText = "It's a great skill for jobs and can be valuable for adding to your resume! And as with any skill, you need to continously work on it like a muscle so it can develop."; const skillTwo = document.createElement("li"); whyList.append(skillTwo); skillTwo.innerText = "Research skills in particular 'refer to the ability to gather, organize, analyze and interpret information on a particular topic." + " Research skills involve search and investigation skills and critical analysis'."; const citationTwo = document.createElement("a"); citationTwo.setAttribute("href", "https://www.indeed.com/career-advice/resumes-cover-letters/how-to-put-research-on-resume"); citationTwo.innerText = " 2"; skillTwo.append(citationTwo); const skillThree = document.createElement("li"); whyList.append(skillThree); skillThree.innerText = " Imagine telling your potential boss at your dream job that you have skills like that? That's a great way to show your indpendant capability!"; //https://media.lrng.org/64/94/f4b755f315ed36e78aa52741a2c3becb6a74-480x360.gif const whyGif = document.createElement("img"); whyGif.src = "https://media.lrng.org/64/94/f4b755f315ed36e78aa52741a2c3becb6a74-480x360.gif"; whyGif.alt = "A scene from spongebob where Spongebob is holding up the help wanted sign and Mr.Krabs tells him, 'Wonderful, you're hired.'"; whyList.append(whyGif); } function howThough() { const main = document.querySelector('main'); const title = document.createElement("h2"); main.append(title); title.innerText = "How do you get such a skill?"; const parent = document.createElement("div"); parent.setAttribute("class", "intro-cont"); main.append(parent); const intro = document.createElement("p"); intro.setAttribute("id", "how-text"); parent.append(intro); intro.innerText = "Unfortunately, we do not come out of the womb with such skills but there have been people who have given knowledge to help out with that!" + " Their videos will be referenced below if you'd like to hear it from them (which I highly recommend), but for now, here are some quick tips from them!"; const tipList = document.createElement("ul"); tipList.setAttribute("id", "tip-list"); parent.append(tipList); const googleDetails = document.createElement("details"); googleDetails.setAttribute("id", ""); parent.append(googleDetails); const googleTitle = document.createElement("summary"); googleTitle.setAttribute("id", "google-sum"); googleDetails.append(googleTitle); googleTitle.innerText = " Google Specific Tips"; const googleTipList = document.createElement("ul"); googleTipList.setAttribute("id", "google-tip-list"); googleDetails.append(googleTipList); const specialCredit = document.createElement("p"); specialCredit.setAttribute("id", "google-tip-list"); googleTipList.append(specialCredit); specialCredit.innerHTML = "Super Special Credit to Tibor Santa for his additional tips in this section!"; const tips = [ "If you are having an error issue, read the error message you are getting. A good amount of the time, they are telling you exactly what is wrong and where. If you are still having an issue, the below point will help.", "Copy and paste your error messages into a search engine. It's more than likely someone had the same and specific problem as you.", "Be sure that when you do the above, that you try to remove file specific names.", "If you do not have a error message but just have a regular question, be sure to inlcude the language and/or framework that you are using as keywords.", "Ipang's tips in about relevant tags for questions in the Q&A is knowledge that can be transferred to using search engines!", "If you are on an extremely long page and do not feel like reading so much and you are on the web and/or can use a keyboard, press CTRL+F in the browser and it should open it's own mini find tool. This is also true for some code editors.", ] tips.forEach(tip => { const tipLi = document.createElement("li"); tipList.append(tipLi); tipLi.innerHTML = tip; }) const googleTips = [ "If you want to search for something without something, for example 'android without java', do not use the without keyword. instead do 'android -java'. Use a dash instead.", "If you have a specific place you would like to search, use 'inurl:[the url]'. For example, 'rubberducks inurl:walmart.com'", "If you would like specific code examples/snippets, use 'filetype:[extension ending]'. For example, 'hello world in kotlin filetype:kt'.", "You can type multiple words in the query, and google may discard some of them in favor of others. If you insist a particular term must be included, prefix it with a + sign. For exmaple, 'bananas +oranges'.", "To search for a combination of words in specific order (exact match), put the whole term in quotation marks. This is also useful to look up specific error messages when you debug your code.", "When I just want to look up a wikipedia article my first term is wiki. For exmaple, 'wiki dijkstra'. Fun fact, but this extends to wikia for you nerds out there. For example, 'Earth-666 wikia'.", "Google may take liberties to fix your typos and suggest other terms, but gives a clue 'Did you mean' when it does that. But sometimes you actually want your original term that looks similar, so pay attention to these hints." ] googleTips.forEach(tip => { const tipLi = document.createElement("li"); googleTipList.append(tipLi); tipLi.innerHTML = tip; }) const videos = document.createElement("details"); videos.setAttribute("id", "vid-det"); parent.append(videos); const vidSum = document.createElement("summary"); videos.append(vidSum); vidSum.innerText = " Videos Referenced That You Should Definitely Watch"; const vidURLs = [ "https://www.youtube.com/embed/cEBkvm0-rg0", "https://www.youtube.com/embed/2_c-ennRxhM", "https://www.youtube.com/embed/JIV7wuihew8", "https://www.youtube.com/embed/9thHVXFltAA", "https://www.youtube.com/embed/hFsZUW3oys8" ] vidURLs.forEach(url => { const frame = document.createElement("iframe") videos.append(frame); frame.setAttribute("src", url); frame.setAttribute("frameborder", "0"); frame.setAttribute("width", "100%"); frame.setAttribute("height", "250"); }) } function tableOfContents() { const main = document.querySelector('main'); const resourcesTitle = document.createElement("h1"); resourcesTitle.setAttribute("id", "blurb-title") resourcesTitle.innerText = "Websites you could use for programming research!"; main.append(resourcesTitle); const titleGif = document.createElement("img"); titleGif.src = "https://media0.giphy.com/media/WZ4M8M2VbauEo/giphy.gif"; titleGif.alt = "Tom Hanks blowing air on his fingers and getting ready to use a computer." resourcesTitle.append(titleGif); Object.entries(PAGES).forEach(page => { //console.log(page[1]) /*const listItem = document.createElement("li"); const link = document.createElement("a"); link.innerText = page[1].name; link.setAttribute("href", `#${page[1].name}`); listItem.append(link); tableUL.append(listItem);*/ resource(page[1]) }); } function resource(page) { const main = document.querySelector('main'); const parent = document.createElement("div"); parent.setAttribute("class", "page-cont"); main.append(parent); const dropdownBtn = document.createElement("button"); parent.append(dropdownBtn); const title = document.createElement("h2"); dropdownBtn.append(title); //const titleLink = document.createElement("a"); //titleLink.setAttribute("href", `${page.direct_link}`); title.innerText = page.name; //title.append(titleLink); const btnIcon = document.createElement("i"); btnIcon.setAttribute("class", "bx bxs-left-arrow"); title.append(btnIcon); const lineBr = document.createElement("hr"); title.append(lineBr); const dropdownDiv = document.createElement("div"); dropdownDiv.setAttribute("class", "page-info"); parent.append(dropdownDiv); const text = document.createElement("p"); text.setAttribute("class", "page-intro"); dropdownDiv.append(text); text.innerHTML = page.desc; const imagesDiv = document.createElement("div"); dropdownDiv.append(imagesDiv); imagesDiv.setAttribute("class", "img-cont"); // Hidden/Closed/Collpased Web Search Bars if (page.image_links["web"] !== undefined && page.image_links["web"]["bar_closed"] !== undefined) { const mobBarCont = document.createElement("figure"); mobBarCont.setAttribute("class", "mob-bar-cont") imagesDiv.append(mobBarCont); const warning = document.createElement("p"); mobBarCont.append(warning) if (page.name === "W3 Schools") { warning.innerText = `The search bar for ${page.name} may be a bit tricky to find since it is hidden. You will need to press on the magnifying glass first that is on the far right before you can see it.`; } const mobBar = document.createElement("img"); mobBar.setAttribute("class", "mob-bar") mobBarCont.append(mobBar); mobBar.src = page.image_links["web"]["bar_closed"]; mobBar.alt = ""; const mobBarImgDesc = document.createElement("figcaption"); mobBarCont.append(mobBarImgDesc); if (page.name === "W3 Schools") { mobBarImgDesc.innerText = `${page.name} search bar is hidden.`; } else if (page.name === "MDN Web Docs (Mozilla)") { mobBarImgDesc.innerText = `${page.name} search bar is collapsed.`; } } // Open Web Search Bars if (page.image_links["web"]["bar_open"] !== undefined) { //console.log(page.image_links["web"]["bar_open"]) const webBarCont = document.createElement("figure"); webBarCont.setAttribute("class", "web-bar-cont") imagesDiv.append(webBarCont); const webBar = document.createElement("img"); webBar.setAttribute("class", "web-bar") webBarCont.append(webBar); webBar.src = page.image_links["web"]["bar_open"]; webBar.alt = ""; // Since there is a caption, no source is needed so that the screenreader does not repeat the same thing twice. const webBarImgDesc = document.createElement("figcaption"); webBarCont.append(webBarImgDesc); webBarImgDesc.innerText = `${page.name} search bar for web.`; } // Web Search Results if (page.image_links["web"] !== undefined && page.image_links["web"]["results"] !== undefined) { const mobBarCont = document.createElement("figure"); mobBarCont.setAttribute("class", "web-res-cont") imagesDiv.append(mobBarCont); const tip = document.createElement("p"); mobBarCont.append(tip) if (page.name === "Reddit") { tip.innerText = `The best way to take advantage of reddit's search engine is to first be on the page of a specific subreddit (such as the ones listed in the table below) and then do the search. That way it will search for results specifically in that subreddit as shown below.`; } const mobBar = document.createElement("img"); mobBar.setAttribute("class", "web-res") mobBarCont.append(mobBar); mobBar.src = page.image_links["web"]["results"]; mobBar.alt = ""; // Since there is a caption, no source is needed so that the screenreader does not repeat the same thing twice. const mobBarImgDesc = document.createElement("figcaption"); mobBarCont.append(mobBarImgDesc); mobBarImgDesc.innerText = `${page.name} search results on web.`; } const mobileDetails = document.createElement("details"); mobileDetails.setAttribute("id", "mob-det"); dropdownDiv.append(mobileDetails); const mobSum = document.createElement("summary"); mobileDetails.append(mobSum); mobSum.innerText = " How does it look on mobile?"; const mobImagesDiv = document.createElement("div"); mobileDetails.append(mobImagesDiv); mobImagesDiv.setAttribute("class", "mob-img-cont"); // Hidden/Closed/Collpased Mobile Search Bars if (page.image_links["mobile"] !== undefined && page.image_links["mobile"]["bar_closed"] !== undefined) { const mobBarCont = document.createElement("figure"); mobBarCont.setAttribute("class", "mob-bar-cont") mobImagesDiv.append(mobBarCont); const warning = document.createElement("p"); mobBarCont.append(warning) if (page.name === "MDN Web Docs (Mozilla)") { warning.innerText = `The search bar for ${page.name} cannot be seen on mobile until you press on the menu bar on the top-right.`; } const mobBar = document.createElement("img"); mobBar.setAttribute("class", "mob-bar") mobBarCont.append(mobBar); mobBar.src = page.image_links["mobile"]["bar_closed"]; mobBar.alt = ""; const mobBarImgDesc = document.createElement("figcaption"); mobBarCont.append(mobBarImgDesc); mobBarImgDesc.innerText = `${page.name} search bar is hidden.`; } // Open Mobile Search Bars if (page.image_links["mobile"] !== undefined && page.image_links["mobile"]["bar_open"] !== undefined) { const mobBarCont = document.createElement("figure"); mobBarCont.setAttribute("class", "mob-bar-cont") mobImagesDiv.append(mobBarCont); const mobBar = document.createElement("img"); mobBar.setAttribute("class", "mob-bar") mobBarCont.append(mobBar); mobBar.src = page.image_links["mobile"]["bar_open"]; mobBar.alt = ""; // Since there is a caption, no source is needed so that the screenreader does not repeat the same thing twice. const mobBarImgDesc = document.createElement("figcaption"); mobBarCont.append(mobBarImgDesc); mobBarImgDesc.innerText = `${page.name} search bar on mobile devices.`; } // Mobile Search Results if (page.image_links["mobile"] !== undefined && page.image_links["mobile"]["results"] !== undefined) { const mobBarCont = document.createElement("figure"); mobBarCont.setAttribute("class", "mob-res-cont") mobImagesDiv.append(mobBarCont); const mobBar = document.createElement("img"); mobBar.setAttribute("class", "mob-res") mobBarCont.append(mobBar); mobBar.src = page.image_links["mobile"]["results"]; mobBar.alt = ""; // Since there is a caption, no source is needed so that the screenreader does not repeat the same thing twice. const mobBarImgDesc = document.createElement("figcaption"); mobBarCont.append(mobBarImgDesc); mobBarImgDesc.innerText = `${page.name} search results on mobile devices.`; } // Useful Links if (page.useful_sublinks !== undefined) { //console.log(page.name, page.useful_sublinks) if (page.name === "W3 Schools") { const usefulLink = document.createElement("a"); usefulLink.setAttribute("href", page.useful_sublinks); usefulLink.innerText = " ★ Click here for a direct link to HTML Tags!"; dropdownDiv.append(usefulLink); } else if (page.name === "MDN Web Docs (Mozilla)") { const usefulLink = document.createElement("a"); usefulLink.setAttribute("href", page.useful_sublinks); usefulLink.innerText = " ★ Click here for a direct link to Javascript Documentation!"; dropdownDiv.append(usefulLink); } else if (page.name === "Google") { const altTitle = document.createElement("h4"); altTitle.innerText = "Some Google Alternatives"; dropdownDiv.append(altTitle); const alternatives = document.createElement("ul"); dropdownDiv.append(alternatives) page.useful_sublinks.forEach(link =>{ const altLi = document.createElement("li"); alternatives.append(altLi); const altLink = document.createElement("a"); altLi.append(altLink); altLink.setAttribute("href", link.direct_link); altLink.innerText = link.name; }) } else if (page.name === "Reddit") { const tableTitle = document.createElement("h3"); tableTitle.innerText = "Helpful Subreddits"; dropdownDiv.append(tableTitle); dropdownDiv.append(resourceTable(page.name, page.useful_sublinks)); } else if (page.name === "Youtube") { const tableTitle = document.createElement("h3"); tableTitle.innerText = "Channel Suggestions!"; tableTitle.setAttribute("id", "yt-tbl-title") dropdownDiv.append(tableTitle); // My Suggestions const myDets = document.createElement("details"); myDets.setAttribute("class", "vid-sug"); dropdownDiv.append(myDets); const mySug = document.createElement("summary"); mySug.style.backgroundColor = "var(--sl-blue)"; mySug.style.color = "black"; mySug.style.fontWeight = "bold"; myDets.append(mySug); mySug.innerText = " Recommendations from Me!"; myDets.append(resourceTable(page.name, page.useful_sublinks)); // Tibor Santa's Suggestions const tibDets = document.createElement("details"); tibDets.setAttribute("class", "vid-sug"); dropdownDiv.append(tibDets); const tibSug = document.createElement("summary"); tibSug.style.backgroundColor = "var(--sl-org)"; tibSug.style.color = "black"; tibSug.style.fontWeight = "bold"; tibDets.append(tibSug); tibSug.innerHTML = " Recommendations from Tibor!"; tibDets.append(resourceTable("Tibor", page.tibor)); // Ugulberto Sanchez' Suggestions const uguDets = document.createElement("details"); uguDets.setAttribute("class", "vid-sug"); dropdownDiv.append(uguDets); const uguSug = document.createElement("summary"); uguSug.style.backgroundColor = "var(--sl-pink)"; uguSug.style.color = "black"; uguSug.style.fontWeight = "bold"; uguDets.append(uguSug); uguSug.innerHTML = " Spanish specific recommendations from Ugulberto!"; const descCont = document.createElement("div"); uguDets.append(descCont); const pfpLink = document.createElement("a"); descCont.append(pfpLink) pfpLink.setAttribute("id", "ugu-img"); pfpLink.setAttribute("href", "https://www.youtube.com/@pildorasinformaticas/videos"); const pfp = document.createElement("img"); pfpLink.append(pfp); pfp.alt = ""; pfp.src = "https://yt3.googleusercontent.com/ytc/AGIKgqMB0PhXHwGUmZX17v_20JYGY23ZexFmGq7zsE1n=s176-c-k-c0x00ffffff-no-rj"; const descText = document.createElement("p"); descText.setAttribute("id", "ugu-deets"); descCont.append(descText); descText.innerHTML = "The channel pildorasinformaticas is one of the best spanish language programming tutorial channels in youtube. You can try to search if your question is answered here before you ask it in Sololearn Q&A." + " The channel has many language tutorials. Check out some course playlists below:"; // Below return an unordered list instead of a table uguDets.append(resourceTable("Ugulberto", page.ugulberto)); } } dropdownDiv.style.display = "none"; dropdownBtn.addEventListener("click", () => { if (dropdownDiv.style.display === "none") { dropdownDiv.style.display = "block"; btnIcon.setAttribute("class", "bx bxs-down-arrow"); } else { dropdownDiv.style.display = "none"; btnIcon.setAttribute("class", "bx bxs-left-arrow"); } }) } function resourceTable(pageName, links) { const table = document.createElement("table"); const headerRow = document.createElement("tr"); table.append(headerRow); const nameHeader = document.createElement("th"); headerRow.append(nameHeader); const forHeader = document.createElement("th"); forHeader.innerText = "Great for..."; headerRow.append(forHeader); if (pageName === "Reddit") { nameHeader.innerText = "Subreddit"; table.setAttribute("id", "red-tbl") links.forEach((link, index )=> { const newRow = document.createElement("tr"); table.append(newRow); const nameCont = document.createElement("td"); newRow.append(nameCont); const nameLink = document.createElement("a"); nameCont.append(nameLink) nameLink.setAttribute("href", link); const forCont = document.createElement("td"); newRow.append(forCont); const forText = document.createElement("p"); forCont.append(forText) //console.log(index, link); if (index === 0) { nameLink.innerText = "r/learnprogramming/"; forText.innerText = "General programming questions and answers for almost any framework, language and tool that you can think of."; } else if (index === 1) { nameLink.innerText ="r/learnpython/"; forText.innerText = "Python specific questions and answers. This includes python for web development with frameworks such as flask or django and for python scripting especially."; } else if (index === 2) { nameLink.innerText ="r/webdev/"; forText.innerText = "Web development questions and answers. Many people here share their project where you can also get some inspiration for projects of your own as well as learn new frameworks and tools that are coming out."; } else if (index === 3) { nameLink.innerText ="r/cscareerquestions/"; forText.innerText = "Tech career related questions and answers. Many people here ask and get tips on resumes, interview prep and project ideas."; } }) } else if (pageName === "Youtube") { const pfpHeader = document.createElement("th"); headerRow.prepend(pfpHeader); pfpHeader.innerText = "Channel"; nameHeader.innerText = ""; links.forEach(info => { //console.log(info) const newRow = document.createElement("tr"); table.append(newRow); const pfpCont = document.createElement("td"); newRow.append(pfpCont); const pfpLink = document.createElement("a"); pfpCont.append(pfpLink) pfpLink.setAttribute("href", info.link); const pfp = document.createElement("img"); pfpLink.append(pfp); pfp.alt = ""; pfp.src = info.pfp; const nameCont = document.createElement("td"); newRow.append(nameCont); const nameLink = document.createElement("a"); nameCont.append(nameLink) nameLink.setAttribute("href", info.link); nameLink.innerText = info.name; const forCont = document.createElement("td"); newRow.append(forCont); const forText = document.createElement("p"); forCont.append(forText) forText.innerText = info.for; }) } else if (pageName === "Tibor") { const pfpHeader = document.createElement("th"); headerRow.prepend(pfpHeader); pfpHeader.innerText = "Channel"; nameHeader.innerText = ""; links.forEach(info => { //console.log(info) const newRow = document.createElement("tr"); table.append(newRow); const pfpCont = document.createElement("td"); newRow.append(pfpCont); const pfpLink = document.createElement("a"); pfpCont.append(pfpLink) pfpLink.setAttribute("href", info.link); const pfp = document.createElement("img"); pfpLink.append(pfp); pfp.alt = ""; pfp.src = info.pfp; const nameCont = document.createElement("td"); newRow.append(nameCont); const nameLink = document.createElement("a"); nameCont.append(nameLink) nameLink.setAttribute("href", info.link); nameLink.innerText = info.name; const forCont = document.createElement("td"); newRow.append(forCont); const forText = document.createElement("p"); forCont.append(forText) forText.innerText = info.for; }) } else if (pageName === "Ugulberto") { const ul = document.createElement("ul"); ul.setAttribute("id", "ugu-list"); links.forEach(info => { // Make an unordered list instead of a table const li = document.createElement("li"); ul.append(li); const forLink = document.createElement("a"); li.append(forLink); forLink.setAttribute("href", info.link); forLink.innerText = info.name; }); return ul; } return table; }

Before I Answer That...