##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
Last active
December 7, 2019 11:22
-
-
Save Joyce-O/941fb048f46fb127d375ec04024a1042 to your computer and use it in GitHub Desktop.
Narcissistic Numbers
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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