DEV Community: Tobenna

How to create a launch countdown timer with JavaScript in 10 minutes?

Tobenna — Wed, 02 Aug 2023 11:30:13 +0000

A launch-countdown timer is a fun way for developers to create anticipation and reveal their website and its features. We can use JavaScript to achieve this within 10 minutes.

The launch countdown timer usually includes < Days: Hours: Minutes: Seconds/>, but you can decide that for yourself.

The purpose of a launch-countdown timer is to build anticipation and excitement; it is a great marketing strategy used by many projects. It serves as a public reminder of an upcoming event and keeps users engaged and informed about its timing.

This article is for rookie web developers who are eager to create excitement around their projects.

It is expected that you are familiar with HTML, CSS and basic JavaScript.

Brief overview of the implementation using JavaScript

A brief walk-through on how we are going to create a launch countdown timer via JavaScript

Set the launch date and time: Set the date and time for the launch. The date could be a specific timestamp or a date generated dynamically.
Find the time difference: Using JavaScript's Date object, we can subtract the current timestamp from the launch timestamp to get the time difference.
Update the countdown timer: Create a function that updates the timer by calculating the remaining time and updates the HTML element that displays the timer. We can trigger this function at first and at regular intervals to update the timer dynamically.
Display the countdown: Using JavaScript to access the HTML element, we can automatically update the countdown timer. We will update the remaining days, hours, minutes, and seconds countdown.
Handle edge cases: If the launch date has passed, it displays a message indicating the launch has happened and then displays the site. You can display whatever you want.
Add styling: Apply CSS to make the countdown timer page have the same appearance as the project site you are about to launch. Customize the fonts, colours, sizes, and layout to be appealing.

Setting Up the HTML Structure

The layout for a countdown launch timer is simple; we will need two containers. One container is for the countdown timer, and the other is for links for more information on the event (this is optional.)


  <body>

    <div class="launch-container">



    </div>

    <div class="social-container">



    </div>

  </body>

Set up a default styling sheet.


* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



body {

  font-family: "Red Hat Text", sans-serif;

  font-size: 16px;

}

Next, add an HTML element to handle the countdown to the existing code.


<body>

    <div class="launch-container">

       <h1>We're launching Days Hours Minutes Seconds</h1> soon

      <div class="timer-container">

        <div class="timer-D">

          <h2 id="countdownDays"></h2>

          <p>Days</p>

        </div>

        <div class="timer-H">

          <h2 id="countdownHours"></h2>

          <p>Hours</p>

        </div>

        <div class="timer-M">

          <h2 id="countdownMins"></h2>

          <p>Minutes</p>

        </div>

        <div class="timer-H">

          <h2 id="countdownSecs"></h2>

          <p>Seconds</p>

        </div>

      </div>

    </div>

    <div class="social-container"></div>

  </body>

We now have a basic layout and a default style; we will need a script for a functioning countdown timer.

Create and import your script into the HTML file.


----

------

---------

 <script src="src/countdown.js"></script>

  </body>

Writing the JavaScript Logic

Once you create the script file, the first step to creating a launch timer would be to set the launch time and date. And we can do this in JavaScript like so;


//Set the launch date

const launchDate = new Date("2023-09-30T12:00:00Z");

The Date is a JavaScript-built method representing time and date. It also provides various methods and properties to work with dates and times.

We created a new instance of Date and passed a launch date and time in the format YYYY-MM-DDTHH:mm:ssZ where

T - is a delimiter to separate the date from the time, and

Z - is a time zone offset. It indicates that the time is in Coordinated Universal Time(UTC) format. The 'Z' means Zulu time, another UTC term.

Next, we create a function to count down from our current time to the launch time and use the Date method to get our current time.


function updateLaunchDate() {

  // Get current time

  const currentTime = new Date().getTime();

}

Remember, it's a countdown so we will need the time difference between the current and launch times. We have to do some math here.

We must know what to expect from the currentTime. I expect a value like this 1657585800000, known as UNIX timestamps.

Next, calculate the time difference by subtracting currentTime from launch date. The UNIX timestamp of the launch date is 1688122800


const distance = launchDate - currentTime;

Now, with the distance value, we know where we are counting to.

The distance value will help us calculate the days, hours, minutes, and seconds; we must divide the distance by the respective denominators.


  const days = Math.floor(distance / (1000 * 60 * 60 * 24));

  const hours = Math.floor(

    (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)

  );

  const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));

  const seconds = Math.floor((distance % (1000 * 60)) / 1000);

We divided the days with days in milliseconds (1000 * 60 * 60 * 24), and for the rest, we used modulus to get the reminder (concerning the previous time unit) and divide it with the respective unit.

We have done most of the work but can only see it once we display it on the HTML source code.

Let's get the unique ID for each container.


const countdownDays = document.getElementById("countdownDays");

  const countdownHours = document.getElementById("countdownHours");

  const countdownMins = document.getElementById("countdownMins");

  const countdownSecs = document.getElementById("countdownSecs");

And pass the value using the innerHTML method.


