JS Form

Size
5,730 Kb
Views
4,048

How do I make an js form?

Retrieve HTML of specified zodiac sign.. What is a js form? How do you make a js form? This script and codes were developed by Raquel Lorenzana on 14 January 2023, Saturday.

JS Form Previews

JS Form - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>JS Form </title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="main_container"> <header class="container-fluid">	<div class="col-md-8">	<img class="header_img" src="http://devraq.com/zodiac/img/header.png" width="854" height="200">	</div>	</header>	<section class="container-fluid">	<div class="col-md-10 col-md-offset-1">	<div class="col-md-8">	<div class="sign_info">	<h3 id="sign_title">What The Stars Tell Us</h3>	<p id="sign_info">The Zodiac, the 12 signs listed in a horoscope, is closely tied to how the Earth moves through the heavens. The signs are derived from the constellations that mark out the path on which the sun appears to travel over the course of a year. In principle, dates in a horoscope should correspond to when the sun passes through each constellation. But they dont much of the time. And a closer examination of the motion of the Earth, the sun, and the stars shows the Zodiac to be more complex than you might imagine!</p>	</div>	</div>	<div class="col-md-4">	<img src="http://devraq.com/zodiac/img/moonstar.png" class="sign_img" id="sign_img">	</div>	</div>	</section>	<section class="container-fluid">	<section class="sign_input">	<div class="col-md-8 col-md-offset-2"> <h1>Check Out Your Sign!</h1> <form> <input placeholder="Enter your sign here" id="zodiac_sign">	<br> <button type="button" id="submit" onclick="zodiac()">Submit</button> </form> </div> </section> </section> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

JS Form - Script Codes CSS Codes

body {	background-image: url("http://devraq.com/zodiac/img/stars.jpg");	background-repeat: no-repeat;	background-size: cover;
}
.main_container { margin: 20px;
}
/*Header*/
header {	margin-bottom: 30px;
}
header img { width: 100%; height: auto;
}
/*Sign Info*/
.sign_info { font: bold 1.5em/1.5em 'Signika', sans-serif; color: #fff; background-color: black; opacity: 0.7; padding: 15px; border-radius: 5px; margin-bottom: 2%; padding: 20px; text-align: justify;
}
.sign_info h3 {	font-size: 1.5em;
}
.sign_img { margin-left: 50px; width: 180px; height: auto; opacity: 0.8; padding: 15px; /*text-align: center;*/
}
/*User Sign Input*/
.sign_input {	font-family: 'Signika', sans-serif;	color: #fff;	border-radius: 5px;
}
.sign_input h1,
.sign_input form {	text-align: center;
}
.sign_input h1 {	margin-top: 0;	font-weight: bolder;
}
.sign_input input { color: #000;	height: 25px;	margin: 0 5% 2% 5%;	text-align: center;	font-size: 1.3em;
}
button {	background-color: #929292;	font-weight: 800;	color: #fff; border-radius: 5px;	font-size: 1.5em;	margin-bottom: 10%;
}

JS Form - Script Codes JS Codes

