Narcissistic Numbers

index.html

<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.markdown

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.

script.js

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);

style.css

  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) {
   
  }