countdownDays.innerHTML = `${days}`;

  countdownHours.innerHTML = `${hours}`;

  countdownMins.innerHTML = `${minutes}`;

  countdownSecs.innerHTML = `${seconds}`;

The next step is to update the countdown every second.


setInterval(updateLaunchDate, 1000);

Putting everything together, this is what you should have.


//Set the launch date

const launchDate = new Date("2023-09-30T12:00:00Z");



function updateLaunchDate() {

  // Get current time

  const currentTime = new Date().getTime();

  const distance = launchDate - currentTime;



  // Calculate remaining days, hours, minutes, and seconds

  const days = Math.floor(distance / (1000 * 60 * 60 * 24));

  const hours = Math.floor(

    (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)

  );

  const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));

  const seconds = Math.floor((distance % (1000 * 60)) / 1000);

  //console.log(minutes, seconds, days, hours);

  //Display the counter on the UI

  const countdownDays = document.getElementById("countdownDays");

  const countdownHours = document.getElementById("countdownHours");

  const countdownMins = document.getElementById("countdownMins");

  const countdownSecs = document.getElementById("countdownSecs");

  countdownDays.innerHTML = `${days}`;

  countdownHours.innerHTML = `${hours}`;

  countdownMins.innerHTML = `${minutes}`;

  countdownSecs.innerHTML = `${seconds}`;





  // Update the countdown every second

  setInterval(updateLaunchDate, 1000);

}

It would show up once we called the function.


// Call the updateCountdown function initially

updateLaunchDate();

And now we can see it on full display in our user interface.

That was easy, right?

Time to style

Styling the Countdown Timer

First, I will add social links because I want my community to learn more about my product.


<div class="social-container">

      <div class="social">

        <img id="face" src="./images/icon-facebook.svg" alt="" />

        <img src="./images/icon-Instagram.svg" alt="" />

        <img src="./images/icon-Pinterest.svg" alt="" />

      </div>

    </div>

I will add some background colour and style each timer's container.

Here is my styling


* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;



}



body {

  font-family: "Red Hat Text", sans-serif;

  font-size: 16px;



  background-image: url(/images/bg-stars.svg);



  background-color: hsl(234, 17%, 12%);

  colour: white;

}



.launch-container {

  place-content: center;

  display: grid;

  min-height: 100vh;

  margin-top: -100px;

}

.launch-container h1 {

  margin: 20px;

}



.timer-container {

  display: flex;

  margin-top: 150px;

}

.timer-container div {

  padding-right: 80px;

}

.timer-container h2 {

  font-size: 80px;

  color: hsl(345, 95%, 68%);

  background-color: hsl(236, 21%, 26%);

  padding: 40px 20px 20px 21px;

  width: 150px;

  border-radius: 56% 44% 25% 75% / 74% 100% 0% 26%;

  -webkit-border-radius: 56% 44% 25% 75% / 74% 100% 0% 26%;

  -moz-border-radius: 56% 44% 25% 75% / 74% 100% 0% 26%;

  -ms-border-radius: 56% 44% 25% 75% / 74% 100% 0% 26%;

  -o-border-radius: 56% 44% 25% 75% / 74% 100% 0% 26%;

}



.social-container {

  background-image: URL(/images/pattern-hills.svg);

  height: 150px;

  width: 100%;

}

.social {

  display: flex;

  place-content: center;

}



.social img {

  margin: 0 40px;



  /* min-width: 100vh; */

}

.social img:hover {

  cursor: pointer;

  filter: sepia(10) hue-rotate(50deg) saturate(70) brightness(85%);

  -webkit-filter: sepia(10) hue-rotate(50deg) saturate(70) brightness(85%);

}



@media (min-width: 375px) {

  .launch-container {

    place-content: center;

    display: grid;

    min-height: 90vh;

    margin-top: -50px;

  }

 .timer-container {

    margin-left: 10px;

  }

  .timer-container div {

    padding-right: 20px;

  }

  .timer-container h2 {

    font-size: 40px;



    padding: 20px 10px 10px 11px;

    width: 75px;

  }

  .launch-container h1 {

    font-size: 20px;
    align-self: center;

  }

}

I added a media query for the mobile screen.

Here is the final result.

Mobile view

Desktop view

We are ready to launch, but what will happen when the launch time arrives? At this point, nothing will happen; let's change that.

We will add a display message on the HTML code and make it appear when our launch date has arrived.


<div id="display"></div>

The script for this is simple, our counter is the distance variable, so if it gets to zero, show the welcome message.


 if (distance <= 0) {

    const display = document.getElementById("display");

    display.innerHTML = `WE ARE LIVE`;

    clearInterval(countdownInterval);

  }

This code will display WE ARE LIVE when the countdown completes.

But we need to stop displaying the countdown timer; otherwise, it will be negative.

Let's create a function to hide the countdown elements when the distance variable reaches zero.

We are adding a unique id so we can target the container.


<div class="timer-container" id="timerContainer">

Create the function to add a hidden class from our stylesheet.


function hiddenlement() {

  const countdownDays = document.getElementById("timerContainer");

  countdownDays.classList.add("hidden");

}


