Atomic Symbol Generator:
This is a cool tool to turn yourself into an atomic element! The user is required to put in his/her name, weight and age and the code arrange the info in the form of an atomic element as shown, along with the configuration (based on the age).
- Atomic Number –> Age
- Atomic Weight –> Weight
- Element Name –> First Name
Source Code:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Atomic Symbol Generator</title>
<link rel="icon" href="Astatine-symbol-At-square-periodic-table-some.jpeg">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 id="title">Atomic Symbol Generator</h1>
<div class="container">
<form id="userData">
<div class="form-group">
<!-- <label for="exampleInputUsername1">Username</label> -->
<!-- <input type="text" class="form-control" id="loginUsername" aria-describedby="usernameHelp" placeholder="Enter Username"> -->
<input type="text" class="form-control" id="fname" value="" placeholder="Enter First Name" aria-label="Name" aria-describedby="addon-wrapping">
</div>
<div class="form-group">
<!-- <label for="exampleInputPassword1">Password</label> -->
<input type="number" class="form-control" id="weight" value="" placeholder="Enter your Weight in KGs">
</div>
<div class="form-group">
<input type="number" class="form-control" id="age" value="" placeholder="Enter your Age in years">
</div>
<a role="button" type="submit" href="#result" class="btn btn-secondary btn-lg" id="generatebtn" onclick="create()">Generate Atomic Symbol</a>
</form>
</div>
<div class="container box hidden" id="result">
<h2>Your atomic symbol:</h2>
<div class="symbolbox">
<p><span class="age">19</span> <span class="weight">85.123</span></p>
<h1 class="elementname">Ya</h1>
<p class="config"><em class="config"></em></p>
<p class="fullname">yashvardhan</p>
</div>
</div>
<script src="index.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Code language: HTML, XML (xml)
style.css
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
html
{
scroll-behavior: smooth;
}
body {
text-align: center;
background-color: #202020;
color: white;
}
h1 {
font-size: 5rem;
font-weight: 500;
color: #DBEDF3;
font-family: "Arvo", sans-serif;
text-shadow: 3px 0 #DA0463;
margin: 30px auto;
padding: 10px 20px;
}
.container
{
margin: 10vh auto 0;
width: 40%;
min-width: 322px;
padding: 5% 5%;
/* border-radius: 20px; */
/* background-color: rgba(255, 255, 255, 0.2); */
}
.container.box{
margin: 0 auto;
padding: 3% 0 100px;
}
form
{
text-align: left;
}
/* label{
font-size: 1.3em;
} */
.form-group
{
margin: 20px auto;
color:rgb(174, 174, 174);
}
.form-control
{
/* border: 1px solid black; */
border: none;
background-color: rgb(242, 242, 242);
/* box-shadow: 10px 10px 100px rgb(197, 192, 192); */
height: 50px;
border-radius: 10px;
font-size: 1.2em;
padding: 5% 5%;
}
.form-control::placeholder
{
color:rgb(174, 174, 174);
font-family: 'Poppins', sans-serif;
font-weight: 500;
}
.btn
{
border: none;
width: 100%;
background-color: #DA0463;
}
.btn:hover
{
background-color: #fa8f47;
border: none;
}
.symbolbox
{
height: 300px;
width: 300px;
border: 6px solid white;
margin: 0 auto;
text-align: left;
}
h2
{
font-family: "Arvo", sans-serif;
margin: 0 auto 80px;
}
.symbolbox p
{
margin: 15px 20px 0;
text-align: left;
}
.symbolbox p span.age
{
font-size: 3rem;
}
.symbolbox p span.weight
{
position: relative;
right: -120px;
top: -10px;
font-size: 1.5rem;
}
.elementname
{
text-align: left;
font-size: 6rem;
font-weight: 500;
color: white;
font-family: "Arvo", sans-serif;
text-shadow:none;
margin: 0px 0;
padding: 0 20px;
display: inline;
text-align: left;
}
p.fullname
{
margin: 0 20px 0;
padding-top: 0px;
font-size: 20px;
}
.hidden
{
display: none;
}
p.config
{
margin: 10px 20px 5px;
}
Code language: CSS (css)
index.js
function putValues(age, weight, symbol, config, fullname)
{
document.querySelector(".symbolbox .age").innerHTML=age;
document.querySelector(".symbolbox .weight").innerHTML=weight;
document.querySelector(".symbolbox .fullname").innerHTML=fullname;
document.querySelector(".symbolbox .config").innerHTML=config;
document.querySelector(".symbolbox .elementname").innerHTML=symbol;
}
function create()
{
var firstName = document.getElementById("fname").value;
let age = document.getElementById("age").value;
age=Number(age);
var weight = document.getElementById("weight").value;
document.getElementById("result").classList.remove("hidden");
let fullname=firstName.toLowerCase();
let symbol=fullname.toUpperCase().substr(0,1)+fullname.substr(1,1);
var config;
switch(age)
{
case 1: config="1s"+"1".sup();;
break;
case 2: config="1s"+"2".sup();
break;
case 3: "[He]"+"2s"+"1".sup();
break;
case 4: config="[He]"+"2s"+"2".sup();
break;
case 5: config="[He]"+"2s"+"2".sup()+"2p"+"1".sup();
break;
case 6: config="[He]"+"2s"+"2".sup()+"2p"+"2".sup();
break;
case 7: config="[He]"+"2s"+"2".sup()+"2p"+"3".sup();
break;
case 8: config="[He]"+"2s"+"2".sup()+"2p"+"4".sup();
break;
case 9: config="[He]"+"2s"+"2".sup()+"2p"+"5".sup();
break;
case 10: config="[He]"+"2s"+"2".sup()+"2p"+"6".sup();
break;
case 11: config="[Ne]"+"3s"+"1".sup();
break;
case 12: config="[Ne]"+"3s"+"2".sup();
break;
case 13: config="[Ne]"+"3s"+"2".sup()+"3p"+"1".sup();
break;
case 14: config="[Ne]"+"3s"+"2".sup()+"3p"+"2".sup();
break;
case 15: config="[Ne]"+"3s"+"2".sup()+"3p"+"3".sup();
break;
case 16: config="[Ne]"+"3s"+"2".sup()+"3p"+"4".sup();
break;
case 17: config="[Ne]"+"3s"+"2".sup()+"3p"+"5".sup();
break;
case 18: config="[Ne]"+"3s"+"2".sup()+"3p"+"6".sup();
break;
case 19: config="[Ar]"+"4s"+"1".sup();
break;
case 20: config="[Ar]"+"4s"+"2".sup();
break;
case 21: config="[Ar]"+"4s"+"2".sup()+"3d"+"1".sup();
break;
case 22: config="[Ar]"+"4s"+"2".sup()+"3d"+"2".sup();
break;
case 23: config="[Ar]"+"4s"+"2".sup()+"3d"+"3".sup();
break;
case 24: config="[Ar]"+"4s"+"1".sup()+"3d"+"5".sup();
break;
case 25: config="[Ar]"+"4s"+"2".sup()+"3d"+"5".sup();
break;
case 26: config="[Ar]"+"4s"+"2".sup()+"3d"+"6".sup();
break;
case 27: config="[Ar]"+"4s"+"2".sup()+"3d"+"7".sup();
break;
case 28: config="[Ar]"+"4s"+"2".sup()+"3d"+"8".sup();
break;
case 29: config="[Ar]"+"4s"+"1".sup()+"3d"+"10".sup();
break;
case 30: config="[Ar]"+"4s"+"2".sup()+"3d"+"10".sup();
break;
case 31: config="[Ar]"+"4s"+"2".sup()+"3d"+"10".sup()+"4p"+"1".sup();
break;
case 32: config="[Ar]"+"4s"+"2".sup()+"3d"+"10".sup()+"4p"+"2".sup();
break;
case 33: config="[Ar]"+"4s"+"2".sup()+"3d"+"10".sup()+"4p"+"3".sup();
break;
case 34: config="[Ar]"+"4s"+"2".sup()+"3d"+"10".sup()+"4p"+"4".sup();
break;
case 35: config="[Ar]"+"4s"+"2".sup()+"3d"+"10".sup()+"4p"+"5".sup();
break;
case 36: config="[Ar]"+"4s"+"2".sup()+"3d"+"10".sup()+"4p"+"6".sup();
break;
case 37: config="[Kr]"+"5s"+"1".sup();
break;
case 38: config="[Kr]"+"5s"+"2".sup();
break;
case 39: config="[Kr]"+"5s"+"2".sup()+"4d"+"1".sup();
break;
case 40: config="[Kr]"+"5s"+"2".sup()+"4d"+"2".sup();
break;
case 41: config="[Kr]"+"5s"+"2".sup()+"4d"+"3".sup();
break;
case 42: config="[Kr]"+"5s"+"1".sup()+"4d"+"5".sup();
break;
case 43: config="[Kr]"+"5s"+"2".sup()+"4d"+"5".sup();
break;
case 44: config="[Kr]"+"5s"+"2".sup()+"4d"+"6".sup();
break;
case 45: config="[Kr]"+"5s"+"2".sup()+"4d"+"7".sup();
break;
case 46: config="[Kr]"+"5s"+"2".sup()+"4d"+"8".sup();
break;
case 47: config="[Kr]"+"5s"+"1".sup()+"4d"+"10".sup();
break;
case 48: config="[Kr]"+"5s"+"2".sup()+"4d"+"10".sup();
break;
case 49: config="[Kr]"+"5s"+"2".sup()+"4d"+"10".sup()+"5p"+"1".sup();
break;
case 50: config="[Kr]"+"5s"+"2".sup()+"4d"+"10".sup()+"5p"+"2".sup();
break;
case 51: config="[Kr]"+"5s"+"2".sup()+"4d"+"10".sup()+"5p"+"3".sup();
break;
case 52: config="[Kr]"+"5s"+"2".sup()+"4d"+"10".sup()+"5p"+"4".sup();
break;
case 53: config="[Kr]"+"5s"+"2".sup()+"4d"+"10".sup()+"5p"+"5".sup();
break;
case 54: config="[Kr]"+"5s"+"2".sup()+"4d"+"10".sup()+"5p"+"6".sup();
break;
case 55: config="[Xe]"+"6s"+"1".sup();
break;
case 56: config="[Xe]"+"6s"+"2".sup();
break;
case 57: config="[Xe]"+"6s"+"2".sup()+"5d"+"1".sup();
break;
case 58: config="[Xe]"+"6s"+"2".sup()+"5d"+"1".sup()+"4f"+"1".sup();
break;
case 59: config="[Xe]"+"6s"+"2".sup()+"4f"+"3".sup();
break;
case 60: config="[Xe]"+"6s"+"2".sup()+"4f"+"4".sup();
break;
case 61: config="[Xe]"+"6s"+"2".sup()+"4f"+"5".sup();
break;
case 62: config="[Xe]"+"6s"+"2".sup()+"4f"+"6".sup();
break;
case 63: config="[Xe]"+"6s"+"2".sup()+"4f"+"7".sup();
break;
case 64: config="[Xe]"+"6s"+"2".sup()+"5d"+"1".sup()+"4f"+"7".sup();
break;
case 65: config="[Xe]"+"6s"+"2".sup()+"4f"+"9".sup();
break;
case 66: config="[Xe]"+"6s"+"2".sup()+"4f"+"10".sup();
break;
case 67: config="[Xe]"+"6s"+"2".sup()+"4f"+"11".sup();
break;
case 68: config="[Xe]"+"6s"+"2".sup()+"4f"+"12".sup();
break;
case 69: config="[Xe]"+"6s"+"2".sup()+"4f"+"13".sup();
break;
case 70: config="[Xe]"+"6s"+"2".sup()+"4f"+"14".sup();
break;
case 71: config="[Xe]"+"6s"+"2".sup()+"5d"+"1".sup()+"4f"+"14".sup();
break;
case 72: config="[Xe]"+"6s"+"2".sup()+"5d"+"2".sup()+"4f"+"14".sup();
break;
case 73: config="[Xe]"+"6s"+"2".sup()+"5d"+"3".sup()+"4f"+"14".sup();
break;
case 74: config="[Xe]"+"6s"+"2".sup()+"5d"+"4".sup()+"4f"+"14".sup();
break;
case 75: config="[Xe]"+"6s"+"2".sup()+"5d"+"5".sup()+"4f"+"14".sup();
break;
case 76: config="[Xe]"+"6s"+"2".sup()+"5d"+"6".sup()+"4f"+"14".sup();
break;
case 77: config="[Xe]"+"6s"+"2".sup()+"5d"+"7".sup()+"4f"+"14".sup();
break;
case 78: config="[Xe]"+"6s"+"1".sup()+"5d"+"9".sup()+"4f"+"14".sup();
break;
case 79: config="[Xe]"+"6s"+"1".sup()+"5d"+"10".sup()+"4f"+"14".sup();
break;
case 80: config="[Xe]"+"6s"+"2".sup()+"5d"+"10".sup()+"4f"+"14".sup();
break;
case 81: config="[Xe]"+"6s"+"2".sup()+"5d"+"10".sup()+"4f"+"14".sup()+"6p"+"1".sup();
break;
case 82: config="[Xe]"+"6s"+"2".sup()+"5d"+"10".sup()+"4f"+"14".sup()+"6p"+"2".sup();
break;
case 83: config="[Xe]"+"6s"+"2".sup()+"5d"+"10".sup()+"4f"+"14".sup()+"6p"+"3".sup();
break;
case 84: config="[Xe]"+"6s"+"2".sup()+"5d"+"10".sup()+"4f"+"14".sup()+"6p"+"4".sup();
break;
case 85: config="[Xe]"+"6s"+"2".sup()+"5d"+"10".sup()+"4f"+"14".sup()+"6p"+"5".sup();
break;
case 86: config="[Xe]"+"6s"+"2".sup()+"5d"+"10".sup()+"4f"+"14".sup()+"6p"+"6".sup();
break;
case 87: config="[Rn]"+"7s"+"1".sup();
break;
case 88: config="[Rn]"+"7s"+"2".sup();
break;
case 89: config="[Rn]"+"7s"+"2".sup()+"6d"+"1".sup();
break;
case 90: config="[Rn]"+"7s"+"2".sup()+"6d"+"2".sup();
break;
case 91: config="[Rn]"+"7s"+"2".sup()+"6d"+"1".sup()+"5f"+"2".sup();
break;
case 92: config="[Rn]"+"7s"+"2".sup()+"6d"+"1".sup()+"5f"+"3".sup();
break;
case 93: config="[Rn]"+"7s"+"2".sup()+"6d"+"1".sup()+"5f"+"4".sup();
break;
case 94: config="[Rn]"+"7s"+"2".sup()+"5f"+"6".sup();
break;
case 95: config="[Rn]"+"7s"+"2".sup()+"5f"+"7".sup();
break;
case 96: config="[Rn]"+"7s"+"2".sup()+"6d"+"1".sup()+"5f"+"7".sup();
break;
case 97: config="[Rn]"+"7s"+"2".sup()+"5f"+"9".sup();
break;
case 98: config="[Rn]"+"7s"+"2".sup()+"5f"+"10".sup();
break;
case 99: config="[Rn]"+"7s"+"2".sup()+"5f"+"11".sup();
break;
case 100: config="[Rn]"+"7s"+"2".sup()+"5f"+"12".sup();
break;
case 101: config="[Rn]"+"7s"+"2".sup()+"5f"+"13".sup();
break;
case 102: config="[Rn]"+"7s"+"2".sup()+"5f"+"14".sup();
break;
default: config="null";
}
putValues(age, weight, symbol, config, fullname);
}
Code language: JavaScript (javascript)
Output:
