Skip to content

Instantly share code, notes, and snippets.

@marysomerville

marysomerville/app.js

Last active January 6, 2019 13:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save marysomerville/77599c616f380de6eedd094ae0c516ed to your computer and use it in GitHub Desktop.
Save marysomerville/77599c616f380de6eedd094ae0c516ed to your computer and use it in GitHub Desktop.
Download ZIP
Javascript form
Raw
app.js
// @codekit-prepend "../../bower_components/url-search-params/build/url-search-params.js";
// @codekit-prepend "../../bower_components/axios/dist/axios.js";
// @codekit-prepend "../../bower_components/velocity/velocity.min.js";
/* ----------
Variables
-----------*/
var introTitle = document.getElementById('js-title'),
nameForm = document.getElementById('name-form'),
fullName = document.getElementById('fullname'),
fullNameLabel = document.getElementById('js-name-label'),
formButton = document.getElementById('formbutton'),
stageForm = document.getElementById('js-stage-form'),
stageResults = document.getElementById('js-stage-results'),
shareLink = document.getElementById('js-share-link'),
resultName = document.getElementById('js-result'),
h4 = document.getElementById('js-h4'),
resultblock = document.getElementById('js-result-block'),
greenBg = document.getElementById('js-green-bg'),
websiteLink = document.getElementById('js-website-link'),
loadingTitle = document.getElementById('js-loading-title'),
loadingText = document.getElementById('js-loading-text'),
stageLoading = document.getElementById('js-stage-loading');
function Shuffle(o) {
for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
return o;
};
var loadingSentence = [
{
title: 'Haltu í grameðluna þína!',
text: 'Við erum að grafa í fornleifunum.',
},
{
title: 'Haltu í grameðluna þína!',
text: 'Við erum að róta í rústunum.',
},
{
title: 'Haltu í grameðluna þína!',
text: 'Við erum að dusta rykið af beinunum.',
},
{
title: 'Haltu í grameðluna þína!',
text: 'Við erum að aldursgreina minjarnar.',
},
{
title: 'Haltu í grameðluna þína!',
text: 'Við erum að leita í Júragarðinum.',
},
{
title: 'Haltu í grameðluna þína!',
text: 'Við erum að fletta upp í þjóðminjalögum.',
}
];
Shuffle(loadingSentence);
/* ----------
Scripts
-----------*/
window.onload = function() {
var ww = window.innerWidth;
//from first design
// setTimeout(function(){
// introTitle.classList.add('hide');
// nameForm.classList.add('show');
// fullName.focus();
// fullName.select();
// }, 3000);
//setup the form
nameForm.classList.add('show');
Velocity(fullName, {
opacity: 1
},
{
duration: 400,
});
Velocity(fullNameLabel, {
opacity: 1
},
{
duration: 400
});
//Setup the loading text
loadingTitle.innerHTML = loadingSentence[0]['title'];
loadingText.innerHTML = loadingSentence[0]['text'];
//Detect someone entering name and show arrow button
fullName.addEventListener("keyup", function() {
formButton.classList.add('show');
}, false);
//on click send form button
nameForm.addEventListener("submit", function(e){
e.preventDefault();
var isValid = true;
//validate your elems here
if(fullName.value === '') {
isValid = false;
} else {
isValid = true;
}
if (!isValid) {
return false;
}
else {
stageForm.classList.remove('shown');
stageLoading.classList.add('shown');
createShareImage();
setTimeout(function(){
stageLoading.classList.remove('shown');
stageResults.classList.add('shown');
//show hello div
Velocity(h4, {
opacity: 1
},
{
duration: 800,
});
//show dino name
Velocity(resultName, {
opacity: 1
},
{
duration: 800,
delay: 700,
complete: function(elements) {
//show the share link
shareLink.classList.add('show');
}
});
//hide hello div
Velocity(h4, {
opacity: 0,
height: '0px',
paddingBottom: 0
},
{
duration: 100,
delay: 3200
});
if(ww >= '1024') {
var distance = '175px';
} else {
var distance = '192px';
}
//move the dino name up and show the message
Velocity(resultblock, {
translateY: [ distance, '94px' ]
//transform: ["translateY(162px)", "translateY(94px)"]
},
{
duration: 800,
delay: 3500
});
Velocity(stageResults, {
translateY: [ '-50%', '0%' ]
//transform: ["translateY(-50%)", "translateY(0px)"]
},
{
duration: 800,
delay: 3500
});
//move green box up
Velocity(greenBg, {
translateY: [ '-50%', '0%' ]
//transform: ["translateY(-55%)", "translateY(0)"]
},
{
duration: 800,
delay: 3500
});
}, 3800);
return true;
}
});
shareLink.addEventListener("click", function(e){
e.preventDefault();
var url = this.getAttribute("data-url");
var title = this.getAttribute("data-title");
var img = this.getAttribute("data-img");
var description = 'Ert þú risaeðla? Smelltu hér til að róta í fornleifunum.';
FB.ui({
method: 'share_open_graph',
display: 'popup',
href: 'https://www.nova.is/netid/ljosleidari',
action_type: 'og.shares',
action_properties: JSON.stringify({
object: {
'og:url': 'https://www.nova.is/netid/ljosleidari',
'og:title': title,
'og:description': description,
'og:image': img,
}
})
}, function(response){});
});
}
function createShareImage() {
var userName = fullName.value;
var params = new URLSearchParams();
params.append('fullName', userName);
axios.post('create.php', params)
.then(function (response) {
console.log('success');
shareLink.setAttribute("data-img", window.location.href+response.data[0]);
shareLink.setAttribute("data-title", response.data[1]);
resultName.innerHTML = response.data[1];
})
.catch(function (error) {
console.log('errors');
});
}
Raw
form.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ert þú risaeðla?</title>
<link rel='stylesheet' href="assets/css/style.css?v1" type='text/css' />
</head>
<body>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '1239769519501067',
autoLogAppEvents : true,
xfbml : true,
version : 'v2.11'
});
FB.AppEvents.logPageView();
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div id="app">
<div class="wrapper">
<div class="background-purple">
<div class="text">
<h1>Ekki vera risaeðla!</h1>
<p id="js-website-link"><a href="https://www.nova.is/netid/ljosleidari">Vertu á hraðasta ljósleiðara á Íslandi! <img src="assets/images/form-arrow.svg" alt="arrow" /></a></p>
</div>
</div>
<div class="background-green" id="js-green-bg"></div>
<a href="https://www.nova.is/netid/ljosleidari" class="nova-logo always-show"><img src="assets/images/logo.svg" alt="Nova logo" /></a>
<a href="#" class="share-link" data-img="" data-title="" data-url="https://www.nova.is/netid/ljosleidari" id="js-share-link"><img src="assets/images/share.jpg" alt="Share" /></a>
<div class="stage stage-form shown" id="js-stage-form">
<form action="/" method="POST" id="name-form">
<div class="input-row">
<div class="input">
<input type="text" name="fullname" id="fullname" autocomplete="off" placeholder="Hvað heitir þú?">
<label for="fullname" id="js-name-label">Hvað heitir þú?</label>
</div>
<button type="submit" id="formbutton"><img src="assets/images/form-arrow.svg" alt="Enter arrow" /></button>
</div>
</form>
</div>
<div class="stage stage-loading" id="js-stage-loading">
<div class="stage-loading-text">
<h3 id="js-loading-title">Haltu í grameðluna þína!</h3>
<p id="js-loading-text">Hvernig gat T-Rex borðað með svona litlar hendur?</p>
</div>
<div class="stage-loading-image">
<div class="loading-animation">
<svg width="132" height="82" xmlns="http://www.w3.org/2000/svg"><path d="M54.593 76.24c-.419.488-.396 1.173-.26 1.76-.606 0-.967-.76-1.5-.76-.55-.14-1.379-.01-1.86-.34-1.107-.526-.839-1.995-1.861-2.622-.88 1.322-2.354 1.882-3.897 1.882 0-2.121 1.353-3.807 1.87-5.789.425-1.633.707-2.847 1.545-4.387 1.031-1.894 3.113-4.882 2.824-7.16-.31-2.424 1.364-3.59 2.803-5.364 1.431-1.762 2.749-3.632 3.715-5.691.95-2.025-1.024-1.509-1.687-2.957-1.748-3.75-3.9-6.552-8.629-6.117-4.425.406-8.292.16-11.66-3.172-3.543-3.504-3.896-8.157-5.054-12.728-1.094-4.318-3.108-7.927-7.632-9.228-3.522-1.011-7.67-.907-11.31-.907 0-2.885 13.458-.14 14.774.5 2.996 1.455 4.915 4.222 6.337 7.142 1.505 3.088 2.202 6.81 6.023 7.691 5.482 1.262 12.234-.048 17.726-.502 3.635-.298 7.366-1.185 10.872-2.221 3.247-.96 5.55-3.675 8.758-4.592 3.588-1.027 6.203 1.73 9.534 2.344 4 .74 4.193-5.406 4.787-8.067.72-3.244 1.586-7.143 4.41-9.257 1.162-.87 2.512-1.245 3.956-1.245.709 0 1.312.24 2 .337 1.382.203.154-.647 1.34-.647 1.004-.124 2.03.55 3.025.38C107.073 3.21 109.54 3 111.481 3c3.111 0 7.652 1.57 8.416 5.016.254 1.142.055 2.3-.774 3.153-.345.358-1.965 2.371-2.466 1.113-.406.641-2.318 2.42-2.956 1.14v.382c-.247-.128-.495-.258-.742-.383 0 .878-2.683.878-3.428.517-1.254-.642-2.381.5-1.714 1.782.715 1.366.257 1.257.342 2.643.176 2.892.722 5.316 3.468 6.445 1.31.51 2.568 1.862 3.463 2.925 1.956 2.368-.472 4.377-3.034 3.762-4.016-.963-6.217-5.42-10.403-6.395-5.228-1.215-3.927 4.486-6.24 7.532-1.109 1.462-2.451 1.981-2.13 3.73.181.99-.486 3.625.639 3.989 2.837.959 8.256-2.298 10.14.15-1.855 0-3.094 1.131-4.839 1.477 1.074 1.831 5.693 1.09 5.693 3.767-6.3 0-13.94-6.888-19.408-.784 1.601 1.9 5.936 2.466 6.656 5.02h-2.96c.497 1.99 2.96 3.66 2.96 5.739-3.938-1.386-4.974-6.676-8.547-8.425-1.087-.533-2.132 2.157-3.309 2.484-1.49 0-2.98-.017-4.469-.002-1.47.01-3.576.785-3.33 2.624.723 1.948 2.992 2.942 3.603 4.94.659 2.159-.893 4.837-2.248 6.39-.612.706-5.435 4.513-6.195 2.389.796-.693 1.243-2.706-.425-2.218 0-2.344 3.256-5.465 1.545-7.802-.497.678-1.646 3.117-2.644 3.117 0-1.498 1-2.865 1.602-4.181.667-1.456-.059-2.826-.793-4.115-2.237 2.662-5.425 2.27-8.071 4.016-2.933 1.93-3.965 6.957-4.728 10.132-.568 2.364-.964 4.7-.964 7.124.63 1.186 4.534 1.107 4.1 3.633-1.12 0-1.554-.929-2.698.414" fill="#FFF" fill-rule="evenodd"/></svg>
<svg width="132" height="82" xmlns="http://www.w3.org/2000/svg"><path d="M74.292 63.224c-5.669 0-5.34 1.116-4.56 5.218.512 2.505.764 2.599 2.572 4.233.73.665 1.712 3.84-.361 3.41-1.882-.331-3.35.657-5.49 0-4.264-1.295-3.119-7.974-5.075-10.993-2.892-4.487-5.414 4.856-5.414 6.93 0 3.08 3.642 3.637 1.684 6.773-.893 1.407-8.194-.073-9.322-.614-2.699-1.291-1.701-4.145-1.701-6.77-4.51 0-9.956 2.622-14.356.582-5.942-2.758 4.978-7.467.322-8.51-1.411-.316-7.754-1.864-2.613-1.864 3.23 0 8.617 1.95 10.84-.482 4.084-4.47 5.336-11.105 8.057-16.399 2.06-4.003 4.205-5.657 7.089-8.765 4.968-3.95 7.44-8.019 14.592-7.44 6.058.492 11.765 5.203 17.647 5.233 6.136 0 9.55-6.952 9.184-12.312-.321-4.699-3.514-9.953-5.576-14.14-1.089-1.49-8.816-5.051-2.964-6.882 2.496-.762 5.671-.677 7.352 1.587 1.418 1.882 1.916 4.38 2.466 6.62.823 3.212 2.393 6.215 3.45 9.354 2.126 6.328 2.718 12.816.387 19.198-1.968 5.395-6.583 8.312-6.88 14.254-.175 3.017-1.49 4.588-2.667 7.304-1.11 2.514.244 5.149 1.145 7.464.655 1.779-.127 3.522-.127 5.32 0 1.729 1.265 3.177 1.97 4.654 1.624 3.412-2.557 3.785-4.631 2.587-2.522-1.435-5.604-5.043-4.211-8.164.91-2.043-.65-7.19-2.79-8.189 0 2.04-.985 3.839-.843 5.916.185 2.835 2.477 4.638 2.833 7.207.325 2.505 3.866 2.538 3.866 4.978 0 1.48-4.39 1.445-5.615 1.445-1.643.05-3.578.178-4.974-.843-.962-.794-.557-3.115-1.658-3.532-3.785-1.31-1.206-12.314-3.628-14.368" fill="#FFF" fill-rule="evenodd"/></svg>
<svg width="132" height="82" xmlns="http://www.w3.org/2000/svg"><path d="M36.227 69.643c.696-1.432-.267-2.277-.557-3.581-.51.237-.233 1.342-.942 1.648-1.036.445-2.187.472-3.294.472-2.245.012-6.53-.262-4.62-3.419.68-1.116.772-3.93.424-5.166-.47-1.582 1.274-3.788 1.868-5.19.847-2.15.942-4.975.942-7.288 0-.227-.89-1.182-1.005-1.483-.386-1.014-.576-2.08-.697-3.152-.147-1.296-.099-2.621-.378-3.897-.403-.224-1.16 3.35-1.314 3.829-.266.814-.747 1.489-.94 2.133-.432 1.441.666 1.69.666 2.923 0 1.65-3.243-.733-3.243-1.3-.5-1.271.516-2.496.657-3.644.414-3.272 2.212-5.697 2.885-8.808.68-3.12 2.576-5.834 5.42-7.26 4.87-2.442 9.29-4.587 14.69-5.643 2.18-.413 3.731-.822 5.723-1.82.924-.809 1.73-2.145 2.576-3.07 3.156-3.477 7.247-.955 10.885-1.147 1.458-.073 1.13-2.556 2.029-3.458.515-.513 1.119-.965 1.645-1.486 1.752-1.733 5.294-.278 7.275-.003 1.29.177 2.315.315 3.384 1.136 1.636 1.26 1.405 2.136 1.405 3.91 0 1.595 2.245 1.915 2.341 3.556.13 1.914 2.156 3.487 2.875 5.215.95 2.28 1.522 4.315 1.522 6.777 0 2.545 4.415 7.834 7.157 7.834 1.001 0 2.42-2.41 2.934-3.238 1.178-1.881 2.094-4.25 1.73-6.512-.079-.478-1.788-2.903-.576-2.903 1.977 0 2.465 2.51 2.576 4.042.21 2.968-1.483 6.284-3.048 8.737-.085.884-1.01 1.022.917 1.022 2.177 0 4.322-.482 5.98-1.981 2.172-1.966 2.389-5.028 1.723-7.664-.437-1.73-1.22-2.543-2.514-3.743-1.053-.976-2.39-3.26.066-1.914 3.396 1.864 5.01 5.908 4.52 9.684-.639 4.896-3.469 6.928-7.808 8.115-2.035.543-5.359-.822-6.947.098a213.97 213.97 0 0 0-4.282 2.545c-1.527.922 2.262 3.339 2.934 3.682 2.2 1.13 2.466-1.437 4.346-1.437 1.4 0 2.608 4.234.818 4.593-3.045.614-5.577 2.383-8.674.566a18.376 18.376 0 0 1-4.793-4.104c-1.378-1.668-1.64-3.539-3.263-5.044-1.393-1.297-2.838-3.608-3.233-5.542-.888-1.942-1.773-3.971-2.08-.3-.205 2.606-1.351 3.488-2.267 5.253-.44.862-.186 1.795-.802 2.833-.066.097.08.395 0 .474-.314 1.132-1.678.35-2.405.8.82.796-2.112 1.282-1.164 2.844.695 1.142.212 2.492 1.015 3.579.844 1.16.989 2.53 1.514 3.84.699 1.738 2.003 3.48 2.003 5.432 0 .94-.694 1.868-.767 2.87-.1 1.333.071 1.213.445 2.297.302 1.32 1.244 1.767 1.673 2.957 1.45 4.032-8.623 3.328-9.641.785-.395-.99.463-1.492.463-2.394 0-1.403-.775-2.648-.915-4.031-.21-1.838-1.778-4.861-3.294-6.052.04 1.27-.647 2.931.209 4.054.764 1.005 2.218 1.881 2.218 3.281 0 2.797-5.572 2.497-7.38 2.104-1.331-.288-2.33-1.297-1.883-2.753.493-1.636-1.137-2.1-1.336-3.48-.154-.979-.266-1.732-.585-2.695-.617-1.864.836-3.64-.234-5.527-.583.33-.104 1.497-.942 1.497-.893 0-.594.65-1.362.65-.52 0-2.675-.237-2.921-.063-.398.274-4.299-.298-4.41-.762-1.18 3.073-.123 6.04-.123 9.158 0 1.269-1.309 2.853-.284 4.006.548.62 3.116 2.58 1.918 3.68-1.864 1.706-11.587 2.487-9.448-1.957" fill="#FFF" fill-rule="evenodd"/></svg>
<svg width="132" height="82" xmlns="http://www.w3.org/2000/svg"><path d="M57.005 65.779c.163-.74.212-1.361.212-2.106-2.5.4-5.536.594-7.983-.16-1.686-.525-2.88-1.7-2.88-3.534 0-1.02 1.116-4.4-.85-4.4 0 1.781-.18 3.55-.212 5.33-.03 1.709.612 3.147.804 4.808.018.158.218 1.617-.252 1.617-.83 0-.773-.518-1.358.218-.565.679-1.299-1.348-2 .05-.79 1.558-1.85-1.12-2.917.142-.832.984-2.068-.597-2.864-1.108-1.725-1.103-1.696-2.214-1.696-4.003 0-1.608-.05-2.834-.983-4.224-1.492-2.213-2.064-1.223-4.025.023-3.367 2.146-6.79 4.332-10.584 5.67-3.442 1.213-7.019 1.581-10.654 1.382C5.602 65.31 0 64.912 0 60.784c1.266.453 2.267 1.4 3.52 1.89 1.337.529 2.914.152 4.206-.327 3.15-1.17 6.16-3.545 8.092-6.267 1.305-1.837 2.42-3.828 3.618-5.735 3.495-5.577 7.035-11.025 9.99-16.899 1.219-2.416 2.223-5.122 4.562-6.698 2.77-1.864 5.838-3.498 8.896-4.832 6.847-2.985 13.76-3.488 21.042-1.837 2.861.648 5.513 1.64 8.196 2.787 1.19.51 2.45 1.047 3.75 1.185 1.608.172 2.03-1.082 2.53-2.362.477-1.215.96-.913 1.601-1.57.636-.391.287-1.249 1.137-1.402.71-.127.953-.298 1.23-.965.372-.892 1.582-.666 2.33-1.285 1.283-1.053 2.277-1.724 3.907-2.157 1.233-.326 2.42-1.214 3.647-.807.768.254 1.383-.842 2.11-.317.444.318.927.016 1.348-.134.65-.224 1.21.35 1.856.35 0 1.415-1.062 3.2-1.476 4.542-.594 1.909-.998 3.85-.998 5.853 0 1.688.11 3.522.685 5.12.758 2.119 2.732 1.371 4.554 1.218 9.387-.795 18.937-1.231 27.871-4.492-.226 1.088-1.929 2.138-2.898 2.62 2.246.167 4.446-1.542 6.694-1.58 0 1.178-3.244 2.407-4.07 2.803-2.211 1.063-4.564 1.841-6.956 2.395-1.901.44-3.847.724-5.767 1.063-4.704.831-9.465 1.424-14.011 2.907-.96.653-.182 1.244.797 1.849 1.14.914 2.435 1.68 3.651 2.49 1.546 1.033 2.953 1.202 4.784 1.202.795 0 4.118-.73 4.49-.134.811 1.309-1.566 3.402-1.566 4.785 0 1.93.965 3.885.457 5.803-.44 1.682-1.43 4.503-3.253 5.187-1.368.512-.39-2.583-2.205-3.066.775 1.471-1.323 1.596-2.392 1.596-2.4 0-4.228-1.676-6.349-2.53-1.977-.796-4.166-.462-6.206-.963-1.508-.366-2.844-2.452-4.397-2.3-.805.4-2.168.655-2.374 1.58.16.945.486 1.873.532 2.836.044 1.182-.295 2.315-.295 3.493-.046 1.316.36 2.207.98 3.375.16.3 1.324 2.951-.166 1.83.088.955-1.01.444-1.422.293-1.02-.357-1.102.906-2.119.535-.38-.137-1.909-.974-2.274-.828-.572 1.486-1.4.953-2.595.453-1.54-.642-1.866-1.508-1.535-3.113.365-1.772-.231-3.047-1.446-4.34-2.729-2.895-5.357-1.006-8.201.67-.72.422-2.532 1.104-2.921 1.864 0 .722-.053 1.445-.053 2.169 0 1.206.17 2.35.865 3.38.724 1.077 2.449 2.99.942 4.021-1.031.706-.918-.15-1.909-.15-.526 0-.192 1.091-.912 1.091-.772 0-1.23-.79-2.02-.79-.368 0-.455.488-.635.705-.357.438-1.415-.167-1.78-.345-.92-.445-2.944-1.431-2.664-2.72" fill="#FFF" fill-rule="evenodd"/></svg>
</div>
</div>
</div>
<div class="stage stage-result" id="js-stage-results">
<div class="inner" id="js-result-block">
<h4 id="js-h4">Halló,</h4>
<h2 id="js-result"></h2>
</div>
</div>
</div>
</div>
</body>
<script type='text/javascript' src='assets/js/app-min.js?v1'></script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment