Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
                  <div id="flipper" class="flip-container" >
        <div class="main flipper">
            <div class="front">
                <h1>How romantic are you?</h1>
               <p>Tap the heart then speak loving words into your microphone for 5 seconds and your computer will tell you how romantic you are. <br><span> Because computers just know.</span></p>

        <b class="pos" onclick="heartClick();">
			<i class="shape sh-heart"></i>
			<b class="level" id="level"><i class="shape sh-heart"></i></b>
        <h2 id="score" class="score">Romance score: 0</h2>
		</b>     
        <h3 onclick="flipit();" >Need help? Click me!</h3>   
     
        </div>
    <div class="back">
        <h3 onclick="flipit();">Go back</h3>
        <ul id="words">
         <li>Words: 10 points each</li>
         <li>affection</li><li>angel</li><li>attraction</li><li>baby doll</li><li>beau</li><li>beauty</li><li>blessing</li><li>boyfriend</li><li>caress</li><li>celebration</li><li>character</li><li>chocolate</li><li>closeness</li><li>comfort</li><li>communication</li><li>companionship</li><li>confidante</li><li>connection</li><li>conversation</li><li>couple</li><li>crush</li><li>Cupid</li><li>Cupid's</li><li>cuteness</li><li>date night</li><li>dearest</li><li>dearheart</li><li>desire</li><li>devotion</li><li>dream</li><li>emotion</li><li>expression</li><li>eye candy</li><li>fairytale</li><li>fantasy</li><li>favorite</li><li>feelings</li><li>flame</li><li>friend</li><li>friendly</li><li>girlfriend</li><li>sex</li><li>happiness</li><li>heart</li><li>throb</li><li>heartthrob</li><li>honesty</li><li>honey</li><li>hot stuff</li><li>hotness</li><li>hug</li><li>hugs</li><li>humor</li><li>hunk</li><li>husband</li><li>inner beauty</li><li>inspiration</li><li>intelligence</li><li>intimacy</li><li>journey</li><li>joy</li><li>kisses</li><li>life</li><li>life partner</li><li>looks</li><li>love</li><li>love</li><li>lovemaking</li><li>lover</li><li>loyalty</li><li>lust</li><li>main man</li><li>main squeeze</li><li>marriage</li><li>mate</li><li>memories</li><li>pair</li><li>partner</li><li>passion</li><li>personality</li><li>pet</li><li>playmate</li><li>presence</li><li>prince</li><li>puppy love</li><li>pure lust</li><li>rapport</li><li>relationship</li><li>reliance</li><li>romance</li><li>romeo</li><li>saint</li><li>sanity</li><li>security</li><li>sexual</li><li>sexuality</li><li>soul</li><li>special</li><li>spouse</li><li>strength</li><li>stud</li><li>sugar</li><li>sunshine</li><li>support</li><li>supporter</li><li>sweetheart</li><li>sweetie</li><li>team</li><li>the one</li><li>thoughtfulness</li><li>true love</li><li>trust</li><li>understanding</li><li>union</li><li>warmth</li><li>wife</li><li>wishes</li><li>accept</li><li>acknowledge</li><li>admire</li><li>adore</li><li>agree</li><li>appreciate</li><li>assure</li><li>attract</li><li>bewitch</li><li>blush</li><li>brighten</li><li>captivate</li><li>care</li><li>caress</li><li>celebrate</li><li>charm</li><li>cherish</li><li>choose</li><li>click with</li><li>comfort</li><li>communicate</li><li>complement</li><li>complete</li><li>connect</li><li>consider</li><li>convey</li><li>crave</li><li>cuddle</li><li>delight</li><li>depend</li><li>desire</li><li>dote on</li><li>enchant</li><li>encourage</li><li>enjoy</li><li>entrust</li><li>excite</li><li>experience</li><li>express</li><li>fancy</li><li>fascinate</li><li>feel</li><li>fill with</li><li>flatter</li><li>flirt</li><li>forgive</li><li>fulfill</li><li>help</li><li>hold</li><li>honor</li><li>hug</li><li>hypnotize</li><li>inspire</li><li>join</li><li>kiss</li><li>know</li><li>last</li><li>laugh </li><li>listen</li><li>live </li><li>long </li><li>love</li><li>lust</li><li>lust</li><li>marry</li><li>mate</li><li>meet</li><li>miss</li><li>obsess</li><li>offer</li><li>pair</li><li>play</li><li>please</li><li>pleasure</li><li>prize</li><li>promise</li><li>protect</li><li>provide</li><li>provide</li><li>reciprocate</li><li>relate</li><li>relish</li><li>rely on</li><li>respect</li><li>revere</li><li>romance</li><li>safeguard</li><li>satisfy</li><li>savor</li><li>seduce</li><li>share</li><li>shield</li><li>smooch</li><li>snuggle</li><li>spoon</li><li>support</li><li>tempt</li><li>thank</li><li>think</li><li>toast</li><li>touch</li><li>treasure</li><li>trust</li><li>understand</li><li>unite</li><li>value</li><li>wed</li><li>worship</li><li>affection</li><li>angel</li><li>attraction</li><li>baby doll</li><li>beau</li><li>beauty</li><li>blessing</li><li>boyfriend</li><li>caress</li><li>celebration</li><li>character</li><li>chocolate</li><li>closeness</li><li>comfort</li><li>communication</li><li>companionship</li><li>confidante</li><li>connection</li><li>conversation</li><li>couple</li><li>crush</li><li>Cupid</li><li>Cupid's</li><li>cuteness</li><li>date night</li><li>dearest</li><li>dearheart</li><li>desire</li><li>devotion</li><li>dream</li><li>emotion</li><li>expression</li><li>eye candy</li><li>fairytale</li><li>fantasy</li><li>favorite</li><li>feelings</li><li>flame</li><li>friend</li><li>friendly</li><li>girlfriend</li><li>sex</li><li>happiness</li><li>heart</li><li>throb</li><li>heartthrob</li><li>honesty</li><li>honey</li><li>hot stuff</li><li>hotness</li><li>hug</li><li>hugs</li><li>humor</li><li>hunk</li><li>husband</li><li>inner beauty</li><li>inspiration</li><li>intelligence</li><li>intimacy</li><li>journey</li><li>joy</li><li>kisses</li><li>life</li><li>life partner</li><li>looks</li><li>love</li><li>love</li><li>lovemaking</li><li>lover</li><li>loyalty</li><li>lust</li><li>main man</li><li>main squeeze</li><li>marriage</li><li>mate</li><li>memories</li><li>pair</li><li>partner</li><li>passion</li><li>personality</li><li>pet</li><li>playmate</li><li>presence</li><li>prince</li><li>puppy love</li><li>pure lust</li><li>rapport</li><li>relationship</li><li>reliance</li><li>romance</li><li>romeo</li><li>saint</li><li>sanity</li><li>security</li><li>sexual</li><li>sexuality</li><li>soul</li><li>special</li><li>spouse</li><li>strength</li><li>stud</li><li>sugar</li><li>sunshine</li><li>support</li><li>supporter</li><li>sweetheart</li><li>sweetie</li><li>team</li><li>the one</li><li>thoughtfulness</li><li>true love</li><li>trust</li><li>understanding</li><li>union</li><li>warmth</li><li>wife</li><li>wishes</li><li>accept</li><li>acknowledge</li><li>admire</li><li>adore</li><li>agree</li><li>appreciate</li><li>assure</li><li>attract</li><li>bewitch</li><li>blush</li><li>brighten</li><li>captivate</li><li>care</li><li>caress</li><li>celebrate</li><li>charm</li><li>cherish</li><li>choose</li><li>click with</li><li>comfort</li><li>communicate</li><li>complement</li><li>complete</li><li>connect</li><li>consider</li><li>convey</li><li>crave</li><li>cuddle</li><li>delight</li><li>depend</li><li>desire</li><li>dote on</li><li>enchant</li><li>encourage</li><li>enjoy</li><li>entrust</li><li>excite</li><li>experience</li><li>express</li><li>fancy</li><li>fascinate</li><li>feel</li><li>fill with</li><li>flatter</li><li>flirt</li><li>forgive</li><li>fulfill</li><li>help</li><li>hold</li><li>honor</li><li>hug</li><li>hypnotize</li><li>inspire</li><li>join</li><li>kiss</li><li>know</li><li>last</li><li>laugh </li><li>listen</li><li>live </li><li>long </li><li>love</li><li>lust</li><li>lust</li><li>marry</li><li>mate</li><li>meet</li><li>miss</li><li>obsess</li><li>offer</li><li>pair</li><li>play</li><li>please</li><li>pleasure</li><li>prize</li><li>promise</li><li>protect</li><li>provide</li><li>provide</li><li>reciprocate</li><li>relate</li><li>relish</li><li>rely on</li><li>respect</li><li>revere</li><li>romance</li><li>safeguard</li><li>satisfy</li><li>savor</li><li>seduce</li><li>share</li><li>shield</li><li>smooch</li><li>snuggle</li><li>spoon</li><li>support</li><li>tempt</li><li>thank</li><li>think</li><li>toast</li><li>touch</li><li>treasure</li><li>trust</li><li>understand</li><li>unite</li><li>value</li><li>wed</li><li>worship</li></ul>
         
        <ul id="phrases">
         <li>Phrases: 5 points and a x2 Multiplier</li>
 <li>a love to last the ages</li><li>a match made in heaven</li><li>accept this as an expression of my love</li><li>always and forever</li><li>at last I have found you</li><li>being with you is a wish come true</li><li>being with you is a wonderful feeling</li><li>do you think of me as much as I think of you?</li><li>ever since I met you</li><li>every beat of my heart</li><li>every day I fall more in love with you</li><li>every day is a chance to celebrate our love</li><li>for the first time in my life...true love</li><li>from your looks to your intellect, I love every part of you</li><li>how did a guy like me end up with a princess like you?</li><li>how do I love thee? Let me count the ways</li><li>how sweet it is to be loved by you</li><li>I can't get enough of you</li><li>I can't get enough of your hugs and kisses</li><li>I can’t help falling in love with you over and over again</li><li>I care about you more than words can say</li><li>I cherish and adore you</li><li>I crave your touch/attention</li><li>I did not know it was possible to love so deeply until I met you</li><li>I don't know what I would do without you in my life</li><li>I don't need anyone else in my life</li><li>I don’t want to miss a moment with you</li><li>I fancy you</li><li>I feel like I am dreaming when I am with you</li><li>I give my heart to you</li><li>I have always loved you and will always love you</li><li>I have never been loved like this before</li><li>I have never experienced love like this before</li><li>I heart you</li><li>I long for your touch</li><li>I long to be close to you</li><li>I love the way you hold me</li><li>I love the way you look at me</li><li>I love the way you love me</li><li>I love the way you make me feel</li><li>I love you from head to toe</li><li>I love you in more ways than one</li><li>I love you with all my heart and soul</li><li>I miss you every minute we are apart</li><li>I need you in my life</li><li>I never want you to stop loving me</li><li>I promise radiant devotion</li><li>I promise to love you forever</li><li>I still get butterflies in my stomach</li><li>I trust you with all my heart</li><li>I want to be with you forever</li><li>I want to devote my life to you</li><li>I want to shower you with love</li><li>I will go to the ends of the world for you</li><li>I'd love to wake up next to you forever</li><li>I'll follow you anywhere</li><li>I'll love you forever</li><li>I'll love you till death, and then some</li><li>I'm not waiting for a knight in shining armor - mine has already arrived</li><li>I'm thrilled to be a part of your life</li><li>I've been head over heels for you since day one</li><li>if this isn't love, I don't know what is</li><li>in your arms I am happy</li><li>it's a love thing</li><li>it's the little things you do</li><li>je t'aime</li><li>just being with you is enough for me to have a great time</li><li>let's make it last</li><li>life has never been better since you came into my life</li><li>love fills the smallest moment with a world of happiness</li><li>love is a friendship set to music</li><li>love is a gift tied with heartstrings</li><li>love looks not with the eyes, but with the mind</li><li>love makes the world go round</li><li>love me tender</li><li>love puts a twinkle in your eye and a smile in your heart</li><li>love sweet love</li><li>loving you has been the best thing to ever happened to me</li><li>loving you is easy</li><li>loving you is natural</li><li>marry me and make me the happiest man alive</li><li>my heart beats your name</li><li>my heart is a-flutter</li><li>my heart leaps for you</li><li>my innermost thoughts and secrets</li><li>my life is empty without you</li><li>my lonely days are over</li><li>my love for you will never grow old</li><li>my love has come along</li><li>my sweet, embraceable you</li><li>now and forever</li><li>only you</li><li>our bond has grown even stronger</li><li>our love is so bright, I gotta wear shades</li><li>our love is special</li><li>please be always by my side</li><li>please take my heart</li><li>putting my heart on the line</li><li>sealed with a kiss</li><li>set the stage for romance</li><li>so glad I found you</li><li>so grateful to have you in my life</li><li>still devoted as I was on day one</li><li>still in love</li><li>still making music together</li><li>still the best thing that ever happened to me</li><li>thank you for all you have done for me</li><li>the sky's the limit when your heart is in it</li><li>the true measure of love is to love without measure</li><li>the very sight of you sets my heart beating</li><li>the words "I love you" are not enough to express how I feel about you</li><li>there's nothing I wouldn't do for you</li><li>these are words from the heart</li><li>this is a fairytale/legendary romance</li><li>this is a love to believe in</li><li>to love and be loved in return</li><li>to love is to receive a glimpse of heaven</li><li>today, tomorrow, and always</li><li>true love is a gift</li><li>two hearts that became one</li><li>unlucky in life but lucky in love</li><li>walking with you through life</li><li>we are connected in each other's thoughts and hearts</li><li>we are going to live happily ever after</li><li>we are made for each other</li><li>we are on a wonderful journey together</li><li>we are perfect together</li><li>we have a love built to last</li><li>we make a great team</li><li>we may not have it all together, but together we have it all</li><li>we share an intimate bond</li><li>we'll stick together through thick and thin</li><li>we're a perfect match</li><li>we're bound to each other by love and friendship</li><li>when I'm not with you all I do is think about you</li><li>where would I be without you?</li><li>with every beat of my heart</li><li>xoxo</li><li>you are as beautiful as the day we met</li><li>you are beautiful on the inside and out</li><li>you are more than enough for me</li><li>you are my partner, lover, and best friend</li><li>you are the bacon to my eggs</li><li>you are the cream to my coffee</li><li>you are the jelly to my peanut butter</li><li>you are the milk to my cookie</li><li>you are the smile to my face</li><li>you bring out the best in me</li><li>you cast a spell on me</li><li>you complete me</li><li>you don't have to say a word for me to feel your love</li><li>you drive me wild</li><li>you fill my life with happiness</li><li>you ignite the passions</li><li>you know me inside and out</li><li>you make me a better person</li><li>you make me feel like I am the luckiest girl/guy in the world</li><li>you make me feel so special</li><li>you make me laugh</li><li>you make my soul blossom</li><li>you take my breath away</li><li>you took my hand, opened my mind, and touched my heart</li><li>you touch me deeply without even trying</li><li>you're everything I ever wanted and more</li><li>you're just so lovable</li><li>you're my favorite person</li><li>you're my first, my last, my everything</li><li>you're one of those special people who make life worth living</li><li>you're the best break this old heart has ever had</li><li>you're the light of my life</li><li>you're the one who holds the key to my heart</li><li>you're too good to be true</li><li>a blessing</li><li>a daily joy</li><li>a dream boat</li><li>a dream come true</li><li>a goddess</li><li>a heart throb</li><li>a loving friend</li><li>a real-life fantasy</li><li>the cream in my coffee</li><li>the keeper of my heart</li><li>the light of my life</li><li>the love of my life</li><li>the one for me</li><li>so blessed to have you</li><li>so lonely without you</li><li>the luckiest guy alive</li><li>thinking of you always</li><li>extend my heart to</li><li>fall head over heels</li><li>provide pleasure</li><li>put on a pedestal</li><li>go into the bedroom</li><li>go on a date</li><li>go out of your way</li><li>go steady</li>
         </ul>
        </div>
        </div>
        </div>
            
          
