Teochew Thunder: Web Tutorial: Easter Egg Hunt (Part 1/4)

Easter approaches, and with it our annual Easter-themed web tutorial! Today, I want to present a fun little thing I did modelling on my childhood experiences reading the Choose Your Own Adventure books. In these books, you read a story and at certain points, choices are presented to the reader, who must then continue the story by turning to the page required. And here, I want to do a web-based version of that.

How it works

There is an array of objects that will be in a separate JavaScript file, and each object has a series of links that will lead to different objects. The choices presented, along with the text for the section the user is currently visiting, will be in different HTML placeholders.

And since this is an Easter Egg Hunt, there will be some kind of inventory-keeping mechanism, along with a timekeeping mechanism. Visiting a section causes a varying amount of time to be lost. If the user runs out of time, the game is lost. Once the user has accumulated a certain number of Easter eggs, the game is won.

Now on to the tutorial!

We begin with some HTML. It will have a link to jQuery. Yes, we're going to use jQuery for this. We will also have a link to the file where the sections are stored, sections.js. For the beginning styling, we make all divs have a thin red border, and we'll have some overall font styling.

index.html

<!DOCTYPE html>
<html>
   <head>
       <title>Easter Egg Hunt</title>

       <style>
           div {outline: 1px solid #FF0000;}

           body
           {
               font-size: 12px;
               font-family: verdana;
           }
       </style>

       <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
       <script src="sections.js"></script>
       <script>

       </script>
   </head>

   <body>

   </body>
</html>

We insert one div into the body and style it using the CSS class container. Following up on that, there should be a div inside that, styled using the CSS class top. We can just put in some text. There will be another div, and style it using the CSS class main.

index.html

<body>
   <div class="container">
       <div class="top">
           <p><i>TeochewThunder</i> presents</p>
           <h1>Easter Egg Hunt</h1>
       </div>

       <div class="main">

       </div>
   </div>
</body>

This is the styling for container. We will give it a definite width and height, and a 5 pixel padding. The margin property sets it to the middle of the screen.

index.html

top has the same width and a much smaller height. More importantly, we float it left and make the text a translucent yellow. Text is aligned center. The h1 tag in top will also have font settings. For main, we will set width and height, and ensure that there is a top margin of 5 pixels. We will also float this left.

index.html

You should see the general framework in which this takes place. Make sure you actually have a file named sections.js (this can be empty), or this may throw an error.

Now in the div styled using CSS class main, we have two other divs, styled using sidebar and section.

index.html

Here's the styling for the CSS class sidebar. It has a width and height, and is designed to fit right into the left side of its parent via the float property being set to left. Here, I'm going to set the text color to black.

index.html

.main
{
   width: 800px;
   height: 495px;
   margin-top: 5px;
   float: left;
}

.sidebar
{
   width: 200px;
   height: 495px;
   float: left;
   color: rgba(0, 0, 0, 1);
}

section is pretty much the same as sidebar, but has a larger width, with a 5 pixel left margin.

index.html

.main
{
   width: 800px;
   height: 495px;
   margin-top: 5px;
   float: left;
}

.sidebar
{
   width: 200px;
   height: 495px;
   float: left;
   color: rgba(0, 0, 0, 1);
}

.section
{
   width: 595px;
   height: 495px;
   margin-left: 5px;
   float: left;
}

You can see the outlined placeholders for the two additional divs we made.

Prettying it up

We don't usually do it this early, but we might as well get it out of the way. Let's use the image below for this.

bg.jpg

We then set the background image for the container CSS class. We will also give it a broad yellow outline.

index.html

.container
{
   width: 800px;
   height: 600px;
   padding: 5px;
   margin: 10px auto 0 auto;
   outline: 3px solid rgba(255, 255, 0, 1);
   background: url(bg.jpg) center center no-repeat;
   background-size: cover;
}

Looking good!

Back to business...

Add more HTML within the div that has been styled using the sidebar CSS class. There are h2 tags, and divs. They are styled using classes that we don't define because they're not there for styling. I think it's all pretty self-explanatory if you look at the naming convention.

index.html

<div class="main">
   <div class="sidebar">
       <h2>Time Left</h2>
       <div class="timeleft">

       </div>

       <h2>Inventory</h2>
       <div class="inventory">

       </div>
   </div>

   <div class="section">

   </div>
</div>

You can see what the HTML content looks like.

Now we fill up the other div. These divs have classes content and choices. These will have styling, and that is what we will do next.

index.html

The widths for choices and content are the same - 585 pixels. It's calculated after taking the original width of container and deducting the width of sidebar and the paddings. We set heights for both these classes, and a translucent black background. For content, the overflow property is set to auto because we anticipate that the HTML content might be too big for the div.

index.html

.sidebar
{
   width: 200px;
   height: 495px;
   float: left;
   color: rgba(0, 0, 0, 1);
}

.section
{
   width: 595px;
   height: 495px;
   margin-left: 5px;
   float: left;
}

.content
{
   width: 585px;
   height: 270px;
   overflow: auto;
   float: left;
   background-color: rgba(0, 0, 0, 0.7);
   color: rgba(255, 255, 255, 1);
   padding: 5px;
}

.choices
{
   width: 585px;
   height: 200px;
   margin-top: 5px;
   float: left;
   text-align: right;
   background-color: rgba(0, 0, 0, 0.7);
   color: rgba(255, 255, 255, 1);
   padding: 5px;
}

And now we see the sections!

More styling

Here's some more styling. We won't see the results right off, but let us get it out of the way.

This is for images in the content. We want a fixed width and height, and we want it centered.

index.html

.top h1
{
   font-size: 3em;
   font-weight: bold;
}

p img
{
   display: block;
   margin: 0 auto 0 auto;
}

.main
{
   width: 800px;
   height: 495px;
   margin-top: 5px;
   float: left;
}

And this is for buttons. I generally want a yellow background, but do what you want here.

index.html

p img
{
   display: block;
   margin: 0 auto 0 auto;
}

button
{
   background-color: rgba(255, 255, 0, 1);
   color: rgba(255, 255, 255, 1);
   width: 3em;
   padding: 0.2em;
   border-radius: 5px;
   border: 0px solid red;
   display: inline-block;
   margin: 0 0 0.5em 1em;
}

button:hover
{
   background-color: rgba(255, 255, 0, 0.5);
   color: rgba(0, 0, 0, 1);
}

.main
{
   width: 800px;
   height: 495px;
   margin-top: 5px;
   float: left;
}

At this point, it should be safe to remove the red outline.

index.html

div {outline: 0px solid #FF0000;}

Here we go! You have a visual framework for which the rest of the output will appear. As mentioned before, you will see no yellow buttons, for the simple reason that we have not yet placed any in the HTML.

Finally, let's have the message CSS class. It's really just for aesthetics, and you will see it later on. It has a translucent black background and red text, and some nice round corners.

.section
{
   width: 595px;
   height: 495px;
   margin-left: 5px;
   float: left;
}

.message
{
   width: 80%;
   padding: 1em;
   margin: 0 auto 0 auto;
   background-color: rgba(0, 0, 0, 0.5);
   color: rgba(255, 0, 0, 1);
   border-radius: 5px;
   text-align: center;
}

.content
{
   width: 585px;
   height: 270px;
   overflow: auto;
   float: left;
   background-color: rgba(0, 0, 0, 0.7);
   color: rgba(255, 255, 255, 1);
   padding: 5px;
}

We will do some simple setup for program objects and methods.

Teochew Thunder

Pages

Tuesday, 5 April 2022

Web Tutorial: Easter Egg Hunt (Part 1/4)

How it works

Now on to the tutorial!

Prettying it up

Back to business...

More styling

Next

No comments:

Post a Comment

Teochew Thunder

Upcoming Web Tutorials

Features

Reviews