DEV Community

Cover image for Building Star Wars Crawler with Azure Static Web Apps - Part 2
Microsoft Azure profile image Glaucia Lemos
Glaucia Lemos for Microsoft Azure

Posted on

Building Star Wars Crawler with Azure Static Web Apps - Part 2

#staticwebapps #javascript #node #tutorial

Developing Application Logic in JavaScript

Now let's start developing the application logic using JavaScript. Open the script.js file and place the following code below:

  • app.js file: 
/**
 * File: intro.js
 * Data: 05/04/2022
 * Description: Star Wars Movie Intro Logic.
 * Author: Glaucia Lemos <Twitter: @glaucia_lemos86>
 */

let width = window.innerWidth;
let height = window.innerHeight;

let intro = document.getElementsByClassName('intro')[0];

intro.style.fontSize = width / 30 + 'px';

window.addEventListener('resize', () => {
  width = canvas.width = window.innerWidth;
  height = canvas.height = window.innerHeight;
  intro.style.fontSize = width / 30 + 'px';
});
Enter fullscreen mode Exit fullscreen mode

Let's figure out what we did here! The font size will be responsive. That's why we are going to use JavaScript. And for that to happen we need to get the width and length of the window!

Then we are selecting the intro class element so that we can store it in a variable with the same name.

And finally, we are setting the font size according to the width proportional size indicated. And with that, if you change the screen sizes on different monitors, the values will be updated.

Now that our opening sentence is ready, let's focus now on the abstract text, in yellow, that appears throughout the intro! 😀

The Story Must Be Told!

Now let's go to the next step. As I already mentioned above, now we have to develop the part of the summary that appears during the intro. If you don't remember how is, here's an image of what we're going to do now:

star.jpg

Let's hide the previous element by adding the opacity property to a value of 0.

In HTML, we'll add a new <section> tag. And in this tag it will receive a class called paragraphs.

Inside this class, there will be a division with a summary of the story, which is where we will include the story that will appear in yellow in our application.

Now, let's include the <div> tag and inside it we'll include the class called: text_story for the letter styles. Inside this element we will add in the <p> tags for each element.

  • index.html file: 
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Star Wars Intro App</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport" />

  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
    integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

  <link href="css/style.css" rel="stylesheet">
</head>

<body>

  <header></header>

  <section class="intro text_intro">
    A Long Time Ago, in a galaxy far,<br> far away ...
  </section>

  <section class="paragraphs">
    <div class="story text_story">
      <p class="text-center">Star Wars Episode XI</p>
      <p class="text-center">Glaucia and the Lightsaber Quest</p>
      <br>
      <p class="text-center">
        These are very difficult times!
        That's why Glaucia Lemos needs to find the lightsaber so she can get programming powers
        like no other person in the galaxy.
        And with that, she begins her quest across the galaxy.
      </p>

      <p class="text-center">
        During your quest,
        Glaucia comes across a planet called Tatooine.
        And it is precisely there that she will start all her training
        to get her powers again.
      </p>
    </div>
  </section>

  <footer></footer>

  <script src="js/intro.js"></script>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

The text can be created according to your creativity. The important thing is to use your imagination! Okay, now let's go back to CSS and apply some styles to this text.

Open the style.css file again and include the following classes:

  • .story
  • .story_text

  • .paragraphs

  • style.css file:

