sweet alert input to js variable - javascript

I want to have a sweet alert input to ask the user to enter a value. Then I want to save the value as a JS variable, to be used later.
let coinName = swal("Enter cryptocurrency name", {content: "input"})
console.log(coinName)
Here is my full code:
function getPrices() {
let coinName = swal("Enter cryptocurrency name", {content: "input"})
console.log(coinName.value)
$.getJSON('http://www.whateverorigin.org/get?url=' + encodeURIComponent('https://api.coinmarketcap.com/v1/ticker/')+ coinName.valueOf + '/' + '&callback=?', function (data) {
console.log(data.contents);
})
var coinPrice = data.contents[0].price_usd
swal('Currently, in USD, 1 ' + coinName + ' is equal to $' + coinPrice)
}
This what I want to do:
Ask user for input.
Take input and convert in into JS variable.
I'm not sure if I've explained this correctly, but any ideas or suggestions would be highly appreciated.

Based on the docs https://sweetalert.js.org/guides/#using-dom-nodes-as-content you can do this with
swal("Write something here:", {
content: "input",
})
.then((value) => {
// do something with value variable
});
If we update your code
function getPrices() {
swal("Enter cryptocurrency name", {content: "input"}).then(function(coinName) {
$.getJSON('http://www.whateverorigin.org/get?url=' + encodeURIComponent('https://api.coinmarketcap.com/v1/ticker/')+ coinName + '/' + '&callback=?', function (data) {
console.log(data.contents);
var coinPrice = data.contents[0].price_usd
swal('Currently, in USD, 1 ' + coinName + ' is equal to $' + coinPrice)
})
}
}

Related

My code has a simple issue that i cant figure out

I am setting up a link for my web page to take me to another site.
Ive tried everything i know how to do . my knowledge is limited though. basically when you visit https://beatsbycayde.com/roster/ it should take you to
"https://braytech.org/2/{destinyId}/{characterId}/legend"
for some reason it doesnt And I cannot figure out why any help would be greatly appreciated it it instead takes you to
https://braytech.org/2/{destinyId}/fstats/legend
I know that i have fstats in there iam trying to us it as an object and call it in the href
// get list of members and populate roster table
var roster = [];
$.when($.ajax({
url: "https://www.bungie.net/platform/GroupV2/699392/Members/",
headers: {
"X-API-Key": "47b810e692d64237911c2cbe0d433cfe"
}
}).success(function(json) {
if (json.ErrorStatus === 'Success') {
roster = json.Response.results;
console.log('Exalted member list:', roster);
} else {
alert('Uh oh, looks like Bungie\'s doing server maintenance or having problems. Please check back again soon!');
console.log(json);
}
}).error(function(json) {
alert('Uh oh, looks like Bungie\'s doing server maintenance or having problems. Please check back again soon!');
console.log(json);
}), $.ajax({
url: 'https://www.bungie.net/platform/destiny2/2/profile/4611686018429000034/?components=200',
headers: {
'X-API-Key': "47b810e692d64237911c2cbe0d433cfe"
}
}).success(function(res) {
console.log('PS4 stats:', res);
})).then(function() {
listMembers(roster);
});
function listMembers(rsp) {
var list = $('.memberList-list'),
on = 0,
sortMembers = function(method) {
// sort by date joined
if (method = joined) {
list.find('.member').sort(function(a, b) {
return ($(b).data('joined')) < ($(a).data('joined')) ? 1 : -1;
}).appendTo(list);
} else if (method = username) {
list.find('.member').sort(function(a, b) {
return ($(b).data('username')) < ($(a).data('username')) ? 1 : -1;
}).appendTo(list);
}
list.find('.member.online').prependTo(list);
};
for (var i = 0; i < rsp.length; i++) {
var profile = rsp[i].bungieNetUserInfo,
member = $('<a></a>');
// tally up online members
if (rsp[i].isOnline) {
on++
}
// check for valid profile
// some users don't have Bungie profiles somehow and it breaks function
if (typeof profile != 'undefined') {
// store response data in semantic variables
var name = rsp[i].destinyUserInfo.displayName,
joinDate = rsp[i].joinDate,
joined = joinDate.substring(0, joinDate.indexOf('T')),
online = rsp[i].isOnline,
icon = profile.iconPath,
memberId = profile.membershipId,
memberType = rsp[i].destinyUserInfo.membershipType,
destinyId = rsp[i].destinyUserInfo.membershipId,
rank = rsp[i].memberType;
// configure D OM node and add to page
$('#destiny-Id').text(destinyId);
$.ajax({
url: "https://www.bungie.net/Platform/Destiny/2/Account/" + destinyId + "/",
headers: {
"X-API-Key": "47b810e692d64237911c2cbe0d433cfe"
}
}).done(function(json) {});
$(function() {
$.ajax({
url: "https://www.bungie.net/Platform/Destiny/2/Account/4611686018429000034/",
headers: {
"X-API-Key": "47b810e692d64237911c2cbe0d433cfe"
},
success: function(data) {
// Gambit stats
var fstats = data.Response.data.characters[0].characterBase.characterId;
// Populate stats
// pvp
$('#player-f-stats').text(fstats);
},
error: function(data) {
alert('Uh oh, failed to load player stats! Looks like Bungie\'s doing server maintenance or having problems. Please check back again soon!');
console.log('Error loading player stats:', data);
}
});
});
member.attr({
'class': 'j-row vertical-center-row member',
'href': '/player/?bungieId=' + memberId + '&destinyId=' + destinyId + '&joined=' + joined + '&rank=' + rank,
'title': 'See player profile for ' + name,
'data-joined': joined.replace(/-/g, ''),
'data-username': name,
'data-online': 'false',
'data-searchable': name,
}).html('<div class="j-col j-col-1 member-icon"><img src="https://bungie.net/' + icon + '"></div>' + '<div class="j-col j-col-3 member-name"><h3>' + name + '</h3></div>' + '<div class="j-col j-col-3 member-joined" data-label="Joined">' + joined.replace(/-/g, '/') + '</div>' + '<div class="j-col j-col-3 member-status" data-label="Status"><span class="member-online" id="status-' + memberId + '">' + online + '</span></div>' + '<div class="j-col j-col-3 member-button"><a class="button outline gold full-width">' + 'View Stats' + '</a></div>' + '<div class="j-col j-col-3 member-button"> + In Depth Stats' + '</a></div>').appendTo(list);
// indicate online/offline status
if (String(online) === 'true') {
$('#status-' + memberId).text('Online').addClass('online').closest('.member').attr('data-online', true).addClass('online');
} else {
$('#status-' + memberId).text('Offline').removeClass('online');
}
sortMembers(joined); // sort members by join date
}
}
}
You have nested links. That breaks your HTML and prevents the href you want to be used.
Here you create the wrapper of each member. Which is a link.
member.attr({
'class': 'j-row vertical-center-row member',
'href': '/player/?bungieId=' + memberId + '&destinyId=' + destinyId + '&joined=' + joined + '&rank=' + rank,
...
And then you append another link inside of it here:
... In Depth Stats' ...
So I would suggest that you change the structure of your member element. Maybe place the top link in the position of the View Stats button and change that button to a <a> tag. But then as a consensus the whole member element won't be clickable, only the links.
Good luck!

Check if file exists by checking two different naming conventions using jQuery/JS

I am trying to to build out profile pages for multiple users which include personalized photos/items that are stored are on a server. These items are labeled/named using the users' name. A user has a FirstName & LastName, with the option of using a PreferredName.
Initially, the items were named using PreferredName over Firstname if a Preferred Name existed. (ex: Fname: Robert; Lname: Smith; Pname: Bobby; FileName = SmithBobby.file)
Unfortunately, the user now has the ability to change their name on their profile from PreferredName back to FirstName, leading to a large portion of profiles to look for the incorrect file (item is actually named SmithBobby.file, while the profile is looking for SmithRobert.file.)
This being said, I would like to check for the item using both naming conventions (FirstLast.file & PreferredLast.file), if neither exists, it should default to use the default/generic photo. (default.file)
The below example is how I currently check to see if the user has a CV and profile picture on file. If no CV exists, it removes the element from the page. if the image doesn't exist, it defaults to default.jpg.
if (($.PageData.PreferredName == "") || ($.PageData.PreferredName == null)) {
$("#Name").text($.PageData.FirstName + " " + $.PageData.LastName);
document.title = ($.PageData.FirstName + " " + $.PageData.LastName + " | Profile");
$("#BioPageTitle").text($.PageData.FirstName + " " + $.PageData.LastName);
} else {
$("#Name").text($.PageData.PreferredName + " " + $.PageData.LastName);
document.title = ($.PageData.PreferredName + " " + $.PageData.LastName + " | Profile");
$("#BioPageTitle").text($.PageData.PreferredName + " " + $.PageData.LastName);
}
//FILENAME BUILD
var file_name = ($.PageData.LastName + $.PageData.FirstName);
var second_fname = ($.PageData.LastName + $.PageData.PreferredName);
file_name = file_name.replace(/[^0-9a-z]/gi, '');
second_fname = second_fname.replace(/[^0-9a-z]/gi, '');
var vita = $('#Vita');
var vita_url = "vita/" + file_name + ".pdf";
var second_vitaURL = "vita/" + second_fname + ".pdf";
var VitaLink = $("<a>").attr({
href: vita_url,
target: '_blank'
}).html("<strong>Curriculum Vitae</strong>");
$.get(vita_url)
.done(function() {
vita.html(VitaLink);
}).fail(function() {
vita.remove();
});
/*PHOTO BUILD/CHECK */
//PROFILE PICTURE
var img = $('#ProfilePicture');
var default_url = "photos/default.jpg";
var img_url = "photos/" + file_name + ".jpg";
img.error(function() {
$(this).attr('src', default_url);
});
img.attr('src', img_url);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You should be able to extend your current function that checks the first link by checking for the second one if the first one fails. If the second one fails too, then you can remove the entry.
$.get(vita_url)
.done(function() {
vita.html(VitaLink);
}).fail(function() {
$.get(second_vitaURL)
.done(function() {
//modify the VitaLink with the correct url, if this doesn't work make a separate vitaLink type variable
VitaLink.attr('href', second_vitaURL);
vita.html(VitaLink);
}).fail(function() {
vita.remove();
});
});

Rails w/ Turbolinks window.onbeforeunload

I currently have a Rails application that uses Turbolinks. In this app, I am trying to track the amount of time spent on a specific view. I have looked at countless questions and gone through multiple variations of called window.onbeforeunload, window.beforeunload, window.on('beforeunload')... My current attempt is this:
$(document).ready(function() {
var start = Date.now();
var id = gon.subjId;
var rand_index = gon.randIndex;
var index = gon.index;
console.log('showing article ' + index + ' at index ' + rand_index + ' for ' + id);
$(document).on('turbolinks:before-change', function() {
$.post('/log', {subj_id: id, article: {index: index, rand_index: rand_index, time_spent: Date.now()-start}},
function(response) {
});
})
});
I know that the function using the AJAX request works; however, it is not called. How can I get this function to call when the back button is pressed?
I'm still not sure what the underlying error was but I changed the script to this and works like a charm:
$(document).ready(function() {
var start = Date.now();
var id = gon.subjId;
var rand_index = gon.randIndex;
var index = gon.index;
console.log('showing article ' + index + ' at index ' + rand_index + ' for ' + id);
function logVisit() {
console.log('logging visit');
$.post('/log', {subj_id: id, article: {index: index, rand_index: rand_index, time_spent: Date.now()-start}},
function(response) {
});
document.removeEventListener('turbolinks:before-cache', logVisit);
}
document.addEventListener('turbolinks:before-cache', logVisit);
});

How to populate Parameter in $cordovaSQLite as my own array

I used this codes to execute $cordovaSQLite insert.
var qst_master_content_data= {
qst_cnt_id :content.qst_cnt_id,
question_id :content.question_id,
qst_cnt_text :content.qst_cnt_text,
qst_cnt_options :content.qst_cnt_options,
qst_story:content.qst_story,
explanation :content.explanation,
lang_id :content.lang_id,
img_id :content.img_id,
dt_update :content.dt_update
};
var query = "INSERT INTO qst_master_content ( "+
"qst_cnt_id, "+
"question_id, "+
"qst_cnt_text, "+
"qst_cnt_options, "+
"qst_story, "+
"explanation, "+
"lang_id, "+
"img_id, "+
"dt_update "+
") VALUES (?,?,?,?,?,?,?,?,?)";
$cordovaSQLite.execute(db, query, qst_master_content_data).then(function(res)
{
console.log(res);
},
function(err)
{
console.log(err);
}
Unfortunately the insert was not successfully inserted.
I was tried to use qst_master_cotent = [1,2,3]; then it would be ok.
But this not make my codes to be reuse on that format. It should be:
var qst_master_content_data= {
qst_cnt_id :content.qst_cnt_id,
question_id :content.question_id,
qst_cnt_text :content.qst_cnt_text,
qst_cnt_options :content.qst_cnt_options,
qst_story:content.qst_story,
explanation :content.explanation,
lang_id :content.lang_id,
img_id :content.img_id,
dt_update :content.dt_update
};
So that I can manipulate the data in the future. How I can do that?
Be carefull about variable names. Your parameter object name is qst_master_cotent.
It should be like this:
$cordovaSQLite.execute(db, query, qst_master_cotent)
Use this piece of code
var db = window.sqlitePlugin.openDatabase({
name: "your.db"
});
db.transaction(populateClientDB, error, success);
function populateClientDB(tx) {
tx.executeSql("INSERT INTO qst_master_content (qst_cnt_id, question_id, qst_cnt_text, qst_cnt_options, qst_story, explanation, lang_id, img_id, dt_update) \n\
VALUES (?,?,?,?,?,?,?,?,?)", [qst_master_cotent.qst_cnt_id, qst_master_cotent.question_id, qst_master_cotent.qst_cnt_text, qst_master_cotent.qst_cnt_options, qst_master_cotent.qst_story, qst_master_cotent.explanation, qst_master_cotent.lang_id, qst_master_cotent.img_id, qst_master_cotent.dt_update], function(tx, res) {
console.log("insertId: " + res.insertId + " -- probably 1");
console.log("rowsAffected: " + res.rowsAffected + " -- should be 1");
});
}
function error(error) {
console.log(error);
}
function success() {
}
Thanks

Clicking on an element to reveal additional .get information

I'm trying to work through the 2nd question on this set of problems. I have to be able to click on a legislator's name and have additional information about him/her show up. Here's what I have so far.
$(function() {
$("form#get-zip").submit(function() {
var zip = $("input#zip").val();
$.get("http://congress.api.sunlightfoundation.com/legislators/locate?apikey=191e116b2a244fb48c5028e8f370488b&zip=" + zip, function(responseText) {
responseText.results.forEach(function(legislator) {
$("ul#legislators").append("<li>" + " " + legislator.first_name + " " + legislator.last_name + " (" + legislator.chamber + ")" + "</li>");
$("li").click(function() {
$(this).append("<p>Party: " + legislator.party + ", District: " + legislator.district + "</p>");
});
});
});
return false;
});
});
The problem is that when I click on a legislator's name it reveals information about all the legislators in the list rather than the particular legislator I clicked on. This is my first experience with A.P.I.s and I'm very much still a novice programmer. I'm finding all these moving parts to be very mentally exhausting. So I really appreciate any help I can get with this. Thanks.
I would suggest building out all your html on submit, even the details that appear below each legislator. Then hide all that extra detail. And set up the function of your li's to show the relative details.
$(function() {
$("form#get-zip").submit(
function() {
var zip = $("input#zip").val();
$.getJSON("http://congress.api.sunlightfoundation.com/legislators/locate?apikey=191e116b2a244fb48c5028e8f370488b&zip=" + zip,
function(responseText) {
$.each(responseText.results,
function(i,legislator) {
var newEl = $("<li>" + " " + legislator.first_name + " " + legislator.last_name + " (" + legislator.chamber + ")" + "<p>Party: " + legislator.party + ", District: " + legislator.district + "</p></li>");
newEl.appendTo("ul#legislators");
$("ul#legislators li").last().find("p").hide(); // hide the last added one
}); // end each
}); // end get function
}); // end submit function
$("ul#legislators").on("click", "li",
function() {
var details = $(this).find("p");
if (details.is(":visible")) {
details.hide();
} else {
details.show();
}
}); // end click function
}); // end document ready function
When the click event fires, the legislator variable no longer contains the data you looking for.

Categories

Resources