{"__browser":{"country":"US","device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer; ambient-light-sensor; camera; display-capture; encrypted-media; geolocation; gyroscope; microphone; midi; payment; vr; web-share","iframe_sandbox":"allow-forms allow-modals allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation-by-user-activation allow-downloads allow-presentation"},"__graphql":{"data":{"data":{"sessionUser":{"id":"VoDkNZ","name":"Captain Anonymous","title":"Captain Anonymous","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0","currentContext":{"id":"VoDkNZ","title":"Captain Anonymous","name":"Captain Anonymous","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0","username":"anon","__typename":"User"},"currentTeamId":null,"username":"anon","admin":false,"anon":true,"pro":false,"verified":false,"teams":[],"__typename":"User"}}},"url":"https://codepen.io/graphql","api":"cprails"},"__user":{"anon":true,"base_url":"/anon/","cohorts":[],"current_team_hashid":null,"current_team_id":0,"hashid":"VoDkNZ","id":1,"itemType":"user","name":"Captain Anonymous","paid":false,"tier":0,"username":"anon","created_at":null,"email_verified":null,"collections_count":0,"collections_private_count":0,"followers_count":0,"followings_count":0,"pens_count":0,"pens_private_count":0,"projects_count":0,"projects_private_count":0},"__firebase":{"config":{"apiKey":"AIzaSyBgLAe7N_MdFpuVofMkcQLGwwhUu5tuxls","authDomain":"codepen-store-production.firebaseapp.com","databaseURL":"https://codepen-store-production.firebaseio.com","disabled":false,"projectId":"codepen-store-production"},"token":"eyJhbGciOiJSUzI1NiJ9.eyJhdWQiOiJodHRwczovL2lkZW50aXR5dG9vbGtpdC5nb29nbGVhcGlzLmNvbS9nb29nbGUuaWRlbnRpdHkuaWRlbnRpdHl0b29sa2l0LnYxLklkZW50aXR5VG9vbGtpdCIsImNsYWltcyI6eyJvd25lcklkIjoiVm9Ea05aIiwiYWRtaW4iOmZhbHNlfSwiZXhwIjoxNjk2MTA1OTA0LCJpYXQiOjE2OTYxMDIzMDQsImlzcyI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInN1YiI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInVpZCI6IlZvRGtOWiJ9.sAqhOGUhdHLN2abSS4sPpff9qCJiQyezUUq9gdF3c_P3pUYcpFs435900CUMM-tF65Ue3TB9buIZIB5nafsNXa142SwHsUGfKTEmy-2XlkywhOPnN2r7GaNTexsFUuZWKwh96oKNpqjVW_BcsPWm92TIkQeuaWPMiDuYEjJkJ5-2erJcumnSYxDQyUK3fzsfHuQ4Nhz6qvCNMZ7R5aMDvgtZx96ppQXwND3ifdEIeCPgmmjYfcLwUxrSYB02VxEGrq3dwJ_hzB6hVyLC3yY6UprANKVgEfRoLjn4U1A94HEh004tK6RFRmLrYPdTCVbmpFNdS1d3HbU0ViEiix5B0w"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__item":"{\"id\":39516237,\"user_id\":219932,\"html\":\"<main class=\\\"wrapper\\\">\\n \\n <header>\\n <h1 class=\\\"main-title\\\"><\\/h1>\\n <h3>A New Game No One Asked For<\\/h3>\\n <p>Enter a number (any positive integer) to view the Fibonacci sequence up to that number with prime numbers highlighted and summed. Will that sum be greater than the original number? Play to find out!<\\/p>\\n <\\/header>\\n \\n <div class=\\\"row row-anchor\\\">\\n <a id=\\\"results-anchor\\\"><\\/a>\\n <\\/div>\\n \\n <div class=\\\"row row-form\\\">\\n <form class=\\\"form\\\" id=\\\"form\\\" action=\\\"javascript:void(0);\\\" method=\\\"post\\\">\\n <label for=\\\"number-input\\\">Enter a number<\\/label>\\n <input id=\\\"number-input\\\" type=\\\"number\\\" placeholder=\\\"123\\\" required \\/>\\n <input id=\\\"btn-submit\\\" value=\\\"GO\\\" type=\\\"submit\\\" \\/>\\n <\\/form>\\n <\\/div>\\n \\n <div class=\\\"row row-command\\\">\\n <div class=\\\"command result-is-greater\\\">\\n <p>Hazzah! Your number is <span class=\\\"original-num\\\"><\\/span>, which is less than <span class=\\\"calculated-num\\\"><\\/span> by <span class=\\\"difference\\\"><\\/span>.<\\/p>\\n <\\/div>\\n <div class=\\\"command result-is-less\\\">\\n <p>Great Scott! Your number is <span class=\\\"original-num\\\"><\\/span>, which is greater than <span class=\\\"calculated-num\\\"><\\/span> by <span class=\\\"difference\\\"><\\/span>.<\\/p>\\n <\\/div>\\n <div class=\\\"command result-is-equal\\\">\\n <p>Craaazy. Your number is <span class=\\\"original-num\\\"><\\/span>, which is equal to <span class=\\\"calculated-num\\\"><\\/span>.<\\/p>\\n <\\/div>\\n <\\/div>\\n \\n <div class=\\\"row row-loader\\\">\\n <div class=\\\"loader-wrapper\\\">\\n <div class=\\\"loader\\\"><div><\\/div><div><\\/div><div><\\/div><div><\\/div><\\/div>\\n <\\/div>\\n <\\/div>\\n \\n <div class=\\\"row row-results\\\">\\n <div class=\\\"results\\\">\\n <div class=\\\"list-headers\\\">\\n <h4 class=\\\"title\\\">Fibonacci<br>Numbers<\\/h4>\\n <h4 class=\\\"title\\\">Fibonacci<br>Prime Numbers<\\/h4>\\n <\\/div>\\n <div class=\\\"list-wrapper\\\"><\\/div>\\n <div class=\\\"total-wrapper\\\">\\n <p class=\\\"total\\\"><\\/p>\\n <\\/div>\\n <\\/div>\\n <\\/div>\\n \\n<\\/main>\",\"css\":\"\\/\\/ mixins\\n\\n@mixin container() {\\n width: 80%;\\n max-width: 800px;\\n @media (max-width: 768px) {\\n width: 90%;\\n }\\n}\\n\\n\\/\\/ base\\n\\n@import url('https:\\/\\/fonts.googleapis.com\\/css?family=Source+Code+Pro:400,900&display=swap');\\n\\n* {\\n box-sizing: border-box;\\n font-family: 'Source Code Pro', monospace;\\n}\\n*::before,\\n*::after {\\n box-sizing: inherit;\\n}\\nhtml {\\n box-sizing: border-box;\\n}\\nbody {\\n margin: 0;\\n padding: 0;\\n}\\n\\nh1, h3, h4, p, label {\\n color: darkslategray;\\n}\\nh1 {\\n margin: 0;\\n padding: 10px 0 20px 0;\\n font-size: 4rem;\\n font-weight: 900;\\n text-transform: uppercase;\\n letter-spacing: 1px;\\n @media (max-width: 500px) {\\n font-size: 2rem;\\n }\\n}\\nh3 {\\n margin: 0;\\n padding: 0 0 20px 0;\\n font-size: 2rem;\\n font-weight: 400;\\n @media (max-width: 768px) {\\n font-size: 1.75rem;\\n }\\n}\\nh4 {\\n width: 50%;\\n margin: 0;\\n padding: 0;\\n font-size: 1.25rem;\\n font-weight: 400;\\n}\\np {\\n margin: 0;\\n padding: 0;\\n font-weight: 400;\\n line-height: 1.6;\\n overflow-wrap: break-word;\\n}\\n\\n\\/\\/ layout\\n\\n.wrapper {\\n display: flex;\\n flex-direction: column;\\n justify-content: flex-start;\\n align-items: center;\\n width: 100%;\\n min-height: 100vh;\\n padding-top: 20px;\\n background: Cornsilk;\\n}\\nheader {\\n @include container();\\n padding: 10px 0;\\n}\\n.row {\\n @include container();\\n display: flex;\\n align-items: flex-start;\\n justify-content: flex-start;\\n margin: 10px;\\n padding: 20px;\\n &.row-anchor {\\n margin: 0;\\n padding: 0;\\n }\\n &.row-form {\\n background: PeachPuff;\\n }\\n &.row-command {\\n display: none;\\n background: PeachPuff;\\n }\\n &.row-loader {\\n display: none;\\n }\\n &.row-results {\\n display: none;\\n background: PeachPuff;\\n }\\n .command {\\n width: 100%;\\n p {\\n font-size: 2rem;\\n line-height: 1.4;\\n }\\n &.result-is-greater,\\n &.result-is-less,\\n &.result-is-equal {\\n display: none;\\n .original-num {\\n font-weight: 900;\\n color: darken(SeaGreen, 5%);\\n }\\n .calculated-num {\\n font-weight: 900;\\n color: OrangeRed;\\n }\\n .difference {\\n font-weight: 900;\\n color: indigo;\\n }\\n }\\n }\\n .results {\\n width: 100%;\\n }\\n}\\n\\n\\/\\/ form\\n\\n.form {\\n display: flex;\\n flex-wrap: wrap;\\n}\\nlabel {\\n width: 200px;\\n display: block;\\n padding: 0 0 15px 0;\\n font-size: 2rem;\\n @media (max-width: 768px) {\\n width: 100%;\\n }\\n}\\ninput {\\n margin: 0;\\n padding: 20px;\\n border: 0;\\n outline: 0;\\n}\\ninput[type=number]::-webkit-inner-spin-button, \\ninput[type=number]::-webkit-outer-spin-button { \\n -webkit-appearance: none; \\n}\\n#number-input {\\n width: 200px;\\n font-size: 2rem;\\n color: SeaGreen;\\n background: lighten(seagreen, 60%);\\n &::-webkit-input-placeholder {\\n color: lighten(seagreen, 40%);\\n }\\n @media (max-width: 420px) {\\n width: 100px;\\n font-size: 1rem;\\n }\\n @media (min-width: 769px) {\\n margin-left: 20px;\\n }\\n}\\n\\n#btn-submit {\\n position: relative;\\n padding: 20px 30px;\\n font-family: 'Source Code Pro', monospace;\\n font-size: 2rem;\\n text-transform: uppercase;\\n letter-spacing: 1px;\\n color: MediumSpringGreen;\\n background: SeaGreen;\\n transition: all 0.2s ease-in-out;\\n transform: translateX(-10px);\\n cursor: pointer;\\n &:hover {\\n background: darken(SeaGreen, 10%);\\n }\\n @media (max-width: 420px) {\\n font-size: 1rem;\\n }\\n}\\n#number-input:valid {\\n + #btn-submit {\\n transform: translateX(0);\\n }\\n}\\n\\n\\/\\/ loader\\n\\n.loader-wrapper {\\n display: block;\\n position: absolute;\\n left: 50%;\\n transform: translateX(-50%);\\n z-index: 1;\\n text-align: center;\\n}\\n.loader {\\n display: inline-block;\\n position: relative;\\n width: 64px;\\n height: 64px;\\n div {\\n box-sizing: border-box;\\n display: block;\\n position: absolute;\\n width: 51px;\\n height: 51px;\\n margin: 6px;\\n border: 6px solid white;\\n border-radius: 50%;\\n animation: loader 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\\n border-color: Indigo transparent transparent transparent;\\n &:nth-child(1) {\\n animation-delay: -0.45s;\\n }\\n &:nth-child(2) {\\n animation-delay: -0.3s;\\n }\\n &:nth-child(3) {\\n animation-delay: -0.15s;\\n }\\n }\\n}\\n@keyframes loader {\\n 0% {\\n transform: rotate(0deg);\\n }\\n 100% {\\n transform: rotate(360deg);\\n }\\n}\\n\\n\\/\\/ output\\n\\n.list-headers {\\n display: none;\\n .title {\\n padding-bottom: 20px;\\n }\\n}\\n#fib-list { \\n position: relative;\\n display: flex;\\n flex-direction: column;\\n justify-content: flex-start;\\n align-items: flex-start;\\n list-style: none;\\n margin: 0;\\n padding: 0;\\n color: cornsilk;\\n li {\\n display: inline;\\n width: 50%;\\n transform: translateX(0);\\n span {\\n display: inline-block;\\n margin: 0 0 5px 0;\\n padding: 10px;\\n background: darkslategray;\\n }\\n &.prime {\\n animation: slideRight 0.75s ease 0.75s forwards;\\n span {\\n background: OrangeRed;\\n }\\n }\\n }\\n &::before {\\n content: '+';\\n position: absolute;\\n left: -2px;\\n bottom: -5px;\\n width: 46%;\\n margin-top: 4px;\\n color: darkslategray;\\n transform: translateX(100%);\\n }\\n &::after {\\n content: '';\\n width: 50%;\\n height: 3px;\\n margin-top: 20px;\\n background: darkslategray;\\n transform: translateX(100%);\\n }\\n}\\n@keyframes slideRight {\\n from {\\n transform: translateX(0);\\n }\\n to {\\n transform: translateX(100%);\\n }\\n}\\n\\n\\/\\/ total\\n\\n.total-wrapper {\\n display: none;\\n position: relative;\\n top: 100%;\\n left: calc(50% - 65px);\\n width: 50%;\\n height: 60px;\\n padding: 20px 0 0 0;\\n .total {\\n padding: 0;\\n font-size: 2rem;\\n font-weight: 900;\\n color: OrangeRed;\\n &::before {\\n position: relative;\\n content: 'total';\\n top: 0;\\n left: -10px;\\n padding: 0 5px;\\n font-size: 1.25rem;\\n font-weight: 400;\\n color: darkslategray;\\n }\\n }\\n}\\n\",\"js\":\"const calculatedNum = $('.calculated-num'),\\n originalNum = $('.original-num'),\\n difference = $('.difference'),\\n loaderWrapper = $('.loader-wrapper'),\\n listHeader = $('.list-headers'),\\n listWrapper = $('.list-wrapper'),\\n totalWrapper = $('.total-wrapper'),\\n total = $('.total');\\n\\n\\/\\/ create array of fibonacci numbers with a specified number of elements\\n\\/\\/ https:\\/\\/www.30secondsofcode.org\\/snippet\\/fibonacci\\nconst fibonacci = num =>\\n Array.from({ length: num }).reduce(\\n (acc, cur, idx, src) => acc.concat(idx > 1 ? acc[idx - 1] + acc[idx - 2] : idx), []\\n );\\n\\n\\/\\/ sum an array\\nconst sum = arr => arr.reduce((total,amount) => total + amount, 0);\\n\\n\\/\\/ create array of fibonacci numbers less than a specified number\\nconst upTo = num =>\\n Array.from({ length: num }).reduce(\\n (acc, cur, idx, src) => acc.concat(idx > 1 ? acc[idx - 1] + acc[idx - 2] : idx).filter(accNum => accNum < num), []\\n );\\n\\n\\/\\/ determine if a number is prime\\nfunction isItPrime(num) {\\n if (num === 1 || num === 0) {\\n return false;\\n } else if (num === 2) {\\n return true;\\n } else {\\n for(var x = 2; x < num; x++) {\\n if(num % x === 0) {\\n return false;\\n }\\n }\\n return true; \\n }\\n}\\n\\n\\/\\/ generate markup from an array\\nconst createList = fibArr => '<ul id=\\\"fib-list\\\">' + fibArr.map(function (fibNum) {\\n\\tif (isItPrime(fibNum)) {\\n return '<li class=\\\"prime\\\"><span>' + fibNum + '<\\/span><\\/li>';\\n } else {\\n return '<li><span>' + fibNum + '<\\/span><\\/li>';\\n }\\n}).join('') + '<\\/ul>';\\n\\n\\/\\/ append that markup to list wrapper\\nfunction appendList(fibList) {\\n listWrapper.append(fibList).promise().done(function(){\\n loaderWrapper.hide();\\n });\\n}\\n\\n\\/\\/ create array of prime numbers from another array\\nconst primesArr = upToArr => upToArr.filter((num) => {\\n for (var i = 0; i < upToArr.length; i++) {\\n if (isItPrime(num)) return true;\\n }\\n return false;\\n});\\n\\n\\/\\/ const testArrTwo = [2, 3, 4, 5, 6, 7, 8, 9, 10]\\n\\/\\/ console.log(\\\"primesArr = \\\" + primesArr(testArrTwo));\\n\\n\\/\\/ fill in and display commands based on results\\nfunction madLibs(primesSum, original) {\\n if (primesSum > original) {\\n \\/\\/ if primesSum > original, show first command block\\n let calculatedDiff = primesSum - original;\\n difference.text(calculatedDiff);\\n $(\\\".result-is-greater\\\").fadeIn(\\\"fast\\\");\\n } else if (primesSum < original) {\\n \\/\\/ if primesSum < original, show second command block\\n let calculatedDiff = original - primesSum;\\n difference.text(calculatedDiff);\\n $(\\\".result-is-less\\\").fadeIn(\\\"fast\\\");\\n } else {\\n if (primesSum === original) {\\n console.log(\\\"primesSum and original are equal in both value and type. primesSum is \\\" + primesSum + \\\" with type \\\" + typeof primesSum + \\\" and original is \\\" + original + \\\" with type \\\" + typeof original);\\n } else {\\n console.log(\\\"uh-oh, primesSum and original are equal in value but not in type. primesSum is \\\" + primesSum + \\\" with type \\\" + typeof primesSum + \\\" and original is \\\" + original + \\\" with type \\\" + typeof original);\\n }\\n \\/\\/ if primesSum === original, show third command block\\n $(\\\".result-is-equal\\\").fadeIn(\\\"fast\\\");\\n }\\n}\\n\\nfunction typeTitle() {\\n var srcText = 'Prime Objective';\\n var i = 0;\\n var result = srcText[i];\\n var interval = setInterval(function() {\\n if (i == srcText.length - 1) {\\n clearInterval(interval);\\n return;\\n }\\n i++;\\n result += srcText[i].replace(\\\"\\\\n\\\", \\\"<br \\/>\\\");\\n $(\\\".main-title\\\").html(result);\\n }, 50);\\n return true;\\n}\\n\\n\\/\\/ scroll on submit\\nfunction scrollToAnchor(){\\n var aTag = $(\\\"#results-anchor\\\");\\n $(\\\"html,body\\\").animate({scrollTop: aTag.offset().top},\\\"fast\\\");\\n}\\n\\n\\/\\/ clear for loader\\nfunction clearForLoader() {\\n var r = $.Deferred();\\n \\/\\/ console.log(\\\"clearForLoader begun\\\");\\n $('.row-command, .row-results').hide();\\n $(\\\".result-is-greater\\\").hide();\\n $(\\\".result-is-less\\\").hide();\\n $(\\\".result-is-equal\\\").hide();\\n $('.row-loader').show();\\n loaderWrapper.show();\\n listHeader.hide();\\n listWrapper.empty();\\n total.hide();\\n setTimeout(function() {\\n \\/\\/ console.log(\\\"clearForLoader log\\\");\\n scrollToAnchor();\\n r.resolve();\\n }, 250);\\n \\/\\/ console.log(\\\"clearForLoader ended\\\");\\n return r;\\n}\\n\\n\\/\\/ process results\\nfunction processResults() {\\n \\/\\/ console.log(\\\"processResults begun\\\");\\n let originalVal = $(\\\"#number-input\\\").val(),\\n original = parseInt(originalVal),\\n \\/\\/ arr = fibonacci(original),\\n \\/\\/ arrSum = sum(arr),\\n upToArr = upTo(original),\\n upToArrSum = sum(upToArr),\\n fibList = createList(upToArr),\\n foundPrimesArr = primesArr(upToArr),\\n primesSum = sum(foundPrimesArr);\\n \\/\\/ console.log(\\\"fibonacci array: \\\" + arr);\\n \\/\\/ console.log(\\\"fibonacci array sum: \\\" + arrSum);\\n \\/\\/ console.log(\\\"upToArr array: \\\" + upToArr);\\n \\/\\/ console.log(\\\"upToArr array sum: \\\" + upToArrSum);\\n $('.row-loader').hide();\\n $('.row-command, .row-results').show();\\n originalNum.text(original);\\n calculatedNum.text(primesSum);\\n madLibs(primesSum, original);\\n listHeader.css(\\\"display\\\", \\\"flex\\\");\\n totalWrapper.show();\\n total.text(primesSum);\\n total.delay(1500).fadeIn();\\n appendList(fibList);\\n \\/\\/ console.log(\\\"processResults ended\\\");\\n}\\n\\n$(document).ready(function () {\\n typeTitle();\\n $('#form').submit(function(e) {\\n clearForLoader().done(processResults);\\n e.preventDefault();\\n });\\n});\\n\\n\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"scss\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"normalize\",\"js_library\":null,\"created_at\":\"2019-08-23T11:07:55.000Z\",\"updated_at\":\"2022-01-03T18:31:18.001Z\",\"title\":\"Prime Objective\",\"description\":\"\",\"slug_hash\":\"XWrpEPx\",\"head\":\"\",\"private\":false,\"slug_hash_private\":\"8b09d5e128d4ae559977e610a4e78406\",\"has_animation\":true,\"team_id\":0,\"css_prefix\":\"prefixfree\",\"template\":false,\"parent_id\":0,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":0,\"pick\":false,\"popularity_score\":0,\"views_count\":0,\"pick_visible_at\":null,\"cpid\":\"016cbe29-52f8-794c-8a8f-eccb9b1b18e0\",\"is_new_editor_pen\":false,\"pen_hash\":null,\"hashid\":\"XWrpEPx\"}"}