.hidden {

  display: none;

}

Now, we pass it back to the if statement.


 if (distance <= 0) {

    const display = document.getElementById("display");

    display.innerHTML = `WE ARE LIVE`;

    hiddenlement();

    clearInterval(countdownInterval);

  }

We are close to the end of this project; this is what we get when the launch date arrives.

Not bad, but we can style it.

For the styling, you are free to do whatever you want; try to make it similar to the main product.

You can also add a redirection to your site or do whatever you want at the launch time.

Conclusion

Creating a launch countdown timer aims to generate anticipation and use it as a form of marketing for a product. Following this outline, you can create a countdown using JavaScript within 10 minutes. Remember to create a countdown design page similar to the product design and meet the desired launch date.

Depending on your launching product, you can add more features on the launch down the page to keep your community excited.

How to stay focus during a coding session?

Tobenna — Sat, 03 Jun 2023 16:51:52 +0000

The ability to stay focused during a coding session is rare among developers, especially newbies,because it requires enough brain power to solve a problem programmatically.

Programming can be hectic and stressful, and many developers will allow distractions or procrastination to eat up their time.

Although the problem you are trying to solve has a solution already, it still needs to be implemented.

Importance of staying focused during coding sessions

Staying in focus during a coding session has benefits for beginners and experts.

Some of the benefits are

Faster learning: Programming is a continuous learning process. By focusing, you can absorb new skills and information faster, understand new concepts and grasp frameworks and programming languages efficiently. Staying in focus will elevate your brain power and help you become a better developer.
Increased productivity: When you focus on the code, you can complete a task faster. It also enables you to reduce distractions and stay on track, accomplishing more tasks equals increased productivity.
Deepen problem-solving: Programming often involves solving complex problems. When you focus, you can better analyze problems, develop a deeper understanding, and implement the solution efficiently.
Improved code quality: Full concentration during a coding session opens your brain to understanding the problem and implementing an easy-to-read code solution. A focused mind is also less likely to make any errors.
Time management: Most projects you will ever work on have deadlines. You must have the focus to be able to submit on time. You can avoid unnecessary delays and mistakes and complete tasks within time by maintaining focus.
Reduced frustration and stress: An unfocused mind can quickly become frustrated and stressed. Staying focused gives you an edge over distractions and interruptions that can lead to wasting time and leave you frustrated and stressed.

How distractions can hinder productivity and progress

Distractions can hamper productivity and slow down progress during coding sessions. There are different forms of distraction, but we will only touch a few and their solution.

Interruption: External interruptions like messages, phone calls or people can cut your concentration short, and resuming the focus can be tough.
solution: Put a 'Do Not Disturb' sign on your desk or where everyone approaching your workspace can see, and let people around know you don't want to be interrupted. Put your phone on focus mode or switch on the 'Do Not Disturb' mode; you can keep your phone in another room if you work from home.
Digital distraction: The distraction of social media is strong and can be hard to ignore. If you can cut away your time on social media, you will find yourself achieving more goals.
One notification from Snapchat and you have wasted 30 minutes.

solution: Only install necessary social media applications to keep track of news, family and friends; or use the focus mode feature if available on your phone. Close unnecessary browsers that are not needed to help your coding problems.

Cluttered Workspace: An unorganized workspace can distract the mind and increase the coding problem's difficulty. It creates a sense of chaos which hinder the ability to stay fully focused.
solution: Keep your desk clean. Arrange your reference notes, tools and equipment in an organized manner. Put the cables in a wall pipe if you work from home.
Personal distraction: Personal distractions like lack of motivation, fatigue, and personal troubles can destabilize your thought process, and can hinder your productivity.
solution:
Get enough sleep, and drink enough water daily.
Make sure you are mentally prepared to start your coding session and if there is any real-life trouble, try fixing them or confirm the problem is not terrible.
Set clear goals for each session and complete them before jumping to another goal.
Noise and environmental factors: A chaotic environment is bad for a coding sessions. You can easily get distracted by loud noise and before you know it, you have wasted 20 minutes of your time.
solution: Get a noise-cancelling headphone or play white noise on earpieces. Find a quiet and isolated place to code.

Prepare Your Environment

Your workspace can affect you during a coding session. You will likely lose concentration if it smells bad or the temperature is uncomfortable.
Keeping a clean and fresh workspace is key to improving your productivity.
A good sitting posture also helps boost productivity. Sit with your legs on the floor and your knee slightly lower than your hips.

Make sure your desk and monitor are in the right position.

Optional, but it can also help get an adjustable table and stand between coding sessions.

Here are more tips to help prepare your environment:

Your workspace should always be tidy, and keep only materials needed to avoid distraction.
Distraction can waste your time and cut off your concentration.
Keep your phone silent or 'Do Not Disturb' to avoid notifications while working.
Staying in a quiet place is critical, and if you work in an office environment, use a noise-cancellation headset.
Every coding session you indulge in should be to complete a few specific tasks. You can break the tasks into smaller parts and complete them based on their priority.
Before you start coding, define a few clear milestones. Setting milestones will help you track your achievement, and you also get to boost your confidence when you reach a milestone.
Humans are not perfect. Hence we must use tools to help us achieve our goals. Learn to use a task management tool like a to-do list or Kanban boards.
Finally, celebrate small wins. Acknowledging that you have completed a milestone will motivate you to achieve the next one. It helps you stay positive as well.

