Dynamic Tab Bar

Complete the code in style.css.

When the user scrolls down but the scroll distance is less than the height of the header (the .heading element), the Tab bar should remain in its original position. When the scroll distance exceeds the header height, the Tab bar should become fixed at the top of the viewport.

/* Implement dynamic tab bar fixation */
position: sticky;
top: 0;

The sticky positioning combines relative and fixed behaviors. The element remains relatively positioned until a specified scroll offset is reached, after which it becomes fixed within the viewport.

Earth Orbit Animation

Locate the TODO section in css/style.css and achieve the following:

Add an animation to the .earth-con element with these properties:

• Animation name: orbit
• Duration: 36.5 seconds
• Timing function: linear
• Iteration count: infinite

/* Add animation properties */
animation: orbit 36.5s linear infinite;

Handling 'this' Context

Complete the TODO section within the handle function in js/index.js to implement this functionality:

1. Bind an input event listener to the input field (this.inputEl). When the input value changes, invoke the provided handleInput method. Ensure that within the handleInput method, the this context refers to the search object itself.

handle() {
    this.inputEl.addEventListener('input', (event) => this.handleInput(event));
}

Restoring Vue.js Reactivity

Find the TODO section in index.html and correct the code to restore the reactivity of the data object. After correction, clicking the - and + buttons should correctly change the value. The correct implementation is:

// Fix the code to restore reactivity
let { value } = toRefs(data);

1. toRefs(data): This is a Vue 3 helper function that converts a reactive object into a plain object while maintaining the reactivity of its properties. It returns a new object containing reactive references for all properties of the original object.
2. let { value } = toRefs(data): This uses destructuring assignment. It extracts the value property from the object returned by toRefs(data) and assigns it to the variable value. Consequently, the value variable now holds a reactive reference to the value property from the data object.

Implementing an Expectation Function

Write a function named expectFn to assist developers in testing their code. The function should accept any value via the parameter val and return an object containing two methods:

toBe(val): Accepts another value and returns true if the two values are strictly equal (===). If they are not equal, it should return the string "Not Equal". notToBe(val): Accepts another value and returns true if the two values are not strictly equal (!==). If they are equal, it should return the string "Equal".

var expectFn = function(val) {
    return {
        toBe(compareVal) {
            return val === compareVal ? true : 'Not Equal';
        },
        notToBe(compareVal) {
            return val !== compareVal ? true : 'Equal';
        }
    };
};

Text Truncation with CSS

Complete the TODO sections in style.css with the following specifications:

Make the first line title (the text within the .content span tag) display on a single line. Any overflowing text should be hidden and indicated by an ellipsis. Use the -webkit-box syntax to make the text below (within the .content p tag) display a maximum of three lines. Any text exceeding three lines should be hidden and indicated by an ellipsis.

span {
    font-size: 20px;
    color: #837362;
    /* Implement single-line text truncation */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}
p {
    color: #837362;
    /* Implement multi-line text truncation (3 lines) */
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

Slot Machine Logic

Locate the GetResult function in js/index.js and complete it to achieve this goal:

After clicking start, calculate the final stopping position of the images in each column using the parameters r1, r2, and r3. If the final images displayed in all three columns are identical, the player wins the jackpot! The text panel (class = textPanel) should display "Congratulations, you won!". Otherwise, it should display "Sorry, not a winner.".

Parameter explanation: r1, r2, r3 represent the final stopping index of the li elements within the three columns (with IDs sevenFirst, sevenSecond, and sevenThird, respectively). Use the data-point attribute of the displayed li element to determine if the three images are the same. If the values of the data-point attributes are identical, the images match.

GetResult(r1, r2, r3) {
    // TODO: Implement result checking logic
    const item1 = sevenFirst.children[r1];
    const item2 = sevenSecond.children[r2];
    const item3 = sevenThird.children[r3];
    if (item1.dataset.point === item2.dataset.point && item2.dataset.point === item3.dataset.point) {
        textPanel.textContent = 'Congratulations, you won!';
    } else {
        textPanel.textContent = 'Sorry, not a winner.';
    }
}

Alien Message Translator

Complete the translate function in index.js:

The translate function receives a string parameter alienMessage containing a sequence of alien ciphertext. The function should translate the ciphertext into human language based on specific rules stored in the codonTable variable and return the translated string. Do not include spaces in the translated result string.

Special conditions:

• If the ciphertext is empty, return an empty string.
• If any part of the ciphertext cannot be translated or a codon is not found in the table, return the string "Invalid message".
• If a special codon is encountered whose translation result is "stop", stop translation immediately and return the result translated up to that point (excluding the "stop" codon).

const translate = (alienMessage) => {
    let translatedMessage = '';
    if (!alienMessage) return translatedMessage;
    for (let i = 0; i < alienMessage.length; i += 3) {
        let codon = alienMessage.substring(i, i + 3);
        if (codonTable[codon] === 'stop') {
            return translatedMessage;
        }
        if (!(codon in codonTable)) {
            return 'Invalid message';
        }
        translatedMessage += codonTable[codon];
    }
    return translatedMessage;
};

Styling a Creative Billboard

Complete the TODO sections in css/style.css:

1. Set the border-radius of the .billboard element to 10px and its background image to woodiness.jpg from the images folder.
2. Set the top-left and top-right corners of the .top-sign element to have a border-radius of 15px, while the bottom corners remain square. Also, skew the element by -20 degrees along the X-axis.

.billboard {
    position: relative;
    background-color: #8e6534;
    color: #fff;
    padding: 20px;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
    background-size: cover;
    /* Set border-radius and background image */
    border-radius: 10px;
    background-image: url("../images/woodiness.jpg");
}
.top-sign {
    position: relative;
    width: 200px;
    height: 100px;
    background-color: #a87f4a;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    /* Set border-radius for top corners and skew */
    border-radius: 15px 15px 0 0;
    transform: skewX(-20deg);
}

Atomic CSS Implementation

In the provided code, a div has an attribute: flex="~ col". Here, ~ refers to the flex property itself, indicating the use of flexbox layout, and col instructs the flex container to use a column direction.

Complete the TODO section in css/style.css to implement the required functionality for the div layout.

/* Implement atomic CSS for flex */
[flex='~ col'] {
    display: flex;
    flex-direction: column;
}

Adding Authorizasion Headers with Axios

Complete the TODO section in index.js by adding or modifying code to achieve this goal:

When the Key 1 and Key 2 buttons are clicked, an HTTP request is sent via axios. The request must include an Authorization header field carrying a token. The token value is 2b58f9a8-7d73-4a9c-b8a2-9f05d6e8e3c7.

// Add or modify the following code
key1Button.addEventListener('click', async () => {
    key1Button.disabled = true;
    let { data } = await axios.get('/spellone', {
        headers: {
            'Authorization': '2b58f9a8-7d73-4a9c-b8a2-9f05d6e8e3c7'
        }
    });
    spell1.innerHTML = data;
    tryOpenTreasureBox();
});

key2Button.addEventListener('click', async () => {
    key2Button.disabled = true;
    let { data } = await axios.get('/spelltwo', {
        headers: {
            'Authorization': '2b58f9a8-7d73-4a9c-b8a2-9f05d6e8e3c7'
        }
    });
    spell2.innerHTML = data;
    tryOpenTreasureBox();
});