# Task 

You are given **two** arrays. Your task is to **remove the first and last elements** from each of the arrays and then **display the combined array** on the screen. Use the methods we learned in this section. If you have difficulty understanding the task, you can use the **Hint** and **Solution** buttons to view and analyze the solution. <br/>
This way, you'll grasp the information better.

let firstArray: (number | string)[] = [0, 1, 2, 3, 4, 5];
let secondArray: (number | string)[] = ['zero', 'one', 'two', 'three', 'four', 'five']
firstArray.___(); //removing the last element  
secondArray.___(); //removing the last element 
firstArray.___(); //removing the first element 
secondArray.___(); //removing the first element
let mixedArray: (___ | ___)[] = firstArray.___(___); //mixing two arrays into one
console.log(mixedArray); // printing mixed array 

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.3/codemirror.min.css"
/>
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.3/theme/dracula.min.css"
/>


<link
  rel="stylesheet"
  href="https://content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/buttons-section/hint-solution-with-copyable-%26%3Dhighlighted-code.css"
/>

<div class="button-container">
  <button
    class="button"
    onclick="toggleBlock1('hint-block1', 'solution-block1')"
  >
    Hint
  </button>
  <button
    class="button"
    onclick="toggleBlock1('solution-block1', 'hint-block1')"
  >
    Solution
  </button>
</div>


<div id="hint-block1" class="block hint-styling-block">
  1. Replace the <b>blank spaces</b> (<code>___</code>) with the corresponding
  methods that will perform the required action.<br />
  2. The <b>comments</b> indicate which method to use.<br />
  3. In the end, you need to <b>combine two arrays</b> using the appropriate
  method.<br />
  4. You can see the list of methods and how to use them in
  <a
    href="https://codefinity.com/courses/v2/a5c23211-8dc2-4c4a-9a83-07a51e843ab6/f9b4bbb3-1d1c-4358-b2c1-d85eb4f07964/65cc5657-b5a0-4d0f-a44f-bb8974748ab0"
    target="array's methods"
    style="color: #ff8a00; font-weight: 600; text-decoration: none"
    onMouseOver="this.style.color='#ff0000'"
    onMouseOut="this.style.color='#d27204'"
    >this</a
  >
  chapter.
</div>

<div id="solution-block1" class="block solution-styling-block">
  
  <textarea id="code-1" class="language-typescript">
let firstArray: (number | string)[] = [0, 1, 2, 3, 4, 5];
let secondArray: (number | string)[] = ['zero', 'one', 'two', 'three', 'four', 'five']
firstArray.pop(); //removing the last element
secondArray.pop(); //removing the last element
firstArray.shift(); //removing the first element
secondArray.shift(); //removing the first element
let mixedArray: (number | string)[] = firstArray.concat(secondArray); //mixing two arrays into one
console.log(mixedArray); // printing mixed array</textarea
  >

  <button class="copy-button" onclick="handleClick1('code-1')">
    <svg
      width="20"
      height="20"
      x="0"
      y="0"
      viewBox="0 0 32 32"
      style="enable-background: new 0 0 512 512"
      xml:space="preserve"
      class=""
    >
      <g>
        <path
          d="m26.121 6.707-3.828-3.828A2.98 2.98 0 0 0 20.172 2H12a3.003 3.003 0 0 0-3 3v1H8a3.003 3.003 0 0 0-3 3v18a3.003 3.003 0 0 0 3 3h12a3.003 3.003 0 0 0 3-3v-1h1a3.003 3.003 0 0 0 3-3V8.829a2.982 2.982 0 0 0-.879-2.122ZM22 5.414 23.586 7H22ZM20 28H8a1.001 1.001 0 0 1-1-1V9a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1ZM18 9.414 19.586 11H18ZM24 24h-1V12.829a2.982 2.982 0 0 0-.879-2.122l-3.828-3.828A2.98 2.98 0 0 0 16.171 6H11V5a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1Zm-6-8h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Z"
          fill="#a6b8e6"
          opacity="1"
          data-original="#000000"
          class=""
        ></path>
      </g>
    </svg>
  </button>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.3/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.3/mode/clike/clike.min.js"></script>


<script src="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.js"></script>

<script>
  document.addEventListener("readystatechange", (event) => {
    if (event.target.readyState === "complete") {
      onPageLoad1();
    }
  });

  function onPageLoad1() {
    var editor = CodeMirror.fromTextArea(document.getElementById("code-1"), {
      lineNumbers: true,
      mode: "text/x-scala",
      theme: "dracula",
    });

    // ----------> HIGHLIGHT <----------
    editor.markText(
      { line: 0, ch: 0 },
      { line: 0, ch: 0 },
      { className: "specific" }
    );

    // Initially hide both the hint and solution blocks
    hideBlock1("hint-block1");
    hideBlock1("solution-block1");
  }

  // Copy Button handler
  const handleClick1 = (codeBlock) => {
    const textarea = document.getElementById(codeBlock);
    const copiedText = textarea.value;

    navigator.clipboard.writeText(copiedText);

    Notiflix.Notify.Success("Copied to clipboard!", {
      timeout: 2000,
      width: "260px",
      position: "center-top",
      textColor: "#ff5549",
    });
  };

  // Function to toggle the visibility of a block
  const toggleBlock1 = (blockId) => {
    const block = document.getElementById(blockId);

    if (block.style.display === "none" || block.style.display === "") {
      hideBlock1("hint-block1");
      hideBlock1("solution-block1");
      showBlock1(blockId);
    } else {
      hideBlock1(blockId);
    }
  };

  // Function to show a block
  const showBlock1 = (blockId) => {
    const block = document.getElementById(blockId);
    block.style.display = "block";
  };

  // Function to hide a block
  const hideBlock1 = (blockId) => {
    const block = document.getElementById(blockId);
    block.style.display = "none";
  };
</script>

Learn the fundamentals of TypeScript by exploring its syntax, type system, control flow, arrays, and functions. Practical examples and challenges help build confidence in writing clear, type-safe code and applying core programming concepts.

Challenge: Modifying Arrays

Task