Use a time management technique

Time management techniques help keep a concentrated mind. The Pomodoro technique is a highly effective time method developed by Francesco Cirillo. It's a technique that involves breaking and attempting to completing tasks within intervals, say 20 to 25 minutes, called Pomodoro followed by short breaks.

Steps to implementing the Pomodoro technique

Set a timer: start by setting a timer between 20 and 30 minutes, any that feels comfortable. During this time, you will solely focus on completing a task and reaching a milestone. The milestone should be easy, like completing the first part of a form.
Work Intensely: Focus on your coding work for 25 minutes; it will go by fast if you are full of concentration. Don't pick up your phone or eavesdrop on a conversation during this time.
Take Short Breaks: After concluding a Pomodoro, take a short break of about 5 minutes. Use this time to get water or stretch. Don't check on social media; 5 minutes is too short. Try to do whatever recharges your energy.
Repeat and Track Pomodoro: Repeat another 25 minutes after each 5 minutes break. You can do this for 2 hours and then take a longer break, say 15 to 30 minutes. Take note of if the Pomodoro needs to be longer to complete small tasks or shorter.
Adapt Pomodoro Length: From the notes you have taken, adjust your Pomodoro to suit your work style. You can reduce or increase the time to when you start feeling drained.
Use Pomodoro Apps: Timing yourself with your clock is distracting. Get an app to help you track your Pomodoro and breaks. These apps usually come with a great utility that will increase productivity.
Evaluate and Adjust: After finishing your coding session, assess your productivity and cross-check if it works fine with your work task or if you need to increase or decrease the entire session time.

Create a Ritual or Routine

Building habits is all about consistency; before you know it, it has become a routine. If you use the Pomodoro technique and start and stay focused at the same time and duration every day for 60 days, it will become part of you.

Here is how you can develop a routine:

Choose a Consistent Start Time: Decide specific work starting times that best suit you. And follow it every day; this will train your mind and muscle to start getting focused when starting time approaches.
Clear Your Mind: Before diving into your coding session, clear your mind from any thoughts, distractions or worries. Take a deep breath and position your mind to the task at hand.
Review and Plan: Review your progress from the previous coding session for a few minutes. Check out what you missed and what goals or milestones must be added or marked complete. Adjust the milestone and wait for the next Pomodoro.
Warm-Up Activities: To prepare your mindset for the coding session, practice warm-up activities. You can do this by reading about the task and milestone and documenting the concepts, tools, methods or hooks you will implement in the code.
Stretch Your Body: If the body is tired of one position, the mind will become weak. So during your short breaks, stretch your body to awaken your mind. Stretching can help boost focus and motivation.
Set Milestones: As we said in the last session, milestone is necessary to reduce frustration and confusion. And completing milestone help boost morale and confidence. Set your intention for each pomodoro and try to complete them. If you face errors and can't complete them before a Pomodoro finish, push it to the next Pomodoro and focus on fixing and understanding the error and why it occurred.
Start with a Small Task: Small steps matter a lot, don't try to do a heap of work in one sitting. Build the ability to divide tasks into smaller tasks and work on them from top to bottom. It helps you finish the entire task faster and not get overwhelmed.
Practice Gratitude: Be grateful and celebrate small wins. Enjoy the wins that come after every struggle during your coding session. Showing gratitude will always motivate you to overcome a challenge or struggle.

Practice Mindfulness and Concentration Techniques

Mindfulness and concentration techniques enhance your ability to stay focused during a coding session. It is one skill that great people have mastered and use to switch their minds to work mode.
Here are some techniques you can learn to use:

Single-Tasking: Building a project can be overwhelming when you start thinking about all the functions needed. But by breaking the big task into smaller tasks and tackling one at a time, you see that it is easy. This skill is essential because it helps you stop feeling overwhelmed and procrastinating. With a single-tasking mindset, you are entirely focused on completing it rather than concerned about if you can complete the entire project.
Deep work or flow state: Flow state is the ability to stay absorbed and perform optimally. Deep work is a state of being concentrated on an ongoing task. Create a profound workflow state by avoiding distraction, and procreation, setting milestones and finding a middle ground between your skill and the task.
Mindful Observation: Build your mind to observe things perfectly. You can practice by taking any item, say a pencil, and observing the colours, length, scratches, cuts and bite marks. Practice with more complex items; slowly, you can apply it when coding. It will help you quickly observe errors and bugs.
Take Mindful Breaks: During your short break, avoid social media; instead, ponder the task at hand while stretching your body or walking around. But the best option is to stay calm and have a mental rest.

Conclusion

