2d:null 2e:["$","title",null,{"children":"PSET 1_Yunhan | Yunhan Zheng | Observable"}] 33: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 `34:[] 31:{"id":"8dde076c3fe932b8","slug":"pset-1_yunhan","title":"PSET 1_Yunhan","thumbnail":"ceece8f786cbe06522ee1b9dc31508ef279067456b84a0faa99a4146ed877fc5","access_level":"public","create_time":"$D2019-02-16T15:11:59.205Z","update_time":"$D2019-02-19T16:41:02.868Z","view_time":null,"first_public_time":"$D2019-02-17T03:41:01.071Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"54b483239938a53e","login":"yunhan","name":"Yunhan Zheng","avatar_url":"https://avatars-next.observableusercontent.com/81a81120c1265e5f831a704aa73aa58683b4d6baa32d531fb2de0d4def482192","tier":"starter_2024"},"version":470,"publish_version":470,"role":null,"authored":false,"authors":[{"type":"individual","id":"e23a10dd8abf85f8","login":"yunhan","name":"Yunhan Zheng","avatar_url":"https://avatars-next.observableusercontent.com/81a81120c1265e5f831a704aa73aa58683b4d6baa32d531fb2de0d4def482192","tier":null}],"members":[{"type":"individual","id":"e23a10dd8abf85f8","login":"yunhan","name":"Yunhan Zheng","avatar_url":"https://avatars-next.observableusercontent.com/81a81120c1265e5f831a704aa73aa58683b4d6baa32d531fb2de0d4def482192","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"PSET 1_Yunhan","cells":[{"id":0,"value":"md`# PSET 1_Yunhan`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"//1\nmyarray = [\"red\", \"yellow\", \"blue\", \"green\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"myarray[2]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"get=myarray.slice(0,2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"myarray[4]=\"last\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"newarray=myarray","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"length=newarray.length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"i = newarray.indexOf(\"last\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"{let newarray=myarray.slice()\nnewarray[i]=\"new\"\n return newarray}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"md`## 2. Strings\nGiven the following array of words:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"array1=['I', 'am', 'learning','Javascript','to','munge','large','datasets','and','visualize','them']","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"// Your code here\n{let array2=JSON.parse(JSON.stringify(array1))\narray2=array2.join(\" \")\n return array2}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"{let array3=JSON.parse(JSON.stringify(array1))\narray3=array3.reverse()\n return array3}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"{let array3=JSON.parse(JSON.stringify(array1))\n array3=array3.sort()\n return array3}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"{\n let array4=array1.slice()\n return array4.sort(function (a, b) {return a.toLowerCase().localeCompare(b.toLowerCase())})\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"{let array6=JSON.parse(JSON.stringify(array1))\nreturn array6.sort(function (a, b) {return b.toLowerCase().localeCompare(a.toLowerCase())})\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"// Your code here\nhtml`red, yellow, pink, silver, orange`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"// Your code here\nmd`The current time is **${new Date(now).toString()}**.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"// Your code here\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"// Your code here\nplace = ({\"favorite\":[\n {\"location\":\"Wuhan\", \"name\":\"Yellow Crane Tower\", \"latitude\":\"30°32'N\", \"longitude\":\"114°18'E\", \"country\":\"China\"}, \n {\"location\":\"Kyoto\", \"name\":\"Kiyomizu Temple\", \"latitude\":\"34°59'N\", \"longitude\":\"135°47'E\", \"country\":\"Japan\"},\n {\"location\":\"Boston\", \"name\":\"MIT\", \"latitude\":\"42°21'N\", \"longitude\":\"71°05'W\", \"country\":\"US\"},\n {\"location\":\"Buffalo\", \"name\":\"Niagara Falls\", \"latitude\":\"43°04'N\", \"longitude\":\"79°04'W\", \"country\":\"US\"},\n {\"location\":\"Beijing\", \"name\":\"Peking University\", \"latitude\":\"39°59'N\", \"longitude\":\"116°18'E\", \"country\":\"China\"}\n]})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"// Your code here\nfunction convert(a) {\n let A=JSON.parse(JSON.stringify(a))\n A.favorite[0].name=a.favorite[0].name.toUpperCase();\n A.favorite[1].name=a.favorite[1].name.toUpperCase();\n return A\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"newplace=convert(place)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"// Your code here\nhtml`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"