This App Will Guess Your Gender using Machine Learning
A Pen by abhishek chaudhary on CodePen.
Created
June 11, 2020 08:21
-
-
Save theabbie/2ac9bf9c9d2e38639cf7503afbde8aa3 to your computer and use it in GitHub Desktop.
Guess My Gender
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
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <title>Guess My Gender</title> | |
| <meta charset="utf-8" /> | |
| <link rel="canonical" href="/gender"> | |
| <meta name="keywords" content="TheAbbie, Abhishek chaudhary, FCRIT, Fr conceicao rodrigues institute of technology"> | |
| <meta property="og:locale" content="en_US" /> | |
| <link rel="manifest" href="/manifest.json"> | |
| <link rel="shortcut icon" type="image/x-icon" href="https://theabbie.github.io/files/logo.png"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <meta name="mobile-web-app-capable" content="yes"> | |
| <meta name="description" content="This App Will Guess Your Gender using Machine Learning" /> | |
| <meta property="og:type" content="website"> | |
| <meta property="og:title" content="Guess My Gender"> | |
| <meta property="og:description" content="This App Will Guess Your Gender using Machine Learning"> | |
| <meta property="og:image" content="https://theabbie.github.io/blog/assets/genders.jpg"> | |
| <meta property="og:url" content="https://theabbie.github.io"> | |
| <meta property="twitter:url" content="https://theabbie.github.io/"> | |
| <meta name="twitter:title" content="Guess My Gender"> | |
| <meta name="twitter:description" content="This App Will Guess Your Gender using Machine Learning"> | |
| <meta name="twitter:image" content="https://theabbie.github.io/blog/assets/genders.jpg"> | |
| <meta name="twitter:card" content="summary_large_image"> | |
| <link rel="apple-touch-icon" sizes="180x180" href="/files/favicons/apple-touch-icon.png"> | |
| <link rel="icon" type="image/png" sizes="32x32" href="/files/favicons/favicon-32x32.png"> | |
| <link rel="icon" type="image/png" sizes="194x194" href="/files/favicons/favicon-194x194.png"> | |
| <link rel="icon" type="image/png" sizes="192x192" href="/files/favicons/android-chrome-192x192.png"> | |
| <link rel="icon" type="image/png" sizes="16x16" href="/files/favicons/favicon-16x16.png"> | |
| <link rel="mask-icon" href="/files/favicons/safari-pinned-tab.svg" color="#000000"> | |
| <link rel="shortcut icon" href="/files/favicons/favicon.ico"> | |
| <meta name="msapplication-TileColor" content="#000000"> | |
| <meta name="msapplication-TileImage" content="/files/favicons/mstile-144x144.png"> | |
| <meta name="msapplication-config" content="/files/favicons/browserconfig.xml"> | |
| <meta name="theme-color" content="#ffffff"> | |
| <style> | |
| @font-face { | |
| font-family: 'Martel Sans'; | |
| font-style: normal; | |
| font-weight: 400; | |
| font-display: swap; | |
| src: local('Martel Sans Regular'), local('MartelSans-Regular'), url(https://fonts.gstatic.com/s/martelsans/v6/h0GsssGi7VdzDgKjM-4d8hjYx-4.woff2) format('woff2'); | |
| unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; | |
| } | |
| * { | |
| font-family: 'Martel Sans', sans-serif; | |
| font-size: 15px; | |
| letter-spacing: 6px; | |
| word-spacing: 12px; | |
| line-height: 125%; | |
| } | |
| body { | |
| margin: 0px; | |
| } | |
| *:focus { | |
| outline: none; | |
| } | |
| h1, | |
| h2, | |
| h3 { | |
| display: block; | |
| padding: 15px; | |
| font-weight: bolder; | |
| font-size: 30px; | |
| margin: 0px; | |
| } | |
| h2 { | |
| margin-left: 10px; | |
| } | |
| h3 { | |
| margin-left: 20px; | |
| } | |
| .first, | |
| .second, | |
| .third { | |
| margin-left: 30px; | |
| margin-right: 30px; | |
| } | |
| .single, | |
| .double, | |
| .triple { | |
| border-radius: 15px; | |
| display: inline-block; | |
| margin: 15px; | |
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); | |
| transition: 0.2s; | |
| } | |
| .inner { | |
| padding: 20px; | |
| border-radius: 10px; | |
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); | |
| } | |
| .end { | |
| padding: 15px; | |
| border-radius: 7px; | |
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); | |
| } | |
| button { | |
| display: block; | |
| border: none; | |
| padding: 15px; | |
| background: purple; | |
| color: white; | |
| font-weight: bolder; | |
| font-size: 24px; | |
| margin: 40px; | |
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); | |
| border-radius: 8px; | |
| transition: 0.25s; | |
| } | |
| button:active { | |
| padding: 10px; | |
| } | |
| .result { | |
| display: block; | |
| width: 80%; | |
| max-width: 800px; | |
| margin: 40px auto 40px auto; | |
| padding: 0px; | |
| } | |
| #pointer, | |
| #female, | |
| #male { | |
| font-size: 48px; | |
| font-weight: bolder; | |
| } | |
| .bar { | |
| padding: 10px 0px 10px 0px; | |
| background-image: linear-gradient(-90deg, blue, pink); | |
| } | |
| .pointer { | |
| background-image: url('https://theabbie.github.io/blog/assets/gender-bar.jpg'); | |
| } | |
| #female { | |
| float: left; | |
| } | |
| #male { | |
| float: right; | |
| } | |
| #pointer { | |
| float: center; | |
| transition: 2s; | |
| position: absolute; | |
| transform: translateX(-50%); | |
| transition-timing-function: ease-in-out; | |
| } | |
| .feedback { | |
| display: none; | |
| } | |
| .message { | |
| background: rgb(50,50,50); | |
| color: white; | |
| font-size: 18px; | |
| letter-spacing: 4px; | |
| word-spacing: 9px; | |
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); | |
| padding: 15px 15px 15px 15px; | |
| display: block; | |
| position: fixed; | |
| z-index: 2; | |
| bottom: -50px; | |
| transition: 0.3s; | |
| width: 100%; | |
| } | |
| .counter { | |
| padding: 0px 0px 0px 40px; | |
| font-size: 24px; | |
| font-weight: bolder; | |
| } | |
| </style> | |
| <script src="https://cdn.jsdelivr.net/npm/mathjs@6.0.4/dist/math.min.js"></script> | |
| <script src="https://www.gstatic.com/firebasejs/7.3.0/firebase-app.js"></script> | |
| <script src="https://www.gstatic.com/firebasejs/7.4.0/firebase-database.js"></script> | |
| <script> | |
| var firebaseConfig = { | |
| apiKey: "AIzaSyBECQksrlWkWOTP4jriMmA9thfcKgbHyuE", | |
| authDomain: "codrcrew.firebaseapp.com", | |
| databaseURL: "https://codrcrew.firebaseio.com", | |
| projectId: "codrcrew", | |
| storageBucket: "codrcrew.appspot.com", | |
| messagingSenderId: "517463115484", | |
| appId: "1:517463115484:web:93ce55f61c78b015371619" | |
| }; | |
| firebase.initializeApp(firebaseConfig); | |
| </script> | |
| <script> | |
| function loader(data) { | |
| window.data = Object.values(data); | |
| } | |
| </script> | |
| <script src="https://codrcrew.firebaseio.com/main/gender.json?callback=loader"> | |
| <script type="application/ld+json"> | |
| { | |
| "@context": "http://schema.org", | |
| "@type": "WebPage", | |
| "name": "Guess My Gender", | |
| "description": "This App Will Guess Your Gender using Machine Learning", | |
| "publisher": { | |
| "@type": "ProfilePage", | |
| "name": "TheAbbie" | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <h1>Guess My Gender</h1> | |
| <h2>Perform These 3 simple tasks</h2> | |
| <h3>Select any three</h3> | |
| <div class="first"> | |
| <div class="single"></div> | |
| <div class="single"></div> | |
| <div class="single"></div> | |
| <div class="single"></div> | |
| <div class="single"></div> | |
| <div class="single"></div> | |
| <div class="single"></div> | |
| <div class="single"></div> | |
| <div class="single"></div> | |
| <div class="single"></div> | |
| </div> | |
| <h3>Select any three</h3> | |
| <div class="second"> | |
| <div class="double"><div class="inner"></div></div> | |
| <div class="double"><div class="inner"></div></div> | |
| <div class="double"><div class="inner"></div></div> | |
| <div class="double"><div class="inner"></div></div> | |
| <div class="double"><div class="inner"></div></div> | |
| <div class="double"><div class="inner"></div></div> | |
| <div class="double"><div class="inner"></div></div> | |
| <div class="double"><div class="inner"></div></div> | |
| <div class="double"><div class="inner"></div></div> | |
| <div class="double"><div class="inner"></div></div> | |
| </div> | |
| <h3>Select any three</h3> | |
| <div class="third"> | |
| <div class="triple"><div class="inner"><div class="end"></div></div></div> | |
| <div class="triple"><div class="inner"><div class="end"></div></div></div> | |
| <div class="triple"><div class="inner"><div class="end"></div></div></div> | |
| <div class="triple"><div class="inner"><div class="end"></div></div></div> | |
| <div class="triple"><div class="inner"><div class="end"></div></div></div> | |
| <div class="triple"><div class="inner"><div class="end"></div></div></div> | |
| <div class="triple"><div class="inner"><div class="end"></div></div></div> | |
| <div class="triple"><div class="inner"><div class="end"></div></div></div> | |
| <div class="triple"><div class="inner"><div class="end"></div></div></div> | |
| <div class="triple"><div class="inner"><div class="end"></div></div></div> | |
| </div> | |
| <button>DONE</button> | |
| <span class="counter"></span> | |
| <div class="feedback"> | |
| <button id="right" style="display: inline-block; margin: 0px 10px 40px 40px;">😃</button> | |
| <button id="wrong" style="display: inline-block; margin: 0px 10px 40px 10px;">😞</button> | |
| </div> | |
| <div class="result"> | |
| <div class="bar"></div> | |
| <div class="pointer"> | |
| <span id="pointer">▲</span> | |
| </div> | |
| </div> | |
| <div class="message"></div> | |
| </body> | |
| <script> | |
| var first = document.querySelectorAll(".single"); | |
| var second = document.querySelectorAll(".double"); | |
| var third = document.querySelectorAll(".triple"); | |
| var l = document.querySelector(".bar").clientWidth; | |
| var answers = []; | |
| answers[0] = []; | |
| answers[1] = []; | |
| answers[2] = []; | |
| var fi = 0; | |
| var si = 0; | |
| var ti = 0; | |
| var ts = [0,0,0]; | |
| var ctr = []; | |
| var result; | |
| var parsed; | |
| var k = 20; | |
| document.querySelector("#pointer").style.marginLeft=(l/2)+"px"; | |
| first.forEach(x => { | |
| var vals = [Math.floor(256*Math.random()),Math.floor(256*Math.random()),Math.floor(256*Math.random())]; | |
| x.style.background = `rgb(${vals[0]},${vals[1]},${vals[2]})`; | |
| x.style.padding="35px"; | |
| x.addEventListener("click",function() { | |
| if (fi<3 && x.style.padding=="35px") { | |
| if (fi==0) { | |
| ctr[0] = setInterval(function() {ts[0]++},100) | |
| } | |
| if (fi==2) { | |
| clearInterval(ctr[0]); | |
| } | |
| x.style.padding = "45px"; | |
| x.style.filter = "brightness(50%)"; | |
| answers[0].push(vals); | |
| fi++; | |
| } | |
| }) | |
| }); | |
| second.forEach(x => { | |
| var vals = [[Math.floor(256*Math.random()),Math.floor(256*Math.random()),Math.floor(256*Math.random())],[Math.floor(256*Math.random()),Math.floor(256*Math.random()),Math.floor(256*Math.random())]]; | |
| x.style.background = `rgb(${vals[0][0]},${vals[0][1]},${vals[0][2]})`; | |
| x.childNodes[0].style.background = `rgb(${vals[1][0]},${vals[1][1]},${vals[1][2]})`; | |
| x.style.padding="15px"; | |
| x.addEventListener("click",function() { | |
| if (si<3 && x.style.padding=="15px") { | |
| if (si==0) { | |
| ctr[1] = setInterval(function() {ts[1]++},100) | |
| } | |
| if (si==2) { | |
| clearInterval(ctr[1]); | |
| } | |
| x.style.padding = "20px"; | |
| x.style.filter = "brightness(50%)"; | |
| answers[1].push(vals); | |
| si++; | |
| } | |
| }) | |
| }); | |
| third.forEach(x => { | |
| var vals = [[Math.floor(256*Math.random()),Math.floor(256*Math.random()),Math.floor(256*Math.random())],[Math.floor(256*Math.random()),Math.floor(256*Math.random()),Math.floor(256*Math.random())],[Math.floor(256*Math.random()),Math.floor(256*Math.random()),Math.floor(256*Math.random())]]; | |
| x.style.background = `rgb(${vals[0][0]},${vals[0][1]},${vals[0][2]})`; | |
| x.childNodes[0].style.background = `rgb(${vals[1][0]},${vals[1][1]},${vals[1][2]})`; | |
| x.childNodes[0].childNodes[0].style.background = `rgb(${vals[2][0]},${vals[2][1]},${vals[2][2]})`; | |
| x.style.padding="15px"; | |
| x.addEventListener("click",function() { | |
| if (ti<3 && x.style.padding=="15px") { | |
| if (ti==0) { | |
| ctr[2] = setInterval(function() {ts[2]++},100) | |
| } | |
| if (ti==2) { | |
| clearInterval(ctr[2]); | |
| } | |
| x.style.padding = "20px"; | |
| x.style.filter = "brightness(50%)"; | |
| answers[2].push(vals); | |
| ti++; | |
| } | |
| }) | |
| }); | |
| document.querySelector("button").onclick = function() { | |
| if (answers[0].length==3 && answers[1].length==3 && answers[2].length==3) { | |
| parsed = math.add(math.multiply(ts[0]/10,answers[0]),math.multiply(ts[1]/20,[math.add(answers[1][0][0],answers[1][0][1]),math.add(answers[1][1][0],answers[1][1][1]),math.add(answers[1][2][0],answers[1][2][1])],math.multiply(ts[2]/30,[math.add(answers[2][0][0],answers[2][0][1],answers[2][0][2]),math.add(answers[2][1][0],answers[2][1][1],answers[2][1][2]),math.add(answers[2][2][0],answers[2][2][1],answers[2][2][2])]))); | |
| var rslt = data.sort(function(a,b) {math.sum(math.abs(math.subtract(a[1],parsed)))-math.sum(math.abs(math.subtract(b[1],parsed)))}).map(x=>x[0]).slice(0,k); | |
| alert(rslt); | |
| var m = 0; | |
| rslt.forEach(x => {if (x=="M") m++;}); | |
| var result = m/k; | |
| document.querySelector("#pointer").style.marginLeft=Math.floor(l*result)+"px"; | |
| document.querySelector(".feedback").style.display="block"; | |
| } | |
| else { | |
| message("please complete the tasks first"); | |
| } | |
| } | |
| document.querySelector("#right").onclick = function() { | |
| if (result>=0.5) { | |
| firebase.database().ref("main/gender").push(["M",parsed]) | |
| } | |
| else { | |
| firebase.database().ref("main/gender").push(["F",parsed]) | |
| } | |
| message("Thank you"); | |
| } | |
| document.querySelector("#wrong").onclick = function() { | |
| if (result>=0.5) { | |
| firebase.database().ref("main/gender").push(["F",parsed]) | |
| } | |
| else { | |
| firebase.database().ref("main/gender").push(["M",parsed]) | |
| } | |
| message("Thank you"); | |
| } | |
| function message(x) { | |
| document.querySelector(".message").innerHTML = x; | |
| document.querySelector(".message").style.bottom = "0px"; | |
| setTimeout(function() { | |
| document.querySelector(".message").innerHTML = ""; | |
| document.querySelector(".message").style.bottom = "-50px"; | |
| },2000); | |
| } | |
| setTimeout (function() { | |
| document.querySelector(".counter").innerHTML = "#"+window.data.length; | |
| },2000); | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment