Skip to content

Instantly share code, notes, and snippets.

@Joyce-O

Joyce-O/index.html

Last active Dec 7, 2019
Embed
What would you like to do?
Narcissistic Numbers
<div class="container">
<div class="wrapper">
<section id="intro">
<p id="hey">Hey!</p>
<p id="do">Do you know that humans are not the only ones that have to put up with narcissists?</p>
</section>
<section id="textarea">
<div id="modal">
<p>Try another number?</p>
<div id="btn">
<input id="yes" type="button" value="Yes">
<!-- <input id="no" type="button" value="No"> -->
</div>
</div>
<div id="leg">|</div>
<div id="narc"></div>
<div id="narcno"></div>
<p id="txt"></p>
<p id="enter">Enter a number below to see if your favorite number is in fact a <span><a id="narcissist" href="https://en.wikipedia.org/wiki/Narcissistic_number" target="_blank">narcissistic number<a/></span>.</p>
<form id="search-form">
<input type="number" id="num" placeholder="Enter your number 123..." required />
<input type="button" id="submit" value="submit" />
</form>
</section>
</div>
</div>

Narcissistic Numbers

##Programme that takes a positive integer and checks if it is a narcissistic number or not. For example: 153 (3 digits): 1^3 + 5^3 + 3^3 = 1 + 125 + 27 = 153 1634 (4 digits): 1^4 + 6^4 + 3^4 + 4^4 = 1 + 1296 + 81 + 256 = 1634

A Pen by joyce obi on CodePen.

License.

