30:T490,md`## Intro to Javascript This problem set is meant to create a good foundation of programming. We emphasize code readability and reusability over performance. Code performance can be measured in many different ways, and is by no means the focus of this course, however, we expect your code to be non-repetitive, clean, and efficient enough to deal with medium-to-large datasets. As we move forward with the course, you will be introduced to some functional programming techniques, iterators, and objects that will help speed-up the data munging of the type of data sets that we will be dealing with. Throughout the course you will be using multiple online resources to help you solve the assignments, we do too. However, if you are using other people’s code, make sure to credit the source, and come up with your own implementation. In this problem set, you are welcome to refer to online resources and documentation. One of the primary ones you will find you use is: [Stack Overflow](https://stackoverflow.com/). ## Submission Instructions Submit the link of your assignment on Stellar. \n **Remember to publish your notebook so it is publicly accesible!** \n `31:[] 2e:{"title":"PSET 1","cells":[{"id":0,"value":"md`# PSET 1`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"md` ## 1. Arrays\nDo the following:\n\n1. Create an array containing any 4 strings.\n2. Show the 3rd item in the array\n3. Show the 1st and 2nd item in the array using the [slice method](https://www.w3schools.com/jsref/jsref_slice_array.asp).\n4. Add a new string with text “last” to the end of the array and show the array.\n5. Get the array length and print it.\n6. Replace the last item in the array with the string “new” and show it on a cell`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"myArray =[\"My\", \"first\", \"array\"]\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":268,"value":"//create a function which generate a copy of the values in the myArray for later transformation. Or any edits upon an array will be reflected back to the previous arguments.\nfunction makeCopy(source)\n{\n var target={}\n var tem=source.join(\" \")\n //turn the array into string, so that the orginal values will not be modified\n target=tem.split(\" \")\n //split the generated string into array again, and we are able to edit target (the copy of source) without changing the values of source\n return target\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":176,"value":"myArray[2]","pinned":true,"hidden":false,"mode":"ojs"},{"id":179,"value":"{\n let arraySlice= myArray\n return arraySlice.slice(0, 2)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":298,"value":"myArrayCopy=makeCopy(myArray)","pinned":true,"hidden":false,"mode":"ojs"},{"id":249,"value":"{\n myArrayCopy.push(\"last\")\n return myArrayCopy\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":232,"value":"myArrayCopy.length","pinned":true,"hidden":false,"mode":"ojs"},{"id":199,"value":"{\n var myArrayCopy2=makeCopy(myArrayCopy)\n myArrayCopy2.pop()\n myArrayCopy2.push(\"new\")\n return myArrayCopy2\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"md`## 2. Strings\nGiven the following array of words:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"array1=['I', 'am', 'learning','Javascript','to','munge','large','datasets','and','visualize','them']","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"md`\n1. Convert the array into a normal sentence with join(), then show it.\n2. Reverse the order of this array [“them”,”visualize”,…]\n3. Now sort the array using the default sort order in javascript\n4. Modify the sort to do a [case insensitive alphabetic sort](https://stackoverflow.com/questions/8996963/how-to-perform-case-insensitive-sorting-in-javascript)\n5. Now show the array in reverse alphabetic sort order`","pinned":false,"hidden":false,"mode":"ojs"},{"id":327,"value":"{\n let arrayCopy1=makeCopy(array1)\n return arrayCopy1.join(\" \")\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":331,"value":"{\n let arrayCopy1=makeCopy(array1)\n return arrayCopy1.reverse()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":350,"value":"{\n let arrayCopy1=makeCopy(array1)\n return arrayCopy1.sort()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":353,"value":"{\n let arrayCopy1=makeCopy(array1)\n return arrayCopy1.sort(function(a,b){\n return a.toLowerCase().localeCompare(b.toLowerCase())\n }) \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":364,"value":"{\n let arrayCopy1=makeCopy(array1)\n arrayCopy1.sort(function(a,b){\n return a.toLowerCase().localeCompare(b.toLowerCase())\n }) \n return arrayCopy1.reverse()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"md`\n## 3. Styling HTML\n\nCreate an HTML element that lists your **five** favorite colors, and styles the background of the color name with that color`","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"html`\n My facorite color is \n pink,\n purple,\n yellow,\n red,\n blue.\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":84,"value":"md`\n## 4. Styling Markdown\n\nCreate a markdown element that displays the current time and date. Style the current time and date as bold, and italics. \n\n**Hint:** You will have to use a javascript library such as [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) to display the current time and date.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"md`\n The current time is \n ***${new Date(now).toLocaleTimeString()}***\n ***${new Date(now).toLocaleDateString()}***. \n`\n//refer to https://support.discordapp.com/hc/en-us/articles/210298617-Markdown-Text-101-Chat-Formatting-Bold-Italic-Underline-","pinned":true,"hidden":false,"mode":"ojs"},{"id":113,"value":"md`\n## 5. Objects\n\nCreate an object that contains an array that lists your five favorite places in the world. Every place in the array should also have **location, name, latitude, longitude, and country** as their properties. \n\n** Hint: Objects in observable are a [bit different than regular flavor Javascript](https://talk.observablehq.com/t/object-literals-with-quoted-properties-raise-syntax-errors/708)**\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"directory = {\n const myFavoritePlace = {\"place\":[\n {\"location\":\"735 Massachusetts Ave\", \"name\":\"Shanghai Fresh\",\"latitude\":\"42.367165\", \"longitude\":\"-71.105062\", \"country\":\"US\" }, \n {\"location\":\"4 Jingshan Front St\", \"name\":\"The Palace Museum\",\"latitude\":\"39.916575\", \"longitude\":\"116.397144\", \"country\":\"China\" },\n {\"location\":\"Xihu\", \"name\":\"West Lake\",\"latitude\":\"30.245044\", \"longitude\":\"120.150190\", \"country\":\"China\" },\n {\"location\":\"204 Freedom Trail\", \"name\":\"The Freedom Trail Foundation\",\"latitude\":\"42.363173\", \"longitude\":\"-71.056131\", \"country\":\"US\" },\n {\"location\":\"19 Xinjiangongmen Rd\", \"name\":\"Summer Palace\",\"latitude\":\"40.000188\", \"longitude\":\"116.275482\", \"country\":\"China\" }\n]};\n return myFavoritePlace\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":378,"value":"directory.place[1]","pinned":true,"hidden":false,"mode":"ojs"},{"id":123,"value":"md`\n## 6. Methods for your Obejcts \n\nCreate a function for your favorite places object that **turns the name of the first and second top places into UPPERCASE characters**\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"function Upper(place){\n place[0].name=place[0].name.toUpperCase();\n place[1].name=place[1].name.toUpperCase();\n return place\n}\n//\"place[0].name.toUpperCase()\" will not change the original object, maybe due to the characteristics of toUpperCase function?","pinned":true,"hidden":false,"mode":"ojs"},{"id":413,"value":"//test\nUpper(directory.place)","pinned":true,"hidden":false,"mode":"ojs"},{"id":150,"value":"md`\n## 7. HTML Image Elements and Links \n\nFind an online image related to a migration issue that you might be interested in exploring. Show it as an HTML element, and add a link to the image that redirects to a page that has information related to the image and your migration issue\n\nMake sure that the link is part of the image, so when you click the image, it redirects to the link\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"html`\n \n

\n \n`\n//add the picture inside so make the link on the picture.","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}