You are staying focused while coding has many benefits for beginners to experts. There are so many skills or concepts you will miss out on while learning to code if you stay somewhat concentrated.
The average attention span of a human is around 15 to 20 minutes, but if there are distracting items like your phone, multiple browser tabs, a dirty workspace or a noisy environment, then the attention span can drop to 5 minutes.
But more than 5 minutes is needed to learn how to centre a div.
You have to learn to focus; one way to do that is to master the Pomodoro techniques. Use the app on your phone and put it on while you work and take a break to rest or stretch.
If you practice these techniques and create a routine, you will do the most when you code and establish consistency, leading to greatness.

What is one thing you wished you knew before becoming a developer?🤔🤔

Tobenna — Wed, 24 May 2023 12:10:31 +0000

For me, it's the fact that it is a continuous learning process, lol. If I had known if was like that, I would have started early.
what about you????

How to Customize Website Appearance with CSS Content?

Tobenna — Fri, 05 May 2023 12:48:30 +0000

The idea of content: ""; can be tricky for new web developers. How to use it? And when to use it. I kept asking myself these questions when I started my web development journey until I took a deep dive into understanding CSS content.

There are several use cases for CSS content.

Before we begin, I expect that you are familiar with CSS and HTML.

Let's look at the outline.

Introduction

What is CSS content?
How important is CSS content in web design?
Brief on the topic in this post

Understanding CSS Content

How does CSS content work, and what is it?
Types of CSS Content

Applying CSS content

How to implement CSS content on a design
Adding images and text to pseudo-elements
Displaying icons
Creating custom quotes
Styling form element
Creating a hover panel

Tips for CSS Content

Tips for creatively using CSS Content on web design

Conclusion

What is CSS Content?

CSS content is a property used to specify content. It is used together with ::before and ::after pseudo-elements to attach text, images, or other types of content to a website.

It is a great way to interact with the DOM while keeping your HTML code clean.
CSS content is frequently used with position, color, and background to make appealing designs.

And just like every other CSS property, it has different use cases. The simplest use will be to add text before or after an element.

For example

<p>Welcome to CSS Content, Mr. </p>

p::after{
  content:"James";
}

What do you think will print when you run this?

You are right; it will print Welcome to CSS Content, Mr James

Fun Fact: When you add text using CSS content, that text is not part of the HTML and will behave differently. It may not be selectable or highlightable, as the text is not part of the document's content.

How important is CSS content in web design?

The content property is important if you are looking forward to implementing some creative designs or else you don't need it.

CSS content allows the developer to add text or images before or after an HTML element without cluttering the HTML code.

Here are the key points about the importance of content:

The content property is a unique and important feature of CSS that is used to insert content into an HTML element.
Web developers can add graphics, text, and other media elements to a web page without directly modifying the HTML markup.
Using the content property can make HTML code easier to read and understand, as it reduces clutter.
It offers greater flexibility and control over the supply chain, enabling designers to create beautiful and engaging websites.
The content property can add custom icons or other elements to a website without additional HTML or JavaScript code.
Using content properties allows web developers to create reusable and more maintainable code, which can improve website performance and user experience.

Types of CSS Content

Many media contents can be added to a website using the CSS content property. They include

Text Content: The content property can add text to an HTML element; it can be regular text, quotes, or generated text such as counters or page numbers.
Image Content: The content property can also add images to an HTML element, including custom logos, decorative images, or background images.
Attribute Content: The content property can specify the values of HTML attributes such as href or title; it can be useful with a list of tools or to display additional information about a link.
Counter Content: The content property can counter and display a specific HTML element and display it; it can be useful in creating numbered lists or showing how many times an element has been used.
Icons and Icons Content: The content property can add icons, icons, or emojis to an HTML element; it can be useful in creating custom bullet points, social media logos, or other graphic elements.
Pseudo-Element Content: The content property is usually used with pseudo-elements like ::before and ::after. It allows the developer to add text directly before or after the HTML element without modifying the HTML markup.

Applying CSS content

The application of the CSS content property is not a complicated math. If you have written any CSS code before, you have probably used it. In this section, we will discuss the applications of CSS content that every web developer should be familiar with.

How to implement CSS content on a design?

Before applying the content property to your website, it is essential to

Identify the HTML element
Determine the type of content needed
Use a CSS selector to target the HTML element
Add the content property to the CSS rule set
Adjust the value of the content property as needed
Test the new design on multiple screen size

Let's look at some common examples.

Adding images and text to pseudo-elements

CSS content property can add images or texts before or after an HTML element. We can use the ::before and ::after pseudo to target and add new media content to our site without editing the HTML source code.

To add text to a pseudo-element, set the content property to custom text enclosed in quotes. Example:

div::before {
  content: "Before text";
}

div::after {
  content: "After text";
}

<div>
  Hello
</div>

We get the following on the interface

Remember our fun fact, see I couldn't highlight the text from CSS content.

To add an image, you can set the content property to URL () and provide the image file path inside the parentheses. You may also need to set the display property to block or inline-block to adjust the image display. Example:

div::before {
  content: url('https://hips.hearstapps.com/hmg-prod/images/little-cute-maltipoo-puppy-royalty-free-image-1652926025.jpg?crop=0.444xw:1.00xh;0.129xw,0&resize=180:*');
  display: inline-block;
  min-height: 150px;
  min-width: 50px;
}

Add this to the Hello div, and we get the following:

Note that the height and width attributes are used to set the image's dimensions because the pseudo-element has no internal dimensions.
You can also use other CSS properties such as background-image and background position to further manipulate the image.

Overall, adding images and text to pseudo-elements through the CSS content property can be a powerful way to improve the visual design of your web pages by adding decorative elements to the plan.

Displaying icons

CSS content can be used to display icons; all you have to do is to point the content property to the desired icon.
Here is how it's done; for this example, we will use Font Awesome 5 Free to get an icon.

<a href="#">Here is the movie link</a>

 a:before {
        font-family: "Font Awesome 5 Free";
        content: "\f008";
        display: inline-block;
        padding-right: 3px;
        vertical-align: middle;
        font-weight: 900;
      }

Creating custom quotes

CSS content property can be used to create custom quotes. Although this can be achieved with HTML, using the CSS content property makes it reusable and more customizable.
For example:


<div class="blockquote">
  <p>Here's some text to quote.</p>
</div>

.blockquote {
  quotes: "\201C" "\201D" "\2018" "\2019"; /* sets the quote characters to use */
  font-style: italic; /* styles the blockquote text */
}

.blockquote::before {
  content: open-quote; 
  font-size:30px;
  colour: red;
  background-color:black;/* displays the opening quote */
}

.blockquote::after {
  content: close-quote; /* displays the closing quote */
  font-size: 80px;
}

Styling form element

CSS content property can be used to style a form; we can use it to customize the checkbox or radio type input.
For example, customizing the colour of a checkbox.

Let's first hide the native checkbox input.

<label>
  <input type="checkbox" name="checkbox1">
  Checkbox Label
 </label>

input[type="checkbox"] {
   -webkit-appearance: none;
  appearance: none;
  /* For iOS < 15 to remove gradient background */
  background-color: #fff;
  /* Not removed via appearance */
  margin: 0;
 margin: 0;
  font: inherit;
  colour: blue;
  width: 1.15em;
  height: 1.15em;
  border: 0.15em solid blue;
  border-radius: 0.15em;
  transform: translateY(-0.075em);
   display: grid;
  place-content: center;/* hides the default checkbox */
}

This stylesheet will hide the default checkbox and change the colour and size of the checkbox.

Next, we customize the checked appearance

input[type="checkbox"]::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em yellow;
}

The content:""; allow us to have a space inside the checkbox's box. If you put a digit, it will display a digit.
Nothing will happen when you click the checkbox until we use the ::before pseudo.

input[type="checkbox"]:checked::before {
  transform: scale(1);
}

Creating a hover panel

The CSS content property can add a content to a webpage, it is triggered by a hovering event over an HTML element. It's a simple yet powerful concept for enhancing user experience and design, and requires simple CSS knowledge.
The combination of content and ::hover can help achieve this cool CSS trick.
For example

<a title="A quick history of programming" href="https://history.com">Programming is old</a>

This styling will show as follows:

But we can improve the user experience by adding a hover effect and using content to add the title attribute to the user interface.

a {
  color: #900;
  font-size:20px;
  text-decoration: none;
}

a:hover {
  colour: red;

  position: relative;
}

a[title]:hover::after {
  content: attr(title);
  padding: 4px 8px;
  color: #333;
  font-style:bold;
  position: absolute;
  left: 0; 
  top: 100%;
  white-space: nowrap; 
  z-index: 20;
  border-radius: 5px;   
  box-shadow: 0px 0px 4px #222;  
  background-image: linear-gradient(yellow, blue);  
}

Now we have added content: attr(title), it took the title value from the HTML, and when we hover over it, we see this:

Tips for CSS `Content`

CSS content property can add texts, icons, and images to a website without altering the HTML source code. But that's not where it ends.
You can also manipulate them for better design and reuse them.

Tips for creatively using CSS Content on web design

Here are some tips on how to creatively use the CSS content property:

Use content to add icons and symbols: You can use the content property to add icons and symbols to your web page. For example, you could use the Unicode character for a checkmark to indicate that a task has been completed.
Use content to add text to links: You can use the content property to add text to links. For example, you could use the ::before pseudo-element to add the word "Read" before a link to a blog post.
Use content with the ::before and ::after pseudo-elements: The content property is usually combined with the ::before and ::after pseudo-elements; it allows you to insert content before or after an element without actually modifying the HTML.
Use content to create tooltips: You can use the content property. For example, you could use the ::before pseudo-element to add a tooltip with additional information about an element.
Use attr() with content to add dynamic content: You can use the attr() function with the content property to add dynamic content to your web page. For example, you could use attr(data-tooltip) to display the value of a data-tooltip attribute as a tooltip. The content property is a great feature to play around with and discover cool tricks.

Conclusion

Designing a website is the job of CSS, but there are many ways that you can achieve various desired designs.

CSS content property can help achieve a simple visual effect like changing the state of a checkbox.

Many developers prefer the content property because it is easier and can save you the stress of writing a script to handle minor visual effects.

CSS content property improves reusability.You can create a customize blockquote in your stylesheet and reuse it.

How to use Props and State in a React application

Tobenna — Mon, 03 Apr 2023 12:46:20 +0000

In React apps, the two most used concepts are props and state. props allows developers to pass data from one component to the next, and state enable the component to manage data internally.
Understanding these two concepts will make you a better ReactJS developer.

The props and state are like the elevator and electricity in a 10 storey building, you can manage without them but be prepared to work like an ant.

This article will highlight the differences and how props and state can be combined to solve problems.

Before we dive in, let's look at the content.

Introduction
- Explanation of React's props and state concepts
- Why understanding props and state is important for building React applications
Props
- Definition and explanation of props
- How to pass props from parent to child components
- How to access and use props in child components
- Best practices for working with props
State
- Definition and explanation of the state
- How to set and update the state in a component
- How to use the state to trigger re-renders
- Best practices for working with state
Differences between props and state
- When to use props vs. state
- How to decide which to use in a given situation
Working with props and state in practice
- Examples of using props and state in real-world React applications
Conclusion

Introduction

Passing data from one component to another makes your React application functional. If you want to manipulate and manage data; build complex and dynamic user interfaces, you will need props and state.

Why understanding props and state is essential for building React applications?

Props help pass data from one component to the next; this is important because it allows the reusability of components. Props also assist you in creating a clear separation of issues between components, making it simpler to control the complexity of massive packages.

We use the state method to manage data and manipulate the conduct of a single component. The state is mutable, which means that you could update it with the aid of the component itself, any adjustment to the state cause a re-render of the component.
The state method lets you create dynamic and interactive interfaces that reply to user input and other events.

By understanding props and state, you could create nicely-organized, reusable, and maintainable code in React.
You can also create extra complicated and interactive user interfaces that offer a better user experience. In addition, expertise in props and state is vital for debugging and troubleshooting problems in React packages, as many mistakes in React are related to props and state management.

Definition of props

In React, props, short for property, is a way to transfer data from a parent component to a child component. A prop can be numbers, strings, arrays, or objects.
Props are defined as key-value pairs in the parent component before a child component collects them as an argument. There can be more than one child component using the same parent data.

How to pass props from parent to child components

Simple steps are needed to pass a props from a parent to a child component.
In the parent component,

You declare a component like so <ChildComponent/>.
You define the props in pairs, name of props = value of props inside the declared component. It should look like this

<ChildComponent
  name= "Alice"/>

We put everything together

function ParentComponent() {
  return (
    <ChildComponent
      name= "Alice"
      age={30}
      hobbies={['reading', 'swimming', 'cooking']}
    />
  );
}

How to access and use props in child components

You can create as many child components as you want. And they can all access the same parent data.
You can access the props by calling the props object passed as a parameter to the component.
The props are accessed via the key names defined in the parent component.
First, we pass props to our child component as an argument

function ChildComponent(props){}

We can now access each data by its key name as an object of props.->
props.keyName.
Putting everything together, we have this

function ChildComponent(props) {
  return (
    <div>
      <h1>Name: {props.name}</h1>
      <p>Age: {props.age}</p>
      <p>Hobbies: {props.hobbies.join(', ')}</p>
    </div>
  );
}

Best practices for working with props

Here are some best practices for working with props in React:

Use descriptive prop names: Use descriptive and meaningful names for your props to make your code easier to understand and maintain. Avoid using abbreviations or single-letter names.
Define default props: Define default props for your components to ensure that they work properly even if props are not passed from the parent component; doing this can prevent unexpected errors and improve the robustness of your code.

MyComponent.defaultProps = {
  prop1: defaultValue1,
  prop2: defaultValue2
}

Validate props: Use prop types to validate the types and shapes of props passed to your component. Validated props can help catch errors early and provide helpful error messages.

import PropTypes from 'prop-types';

MyComponent.propTypes = {
  prop1: PropTypes.string.isRequired,
  prop2: PropTypes.number,
  prop3: PropTypes.shape({
    name: PropTypes.string,
    age: PropTypes.number
  })
};

Avoid modifying resources: Resources should be considered read-only, and you should avoid modifying them in the child component. If you need to change data passed from the parent component, copy the data to the child component level or use callback functions to update the parent component.
Keep code simple: Keep your code simple and easy to understand. Avoid passing large or complex data structures as parameters, as this can make your code difficult to manage and debug.

By following these best practices, you can write secure, error-proof, and efficient code when working with resources in React.

Definition and explanation of the state

In React, state is used to represent the current state of a component. It is a way for the component to re-render itself and manage its data based on the state change of that data.

It is a commonly used concept in react applications. For instance, when you click on the menu icon, you are changing the state of a mobile menu from open to close.

The state is also useful for user interaction and is local to its component, meaning it can't be accessed or modified from another component.

How to set and update the state in a component

