# 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://codefinity-content-media-v2.s3.eu-west-1.amazonaws.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>

This course is designed for absolute beginners who want to master the basics of the TypeScript programming language. TypeScript is a modern and powerful language that extends the capabilities of JavaScript, making your code more reliable and readable. We will start from the very basics, covering variables, data types, comparison operators, and conditional statements. Then, we will delve into working with arrays and loops. Upon completing this course, you will be ready to create simple programs in TypeScript and continue your learning journey into more advanced topics.

This section introduces you to TypeScript. You will learn why TypeScript is valuable and how it differs from JavaScript.

We're going to take control of the code! In this section, you'll learn how to set conditions for code execution in TypeScript. You'll discover why this is used and how to use it correctly, so that your code becomes the envy of all top programmers!

Let's get acquainted with a convenient way to store data in a collection of elements - an array. You will learn how to create and use arrays, as well as how to add and work with elements in an array. An important and fundamental structure for any programmer.

Automate tasks with a large amount of data or variables. Loops will assist you in this, allowing you to process a large amount of data and quickly obtain results in just a few lines of code. We will explore the fundamental types of loops and teach you how to work with them effectively!

It's time to finally learn how to write your own functions that will perform the operations you specify. Functions will help you organize your code, breaking it into manageable pieces and calling them in a single line. It's time to learn!

Introduction to TypeScript

Challenge: Modifying Arrays

Task