!
            
              @font-face {
    font-family: 'LuckiestGuy';
    src: url('https://fonts.googleapis.com/css?family=Luckiest+Guy') format('ttf');
    font-weight: normal;
    font-style: normal;
}

html, body {height: 100%;}

body {
	background: black;
	background-size: cover;
	background-repeat: no-repeat;
	font-family: LuckiestGuy, cursive;
	line-height:1.3;
}

/* Based on html5doctor.com Reset Stylesheet v1.6.1 */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

input, select, button {vertical-align:middle;}

progress {
	width: 100%;
	/*transform: rotate(90deg);*/
}
.names{
  right:0px;
}

main {
	left: 50%;
	max-width: 30em;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
}
	h1 {
		color: #F0D7FE;
		font-size: 6vw;
		line-height: .9;
		text-align: center;
		padding-top: 100px;
		margin: 0 0 .2em;
	}
	p {
		font-size: 4vw;
		color: #F0D7FE;
		text-align: center;
		padding-top: 50px;		
    bottom: 30px;
    position: absolute;
	padding: 0 5%;
	}

/* CSS icons
   General icon class */
.shape {
	box-sizing: border-box;
	display: inline-block;
	font-style: normal;
	font-weight: normal;
	position: relative;
	vertical-align: middle;
}
	.shape:before, .shape:after {
		box-sizing: border-box;
		content: "";
		position: absolute;
	}


