2c:null 2d:["$","title",null,{"children":"PSET 1 | rlluo1 | Observable"}] 32: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 `33:[] 30:{"id":"e59e6db66e5d7637","slug":"pset-1","title":"PSET 1","thumbnail":"54d0fd40713f328cb993df7e03fc30b26cc96a3d6926e89521ca4be671209b91","access_level":"public","create_time":"$D2019-02-16T22:03:30.962Z","update_time":"$D2019-02-18T15:23:59.166Z","view_time":null,"first_public_time":"$D2019-02-16T22:20:18.566Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"10cbf6aece7b1ac0","login":"rlluo1","name":"","avatar_url":"https://avatars-next.observableusercontent.com/7a6a1a90a41b4c8bff4fdd1fd552869b31666211002b67794fd27ec4b9d55cc0","tier":"starter_2024"},"version":409,"publish_version":409,"role":null,"authored":false,"authors":[{"type":"individual","id":"be1cceaa90e2dfbd","login":"rlluo1","name":"","avatar_url":"https://avatars-next.observableusercontent.com/7a6a1a90a41b4c8bff4fdd1fd552869b31666211002b67794fd27ec4b9d55cc0","tier":null}],"members":[{"type":"individual","id":"be1cceaa90e2dfbd","login":"rlluo1","name":"","avatar_url":"https://avatars-next.observableusercontent.com/7a6a1a90a41b4c8bff4fdd1fd552869b31666211002b67794fd27ec4b9d55cc0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"1b23e9665a1eeead","slug":"psets_11-454","title":"Psets_11.454","owner":{"id":"10cbf6aece7b1ac0","login":"rlluo1","name":""}},"type":"notebook","body":{"titling":"auto","title":"PSET 1","cells":[{"id":0,"value":"md`# PSET 1`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"// 1.1 Create an array containing any 4 strings\na1 = [\"snow\",\"ice\",\"ammil\",\"smoored\"]\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"//1.2 Show array's 3rd element, noting that indexing begins at zero\na1[2]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"//1.3 Show 1st, 2nd element in array using slice, which excludes last element numbered\na1.slice(0,2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"//1.4 Add new string saying \"last\" to end of array, show new array\na2 = a1.concat([\"last\"]);\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"//...then show above array\na2.slice(0,a2.length)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"//1.5 print length of array from 1.4 above\nmd`Array length is ${a2.length}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"//1.6 Replace last item in the array with the string \"new\" ...\na3 = a2.slice(0,a2.length-1).concat(\"new\")\n//Can't directly change a2 without affecting answer to part 1.4 above, since these arrays are global.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"//and display entirety of updated array...\na3.slice(0,a3.length)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"//...or updating and printing just the last cell from latest array.\na3[a3.length-1]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"//...so full array is now\na2.slice","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"// 2.1 convert the array given at top of question 2 into normal sentence with join(). Sentence is local because otherwise, the later blocks would feed back and change order of preceding blocks\n{\n let arrayJoin = array1.slice();\n return arrayJoin.join(\" \")\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"// 2.2 Reverse order of the array\n{\n let arrayReverse = array1.slice();\n return arrayReverse.reverse();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"// 2.3 Sort array using default sort order in JS. Uppercase letters come before lower case as a result\n{\n let arraySort = array1.slice();\n return arraySort.sort();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"// 2.4 Case insensitive sort, implemented by comparing all words as lowercase words\n{\n let arraySortNoCase = array1.slice();\n return arraySortNoCase.sort(function (a, b){return a.toLowerCase().localeCompare(b.toLowerCase());});\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"// 2.5 Show array in reverse alphabet order, case insensitive \n{\n let arrayReverseNoCase = array1.slice();\n return arrayReverseNoCase.sort(function (a, b){return b.toLowerCase().localeCompare(a.toLowerCase());});\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"// 3. HTML element listing my five favorite colors and styles background of color name with that color\nhtml`\nMy five favorite colors are \nseagreen,\nturquoise,\ncorn flower blue,\nblue-violet, and\nyellow-green.\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"// 4. Current date and time in markdown, with date+time in italics and bold\nmd`The current date and time is ${new Date()}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"// 5. Object containing array with my five favorite places. Each place in the array has location, name, lat, long, & country\n\nplaces_directory = \n(\n {\"places\":[\n {\"name\":\"Tsingy De Bemaraha\", \"location\":\"Bevero\", \"country\":\"Madagascar\", \"latitude\": -18.8976649, \"longitude\": 44.8276213},\n {\"name\":\"First Beach\", \"location\":\"La Push, Washington\", \"country\":\"United States\", \"latitude\": \n 47.9039595, \"longitude\": -124.6507798},\n {\"name\":\"Calanais Standing Stones\", \"location\":\"Stornoway, Isle of Lewis\", \"country\":\"United Kingdom\", \"latitude\":58.198163, \"longitude\":-6.7474227}, \n {\"name\":\"Middle Temple\", \"location\":\"London\", \"country\":\"United Kingdom\", \"latitude\":51.512283, \n \"longitude\":-0.1133275},\n {\"name\":\"Kuirau Park\", \"location\":\"Rotorua\", \"country\":\"New Zealand\", \"latitude\":-38.1576567, \n \"longitude\":176.1644097}\n ]\n \n }\n)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"// Clone/deep copy the places directory inputted before attempting manipulations; otherwisie the original copy will not survive this function intact. After deep copy is made, manipulate that copy to capitalize first, second listed places and return the copy.\nfunction topCap(placesObj){\n let upperObj = JSON.parse(JSON.stringify(placesObj));\n upperObj.places[0].name = upperObj.places[0].name.toUpperCase();\n upperObj.places[1].name = upperObj.places[1].name.toUpperCase();\n return upperObj;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"topCap(places_directory)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":" //Migration-related image that links directly to information page on the image\nhtml`\n

World refugee migration map: 2012

\n\n

Source: Mashable, discussing project by Carnegie Mellon's CREATE Lab

\n`\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"