In this tutorial you will learn how to create a simple fortune teller app using basic JavaScript, HTML and CSS. Here’s a working example of what we’re going to build (with a limited set of assets for now).
See the last example on a standalone webpage
Reading: How to create an online fortune teller game app
For the full source code Simply right-click the link above and choose either “Save Link As…” (if you’re using Firefox or Chrome) or “Download Linked File” (if you’re using Safari).
What You Need
- This tutorial is intended for beginners, but things make more sense if you have at least a basic understanding of JavaScript, HTML, and CSS. If you haven’t already, please watch my tutorials:
- How to code a simple web page with HTML
- How to code a simple web page with HTML and CSS
- Intro to JavaScript
- You will need a code editor such as Atom, Brackets or Visual Studio Code.
- For this tutorial I will It may also be with the Google Chrome browser but you should be able to follow with other browsers like Firefox or Safari if you prefer.
Table of Contents
- What is an array?
- How do I create an array with JavaScript?
- How do I get a random element from an array with JavaScript?
- What is a function?
- li>
- Create a simple function using javascript
- Create the fortune teller HTML
- Add the code to update the HTML
- Add some style with CSS
- Add animations n
- Next steps
What is an array?
An array is a set of objects. Arrays are used in JavaScript to store multiple values in a single variable. Arrays are very useful for working with sets of values.
See also: How to Set Up Environment To Test Websites Locally
You can find more information about arrays at w3Schools.
How to create an array with JavaScript
In your code editor creates a new HTML document named “fortune-teller.html” (or similar) and saves it in a convenient location on your computer.
The following example creates a variable named ” fortunesArray” and adds a simple array of values to it. The values of the array are enclosed between opening and closing square brackets, eg […].
Note that each value in the array is separated by a comma (and there is no comma after the last element). Also note that the values in this case are strings, so they are enclosed in quotes.
Creating a simple function using Javascript
See also: Tech Thursday: 5 Secrets to Creating an Event in a Facebook Group That Gets Seen
So let’s create a simple function that generates a random element from our array and inserts it into an HTML page. We call this function via a button click (user input).
The code for our function looks like this:
I plan to create a tutorial series soon that will show you how to build progressive web apps.
I also plan to create some more tutorials that will make your JavaScript skills easier by creating JavaScript apps will improve.
Other than that, I hope you found this tutorial useful. I plan to add the next few tutorials in this series shortly, as well as a video demonstration to accompany this tutorial. Please don’t hesitate to email [email protected] if anything is unclear.
If you’d like to be kept informed when I post new content, it’s best to follow my mailing list as I don’t post my tutorials and articles on social media. Otherwise, you can always follow my work on Youtube, Twitter, Instagram, Reddit, Artstation, LinkedIn and Behance.
See also: Build an app for your luxury brand and optimize consumer loyalty
.