/* The background heart shape */
.sh-heart {
	/*animation: beat .7s infinite;*/
	border-radius: 6em 6em 0 0;
	font-size: 4vw;
	height: 14em;
	margin: 1em 8em 1em -1em;
	transform: rotate(45deg);
	width: 9em;
}
.sh-heart, .sh-heart:before {
	background: #cf7f8e;
	transform-origin: 100% 100%;
}
	.sh-heart:before {
		border-radius: 6em 0 0 6em;
		height: 9em;
		right: 0;
		width: 14em;
		top: 5em;
	}

@keyframes beat {
  0%   {font-size: 4vw;}
  10%  {font-size: 4.2vw;}
  100% {font-size: 4vw;}
}
/* The second "full" heart */
.level .sh-heart, .level .sh-heart:before {
	background: #f0d8e7;
}

.level {
	bottom: 0%;
	left: 0;
	overflow: hidden;
	position: absolute;
	right: 0;
	top: 0;
}

/* To position the hearts on the page */
.pos {
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
}

span{
	font-size: medium;
}

h2{
	font-size: 4vw;
	color: #cf7f8e;
	text-align: center;
}
h3{
	font-size: 3vw;
	color: #cf7f8e;
	top:15px;
	left:15px;
	position: absolute;
	cursor: pointer;
}

h3.names{
 top:50px;
}

::-webkit-scrollbar { 
    display: none; 
}
ul{
	
	float: left;
	width: 45%;
	padding: 2%;
	height: 100%;
	overflow: scroll;
	margin-top: 50px;
}
li{
	text-decoration: none;
	color: pink;
	list-style: none;
}

ul li:first-child{
	color: pink;
	font-size: 30px;
	font-style: bold;
}



@media only screen and (min-width:1110px) {


h2{

	text-align: left;
}
}


@media only screen and (min-width:1200px) {
  .sh-heart {
	border-radius: 290px 290px 0 0;
	font-size: 32px;
	height: 448px;
	margin: 33px 260px -33px 33px;
	transform: rotate(45deg);
	width: 290px;
}


p{
	font-size: 2vw;
}

h1{
	font-size: 4vw;
}

h2{

	font-size: 2vw;
}
h3{

	font-size: 1vw;
}
h3.names{
 top:30px;
}


}



/*Taken from https://davidwalsh.name/css-flip */
/* entire container, keeps perspective */
.flip-container {
	perspective: 1000px;
}
	/* flip the pane when hovered */
	 .flip-container.flipit .flipper {
		transform: rotateY(180deg);
	}

.flip-container, .front, .back {
position:fixed !important;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
}

/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;
position:fixed !important;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;
    background-color: black;
	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
	transform: rotateY(180deg);
}
            
          
!
            
              var lovePhrases = [
"a love to last the ages",
"a match made in heaven",
"accept this as an expression of my love",
"always and forever",
"at last I have found you",
"being with you is a wish come true",
"being with you is a wonderful feeling",
"do you think of me as much as I think of you?",
"ever since I met you",
"every beat of my heart",
"every day I fall more in love with you",
"every day is a chance to celebrate our love",
"for the first time in my life...true love",
"from your looks to your intellect, I love every part of you",
"how did a guy like me end up with a princess like you?",
"how do I love thee? Let me count the ways",
"how sweet it is to be loved by you",
"I can't get enough of you",
"I can't get enough of your hugs and kisses",
"I can’t help falling in love with you over and over again",
"I care about you more than words can say",
"I cherish and adore you",
"I crave your touch/attention",
"I did not know it was possible to love so deeply until I met you",
"I don't know what I would do without you in my life",
"I don't need anyone else in my life",
"I don’t want to miss a moment with you",
"I fancy you",
"I feel like I am dreaming when I am with you",
"I give my heart to you",
"I have always loved you and will always love you",
"I have never been loved like this before",
"I have never experienced love like this before",
"I heart you",
"I long for your touch",
"I long to be close to you",
"I love the way you hold me",
"I love the way you look at me",
"I love the way you love me",
"I love the way you make me feel",
"I love you from head to toe",
"I love you in more ways than one",
"I love you with all my heart and soul",
"I miss you every minute we are apart",
"I need you in my life",
"I never want you to stop loving me",
"I promise radiant devotion",
"I promise to love you forever",
"I still get butterflies in my stomach",
"I trust you with all my heart",
"I want to be with you forever",
"I want to devote my life to you",
"I want to shower you with love",
"I will go to the ends of the world for you",
"I'd love to wake up next to you forever",
"I'll follow you anywhere",
"I'll love you forever",
"I'll love you till death, and then some",
"I'm not waiting for a knight in shining armor - mine has already arrived",
"I'm thrilled to be a part of your life",
"I've been head over heels for you since day one",
"if this isn't love, I don't know what is",
"in your arms I am happy",
"it's a love thing",
"it's the little things you do",
"je t'aime",
"just being with you is enough for me to have a great time",
"let's make it last",
"life has never been better since you came into my life",
"love fills the smallest moment with a world of happiness",
"love is a friendship set to music",
"love is a gift tied with heartstrings",
"love looks not with the eyes, but with the mind",
"love makes the world go round",
"love me tender",
"love puts a twinkle in your eye and a smile in your heart",
"love sweet love",
"loving you has been the best thing to ever happened to me",
"loving you is easy",
"loving you is natural",
"marry me and make me the happiest man alive",
"my heart beats your name",
"my heart is a-flutter",
"my heart leaps for you",
"my innermost thoughts and secrets",
"my life is empty without you",
"my lonely days are over",
"my love for you will never grow old",
"my love has come along",
"my sweet, embraceable you",
"now and forever",
"only you",
"our bond has grown even stronger",
"our love is so bright, I gotta wear shades",
"our love is special",
"please be always by my side",
"please take my heart",
"putting my heart on the line",
"sealed with a kiss",
"set the stage for romance",
"so glad I found you",
"so grateful to have you in my life",
"still devoted as I was on day one",
"still in love",
"still making music together",
"still the best thing that ever happened to me",
"thank you for all you have done for me",
"the sky's the limit when your heart is in it",
"the true measure of love is to love without measure",
"the very sight of you sets my heart beating",
"the words \"I love you\" are not enough to express how I feel about you",
"there's nothing I wouldn't do for you",
"these are words from the heart",
"this is a fairytale/legendary romance",
"this is a love to believe in",
"to love and be loved in return",
"to love is to receive a glimpse of heaven",
"today, tomorrow, and always",
"true love is a gift",
"two hearts that became one",
"unlucky in life but lucky in love",
"walking with you through life",
"we are connected in each other's thoughts and hearts",
"we are going to live happily ever after",
"we are made for each other",
"we are on a wonderful journey together",
"we are perfect together",
"we have a love built to last",
"we make a great team",
"we may not have it all together, but together we have it all",
"we share an intimate bond",
"we'll stick together through thick and thin",
"we're a perfect match",
"we're bound to each other by love and friendship",
"when I'm not with you all I do is think about you",
"where would I be without you?",
"with every beat of my heart",
"xoxo",
"you are as beautiful as the day we met",
"you are beautiful on the inside and out",
"you are more than enough for me",
"you are my partner, lover, and best friend",
"you are the bacon to my eggs",
"you are the cream to my coffee",
"you are the jelly to my peanut butter",
"you are the milk to my cookie",
"you are the smile to my face",
"you bring out the best in me",
"you cast a spell on me",
"you complete me",
"you don't have to say a word for me to feel your love",
"you drive me wild",
"you fill my life with happiness",
"you ignite the passions",
"you know me inside and out",
"you make me a better person",
"you make me feel like I am the luckiest girl/guy in the world",
"you make me feel so special",
"you make me laugh",
"you make my soul blossom",
"you take my breath away",
"you took my hand, opened my mind, and touched my heart",
"you touch me deeply without even trying",
"you're everything I ever wanted and more",
"you're just so lovable",
"you're my favorite person",
"you're my first, my last, my everything",
"you're one of those special people who make life worth living",
"you're the best break this old heart has ever had",
"you're the light of my life",
"you're the one who holds the key to my heart",
"you're too good to be true",
"a blessing",
"a daily joy",
"a dream boat",
"a dream come true",
"a goddess",
"a heart throb",
"a loving friend",
"a real-life fantasy",
"the cream in my coffee",
"the keeper of my heart",
"the light of my life",
"the love of my life",
"the one for me",
"so blessed to have you",
"so lonely without you",
"the luckiest guy alive",
"thinking of you always",
"extend my heart to",
"fall head over heels",
"provide pleasure",
"put on a pedestal",
"go into the bedroom",
"go on a date",
"go out of your way",
"go steady",
"test 1 2 3",
"test 1 2 3 4",
"test 123",
"test 1234"
]
var loveWords = [
"affection",
"angel",
"attraction",
"baby doll",
"beau",
"beauty",
"blessing",
"boyfriend",
"caress",
"celebration",
"character",
"chocolate",
"closeness",
"comfort",
"communication",
"companionship",
"confidante",
"connection",
"conversation",
"couple",
"crush",
"Cupid",
"Cupid's",
"cuteness",
"date night",
"dearest",
"dearheart",
"desire",
"devotion",
"dream",
"emotion",
"expression",
"eye candy",
"fairytale",
"fantasy",
"favorite",
"feelings",
"flame",
"friend",
"friendly",
"girlfriend",
"sex",
"happiness",
"heart",
"throb",
"heartthrob",
"honesty",
"honey",
"hot stuff",
"hotness",
"hug",
"hugs",
"humor",
"hunk",
"husband",
"inner beauty",
"inspiration",
"intelligence",
"intimacy",
"journey",
"joy",
"kisses",
"life",
"life partner",
"looks",
"love",
"love",
"lovemaking",
"lover",
"loyalty",
"lust",
"main man",
"main squeeze",
"marriage",
"mate",
"memories",
"pair",
"partner",
"passion",
"personality",
"pet",
"playmate",
"presence",
"prince",
"puppy love",
"pure lust",
"rapport",
"relationship",
"reliance",
"romance",
"romeo",
"saint",
"sanity",
"security",
"sexual",
"sexuality",
"soul",
"special",
"spouse",
"strength",
"stud",
"sugar",
"sunshine",
"support",
"supporter",
"sweetheart",
"sweetie",
"team",
"the one",
"thoughtfulness",
"true love",
"trust",
"understanding",
"union",
"warmth",
"wife",
"wishes",
"accept",
"acknowledge",
"admire",
"adore",
"agree",
"appreciate",
"assure",
"attract",
"bewitch",
"blush",
"brighten",
"captivate",
"care",
"caress",
"celebrate",
"charm",
"cherish",
"choose",
"click with",
"comfort",
"communicate",
"complement",
"complete",
"connect",
"consider",
"convey",
"crave",
"cuddle",
"delight",
"depend",
"desire",
"dote on",
"enchant",
"encourage",
"enjoy",
"entrust",
"excite",
"experience",
"express",
"fancy",
"fascinate",
"feel",
"fill with",
"flatter",
"flirt",
"forgive",
"fulfill",
"help",
"hold",
"honor",
"hug",
"hypnotize",
"inspire",
"join",
"kiss",
"know",
"last",
"laugh ",
"listen",
"live ",
"long ",
"love",
"lust",
"lust",
"marry",
"mate",
"meet",
"miss",
"obsess",
"offer",
"pair",
"play",
"please",
"pleasure",
"prize",
"promise",
"protect",
"provide",
"provide",
"reciprocate",
"relate",
"relish",
"rely on",
"respect",
"revere",
"romance",
"safeguard",
"satisfy",
"savor",
"seduce",
"share",
"shield",
"smooch",
"snuggle",
"spoon",
"support",
"tempt",
"thank",
"think",
"toast",
"touch",
"treasure",
"trust",
"understand",
"unite",
"value",
"wed",
"worship"
]

      var score = 0;
      function heartClick(){
          startRecognition();

      }
      function flipit(){
          if(document.getElementById("flipper").className.match(/(?:^|\s)flipit(?!\S)/) )
          {
             document.getElementById("flipper").className = "flip-container";
          }
          else
          {
          document.getElementById("flipper").className = "flip-container flipit";
          }
      }
      function startRecognition(){
            var recognition = new webkitSpeechRecognition();
            recognition.continuous = true;
            recognition.interimResults = false;
            recognition.onresult = function(event) { 
                if (typeof (event.results) == 'undefined') {
    document.getElementById("score").textContent = "Romance score: " + score; 
                    }
                    else
                    {            
                        console.log(event.results[0][0].transcript);
                        var loveSentance = event.results[0][0].transcript;
                        var loveSentanceSplit = loveSentance.split(" ")
                        calculateLove(loveSentanceSplit, loveSentance);
                    }
            }
            recognition.start();
            setTimeout(function(){
            recognition.stop();
            }, 5000);
      }

      function calculateLove(loveSentanceSplit, loveSentance){
      score = 0;      
      var usedWords = ["TEST"];
      for(var i = 0; i < loveSentanceSplit.length; i++) {
         // Trim the excess whitespace.
          var loveWord = loveSentanceSplit[i].replace(/^\s*/, "").replace(/\s*$/, "").toLowerCase();
         // Add additional code here, such as:
          for (var key in loveWords) {                           
                  if(loveWords.hasOwnProperty(key)) {
                     // console.log(love[key].FIELD1);
                      if(loveWords[key].toLowerCase() == loveWord)
                      {
                          for (var i = 0; i < usedWords.length; i++) {
                            if (usedWords[i] === loveWord) {
                            }
                            else
                            {
                            score = score + 10;
                            usedWords.push(loveWord);
                            }
                            }
                      }
      
                  }
          }
      
      }

      for (var key in lovePhrases) 
      {           
                  if(lovePhrases.hasOwnProperty(key)) {                   
                      if(loveSentance.toLowerCase().includes(lovePhrases[key].toLowerCase()))
                      {
                          score = (score + 5) * 2;
                      }      
                  }         
       }
      document.getElementById("level").style.bottom =  score + "%";
    document.getElementById("score").textContent = "Romance score: " + score; 
    score = 0;
      }

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console