-
Notifications
You must be signed in to change notification settings - Fork 840
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #4013 from codewithganeshhh/main
Adding Love Calculator Game
- Loading branch information
Showing
7 changed files
with
157 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
|
|
||
| # Love Calculator App | ||
|
|
||
|  | ||
|
|
||
| *This is a good-looking love calculator app. Love calculator is a fun application where friends and couples can calculate the percentage of love between them. Simple and interesting app to work on.* | ||
|
|
||
| > Technologies used: | ||
| - HTML | ||
| - CSS | ||
| - JAVASCRIPT |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com"> | ||
| <link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet"> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com"> | ||
| <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap" rel="stylesheet"> | ||
| <link rel="stylesheet" href="style.css"> | ||
| <title>Love Calculator</title> | ||
| </head> | ||
|
|
||
| <body> | ||
|
|
||
| <nav> | ||
| <div class="logo">The Love Calculator</div> | ||
| </nav> | ||
|
|
||
| <section class="wrapper"> | ||
| <h2 class="heading">Welcome to this great invention of Doctor Love!</h2> | ||
| <p class="about">We all know that a name can tell a lot about a person. Names are not randomly chosen: they all | ||
| have a meaning. Doctor Love knew this so he made another great invention just for the lonely you! | ||
|
|
||
| Sometimes you'd like to know if a relationship with someone could work out. Therefore Doctor Love himself | ||
| designed this great machine for you. With The Love Calculator you can calculate the probability of a | ||
| successful relationship between two people. The Love Calculator is an affective way to get an impression of | ||
| what the chances are on a relationship between two people. | ||
|
|
||
| To find out what the chances for you and your dream partner are, just fill in both full names (both first | ||
| and last name) in the two text boxes below, and press Calculate.</p> | ||
|
|
||
| <div class="box"> | ||
| <div class="flex-box"> | ||
| <div class="yourName"> | ||
| <label for="yourName" class="bold">Your Name</label> <br> | ||
| <input type="text" placeholder="Full Name" required> | ||
| </div> | ||
| <div class="yourCrush"> | ||
| <label for="yourCrush" class="bold" >Your Crush</label> <br> | ||
| <input type="text" placeholder="Full Name" required> | ||
| </div> | ||
| </div> | ||
| <button onclick="calculateLove()">Calculate love</button> | ||
| <div id="lovePercentage"> | ||
|
|
||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <script src="script.js"></script> | ||
|
|
||
| </body> | ||
|
|
||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
|
|
||
| function calculateLove(){ | ||
| var random = Math.random(); | ||
| random = (random * 100) + 1; | ||
| random = Math.floor(random); | ||
| var p = document.createElement("p"); | ||
| var text = document.createTextNode(random + "%"); | ||
| p.appendChild(text); | ||
| document.getElementById("lovePercentage").appendChild(p); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| *{ | ||
| margin: 0; | ||
| padding: 0; | ||
| font-family: 'Lato', sans-serif; | ||
| } | ||
|
|
||
| body{ | ||
| background-color: #eee; | ||
| } | ||
|
|
||
| .logo{ | ||
| font-family: 'Dancing Script', cursive; | ||
| font-size: 39px; | ||
| color: red; | ||
| padding: 20px 70px; | ||
| } | ||
|
|
||
| .wrapper{ | ||
| width: 70%; | ||
| margin: 0 auto; | ||
| text-align: center; | ||
| margin-top: 80px; | ||
| } | ||
|
|
||
| .heading{ | ||
| font-size: 28px; | ||
| letter-spacing: 0.9px; | ||
| line-height: 54px; | ||
| } | ||
|
|
||
| .about{ | ||
| font-size: 19px; | ||
| line-height: 30px; | ||
| text-align: left; | ||
| } | ||
|
|
||
| .box{ | ||
| padding: 100px 0; | ||
| background-image: url('./heart.png'); | ||
| background-repeat: no-repeat; | ||
| background-size: contain; | ||
| background-position: 50% 60%; | ||
| opacity: 0.8; | ||
| } | ||
|
|
||
| .flex-box{ | ||
| display: flex; | ||
| justify-content: space-around; | ||
| } | ||
|
|
||
| .bold{ | ||
| font-weight: bold; | ||
| font-size: 17px; | ||
| letter-spacing: 0.7px; | ||
|
|
||
| } | ||
|
|
||
| input{ | ||
| padding: 20px 70px; | ||
| border: none; | ||
| border-radius: 35px; | ||
|
|
||
| } | ||
|
|
||
| button{ | ||
| padding: 15px 28px; | ||
| font-size: 20px; | ||
| border-radius: 30px; | ||
| background-image: linear-gradient(210deg, red, orange); | ||
| border: none; | ||
| color: #fff; | ||
| cursor: pointer; | ||
|
|
||
| } | ||
|
|
||
| #lovePercentage{ | ||
| font-size: 30px; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.