fabmukunzi/horoscope
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add files via upload

Browse Source
This commit is contained in:
Fabrice MUKUNZI
2022-10-12 01:51:38 +02:00
committed by GitHub
commit 632cd40c80
3 changed files with 136 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
index.html Normal file
View File

@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quickteller App</title>
<link rel="stylesheet" href="style.css">
<script src="main.js"></script>
</head>
<body>
<div class="quickteller">
<div class="context">
<h1>Quickteller helps give a quick <br> update of your horoscope</h1>
</div>
<div class="birdthday">
<form action="#">
<p id="dob">Input your date of birth to get your heroscope</p>
<input type="number" id="month" placeholder="Enter month here" min="1" max="12" required>
<input type="number" id="date" placeholder="Enter date here" min="1" max="31" required>
<button type="submit" id="btn" onclick="getHoroscope()">View heroscope</button>
</form>
</div>
<div class="horoscope" id="sc">
<h2 id="horo"></h2>
</div>
</div>
</body>
</html>

52
main.js Normal file
View File

@@ -0,0 +1,52 @@
function getHoroscope(){
let btn=document.querySelector("#btn");
var date=document.getElementById("date").value;
var month=document.getElementById("month").value;
if((month==1&&date>=20)||(month==2&&date<=18)){
document.getElementById("horo").innerHTML="YOUR HOROSCOPE IS AQUARIUS";
document.getElementById("sc").style.padding="15px";
}
if((month==2&&date>=19)||(month==3&&date<=20)){
document.getElementById("sc").style.padding="15px";
document.getElementById("horo").innerHTML="YOUR HOROSCOPE IS PISCES";
}
if((month==3&&date>=21)||(month==4&&date<=19)){
document.getElementById("horo").innerHTML="YOUR HOROSCOPE IS ARIES";
}
if((month==4&&date>=20)||(month==5&&date<=20)){
document.getElementById("sc").style.padding="15px";
document.getElementById("horo").innerHTML="YOUR HOROSCOPE IS TAURUS";
}
if((month==5&&date>=21)||(month==6&&date<=20)){
document.getElementById("sc").style.padding="15px";
document.getElementById("horo").innerHTML="YOUR HOROSCOPE IS GEMINI";
}
if((month==6&&date>=21)||(month==7&&date<=22)){
document.getElementById("sc").style.padding="15px";
document.getElementById("horo").innerHTML="YOUR HOROSCOPE IS CANCER";
}
if((month==7&&date>=23)||(month==8&&date<=22)){
document.getElementById("sc").style.padding="15px";
document.getElementById("horo").innerHTML="YOUR HOROSCOPE IS LEO";
}
if((month==8&&date>=23)||(month==9&&date<=22)){
document.getElementById("sc").style.padding="15px";
document.getElementById("horo").innerHTML="YOUR HOROSCOPE IS VIRGO";
}
if((month==9&&date>=23)||(month==10&&date<=22)){
document.getElementById("sc").style.padding="15px";
document.getElementById("horo").innerHTML="YOUR HOROSCOPE IS LIBRA";
}
if((month==10&&date>=23)||(month==11&&date<=21)){
document.getElementById("sc").style.padding="15px";
document.getElementById("horo").innerHTML="YOUR HOROSCOPE IS SCORPIO";
}
if((month==11&&date>=22)||(month==12&&date<=21)){
document.getElementById("sc").style.padding="15px";
document.getElementById("horo").innerHTML="YOUR HOROSCOPE IS SAGILLARIUS";
}
if((month==12&&date>=22)||(month==1&&date<=19)){
document.getElementById("sc").style.padding="15px";
document.getElementById("horo").innerHTML="YOUR HOROSCOPE IS CAPRICORN";
}
}

55
style.css Normal file
View File

@@ -0,0 +1,55 @@
body{
font-family:sans-serif;
font-size: 20px;
text-align: center;
}
.context{
text-align: center;
color: rgb(5, 58, 31);
position: relative;
top: 10px;
}
input{
padding: 15px;
width: 200px;
font-weight: bold;
font-size: 13px;
border-radius: 10px;
border: solid rgb(5, 58, 31);
margin-top: 20px;
}
form{
margin-bottom: 10px;
}
button{
background:rgb(5, 58, 31);
padding: 18px;
width: 200px;
border:none;
border-radius: 10px;
font-weight: bold;
font-size: 15px;
margin-top: 20px;
}
.quickteller{
background: linear-gradient(0deg,rgb(168, 167, 167),rgb(216, 216, 216));
padding: 13%;
padding-bottom: 18%;
border-radius: 50px;
box-shadow: inset 5px 5px 40px black;
}
button:hover{
cursor: pointer;
background: rgb(19, 82, 49);
}
.horoscope{
color:rgb(220, 248, 95);
font-size: 10px;
background: linear-gradient(0deg,rgb(19, 82, 49),rgb(19, 82, 49));
background-size: cover;
border-radius: 10px 10px 0px 10px;
}
#dob{
font-weight: bold;
opacity: 0.9;
}