Skip to content

Instantly share code, notes, and snippets.

@Daltonic
Created Oct 4, 2021
Embed
What would you like to do?
Predictive Glass.js and Glass.css file
.glass {
position: relative;
background: rgba(225, 225, 225, 0.05);
border-radius: 6px;
overflow: hidden;
z-index: 10;
-webkit-backdrop-filter: blur(15px);
backdrop-filter: blur(15px);
border-top: 1px solid rgba(225, 225, 225, 0.2);
border-left: 1px solid rgba(225, 225, 225, 0.2);
-webkit-box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.2);
box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.2);
min-width: 35vw;
padding: 20px 30px;
}
.glass__form {
position: relative;
display: grid;
}
.glass__form h4 {
font-family: sans-serif;
text-align: center;
margin: 10px;
}
.glass__form__group {
margin: 10px 0;
}
.glass__form__input {
width: 100%;
background: transparent;
outline: none;
border: none;
padding: 10px;
border-radius: 3px;
box-shadow: 5px 5px 5px rgb(0 0 0 / 10%);
}
.glass__form__input:focus {
background: rgba(255, 255, 255, 0.5);
}
.glass__form__btn {
background: #ea2828;
border: 1px solid #ea2828;
border: none;
outline: none;
padding: 10px 15px;
border-radius: 5px;
color: #fff;
cursor: pointer;
}
.glass__form__btn:hover {
background: transparent;
color: #ea2828;
transition: all ease-in-out 0.3s;
}
::-webkit-input-placeholder {
/* WebKit, Blink, Edge */
color: #000;
}
:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #000;
opacity: 1;
}
::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #000;
opacity: 1;
}
:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: #000;
}
::-ms-input-placeholder {
/* Microsoft Edge */
color: #000;
}
::placeholder {
/* Most modern browsers support this now. */
color: #000;
}
import './Glass.css'
import { useState } from 'react'
import axios from 'axios'
function Glass() {
const [gender, setGender] = useState('')
const [bsc, setBsc] = useState('')
const [workex, setWorkex] = useState('')
const [etest_p, setEtest_p] = useState('')
const [msc, setMsc] = useState('')
const handleSubmit = (e) => {
e.preventDefault()
const params = { gender, bsc, workex, etest_p, msc }
axios
.post('http://localhost:8080/prediction', params)
.then((res) => {
const data = res.data.data
const parameters = JSON.stringify(params)
const msg = `Prediction: ${data.prediction}\nInterpretation: ${data.interpretation}\nParameters: ${parameters}`
alert(msg)
reset()
})
.catch((error) => alert(`Error: ${error.message}`))
}
const reset = () => {
setGender('')
setBsc('')
setWorkex('')
setEtest_p('')
setMsc('')
}
return (
<div className="glass">
<form onSubmit={(e) => handleSubmit(e)} className="glass__form">
<h4>Employment Data</h4>
<div className="glass__form__group">
<input
id="gender"
className="glass__form__input"
placeholder="Gender (1 = Male or 0 = Female)"
required
autoFocus
min="0"
max="1"
pattern="[0-9]{0,1}"
title="Gender must either be (1 = Male or 0 = Female)"
type="number"
value={gender}
onChange={(e) => setGender(e.target.value)}
/>
</div>
<div className="glass__form__group">
<input
id="bsc"
className="glass__form__input"
placeholder="BSc CGPA (1.00 - 5.00)"
required
min="0"
max="5"
type="number"
title="BSc CGPA must be in the range (1.00 - 5.00)"
pattern="[0-9]+([\.,][0-9]+)?"
step="0.01"
value={bsc}
onChange={(e) => setBsc(e.target.value)}
/>
</div>
<div className="glass__form__group">
<input
id="workex"
className="glass__form__input"
placeholder="Work Experience (1 = True or 0 = False)"
required
min="0"
max="1"
type="number"
title="Work Experience must either be (1 = True or 0 = False)"
value={workex}
onChange={(e) => setWorkex(e.target.value)}
/>
</div>
<div className="glass__form__group">
<input
id="etest_p"
className="glass__form__input"
placeholder="E-Test Score (1.00 - 100.00)"
required
min="0"
max="100"
type="number"
title="E-Test score must be in the range (1.00 - 100)"
pattern="[0-9]+([\.,][0-9]+)?"
step="0.01"
value={etest_p}
onChange={(e) => setEtest_p(e.target.value)}
/>
</div>
<div className="glass__form__group">
<input
id="msc"
className="glass__form__input"
placeholder="MSc CGPA (1.00 - 5.00)"
required
min="0"
max="5"
type="number"
title="MSc CGPA must be in the range (1.00 - 5.00)"
pattern="[0-9]+([\.,][0-9]+)?"
step="0.01"
value={msc}
onChange={(e) => setMsc(e.target.value)}
/>
</div>
<div className="glass__form__group">
<button type="submit" className="glass__form__btn">
Submit
</button>
</div>
</form>
</div>
)
}
export default Glass
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment