The blinking Unicorn - Showcase with React

This is my showcase to the Blinking Unicorn. Enter the website, click the button and wake up the Unicorn 🦄

Table of contents

• The blinking Unicorn - Showcase with React
  • Table of contents
  • Overview
    • The challenge
    • Screenshot & spoiler alert 😅
    • Links
    • How to clone the Repository 🧐
    • Built with
    • What I learned
  • Author
  • Credits

Overview

The challenge

Users should be able to:

• understand better the useState hook with a simple example
• review conditional styling in React environment
• test the conditional greeting using the ternary operator

Screenshot & spoiler alert 😅

Still sleeping Unicorn's version:

Awake Unicorn's version:

The figma's screen shoot:

Links

• Live Site URL: blinking Unicorn

How to clone the Repository 🧐

1. Use the code button in the Repository to clone it into your machine.
2. Install the npm package using the terminal

$ npm install

3. Enjoy the code snippet and don't hesitate to change the code to practice more

Built with

• Semantic HTML5 markup

• CSS custom properties

• vanilla.JS

• React.JS

• Firma - Self made Firma Wireframe, open the link and try to create this project from scratch

• Conditional Styling - a great article about conditional styling in React.js

What I learned

• How to use ternary operator with more conditions then usual:

    setGreeting(
      time > 6 && time < 12
        ? 'Good morning gorgeous'
        : time > 12 && time < 16
        ? 'Continue to do your stuff darling'
        : time > 16 && time < 21
        ? 'Good Evening stunning'
        : 'It is late, go to sleep!'
    );
  

  • How to use conditional styling as a variable and implement it as inline style attribute inside the HTML element.

  const style = {
    opacity: !openEyes ? 0 : 1,
  };
  
   <img
          src={unicornOpenEyes}
          style={style}
          className="open-eyes--img"
          alt="you woke up the unicorn, the eyes are open"
        />
  

Author

• LinkedIn - @moran_thaler

Credits

• Illustration creator :FishPouch
• Stock-Illustration-ID:1206701951
• iStock