Learn the Magic of JavaScript
RedXIII | April 20, 2021, 1:13 p.m.
How to disappear like Houdini in JavaScript
JavaScript is one of the fast-growing programming languages, with millions of users all over the world. Why? Because it powers the internet, bringing it to life with interactivity, enhancing it with style and flavor.
What is JavaScript used for?
JavaScript was invented to make web pages more attractive and easier to use. The most common use of JavaScript is to enhance the user’s experience of a webpage.
Web designers use JavaScript to add animations and other multimedia to websites, making them more enjoyable to use.
JavaScript is a core component of front-end web development, along with HTML and CSS.
HTML: HTML stands for Hyper-Text Markup Language. We use HTML to generate a webpage’s content. Images, text, and links are all examples of content created with HTML.
CSS: Cascading Style Sheets. CSS is used to style web pages. Usually stored in a separate file from the HTML, CSS is responsible for how a web page looks, including its colors and fonts.
JavaScript: Web developers use JavaScript to enhance the user’s experience through interaction and feedback. With JavaScript, web pages are more attractive.
Making Magic
We’ll use HTML, CSS, and JavaScript to create a simple webpage that users can interact with. By the end of the tutorial, you’ll see first hand the magic of JavaScript when we make our own Houdini disappear.
Our webpage will have three files: index.html, style.css, and magic.js. Each file will handle a different part of the webpage. All three files need to be in the same folder.
Creating a Home Page
Let’s start with our index.html file. HTML files contain the content of our web page. Take a look at the following code.
index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<script src="magic.js"></script>
<title>JavaScript Magic</title>
</head>
<body>
<!-- this is the page content -->
<div class="container-fluid">
<div class="row">
<div class="jumbotron">
<h1 class="display-3">The Magic of JavaScript</h1>
<p>Make Houdini disappear with HTML, CSS, and JavaScript</p>
</div>
</div>
<!-- use bootstrap css to organize the page -->
<div class="row">
<div class="col-md-4 card">
<h2>Who was Houdini?</h2>
<p>A mysterious magician known for feats of escape, Houdini was a world-class entertainer
as well as a practitioner of magic. Houdini famously vanished from the inside of locked trunks jail cells.</p>
</div>
<div class="col-md-4 card">
<h2>Let's work some magic!</h2>
<!-- these buttons have an onlick attribute -->
<button type="button" class="btn-primary" onclick="Hide()" name="button">Vanish</button>
<button type="button" class="btn-primary" onclick="Reveal()" name="button">Reveal</button>
</div>
<div class="col-md-4 card">
<!-- this is the div we'll make disappear -->
<div id="houdini">
<h2>Houdini</h2>
<img src="images/houdini.jpg" width= "300px" height= "400px" alt="">
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="page-footer font-small blue">
<div class="footer-copyright text-center py-3">The Magic of JavaScript:
<a href="https://www.startprism.com/"> startprism.com</a>
</div>
</footer>
<!-- Footer -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</body>
</html>
HTML files can be broken down into their parts. Tags <> are used to tell the browser we are dealing with HTML content.
The content of the page is found in the <body></body> tag. We’re using a Bootstrap jumbotron to present the page. Below that is a row of columns containing information about Houdini, our buttons, and the div we’re going to make vanish.
One of our divs has a special id: “houdini.” We’re going to use this id to reference this div in our JavaScript. This div also contains an image. You’ll need to download the image and save it in a folder named ‘images’ and it needs to be in the same directory as your HTML, CSS, and JavaScript files.
Bootstrapping Style
In this demo, we’re using Bootstrap as well as custom CSS to add style to our page. Bootstrap can be loaded automatically from the web using a link in our HTML file’s header. To add our own custom CSS, we’ll need to set the link up ourselves.
Learn more about using Bootstrap at https://getbootstrap.com/
Before our HTML can load the CSS and JavaScript files, we need to provide links to them in the head. Placing links to external files such as our CSS file will let HTML know that the page needs to load these links before running the page.
We've used some custom CSS code to give our page color and added style. Below is the code for the style.css linked to in our HTML.
style.css
body {
background-color: #EFE7BC;
}
.jumbotron {
background-color: #E7F2F8;
text-align: center;
padding-top: 100px;
padding-bottom: 100px;
}Adding Functionality
HTML and CSS are enough to display our content. But we need to turn to JavaScript to add functionality. Before we can make Houdini disappear, we’ll need to write some JavaScript code.
Fortunately, we only need two functions for this to work. Functions in JavaScript are ways of performing some work. For instance, we have two buttons: one to hide Houdini, and another to reveal him.
The Hide() function will grab the houdini div and change its styling so that its hidden. The Reveal() function will do the opposite and bring the div back.
Our page uses the onclick attribute to link to our functions. In HTML, buttons have an onclick attribute. Providing a function to this attribute will tell HTML we want to run that function when someone clicks the button. Pretty cool!
magic.js
function Hide(){
let houdini = document.getElementById("houdini");
houdini.style.display = "none";
} function Reveal(){
let houdini = document.getElementById("houdini");
houdini.style.display = "block";
}
Summary
With the links to our JavaScript working, our page is finished. Click the vanish button to see Houdini disappear. Click on the reveal button to bring him back.
This is only the beginning of what you can do with JavaScript, CSS, and HTML. Follow the links below for more exciting coding tutorials.