Skip to content

demo.md

Latest commit

 

History

History
69 lines (56 loc) · 2.09 KB

demo.md

File metadata and controls

69 lines (56 loc) · 2.09 KB

Demonstration

Before we start digging into creating web servers and talking about protocols let's give you a taste of what web programming technologies can do. In this example we display a card with a rotating border. When you click on the card, the text changes.

Demonstration

You don't need to worry about the details of how this all works. The point of this demonstration is just to give you a taste of the amazing things you can do with very little code. However, there are three technologies that make this work: HTML, CSS, and JavaScript.

The HTML looks like the following and basically has a simple card with text in it.

<body>
  <div class="card" onclick="titleClick()">Click Here</div>
</body>

The JavaScript handles when you click on the card and changes the text.

function titleClick() {
  document.querySelector('.card').textContent = 'Wow! Magic!';
}

The CSS is a bit more complex to cover in detail, but it basically handles the styling and animation. For example, the CSS for the card specifies the width and height, where it is positioned, what font to use, and what color it should be.

.card {
  background: #191c29;
  width: 45vh;
  height: 65vh;
  padding: 3px;
  position: relative;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  text-align: center;
  display: flex;
  font-size: 3em;
  color: #7383d7;
  font-family: cursive;
  cursor: pointer;
}

The rotating border is animated with the following CSS that dictates which colors to use and how to infinitely animate it between 0 and 360 degrees over 2.5 seconds.

.card::before {
  background-image: linear-gradient(
    var(--rotate),
    #5ddcff,
    #3c67e3 43%,
    #4e00c2
  );
  animation: spin 2.5s linear infinite;
}

@keyframes spin {
  0% {
    --rotate: 0deg;
  }
  100% {
    --rotate: 360deg;
  }
}

If you would like to see the complete code listing and play with the code, you can on CodePen. We will talk a lot about how code like this works and what CodePen is later in the instruction.