function zodiac() {	var sign = document.getElementById("zodiac_sign").value	var imgswitch = document.getElementById("sign_img")	if (sign == "Aquarius" || sign == "aquarius") {	document.getElementById("sign_title").innerHTML = "AQUARIUS"	document.getElementById("sign_info").innerHTML = "Aquarius is the sign of visionaries, unconventionality and intellectual independence. Aquarius are the people who deviate from the crowd and go their own way. They are always after intellectual stimulation, constantly discovering something new, forming new opinions and stubbornly traveling their way regardless of what other people think."	imgswitch.setAttribute ('src', 'http://devraq.com/zodiac/img/aquarius.png')	}	else if (sign == "Pisces" || sign == "pisces") {	document.getElementById("sign_title").innerHTML = "PISCES"	document.getElementById("sign_info").innerHTML = "Pisces have an intuitive and psychic ability more then any other zodiac signs. They trust their gut feelings and if they do not, they quickly learn to because they realize that their hunches are usually correct. Pisces downfall is their sensitivity and their inability to reject another person. They do not like rejection and they try to treat others the way they want to be treated so they will rarely say no to a person for fear of hurting their feelings."	imgswitch.setAttribute ('src', 'http://devraq.com/zodiac/img/pisces.png')	}	else if (sign == "Aries" || sign == "aries") {	document.getElementById("sign_title").innerHTML = "ARIES"	document.getElementById("sign_info").innerHTML = "Aries is the first of the zodiac signs. Aries is the sign of the self, people born under this sign strongly project their personalities onto others and can be very self-oriented. Aries tend to venture out into the world and leave impressions on others that they are exciting, vibrant and talkative. Aries tend to live adventurous lives and like to be the center of attention, but rightly so since they are natural, confident leaders."	imgswitch.setAttribute ('src', 'http://devraq.com/zodiac/img/aries.png')	}	else if (sign == "Taurus" || sign == "taurus") {	document.getElementById("sign_title").innerHTML = "TAURUS"	document.getElementById("sign_info").innerHTML = "Taurus is the one who has immense perseverance, even when others have given up, the Taurus rages on. Solid and persistent, just like the bull, which is Taurus' well suited symbol. Taurus's have a well known reputation for being stubborn, which is not necessarily a bad thing. The stubborn streak can cause Taurus to butt heads and conflict with other strong character types. Taurus are not fond of change. They like the familiar and routine comfort of life."	imgswitch.setAttribute ('src', 'http://devraq.com/zodiac/img/taurus.png')	}	else if (sign == "Gemini" || sign == "gemini") {	document.getElementById("sign_title").innerHTML = "GEMINI"	document.getElementById("sign_info").innerHTML = "Gemini people are many sided, quick both in the mind and physically. They are brimming with energy and vitality, they are clever with words. They are intelligent and very adaptable to every situation and every person. Gemini are curious and always want to know what's going on in the world around them. They are not one to sit back and watch the world go by, they want to be involved. This can sometimes make Gemini nosy, they do not mind their own business!"	imgswitch.setAttribute ('src', 'http://devraq.com/zodiac/img/gemini.png')	}	else if (sign == "Cancer" || sign == "cancer") {	document.getElementById("sign_title").innerHTML = "CANCER"	document.getElementById("sign_info").innerHTML = "It is difficult for cancer to open up and have a close emotionally fulfilled relationship with someone because they are so closed off emotionally and physically to the world. This is driven by their fear of trust, Cancer has a difficult time trusting people. This causes built up anger and resentment inside, the contradictory nature really takes a toll on them and they can have a negative outlook on life, thinking that life is just too hard and miserable."	imgswitch.setAttribute ('src', 'http://devraq.com/zodiac/img/cancer.png')	}	else if (sign == "Leo" || sign == "leo") {	document.getElementById("sign_title").innerHTML = "LEO"	document.getElementById("sign_info").innerHTML = "Leo is the lion, this well suited symbol represents Leo very well. They possess a kingdom which they protest and cherish. The are high esteemed, honorable and very devoted to themselves in particular! The kingdom could be anything from work to home to a partner, whatever it is, you rule it. Leo is always center stage and full of flair, they enjoy basking in the spotlight. A Leo always makes their presence known. Leo are full of energy that acts like a magnet for other people."	imgswitch.setAttribute ('src', 'http://devraq.com/zodiac/img/leo.png')	}	else if (sign == "Virgo" || sign == "virgo") {	document.getElementById("sign_title").innerHTML = "VIRGO"	document.getElementById("sign_info").innerHTML = "Virgo exists in the mind, everything is inside. To the world, Virgo presents a calm and collected exterior but on the inside, nervous uncontrolled intensity in the mind, trying to figure things out, how to improve everything, analyzing and thinking. Virgo can tire itself out without even moving! Virgo has a constant drive to improve and perfect, this can lead to extreme pickiness and finickiest. They are pure, their motives are honest never malicious and they want to accomplish something."	imgswitch.setAttribute ('src', 'http://devraq.com/zodiac/img/virgo.png')	}	else if (sign == "Libra" || sign == "libra") {	document.getElementById("sign_title").innerHTML = "LIBRA"	document.getElementById("sign_info").innerHTML = "Libras are the diplomat of the zodiac. They are able to put themselves in other's shoes and see things through another person's point of view. They are the ones that always want to make things right and have balance and harmony in their life, their surroundings and the lives of the people close to them. They have captivating charm, elegant taste and they are easy to like due to their eager-to-please, easygoing nature. In return for a Libra's amazing ability to be a good listener, sooth and calm people, they expect admiration."	imgswitch.setAttribute ('src', 'http://devraq.com/zodiac/img/libra.png')	}	else if (sign == "Scorpio" || sign == "scorpio") {	document.getElementById("sign_title").innerHTML = "SCORPIO"	document.getElementById("sign_info").innerHTML = "Scorpio is the astrology sign of extremes and intensity. Scorpios are very deep, intense people, there is always more then meets the eye. They present a cool, detached and unemotional air to the world yet lying underneath is tremendous power, extreme strength, intense passion and a strong will and a persistent drive. Scorpios have a very penetrative mind, do not be surprised if they ask questions, they are trying to delve deeper and figure things out and survey the situation."	imgswitch.setAttribute ('src', 'http://devraq.com/zodiac/img/scorpio.png')	}	else if (sign == "Sagittarius" || sign == "sagittarius") {	document.getElementById("sign_title").innerHTML = "SAGITTARIUS"	document.getElementById("sign_info").innerHTML = "Sagittarius seem to be guided by luck, good things happen to Sagittarius and this is usually because of their optimistic outlook and positive disposition which attracts good fortune. Despite hardships, Sagittarius is always optimistic that good things will happen tomorrow and the future carries good luck. Sagittarius have a vibrant, expansive personality that is free like a bird, Sagittarius cannot be contained. They are full of curiosity and they always look forward to the future, never dwelling on the past."	imgswitch.setAttribute ('src', 'http://devraq.com/zodiac/img/sagittarius.png')	}	else if (sign == "Capricorn" || sign == "capricorn") {	document.getElementById("sign_title").innerHTML = "CAPRICORN"	document.getElementById("sign_info").innerHTML = "Capricorns are very ambitious people, they always have something they are pursuing and they want their lives to be fulfilled and important. Capricorns are extremely patient and will wait a long time for something they want, when the opportunity arises, they will plan their steps carefully to others, they might appear hesitant but this is not true, they know that there is only one chance to succeed and they are filing together their information to take the proper steps to accomplish their goal with flying colors, not just second rate."	imgswitch.setAttribute ('src', 'http://devraq.com/zodiac/img/capricorn.png')	}
}
document.onkeydown = function(e){ if(e.keyCode == 13){	e.preventDefault();	zodiac(); }
};
JS Form - Script Codes
JS Form - Script Codes
Home Page Home
Developer Raquel Lorenzana
Username raquellorenzana
Uploaded January 14, 2023
Rating 3
Size 5,730 Kb
Views 4,048
Do you need developer help for JS Form?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Raquel Lorenzana (raquellorenzana) Script Codes
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!