@import url(https://fonts.googleapis.com/css?family=News+Cycle:400,700);

body {
    margin: 0;
    background: #000;
    overflow: hidden;
}

.intro {
    position: absolute;
    top: 40%;
    left: 20%;
    z-index: 1;    
}

.intro_text {
    font-family: "News Cycle", sans-serif;
    color: #00BFFF;
    font-weight: 400;
    letter-spacing: .1em;
}

.story {
    position: absolute;
    top: 80%;
}

.story_text {
    font-family: "News Cycle", sans-serif;
    font-weight: 700;
    color: #FFD700;
    text-align: justify;
    letter-spacing: .1em;
    line-height: 1.1em;
}

.paragraphs {
    position: absolute;
    left: 15%;
    width: 70%;
    z-index: 1;
}
Enter fullscreen mode Exit fullscreen mode

Let's understand what was done here. In the .story class, we put a fixed position and its location will be vertically towards the top.

In the .paragraphs class, unlike the previous class, we will add the width and left property to center the element. And to override, we'll use the z-index property.

For the .story_text class we will use the Cycle News typography with yellow color and thickness 700. In addition, we will justify the paragraphs and give a spacing between the letters.

Try to avoid write to much in the summary. Don't include a long text. Remember that the text has to follow according to the intro song theme. (Yes! We will include audio in this intro!!) 😀

But in the movie intro, the letters kind of lie down, isn't? Well, there's a way to fix this. So let's apply the 3D effect inside the class: .paragraphs in the styles.css file 😀

  • style.css file: 
(...)

.paragraphs {
    position: absolute;
    left: 15%;
    width: 70%;
    z-index: 1;
    transform-origin: 50%;
    transform: perspective(300px) rotateX(20deg);
}
Enter fullscreen mode Exit fullscreen mode

To make the letters effect, we use the properties: perspective and rotate. This will cause the text to be slightly slanted.

The first part in the transform property indicates the perspective that an item will be displayed in 3D and the second gives a certain axis rotation, a series of angles in degrees.

Before that, we will change the origin of the changes to the center of the element. Take a look at the result:

Screen-Shot-12-20-19-at-10-22-PM.png

Now let's go back to the intro.js file and add logic to that text.

  • intro.js file: 
/**
 * File: intro.js
 * Date: 05/04/2022
 * Description: Star Wars Intro Logic
 * Author: Glaucia Lemos <Twitter: @glaucia_lemos86>
 */

let width = window.innerWidth;
let height = window.innerHeight;

let intro = document.getElementsByClassName('intro')[0];
let story = document.getElementsByClassName('story')[0];
let paragraphs = document.getElementsByClassName('paragraphs')[0];

intro.style.fontSize = width / 30 + 'px';
story.style.fontSize = width / 20 + 'px';
paragraphs.style.height = height + 'px';

window.addEventListener('resize', () => {
  width = canvas.width = window.innerWidth;
  height = canvas.height = window.innerHeight;
  intro.style.fontSize = width / 30 + 'px';
  story.style.fontSize = width / 20 + 'px';
  paragraphs.style.height = height + 'px';
});
Enter fullscreen mode Exit fullscreen mode

Now, so that we can hide the paragraphs, let's change the position value from 0 to 80% in the .story class:

  • style.css file: 
(...)

.story {
    position: absolute;
    top: 80%;
}
Enter fullscreen mode Exit fullscreen mode

Well, now let's add a button that will allow us to start our intro along with audio. Open the file: index.html and add the onclick attribute inside the tag with a function called: start()

  • index.html file: 
(...)

<body>
  <div class="button" onclick="start()">Start</div>
  <header></header>

  <section class="intro text_intro">
    A Long Time Ago, in a galaxy far,<br> far away ...
  </section>

(...)
Enter fullscreen mode Exit fullscreen mode

Now let's apply some styles to this button created on the main page.

Create the class: .button in the style.css file:

  • style.css file: 
(...)

.button {
    color: white;
    display: inline-block;
    margin: 10px;
    padding: 5px;
    border: 3px solid;
    border-radius: 5px;
    cursor: pointer;
}
Enter fullscreen mode Exit fullscreen mode

The result should be like this:

Screen-Shot-12-20-19-at-10-33-PM.png

Awesome, isn't it?!! 😀

We're almost done! We just need to include more logic in this application and with that we will need to use more JavaScript!

A little more JavaScript to liven things up!!

In the script.js file we will create the start function. This function will be responsible for adding new classes to an intro element and to the story element class:

  • intro.js file: 
(...)

function start() {
  intro.className = 'intro text_intro animation_intro';
  story.className = 'story text_story animation_story';
}
Enter fullscreen mode Exit fullscreen mode

Let's go back to CSS. Now let's create the classes that will be responsible for animating our intro:

  • style.css file: 
(...)

.animation_intro {
  animation: intro 2s ease-out 0s;
}

.animation_story {
  animation: paragraphs 80s linear 2s;
}
Enter fullscreen mode Exit fullscreen mode

Let's go to the explanation: This property has 4 values. Let's go try to understand each one.

The first is the name of the animation. The second is duration. The third is about the function effects, and finally, the waiting time for the animation to start the app.

Now let's use CSS3 properties: keyframes.
For our first animation, we're going to do a fade in and out of sentences. So now, we will modify the property: opacity. And for the paragraphs we will have the animation effect too!!Let's add a fade animation and with the top property let's make the sentences disappear from bottom to top:

  • style.css file: 
@import url(https://fonts.googleapis.com/css?family=News+Cycle:400,700);

body {
    margin: 0;
    background: #000;
    overflow: hidden;
}

.intro {
    position: absolute;
    top: 40%;
    left: 20%;
    z-index: 1;    
}

.text_intro {
    font-family: "News Cycle", sans-serif;
    color: #00BFFF;
    font-weight: 400;
    letter-spacing: .1em;
}

.story {
    position: absolute;
    top: 80%;
}

.text_story {
    font-family: "News Cycle", sans-serif;
    font-weight: 700;
    color: #FFD700;
    text-align: justify;
    letter-spacing: .1em;
    line-height: 1.1em;
}

.paragraphs {
    position: absolute;
    left: 15%;
    width: 70%;
    z-index: 1;
    transform-origin: 50%;
    transform: perspective(300px) rotateX(20deg);
}

.button {
    color: white;
    display: inline-block;
    margin: 10px;
    padding: 5px;
    border: 3px solid;
    border-radius: 5px;
    cursor: pointer;
}

.animation_intro {
   animation: intro 2s ease-out 0s;
}

.story_animation {
    animation: paragraphs 80s linear 2s;
}

@keyframes intro {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes paragraphs {
  0% {
    top: 75%;
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    top: -200%;
    opacity: 0;
  }
}
Enter fullscreen mode Exit fullscreen mode

Every Galaxy has Stars!

Yes. It is true! Every galaxy is made up of stars and planets! And in our app it will be no different!! Let's add stars in the background. Let's add the canvas property – so we can use the snow effect:

  • style.css file: 
@import url(https://fonts.googleapis.com/css?family=News+Cycle:400,700);

body {
    margin: 0;
    background: #000;
    overflow: hidden;
}

.intro {
    position: absolute;
    top: 40%;
    left: 20%;
    z-index: 1;    
    opacity: 0;
}

.text_intro {
    font-family: "News Cycle", sans-serif;
    color: #00BFFF;
    font-weight: 400;
    letter-spacing: .1em;
}

.story {
    position: absolute;
    top: 80%;
}

.text_story {
    font-family: "News Cycle", sans-serif;
    font-weight: 700;
    color: #FFD700;
    text-align: justify;
    letter-spacing: .1em;
    line-height: 1.1em;
}

.paragraphs {
    position: absolute;
    left: 15%;
    width: 70%;
    z-index: 1;
    transform-origin: 50%;
    transform: perspective(300px) rotateX(20deg);
}

.button {
    color: white;
    display: inline-block;
    margin: 10px;
    padding: 5px;
    border: 3px solid;
    border-radius: 5px;
    cursor: pointer;
}

.animation_intro {
   animation: intro 2s ease-out 0s;
}

.animation_story {
    animation: paragraphs 80s linear 2s;
}

@keyframes intro {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes paragraphs {
  0% {
    top: 75%;
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    top: -200%;
    opacity: 0;
  }
}

/*Background with Stars*/
canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
Enter fullscreen mode Exit fullscreen mode

And to include the sound – the Star Wars intro theme, let's create a variable in the intro.js file called: sound.

And include this variable inside the start function:

  • intro.js file: 
/**
 * File: intro.js
 * Date: 04/05/2022
 * Description: Star Wars Intro Logic
 * Author: Glaucia Lemos <Twitter: @glaucia_lemos86>
 */

let width = window.innerWidth;
let height = window.innerHeight;

let intro = document.getElementsByClassName('intro')[0];
let story = document.getElementsByClassName('story')[0];
let paragraphs = document.getElementsByClassName('paragraphs')[0];
let sound = document.getElementById('sound');

intro.style.fontSize = width / 30 + 'px';
story.style.fontSize = width / 20 + 'px';
paragraphs.style.height = height + 'px';

window.addEventListener('resize', () => {
  width = canvas.width = window.innerWidth;
  height = canvas.height = window.innerHeight;
  intro.style.fontSize = width / 30 + 'px';
  story.style.fontSize = width / 20 + 'px';
  paragraphs.style.height = height + 'px';
});

function start() {
  intro.className = 'intro text_intro animation_intro';
  story.className = 'story text_story animation_story';
  sound.play();
}
Enter fullscreen mode Exit fullscreen mode

Let's get our attention back on creating a snow effect!

Now, notice that the changes related to the functions: start() and snow() are already included in the code scope!! 😀

  • intro.js file: 
/**
 * File: intro.js
 * Date: 04/05/2022
 * Descrição: Star Wars Intro Logic
 * Author: Glaucia Lemos <Twitter: @glaucia_lemos86>
 */

let width = window.innerWidth;
let height = window.innerHeight;

const intro = document.getElementsByClassName('intro')[0];
const story = document.getElementsByClassName('story')[0];
const paragraphs = document.getElementsByClassName('paragraphs')[0];
const sound = document.getElementById('sound');

intro.style.fontSize = width / 30 + 'px';
story.style.fontSize = width / 20 + 'px';
paragraphs.style.height = height + 'px';

window.addEventListener('resize', () => {
  width = canvas.width = window.innerWidth;
  height = canvas.height = window.innerHeight;
  intro.style.fontSize = width / 30 + 'px';
  story.style.fontSize = width / 20 + 'px';
  paragraphs.style.height = height + 'px';
});

function start() {
  intro.className = 'intro text_intro animation_intro';
  story.className = 'story story_text animation_story';
  sound.play();
}

/* Background with Stars */

let canvas = document.getElementById('snow');
const ctx = canvas.getContext('2d');

canvas.width = width;
canvas.height = height;

const num = 100;
const size = 2;
const elements = [];

function start() {
  for (let i = 0; i < num; i++) {
    elements[i] = {
      x: Math.ceil(Math.random() * width),
      y: Math.ceil(Math.random() * height),
      size: Math.random() * size,
    };
  }
}

function snow() {
  ctx.clearRect(0, 0, width, height);
  for (let i = 0; i < num; i++) {
    const e = elements[i];
    ctx.beginPath();
    ctx.fillStyle = '#FFFFFF';
    ctx.arc(e.x, e.y, e.size, 0, 2 * Math.PI);
    ctx.fill();
  }
}

start();
snow();
Enter fullscreen mode Exit fullscreen mode

Now back to the main page… let's include all these changes:

  • index.html file: 

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Intro - Star Wars</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport" />

  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
    integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

  <link href="css/style.css" rel="stylesheet">
</head>

<body>
  <div class="button" onclick="start()">Start</div>
  <canvas id="snow"></canvas>

  <section class="intro text_intro">
    A Long Time Ago, in a galaxy far,<br> far away ...
  </section>

  <section class="paragraphs">
    <div class="story text_story">
      <p class="text-center">Star Wars Episode XI</p>
      <p class="text-center">Glaucia and the Lightsaber Quest</p>
      <br>
      <p class="text-center">
        These are very difficult times!
        That's why Glaucia Lemos needs to find the lightsaber so she can get programming powers
        like no other person in the galaxy.
        And with that, she begins her quest across the galaxy.
      </p>

      <p class="text-center">
        During your quest,
        Glaucia comes across a planet called Tatooine.
        And it is precisely there that she will start all her training
        to get her powers again.
      </p>
    </div>
  </section>

  <audio src="https://raw.githubusercontent.com/glaucia86/sounds/master/starwars.mp3" id="sound"></audio>

  <script src="js/intro.js"></script>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

Observe the HTML5 itself provides you with an <audio> tag that allows you to add audio to your page you are developing. This is one of the advantages that HTML5 provides us.

Top comments (2)

Collapse
 
sitespeed profile image
Tim Moss •

At the top you say "
Developing Application Logic in JavaScript
Now let's start developing the application logic using JavaScript. Open the script.js file and place the following code below:

app.js file:"

I think you mean intro.js file in both cases

Collapse
 
glaucia86 profile image
Glaucia Lemos •

Yes.

Read next

spicecoder profile image

Hierarchical Flattening: The Secret to Managing Complexity in Software Design

pronab pal -

skorfmann profile image

Skymood - Watch Bluesky's heartbeat through emojis in real-time 🌟

Sebastian Korfmann -

trish_07 profile image

Create a 2D Pong Game with Rust and Bevy: A Step-by-Step Guide

Trish -

orahul1 profile image

Accessibility (a11y) Rules - 3

Rahul Raveendran -