const submit = document.getElementById('submit');
const enter = document.getElementById('enter');
const narc = document.getElementById('narc');
const narcno = document.getElementById('narcno');
const leg = document.getElementById('leg');
const modal = document.getElementById('modal');
const yes = document.getElementById('yes');
const no = document.getElementById('no');
const txt = document.getElementById("txt");
const textarea = document.getElementById("textarea");
const searchForm = document.getElementById("search-form");
const isNarcissistic = (num) => {
let digits = Array.from(String(num), Number);
const sum = digits.reduce((acc, curr) => {
return acc + Math.pow(Number(curr), digits.length);
}, 0);
return (sum === num);
};
const display = () => {
let num = document.getElementById("num").value;
if(num === "") {
console.log("Number expected");
return;
}
num = Number(num);
searchForm.style.display = "none";
enter.style.display = "none";
if (isNarcissistic(num)=== true) {
// alert("YES");
textarea.style.borderColor = "green";
leg.style.display = "block";
let displayNum = narc.innerHTML = num;
narc.style.display = "block";
txt.innerHTML = `Yes! ${num} is a narcissist!!`;
txt.style.display = "block";
modal.style.display = "flex";
modal.style.justifyContent = "center";
} else if (isNarcissistic(num) === false) {
textarea.style.borderColor = "blue";
let displayNum = narcno.innerHTML = num;
narcno.style.display = "block";
txt.innerHTML = `Nope! <strong>${num}</strong> is NOT a narcissist!!`;
txt.style.display = "block";
modal.style.display = "flex";
modal.style.justifyContent = "center";
} else {
return;
}
}
//console.log(isNarcissistic(153));
const yesModal = () => {
modal.style.display = 'none';
txt.style.display = "none";
leg.style.display = "none";
narcno.style.display = "none";
narc.style.display = "none";
if (yes) {
searchForm.style.display = "block";
textarea.style.borderColor = "rgb(32, 17, 19)";
enter.style.display = "inline-block";
}
return;
}
// const noModal = () => {
// modal.style.display = 'none';
// }
submit.addEventListener('click', display);
yes.addEventListener('click', yesModal);
// no.addEventListener('click', noModal);
section {display:block}
html {
box-sizing: border-box;
}
*, *::before, *:after {
box-sizing: inherit;
}
body {
font-family: sans-serif;
margin: 0;
padding: 0;
background: rgb(41, 35, 29);
}
.container {
display: flex;
flex-direction: column;
background-image: linear-gradient(rgb(245, 244, 239),rgb(122, 88, 25));
height: 90%;
margin: 40px;
}
.wrapper {
display: flex;
}
.wrapper section {
padding: 10px;
flex: 1 100%;
margin: 20px;
align-self: center;
}
.wrapper p {
text-align: center;
font-weight: bolder;
font-family: Verdana, Geneva, Tahoma, sans-serif;
letter-spacing: .1em;
padding-top: 0;
padding-bottom: 0;
color: brown;
}
#intro {
width: 250px;
font-style: normal;
/* text-shadow: rgb(246, 246, 248) 1px 1px; */
background: rgb(24, 24, 248);
height: 150px;
border: 4px solid rgb(32, 17, 19);
border-radius: 125px;
}
#do{
color: rgb(246, 233, 244);
font-size: 18px;
font-style: oblique;
}
#hey {
font-size: 12px;
font-weight: bolder;
transform: scale(2);
color: rgb(246, 233, 244);
}
#enter {
display: inline-block;
margin: 20px;
padding: 20px;
}
#narcissist {
/* text-decoration: none; */
color: rgb(32, 17, 19);
outline: none;
font-stretch: wider;
}
#textarea {
background: white;
width: 250px;
display: flex;
flex-direction: column;
height: 300px;
position: relative;
color: rgb(32, 17, 19);
border: 4px solid rgb(32, 17, 19);
border-radius: 125px;
}
#textarea #modal {
background: lightblue;
height: 100%;
width: 100%;
display: none;
border-radius: 125px;
justify-content: center;
align-items: center;
flex-direction: column;
top: 0;
left: 0;
z-index: 0;
position: absolute;
padding: 0;
opacity: 0;
transition: opacity .5s;
animation: yourName 2800ms ease-in-out 5s forwards;
}
@keyframes yourName {
0% /* (from) */ {
opacity: 0;
}
100% /* (to) */ {
opacity: 1;
}
}
#textarea #modal p, button {
color: rgba(10, 0, 0, 1);
font-size: 1.5em;
z-index: 1;
line-height: 150px;
font-family: 'arial';
text-align: center;
}
#btn {
display: flex;
flex-direction: row;
}
#btn input {
height: 60px;
width: 70px;
font-size: 18px;
text-align: center;
padding: 5px;
border: none;
margin: 10px;
}
#btn #yes {
cursor: pointer;
background-color:#207cca;
padding: 5px;
color: rgb(246, 233, 244);
margin-right: 5px;
border-radius: 20px;
margin-top: 0;
}
#btn #no {
cursor: pointer;
color: brown;
margin-top: 0;
background-color: transparent;
font-size: 24px;
}
#leg {
width: fit-content;
align-self: center;
text-align: center;
transform: scale(3);
padding-top: 10px;
color: lightblue;
border-bottom: 1px dotted;
display: none;
}
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
#txt {
display: none;
margin: 10px;
margin-top: calc(10px - 10px);
padding: 10px 0;
text-align: center;
font-weight: bolder;
font-size: 2em;
font-family: myFirstFont, Verdana, Geneva, Tahoma, sans-serif;
animation-name: animate;
animation-duration: 2s;
color: rgba(72, 56, 214, 0.822);
transform: skewX(15deg, 5deg);
animation-fill-mode: none;
}
@keyframes animate {
from {color:rgba(214, 56, 193, 0.644) }
to {color: rgba(72, 56, 214, 0.822); }
}
#narc {
display: none;
justify-self: stretch;
align-self: center;
font-size: 2em;
height: 100px;
width: 100px;
border-radius: 50px;
text-align: center;
transform: scale(5);
margin-top: 40px;
padding-top: 20px;
animation: roll 2s ease-in-out;
transform: rotate(30deg);
opacity: .4;
background: lightblue;
font-weight: bold;
color: rgba(160, 30, 30, 0.472);
}
@keyframes roll {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
#narcno {
display: none;
justify-self: stretch;
align-self: center;
z-index: 2;
font-size: 2em;
height: 100px;
width: 100px;
text-align: center;
margin-top: 40px;
padding-top: 20px;
animation: rollno 2s ease-in-out;
opacity: .9;
font-weight: bold;
color: rgba(160, 30, 30, 0.479);
}
@keyframes rollno {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
transform: scale(5);
}
}
#search-form {
/* Fallback color for non-css3 browsers */
background: #e1e1e1;
width: 365px;
margin: 0 auto;
/* Gradients */
background: -webkit-gradient( linear,left top, left bottom, color-stop(0, rgb(243,243,243)), color-stop(1, rgb(225,225,225)));
background: -moz-linear-gradient( center top, rgb(243,243,243) 0%, rgb(225,225,225) 100%);
/* Rounded Corners */
border-radius: 17px;
-webkit-border-radius: 17px;
-moz-border-radius: 17px;
/* Shadows */
box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);
}
/*** TEXT BOX ***/
#num{
/* Fallback color for non-css3 browsers */
background: #fafafa;
/* Gradients */
background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(250,250,250)), color-stop(1, rgb(230,230,230)));
background: -moz-linear-gradient( center top, rgb(250,250,250) 0%, rgb(230,230,230) 100%);
border: 0;
border-bottom: 1px solid #fff;
border-right: 1px solid rgba(255,255,255,.8);
font-size: 16px;
margin: 4px;
padding: 18px;
width: 250px;
/* Rounded Corners */
border-radius: 17px;
-webkit-border-radius: 17px;
-moz-border-radius: 17px;
/* Shadows */
box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);
-webkit-box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);
-moz-box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);
}
/*** FOCUSED ***/
#num:focus{
outline: none;
/* Fallback color for non-css3 browsers */
background: #fff;
/* Gradients */
background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(255,255,255)), color-stop(1, rgb(235,235,235)));
background: -moz-linear-gradient( center top, rgb(255,255,255) 0%, rgb(235,235,235) 100%);
}
/*** SEARCH BUTTON ***/
#submit{
/* Fallback color for non-css3 browsers */
background: #44921f;
/* Gradients */
background: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(79,188,32)), color-stop(0.15, rgb(73,157,34)), color-stop(0.88, rgb(62,135,28)), color-stop(1, rgb(49,114,21)));
background: -moz-linear-gradient( center top, rgb(79,188,32) 0%, rgb(73,157,34) 15%, rgb(62,135,28) 88%, rgb(49,114,21) 100%);
border: 0;
color: #eee;
cursor: pointer;
float: right;
font: 16px 'Raleway', sans-serif;
font-weight: bold;
height: 50px;
margin: 5px 4px 0;
text-shadow: 0 -1px 0 rgba(0,0,0,.3);
width: 84px;
outline: none;
/* Rounded Corners */
border-radius: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
/* Shadows */
box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.4);
-moz-box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.2);
-webkit-box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.4);
}
/*** SEARCH BUTTON HOVER ***/
#submit:hover {
/* Fallback color for non-css3 browsers */
background: #4ea923;
/* Gradients */
background: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(89,222,27)), color-stop(0.15, rgb(83,179,38)), color-stop(0.8, rgb(66,143,27)), color-stop(1, rgb(54,120,22)));
background: -moz-linear-gradient( center top, rgb(89,222,27) 0%, rgb(83,179,38) 15%, rgb(66,143,27) 80%, rgb(54,120,22) 100%);
}
/* small screens */
@media only screen and (max-height: 440px) {
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.