Skip to content

Instantly share code, notes, and snippets.

@theabbie

theabbie/guess-my-gender.markdown

Created June 11, 2020 08:21
Show Gist options
  • Save theabbie/2ac9bf9c9d2e38639cf7503afbde8aa3 to your computer and use it in GitHub Desktop.
Save theabbie/2ac9bf9c9d2e38639cf7503afbde8aa3 to your computer and use it in GitHub Desktop.
Download ZIP
Guess My Gender
Raw
guess-my-gender.markdown
Raw
index.html
<!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/[email protected]/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">&#9650;</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