CodePen Embed - Frontend Interviewing code

Live

This Pen is owned by Jem Young on CodePen.

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.

{"__browser":{"device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer; ambient-light-sensor; camera; display-capture; encrypted-media; geolocation; gyroscope; microphone; midi; payment; vr; web-share","iframe_sandbox":"allow-forms allow-modals allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation-by-user-activation allow-downloads allow-presentation"},"__graphql":{"data":{"data":null,"errors":[{"message":"Cannot return null for non-nullable field Query.sessionUser"}]},"url":"https://codepen.io/graphql","api":"cprails","cpedata":{"action":"show","controller":"embed"}},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__boomboom":{"serve_url":"https://cdpn.io/cpe/boomboom","store_url":"https://codepen.io/cpe/boomboom/store"},"__pageType":"embed","__item":"{\"editor_settings\":{\"auto_run\":true,\"autocomplete\":false,\"code_folding\":true,\"css_pre_processor\":\"none\",\"css_prefix\":\"neither\",\"css_starter\":\"neither\",\"emmet_active\":true,\"font_size\":14,\"font_type\":\"system\",\"format_on_save\":false,\"html_pre_processor\":\"none\",\"indent_with\":\"spaces\",\"js_pre_processor\":\"none\",\"key_bindings\":\"normal\",\"line_numbers\":true,\"line_wrapping\":true,\"match_brackets\":true,\"snippets\":{\"markupSnippets\":{},\"stylesheetSnippets\":{}},\"tab_size\":2,\"theme\":\"twilight\",\"id\":\"wvvpGRx\",\"auto_save\":true},\"hashid\":\"wvvpGRx\",\"itemType\":\"pen\",\"resources\":[],\"tags\":[],\"id\":40939657,\"user_id\":678507,\"html\":\"<html>\\n  <body>\\n    <div>\\n      <div class=\\\"foods\\\">\\n        Best foods\\n      </div>\\n    </div>\\n  </body>\\n</html>\",\"css\":\"\",\"js\":\"/*\\n  Hi there! Thanks for taking on this code test. The requirements are listed below:\\n  \\n  1. Create a \\\"Foods\\\" class or constructor that will take two arguements: a root element and a data object (foodData).\\n  2. Render all of the items in the data object into the DOM with the root element as the parent\\n  3. If the user clicks a food item, it should be removed from the list\\n  \\n  Rules:\\n  - Only vanilla JS\\n  - Feel free to use Google, Bing, DuckDuckGo to look things up\\n  - Time limit: 30 minutes\\n*/\\n\\n\\n/* DO NOT MODIFY */\\nconst rootElement = document.querySelector('.foods');\\n\\nconst foodData = [\\n  {\\n    id: 1,\\n    image: '🌮',\\n    name: 'taco'\\n  },\\n  {\\n    id: 2,\\n    image: '🍔',\\n    name: 'burger'\\n  },\\n  {\\n    id: 3,\\n    image: '🍆',\\n    name: 'eggplant'\\n  },\\n  {\\n    id: 4,\\n    image: '🍎',\\n    name: 'apple'\\n  },\\n  {\\n    id: 5,\\n    image: '🥞',\\n    name: 'pancakes'\\n  },\\n];\\n/* DO NOT MODIFY */\\n\\n\\n/** YOUR CODE BELOW **/\\n// NOTE: This is one of MANY possible solutions :)\\n\\nclass Foods {\\n  constructor(el, foodData) {\\n    this._root = el;\\n    this._data = foodData\\n  }\\n  \\n  renderList() {\\n    this._root.addEventListener('click', event => {\\n      const { target } = event;    \\n      target.remove();\\n    });\\n    \\n    const fragment = document.createDocumentFragment();\\n    \\n    this._data.forEach(i => {\\n      fragment.appendChild(this.createFoodItem(i));\\n    });\\n    \\n    this._root.appendChild(fragment);\\n  }\\n  \\n  createFoodItem(item) {    \\n    const itemEl = document.createElement('div');\\n    itemEl.innerText = item.image;\\n    itemEl.classList.add(item.name);\\n    \\n    return itemEl;\\n  }\\n}\\n\\nconst foods = new Foods(rootElement, foodData);\\n \\nfoods.renderList();\\n \",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"none\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2019-11-01T17:54:34.000Z\",\"updated_at\":\"2019-11-07T21:00:10.000Z\",\"title\":\"Frontend Interviewing code - solution\",\"description\":\"\",\"slug_hash\":\"wvvpGRx\",\"head\":\"\",\"private\":false,\"has_animation\":false,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"parent_id\":40848675,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":0,\"pick\":false,\"popularity_score\":0,\"views_count\":0,\"pick_visible_at\":null,\"cpid\":\"016e281a-c790-7cfb-90f9-54bd1f082cde\",\"is_new_editor_pen\":false,\"pen_hash\":null}","__processorsMap":{"autoprefixer":"autoprefixer-10","babel":"babel-7","coffeescript":"coffeescript-2","format-1":"format-1","flutter":"flutter-1","haml":"haml-4","less":"less-3","lint-1":"lint-1","livescript":"livescript-1","markdown":"markdown-11","postcss":"postcss-7","pug":"pug-2","sass":"sass-1","scss":"sass-1","sass-ruby-3":"sass-ruby-3","sass-ruby-compass-3":"sass-ruby-compass-3","slim":"slim-3","stylus":"stylus-0","typescript":"typescript-4","vue":"vue-2","vue3":"vue-3"},"__favicon_mask_icon":"https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg","__favicon_shortcut_icon":"https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico","__path_to_iframe_console_runner":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeConsoleRunner-6bce046e7128ddf9391ccf7acbecbf7ce0cbd7b6defbeb2e217a867f51485d25.js","__path_to_iframe_refresh_css":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-44fe83e49b63affec96918c9af88c0d80b209a862cf87ac46bc933074b8c557d.js","__path_to_iframe_runtime_errors":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRuntimeErrors-4f205f2c14e769b448bcf477de2938c681660d5038bc464e3700256713ebe261.js","__path_to_processor_worker":"https://cpwebassets.codepen.io/assets/packs/router.js","__path_to_stop_execution_on_timeout":"https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js","__pen_normalize_css_url":"https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css","__pen_prefix_free_url":"https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js","__pen_reset_css_url":"https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"}