Skip to content

Instantly share code, notes, and snippets.

@agileminds1997

agileminds1997/index.html

Created September 2, 2021 10:39
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save agileminds1997/5d906695fd150781e502ee268737fa53 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save agileminds1997/5d906695fd150781e502ee268737fa53 to your computer and use it in GitHub Desktop.
Download ZIP
Missing Variable Solver
Raw
index.html
<div class="container">
<h1>Missing Variable</h1>
<div class="major">
<div class="input-group d2 ejif">
<div class="input-group-prepend">
<button class="btn btn-success" type="button">Mass</button>
</div>
<input id="v1" type="text" class="form-control thevar" placeholder="(g)"
onkeypress="return validNumeric(this, event)"
onchange="return cleanNumbers(this)"
maxlength="6" value="1"
size="50%" aria-label="Mass" aria-describedby="v1">
<div class="input-group-append">
<span class="valido"></span>
</div>
</div>
<div class="input-group d2">
<div class="input-group-prepend">
<button class="btn btn-success" type="button">Volume</button>
</div>
<input id="v2" type="text" class="form-control thevar" placeholder="(cm3)"
onkeypress="return validNumeric(this, event)"
onchange="return cleanNumbers(this)"
maxlength="6" value="1"
size="50%" aria-label="" aria-describedby="v2">
<div class="input-group-append">
<span class="valido"></span>
</div>
</div>
<div class="input-group d2">
<div class="input-group-prepend">
<button class="btn btn-success" type="button">Density</button>
</div>
<input id="v3" type="text" class="form-control thevar" placeholder="g/cm3"
onkeypress="return validNumeric(this, event)"
onchange="return cleanNumbers(this)"
maxlength="6" value="1"
size="50%"
aria-label="" aria-describedby="v3">
<div class="input-group-append">
<span class="valido"></span>
</div>
</div>
</div>
Raw
script.js
const calcMatrix = ["v1","v2","v3"];
let clickHist = [];
var matrix1 = [
{"v1":"v3","v1":"v2"},
{"v2":"v1","v2":"v3"},
{"v3":"v1","v3":"v2"}
];
const malook = ["v1v2","v1v3","v2v1","v2v3","v3v1","v3v2"];
const balook = [["v1","v2"],["v1","v3"],["v2","v1"],["v2","v3"],["v3","v1"],["v3","v2"]];
const yalook = [
{"v1":[["v1","v2"],["v1","v3"]]},
{"v2":[["v2","v1"],["v2","v3"]]},
{"v3":[["v3","v1"],["v3","v2"]]},
];
const descriptors={"v1":"mass","v2":"volume","v3":"density"};
function onlyNumberKey(evt) {
// Only ASCII character in that range allowed
var ASCIICode = (evt.which) ? evt.which : evt.keyCode
if (ASCIICode > 31 && (ASCIICode < 48 || ASCIICode > 57))
return false;
return true;
}
function cleanNumbers(evt){
var x = new Decimal(evt.value);
console.log(x.toString());
evt.value=x.toString();
}
function nextFocus(entry){
const fields = ['v1', 'v2', 'v3'];
var t=fields.indexOf(entry);
return(fields[++t<fields.length?t:0]);
}
function threevar(history){
var v1 = document.getElementById("v1").value;
var v2 = document.getElementById("v2").value;
var v3 = document.getElementById("v3").value;
var output;
switch (history){
case "v1v2": // v3 = v1/v2
var output = v1/v2;
var vector = "v3";
break;
case "v2v3": // v1 = v2*v3
output = v2*v3;
vector = "v1";
break;
case "v1v3": // v2 = v1/v3
output = v1/v3;
vector = "v2";
break;
case "v3v1": // v2 = v2/v3
output = v2/v3;
vector = "v2";
break;
case "v3v2": // v1 = v2*v3
output = v3*v2;
vector = "v1";
break;
case "v2v1": // v1 = v2/v3
output = v1/v2;
vector = "v3";
break;
default:
var output = v1;
var vector = "v1";
// clickHist=["v1","v2"];
}
return ({"vector":vector,"value":output});
}
/* Show that the DOM is loaded*/
addEventListener('DOMContentLoaded', (event) => {
console.log('The DOM is fully loaded.');
$(document).ready(function() {
$('.thevar').bind("cut copy paste drag drop", function(e) {
e.preventDefault();
});
});
});
/* Permit Enter to change field focus*/
$(document).on('keypress', function(key) {
if (key.which == 13){
wf=document.activeElement.getAttribute('aria-describedby');
document.getElementById(nextFocus(wf)).focus();
}
});
/* Make selected field Yellow*/
$('input[type="text"]').on('focus', function (event) {
$(this).css("background-color", "yellow").on('blur', function (event) {
$(this).css("background-color", "");
});
});
$('input[type="text"]').on('change', function (event) {
var g = $(this).attr('aria-describedby');
var n = clickHist.length-1;
if (clickHist[n]!=g) {clickHist.push(g);}
if (clickHist.length>2) {clickHist.shift();}
var lastClicked = clickHist[clickHist.length-1];
//console.log("Lookup " + clickHist.join(''));
var pharcyde = threevar(clickHist.join(''));
//console.log(pharcyde);
document.getElementById(pharcyde.vector).value=pharcyde.value;
$(pharcyde.vector).css("background-color", "red");
document.getElementById(pharcyde.vector).style.backgroundColor = "#fcbbc0";
document.getElementById(pharcyde.vector).style.fontStyle = "normal";
document.getElementById(pharcyde.vector).style.fontWeight = "bolder";
});
function valid(elem) {
if (RegExp.test(elem.value)) {
val = elem.value;
el_down.innerHTML = "Typed Valid Character.";
} else {
elem.value = val;
el_down.innerHTML = "Typed Invalid Character.";
}
}
function isValid(el, evnt) {
var charC = (evnt.which) ? evnt.which : evnt.keyCode;
if (charC == 46) {
if (el.value.indexOf('.') === -1) {
return true;
} else {
return false;
}
} else {
if (charC > 31 && (charC < 48 || charC > 57))
return false;
}
return true;
}
function validNumeric(t, evnt) {
var a = isValid(t, evnt);
if (a) {
//var vStatus = t.nextElementSibling.firstChild.nextElementSibling;
//console.log(vStatus);
t.nextElementSibling.firstChild.nextElementSibling.innerHTML = "<i class=\"fa fa-check\"></i>";
} else {
t.nextElementSibling.firstChild.nextElementSibling.innerHTML = "<i class=\"fa fa-times\"></i>";
}
return a;
}
// Designed by: Mauricio Bucardo
// Original image:
// https://dribbble.com/shots/5619509-Animated-Tab-Bar
"use strict";
const body = document.body;
const bgColorsBody = ["#ffb457", "#ff96bd", "#9999fb", "#ffe797", "#cffff1"];
const menu = body.querySelector(".menu");
const menuItems = menu.querySelectorAll(".menu__item");
const menuBorder = menu.querySelector(".menu__border");
let activeItem = menu.querySelector(".active");
function clickItem(item, index) {
menu.style.removeProperty("--timeOut");
if (activeItem == item) return;
if (activeItem) {
activeItem.classList.remove("active");
}
item.classList.add("active");
body.style.backgroundColor = bgColorsBody[index];
activeItem = item;
offsetMenuBorder(activeItem, menuBorder);
}
function offsetMenuBorder(element, menuBorder) {
const offsetActiveItem = element.getBoundingClientRect();
const left = Math.floor(offsetActiveItem.left - menu.offsetLeft - (menuBorder.offsetWidth - offsetActiveItem.width) / 2) + "px";
menuBorder.style.transform = `translate3d(${left}, 0 , 0)`;
}
offsetMenuBorder(activeItem, menuBorder);
menuItems.forEach((item, index) => {
item.addEventListener("click", () => clickItem(item, index));
})
window.addEventListener("resize", () => {
offsetMenuBorder(activeItem, menuBorder);
menu.style.setProperty("--timeOut", "none");
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fontawesome-iconpicker/3.2.0/js/fontawesome-iconpicker.min.js"></script>
Raw
style.css
.ejif::before {
transform: scaleX(0);
transform-origin: bottom right;
}
.ejif:hover::before {
transform: scaleX(1);
transform-origin: bottom left;
}
.ejif::before {
content: " ";
display: block;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
inset: 0 0 0 0;
background: hsl(200 100% 80%);
z-index: -1;
transition: transform .3s ease;
}
.ejif {
position: relative;
font-size: 2rem;
}
html {
block-size: 100%;
inline-size: 100%;
}
body {
min-block-size: 100%;
min-inline-size: 100%;
margin: 0;
box-sizing: border-box;
display: grid;
place-content: center;
font-family: system-ui, sans-serif;
}
.menu{
margin: 0px 0px 0 -0.5rem;
display: flex;
width: 100%;
padding: 0 0 0 0;
position: relative;
align-items: center;
justify-content: center;
background-color: var(--bgColorMenu);
}
.menu__item{
all: unset;
flex-grow: 1;
z-index: 100;
display: flex;
cursor: pointer;
position: relative;
border-radius: 50%;
align-items: center;
will-change: transform;
justify-content: center;
padding: 0.55em 0 0.85em;
transition: transform var(--timeOut , var(--duration));
}
.menu__item::before{
content: "w";
z-index: -1;
width: 4.2em;
height: 4.2em;
border-radius: 50%;
position: absolute;
transform: scale(0);
transition: background-color var(--duration), transform var(--duration);
}
.menu__item.active {
transform: translate3d(0, -.8em , 0);
}
.menu__item.active::before{
transform: scale(1);
background-color: var(--bgColorItem);
}
.icon{
width: 2.6em;
height: 2.6em;
stroke: white;
fill: transparent;
stroke-width: 1pt;
stroke-miterlimit: 10;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 400;
}
.menu__item.active .icon {
animation: strok 0.5s reverse;
}
@keyframes strok {
100% {
stroke-dashoffset: 400;
}
}
.menu__border{
left: 0;
bottom: 99%;
width: 10.9em;
height: 2.4em;
position: absolute;
clip-path: url(#menu);
will-change: transform;
background-color: var(--bgColorMenu);
transition: transform var(--timeOut , var(--duration));
}
.svg-container {
width: 0;
height: 0;
}
html {
font-size: 16px;
box-sizing: border-box;
--bgColorMenu : #1d1d27;
--duration: .5s;
}
html *,
html *::before,
html *::after {
box-sizing: inherit;
}
body{
margin: 0;
display: flex;
height: 100vh;
overflow: hidden;
align-items: center;
vertical-align: top;
justify-content: center;
background-color: #ffb457;
-webkit-tap-highlight-color: transparent;
transition: background-color var(--duration);
}
::placeholder {
color: red;
opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: red;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: red;
}
.container {
margin-top: 0px;
vertical-align: top;
min-width: 320px;
width: 100%;
border: 1px solid black;
border-radius: 5px;
}
.d2 {
padding-bottom: 5px;
line-height: 2.5;
}
.major {
padding: 30px 0;
}
#GFG_DOWN, .valido {
font-size: 16px;
font-weight: bold;
color: red;
}
@media screen and (max-width: 50em) {
.menu{
font-size: .8em;
}
}
.one {
width: 300px;
border: 1px solid red;
}
.two {
max-width:100%;
padding:4px;
margin:2px;
border:1px dashed green;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment