Create a simple Font Changer - Elzero Frontend Challenges

Elmouatez Billah Benariba — Sun, 25 Jun 2023 09:00:54 +0000

Overview on Elzero Frontend Challenges

Elzero Frontend Challenges is a collection of coding challenges designed for learners who want to improve their HTML and CSS skills. Created by Osama Mohamed (Elzero), these challenges are available in the frontend track of Elzero Web School.

Understanding the Challenge

The Font Changer Challenge is a straightforward and easy task that involves the following objectives:

Creating a Select Box containing a collection of Fonts for selection.
When any Font is selected, it should be applied directly to the page as shown in the image.
The task should be implemented in a dynamic manner, so that any Font added to the Select Box is automatically applied.

Building the Skelton

The Font Changer consists of an input and an output component:

Input: A select list containing three font options.
Output: A text element where the font-family style will be applied.

<div class="container font-changer">
  <!-- input -->
  <select name="fonts" id="text-fonts" class="font-changer__list">
    <option value="Open Sans">Open Sans</option>
    <option value="Metal Mania">Metal Mania</option>
    <option value="Caesar Dressing">Caesar</option>
  </select>
  <!-- output -->
  <div class="font-changer__result">Testing Fonts Here</div>
</div>

To achieve this, I created a select list with three options, each representing a font's value and name. The output component is a div containing the text "Testing Fonts Here." These elements are encapsulated within a parent div. For consistent and clear class naming, the BEM (Block Element Modifier) methodology was followed.

Perfecting the Styling

To recreate the provided design, I applied styles to both the select list and the test text.

Font Changer Logic

Each time the select list value changes, the font-family CSS property of the Test text gets the value of the selected font.

JavaScript Implementation

First, I searched for the desired fonts on Google Fonts and included them using link tags.

Second, I set the default font family for the test text as "Open Sans." This ensures that the text always has a font style applied.

Third, I added an event listener to the select. Whenever a change occurs in the select element, the font family of the Test text is updated based on the selected value (Font Name)in the select element. The value attribute of each option in the select element corresponds to the font family declaration provided by Google Fonts.

const font = document.getElementById('text-fonts');
const text = document.querySelector('.font-changer__result');

font.addEventListener('change', (e) => {
  text.style.fontFamily = e.target.value;
});

Give it a Try!

I invite you to rate my work and give it a try yourself. Engaging in frontend challenges like this one can be an excellent opportunity to enhance your skills, expand your knowledge, and improve your problem-solving abilities.

Build a button that shows and hides a paragraph - Elzero Frontend Challenges

Elmouatez Billah Benariba — Mon, 29 May 2023 18:46:22 +0000

Overview on Elzero Frontend Challenges

Introduction

As part of my journey to enhance my frontend skills, I took on the Elzero Frontend Challenges. Initially, progress was slow, but I was determined to overcome the obstacles and improve my abilities. Upon my return to the challenges, I encountered some new additions that piqued my interest. In this blog post, I will share my experience and insights gained from tackling the "show/hide paragraph challenge".

Understanding the Challenge

The objective of this challenge was to create a button that toggles the visibility of a paragraph when clicked. While seemingly simple, it taught me an important lesson: "Understanding the question is half the answer."

Building the Foundation

To begin, I created a basic HTML structure for the challenge. Following best practices, I adhered to the BEM (Block, Element, Modifier) naming convention, ensuring a clean and organized codebase. With the foundation in place, I proceeded to the next stage of styling the elements using CSS.

<div class="container action">
  <button class="action__btn">Click</button>
  <p class="action__content">This is My Paragraph</p>
</div>

Perfecting the Styling

To achieve the desired design, I leveraged CSS to add the necessary visual enhancements.

For the button, I removed the default border styling and added a hover effect that changed the mouse cursor to a hand. These subtle details contribute to a better user experience.

.action__btn {
  /* reset all inherited styles to their initial value */
  all: unset;
  /* add custom button style */
  padding: 0.2rem 1.2rem;  
  background-color: var(--cyan-100);
  border-color: var(--cyan-100);
  border-radius: 0.4rem;
  color: white;
  font-size: 1.4rem;
  cursor: pointer;
}

Moving on to the paragraph, I applied appropriate styles to ensure they aligned with the provided design.

I used the "Perfect Pixel" extension to ensure precise pixel-sized programming since I only had an image of the design and not a Figma or Adobe XD file.

JavaScript Implementation

As I delved into the JavaScript implementation, I initially planned to create an event listener that would toggle classes with each click, allowing for seamless show/hide functionality. However, upon re-reading the challenge requirements, I realized the need to incorporate the window.getComputedStyle() method.

Understanding the question is half the answer.

Taking a Closer Look at `getComputedStyle()`

The Window.getComputedStyle() method returns an object containing the values of all CSS properties of an element, after applying active stylesheets and resolving any basic computation those values may contain [2]. By utilizing this function, we can retrieve the visibility property value and manipulate it accordingly.

Solution

To bring the challenge to life, I wrote the following JavaScript code:

const actionBtn = document.querySelector('.action__btn');
const actionCtn = document.querySelector('.action__content');
const CtnComptStyle = window.getComputedStyle(actionCtn);

function setOpacity() {
  CtnComptStyle.visibility === 'visible'
    ? actionCtn.style.setProperty('visibility', 'hidden')
    : actionCtn.style.setProperty('visibility', 'visible');
}

actionBtn.addEventListener('click', setOpacity);

The code above checks the visibility styling of the paragraph element when the button is clicked. By toggling the visibility property between 'visible' and 'hidden', the paragraph is displayed or hidden accordingly.

Key Takeaways

Understanding the challenge requirements is crucial for success. Take the time to comprehend the task before diving into implementation.
Adopt best practices such as using structured HTML, following naming conventions, and applying appropriate CSS styles.
Use getComputedStyle to access and manipulate computed styles of elements dynamically.

Forem: Elmouatez Billah Benariba

Create a simple Font Changer - Elzero Frontend Challenges

Overview on Elzero Frontend Challenges

Understanding the Challenge

Building the Skelton

Perfecting the Styling

Font Changer Logic

JavaScript Implementation

Links

Give it a Try!

Build a button that shows and hides a paragraph - Elzero Frontend Challenges

Overview on Elzero Frontend Challenges

Introduction

Understanding the Challenge

Building the Foundation

Perfecting the Styling

JavaScript Implementation

Taking a Closer Look at `getComputedStyle()`

Solution

Links

Key Takeaways

Give it a Try!

Forem: Elmouatez Billah Benariba

Create a simple Font Changer - Elzero Frontend Challenges

Overview on Elzero Frontend Challenges

Understanding the Challenge

Building the Skelton

Perfecting the Styling

Font Changer Logic

JavaScript Implementation

Links

Give it a Try!

Build a button that shows and hides a paragraph - Elzero Frontend Challenges

Overview on Elzero Frontend Challenges

Introduction

Understanding the Challenge

Building the Foundation

Perfecting the Styling

JavaScript Implementation

Taking a Closer Look at getComputedStyle()

Solution

Links

Key Takeaways

Give it a Try!

Taking a Closer Look at `getComputedStyle()`