Day 4- JavaScript is magical, CSS is enchanting.

Day 4- JavaScript is magical, CSS is enchanting.

Quote of the day: "In my Vue, it's best to think before you React, because most situations can be really Angular." -Me.

It's Monday and here I am.

My web development journey has slowed down because of some deficiencies in my familiarity with CSS/BootStrap. So here I am, making my hubris into an enchanting friend.

Today, I added some more finesse to the landing page for SpeakArabic.

The landing page copy slides in and the text alternates between 3 colours. Oh it's some really cool finesse I tell you.

Shall we?

1. I started by creating the markup for my landing page content.

Two sentences, and one button. Observe the id proof, and the class proofbutton.

<main id="proof" >
        ARABIC IS EASY.
<br> <hr>
        We have proof.
<br>
      </main> 

      <button class="btn mb-3 allbuttons proofbutton">Click Here</button>

2. Next, I created the CSS instructions for the animation effects.

Here, the the text slides in from right to left, with the color starting at yellow, transitioning into blue, and finally black.

Really beautiful.

#proof {
  animation-duration: 3s;
  animation-name: maintextin;
  animation-fill-mode: forwards;
}

@keyframes maintextin {
  from {
    margin-left: 100%;
    width: 100%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }

  30%{
    color: #ffde59;
  }

  60%{
    color: #03989e;
  }

  100%{
    color: black;
  }
}

3. Finally, I added a similar effect to the button

So cool, it makes it almost irresistible to click.

.proofbutton{
  animation-duration: 5s;
  animation-name: buttonin;
  animation-fill-mode: forwards;
  animation-delay:1s;
  animation-iteration-count: 1;
}

@keyframes buttonin {
  from {
    margin-left: 100%;
    width: 30%; 
  }

  to {
    margin-left: 0%;
    width: 30%;
  }

  30%{
    color: #ffde59;
  }

  60%{
    color: #03989e;
  }

  100%{
    color: black;
  }
}

*I caught a bug though: The animation-iteration-count makes it so that the button doesn't repeat the animation on every click, so it's important it stays.

Voila! That's it for today!

I hope to bring in some Javascript spice in tomorrow's report. Please let me know what you think, any corrections, suggestions or opinions will be very helpful!

Adios!