Introduction: How to Format Basic HTML Magic 8-Ball Program Instruction Set
Introduction
This instruction set gives the needed steps for programming a Magic 8-Ball by installing html supported program, Visual Studio Code. This programs environment allows for multiple program languages and viewing the process of the web design and program through debugging. These instructions are generally meant for those with an interest in web designing and those with a very minimum understanding of computer language and the concept of coding. My intentions for showing an instruction set for something simple as a html program that can just be searched up is to bring more understanding to what certain terms and commands do in an html environment, in an effort to help those interested in computer science or the like.
Disclaimer
This set utilizes examples and information from w3schools. Many of the website’s tools and tips are used within these instructions and allow for the finished behavior for a magic 8-ball. Resources for these kinds of programs are widespread and come in many varieties. WARNING: Each image in this instruction set must be replicated exactly including spacings and new lines as shown. Failure to follow each image exactly can result in failure in code or multiple issues.
Supplies
Computer
Step 1: Installing Visual Studio
Download the Visual Studio Code Program from https://code.visualstudio.com/
Step 2: Open Visual Studio
Begin Download and start the Visual Studio Code application when download is complete
Step 3: Opening New File
Select file at the top left of the Visual Studio Code welcome page and click “new text file”
Step 4: Setting HTML Environment
Click “Select a language” and type “HTML” and select the available option
Step 5: Set Beginning of HTML Page
Type on the first line “<!DOCTYPE html>” followed by <html> to officially start the html page
Step 6: Set Responses for Magic 8-Ball
Type “<script type=”text/javascript”>”. Then on the next line type “var responses= [” to begin setting different responses.
*More responses can be added within this instruction set without causing errors, only depends on personal preference of choices*
Step 7: Connect Each Variable to Element Names
Using the command “window.onload = function() {”, set the names for our eight balls outer circle, inner circle, the text box for our questions, and the responses that wish to be received by using the elementsbyid command.
Step 8: Set Up Error Detection
Create an if and else statement to detect when text is present or not so to give an error. Use Math variables to set logical situations when dealing with responses. Finish the script by typing “</script>”.
Step 9: Stylize Magic 8-Ball
Set the font, margins, and colors for the eight ball and listed responses
*MAKE SURE “border-radius” is set at 50% to make a circular shape for the Magic-8-Ball.*
All other measurements and font types are highly customizable and are not limited to those in the example images
Step 10: Complete Open Ended Code
Address the end of styling text, fonts, and backgrounds by typing “</style>”. Then using “div”, use the previously addressed element id’s and give specific classifications, finally ending with linking the variable number 8 to the text “8”. Finish closing the body via </body> and html via </html>.
Step 11: Run & Debug
Press run and debug, the play button symbol on the left side of the tool bar and select chrome to run program.
Step 12: COMPLETION
Hooray!!!! You should end with a fully functioning Magic 8-Ball which can detect when text is entered into the box and acknowledge a click on the center of the ball for a response.
*Some difficulties that you may encounter is spacing as well as misspelling. Make sure all spaces and tabs are done thoroughly or errors will pop up*
*Errors will be highlighted by the Virtual Studio Code environment*