In React, we can have a class or function component (not part of this article).
And in a class component, we can set and update the state using the setState().
In the component's constructor, we will define the state of the component:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

We created a count state in the constructor and set it to zero.
If you are using a function component, then this is what you will have

import React, { useState } from 'react';

function MyComponent(props) {
  const [count, setCount] = useState(0);
}

Here, we used const to declare an array and initialize it to a state hook.
Any method works fine.

How to use the state to trigger a re-renders

In React, a state change will trigger a re-render, which will usually cause the user interface to update or change a value. It happens so fast that you wouldn't notice the "refresh" it does.

To trigger a re-render in a class component, we can call setState() with an argument as the updated state value.

handleClick(){
this.setState({ count: this.state.count + 1});
   }

The method handleClick() will increment the count by one and update the user interface immediately.

If you are working on a functional component, then you will have to create a function and then pass it to a button, like so

function handleClick() {
    setCount(count + 1);
  }
---------------------------------
-------------------------------------------
<p>Count: {count}</p>
 <button onClick={handleClick}>Increment</button>

Here, we used the useState() hook instead of setState() to define the initial state of MyComponent and a function to update it.
The useState hook allowed us to create count, the state value, and setCount that triggers the state.

Differences between props and state

The props and state in React are handy, but they have differences. Their purpose, flow, scope, and accessibility are not the same.
I created a table to make it simple.

When to use props vs. state

Props and state are two concepts used in React to manage and pass data within components.

Props are helpful when passing data from a parent component to the children components. They are unchangeable and allow you to configure and customize any child component based on the parent's needs.

A child component can only read Props and push through the component's tree. If the parent's props change, React updates the child components.
Props are useful for/when:

You want to transfer data from the parent to child components.
The transmitted data is immutable (unchangeable).
You may want to configure or modify the child section based on the parent's needs.
You want to provide a way for parent components to communicate with child components.

The state is useful for managing component-specific data that are bound to change. The state is mutable and controlled by its components.

The component can define and update its state using the setState or useState method in React. Unlike props, it doesn't wait for the parent component before it changes its state.
We use state method for/when:

You must manage and update component-specific data that can change over time.
The data is internal to the component and not required by other components.
You want to re-render the component when the state changes.
You want to implement interactive behavior within a component.

How to decide which to use in a given situation

A few factors to consider before deciding which concept to use in a given situation. They include

Relationship among components: The components' relationship can tell which concept to use. If the data needs to move from the parent component to its child component, then props is best used here. But if the data need to be managed internally within a single component, the state might be more suitable.
Data Immutability: Does the data change over time? If it doesn't, then props are preferred. Else, if you expect them to change better to use state.
Component reusability: Storing props at the parent component is for reusability. If you want to use the same data across different components, then props is suitable. But state is not suited for reusability.
Component responsibility: What is the purpose of the component? If the component needs to respond to the user's interaction and manage its data, then state is suitable. While we can use props if the component's purpose is to render and present data passed from its parent.
Performance and efficiency: The component's performance is also a factor to consider. A frequently updated component will work well if you use state. If the data is not frequently updated, then props will get the deal done.

Please don't treat this as a rule; they are considerations that guide you when trying to pick which to use. And with time, it becomes an unconscious decision for you.

Working with props and state in practice

Let's look at simple examples of state and props

Examples of using props and state in real-world React applications

** Props example**: Let's work on a simple ToDo List component; its job is to receive an array of to-do items as props from its parent. The Todolist component would go through each item in the array and render them accordingly. The parent component contains the unchangeable to-do list items and passes them down to the child component before it is rendered on the user interface

export function App() {
  const todos = [
    { id: 1, task: 'Finish project', dueDate: '2023-05-31', completed: false },
    { id: 2, task: 'Prepare presentation,' dueDate: '2023-06-05', completed: false },
    // more to-do items...
  ];

  return <TodoList todos={todos} />;
}

// Child Component
function TodoList({ todos }) {
  return (
    <div>
      {todos.map(todo => (
        <TodoItem key={todo.id} todo={todo} />
      ))}
    </div>
  );
}

function TodoItem({ todo }) {
  return (
    <div>
      <span >This task: {todo.task}</span>
      <span> is due by {todo.dueDate}</span>
      {/* ... */}
    </div>
  );
}

And you see this on your screen.

State example: Let's use a counter-component for this one. This counter will keep track of a value and allow users to increase or decrease it. The value stored in the component's state and changes due to user interactions:

import React, { useState } from 'react';


export function App() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(prevCount => prevCount + 1);
  };

  const decrement = () => {
    setCount(prevCount => prevCount - 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

You can click the increment or decrement button, and the count value changes immediately.

The count is at -2 because I clicked on decrement twice

Conclusion

When you create an application in React, understanding how and when to use state or props makes development more straightforward.

A props is used if we want something to remain the same; for example, your tweet doesn't change no matter how many times it's quoted. But the likes, quotes, retweets, and bookmark count increase and decrease frequently and state will be suitable here.

This concept can be confusing for beginners but if they understand their differences and how they work together. It will become simple.