|
JSON is pretty slick, but it took me years to get an understanding of it. I use it to store data in cookies, instead of using multiple cookies to store an array of values. And I use it to send a body payload to an API as a HTTP POST request, or to receive data from a HTTP GET request.
Anyways, you sure are doing a lot of work to create JSON. All that is really needed in Vanilla Javascript is this to create a simple JSON payload. Then you can do whatever you want with it, such as store it in a cookie, or transmit it via HTTP. As you get a feel for this, you can create more complex arrays of records.
const bodyPayload = JSON.stringify({
"cost": costValue,
"price": priceValue,
"comment": commentValue,
"operation": operation,
"from": "comments"
});
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
Hey, guys 
Im new in JS, but interested in this lnguage and want to learn.
Now playing (learning) a little with charts and bumped into issue - there are two charts, but just one show the data user enter, why one? For second chart I set data from same variable, I think.
Here is the code:
<div class="chartMenu">
<p>ChartAi</p>
</div>
<div class="chartCard">
<div class="chartBox">
<div>
<canvas id="myChart"></canvas>
</div>
<div>
<canvas id="lineChart"></canvas>
</div>
<br>
<hr>
<label>Investment Sum:</label><input onchange="updateChart()" id="investmentamount" type="number" value="9000"><br>
<label>Profit sum:</label><input onchange="updateChart()" id="profitamount" type="number" value="1000"><br>
<label>Investment time:</label><input onchange="updateChart()" id="years" type="number" step="0.1" value="2.5"><br>
<br>
<hr>
<table>
<tr>
<td>Investmen Amount</td>
<td>Eur <span id="cellinvestment">9000</span></td>
</tr>
<tr>
<td>Profit Amount</td>
<td>Eur <span id="cellprofit">1000</span></td>
</tr>
<tr>
<td>Duration</td>
<td> <span id="cellyears">2.5</span></td>
</tr>
<tr>
<td>ROI in %</td>
<td> <span id="cellroi">11.11</span>%</td>
</tr>
<tr>
<td>Annualized Return:</td>
<td> <span id="cellanuallized">4.3</span>%</td>
</tr>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const investmentamount = document.getElementById("investmentamount");
const profitamount = document.getElementById("profitamount");
const years = document.getElementById("years");
const data = {
labels: ['Investment', 'Profit'],
datasets: [{
label: 'ROI',
data: [investmentamount.value, profitamount.value],
backgroundColor: [
'rgba(255, 26, 104, 1)',
'rgba(54, 162, 235, 1)',
],
label: 'Profit',
borderColor: [
'rgba(255, 26, 104, 1)',
'rgba(54, 162, 235, 1)',
],
}]
};
const config = {
type: 'pie',
data,
options: {
}
};
const myChart = new Chart(
document.getElementById('myChart'),
config
);
const config2 = {
type: 'doughnut',
data,
options: {
}
};
const lineChart = new Chart(
document.getElementById('lineChart'),
config2
);
function updateChart() {
myChart, myChart.config.data.datasets[0].data = [investmentamount.value, profitamount.value];
myChart, myChart.update();
calculator();
};
function calculator(){
const cellinvestment = document.getElementById("cellinvestment");
cellinvestment.innerText = investmentamount.value;
const cellprofit = document.getElementById("cellprofit");
cellprofit.innerText = profitamount.value;
const cellyears = document.getElementById("cellyears");
cellyears.innerText = years.value;
const cellroi = document.getElementById("cellroi");
const roi = profitamount.value / investmentamount.value * 100;
cellroi.innerText = roi.toFixed(2);
const returnedAmount = profitamount.value + investmentamount.value;
const cellanuallized = document.getElementById("cellanuallized");
const annualizedReturn = (returnedAmount / investmentamount.value) ** (1 / parseFloat(years.value)) -1;
const annualizedPercentage = annualizedReturn * 100;
cellanuallized.innerText = annualizedPercentage.toFixed(1);
};
</script>
Help me with solvation of this issue, please!
|
|
|
|
|
Your updateChart function doesn't actually do anything with lineChart. You only update myChart inside the function, and you have no other locations that you do anything to update the chart in this code. The fix would be to do the same in updateChart, but this time with lineChart as well.
|
|
|
|
|
Thanks for answer 
I was thinking about function that it does not do anything with my lineChart, thinking about how to add "lineChart " name to function, but was tired.. :#
Today after I read your reply, checked the function - it is easy to fix - I need just copy few lines of function and change the name - done it, SOLVED it! 
Thank you for your reply!
P.S. thought, that maybe there are some more problems..
|
|
|
|
|
|
I'm trying to change the position of a background element on a web page in random increments each time any link on the page is clicked:
const backgroundElement = document.querySelector('.container');
const positionXY = [100, 25, 50, 75];
function randomX(positionXY) {
return positionXY[Math.floor(Math.random() * positionXY.length)]
}
function randomY(positionXY) {
return positionXY[Math.floor(Math.random() * positionXY.length)]
}
document.querySelectorAll("a").forEach(a =>
a.addEventListener("click", () => {
backgroundElement.style.cssText = `background-position: ${randomX}% ${randomY}%;`
alert("x position:" + randomX(positionXY));
alert("y position:" + randomY(positionXY));
}
)
)
the alerts show me that the values are being generated correctly, but the background position does not change on click.
Any tips? Do I need to create a toggle-state?
modified 24-Sep-22 9:45am.
|
|
|
|
|
Silly mistake really...
I needed to include the const with the function (as I did in the alerts)...
backgroundElement.style.cssText = `background-position: ${randomX(positionXY)}% ${randomY(positionXY)}%;`
This now works, but leads me on to two further questions:
1. what if the two random values are the same as the last two? the, the element would not appear to shift at all. I guess I'd need some kind of conditional setup for that
2. what if there are certain links on my page I do not want to trigger a background shift, what can I do to those links to make sure they are not included in the querySelectorAll Node List ?
|
|
|
|
|
DSB Audio (David Sweeney-Bear) wrote: 1. what if the two random values are the same as the last two? the, the element would not appear to shift at all. I guess I'd need some kind of conditional setup for that
If you want to reduce the randomness by preventing it from returning the same values twice in a row, you will indeed need to keep track of the previous values.
const backgroundElement = document.querySelector('.container');
const positionXY = [100, 25, 50, 75];
const currentPosition = { x: 0, y: 0 };
const randomPosition = (positions) => {
const result = { };
do {
result.x = positions[Math.floor(Math.random() * positions.length)];
resuly.y = positions[Math.floor(Math.random() * positions.length)];
} while (result.x === currentPosition.x && result.y === currentPosition.y);
return result;
};
const changePosition = (el, positions) => {
const newPosition = randomPosition(positions);
el.style.backgroundPosition = `${newPosition.x}% ${newPosition.y}%`;
console.debug("New position", newPosition, el);
};
document.addEventListener("click", e => {
let a = e.target;
if (a.tagName !== 'A') {
a = e.target.closest("a");
if (!a) { return; }
}
console.debug("Link clicked", a);
changePosition(backgroundElement, positionXY);
});
DSB Audio (David Sweeney-Bear) wrote: 2. what if there are certain links on my page I do not want to trigger a background shift, what can I do to those links to make sure they are not included in the querySelectorAll Node List ?
You'll need to find some way to identify those links, and exclude them from the event. For example, by using a CSS class:
document.addEventListener("click", e => {
let a = e.target;
if (a.tagName !== 'A') {
a = e.target.closest("a");
if (!a) { return; }
}
if (a.matches(".class-to-exclude")) {
return;
}
console.debug("Link clicked", a);
changePosition(backgroundElement, positionXY);
});
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
let backgroundElement = document.querySelector('.site-container');
const positionXY = [16, 32, 48, 64, 80, 99, 66.6, 33.3, 1, 15, 30, 50, 75];
let storedXY = sessionStorage.getItem('writeXY'); let lastXY = JSON.parse(storedXY);
if (storedXY == null) {
let randomX = positionXY[Math.floor(Math.random() * positionXY.length)];
let randomY = positionXY[Math.floor(Math.random() * positionXY.length)];
document.querySelector('.site-container').style.cssText = `background-position: ${randomX}% ${randomY}%; background-size: auto;`
let randomXY = [randomX, randomY]
sessionStorage.setItem('writeXY', JSON.stringify(randomXY));
}
else if (storedXY !== null) {
let randomX = positionXY[Math.floor(Math.random() * positionXY.length)];
let randomY = positionXY[Math.floor(Math.random() * positionXY.length)];
let testX = Math.abs(randomX-lastXY[0]);
let testY = Math.abs(randomY-lastXY[1]);
let randomXY = [randomX, randomY]
sessionStorage.setItem('writeXY', JSON.stringify(randomXY));
while (testX < 16 || testY < 16) {
randomX = positionXY[Math.floor(Math.random() * positionXY.length)];
randomY = positionXY[Math.floor(Math.random() * positionXY.length)];
testX = Math.abs(randomX-lastXY[0]);
testY = Math.abs(randomY-lastXY[1]);
}
document.querySelector('.site-container').style.cssText = `background-position: ${randomX}% ${randomY}%; background-size: auto;`
randomXY = [randomX, randomY]
sessionStorage.setItem('writeXY', JSON.stringify(randomXY));
I dispensed with the onClick event in favour of pageLoad since within the WP structure, each link is a new page.
Therefore, didn't need to exclude certain anchor links, but did find that using 'a: not(".class-name")' worked to exclude links that I assigned a particular classname to.
|
|
|
|
|
correction: no pageLoad as script fires every time page loads anyway!
|
|
|
|
|
DSB Audio (David Sweeney-Bear) wrote: const positionXY = [100, 25, 50, 75];
Aside from what was already said, in the interest of readability, you'd be better off using a object (or array of objects) to act as a hash map here.
const position = { left: 100, top: 25, right: 50, bottom: 75 };
console.log(position.left);
const positions = [{ x: 100, y: 25}, { x: 50, y: 75 }];
console.log(positions[0].x);
Jeremy Falcon
modified 15-Dec-22 17:26pm.
|
|
|
|
|
I have created a web API. If someone tried to loop through thousands of requests to the server (Programmatically), would it lower the performance of the web API?
|
|
|
|
|
Almost certainly. But only you can answer that - we don't have access to your server or your code.
Most APIs implement some form of rate limiting - if a single API key issues too many requests within a given window, the API responds with a 429 status code, and sets a header telling the caller how long they need to wait before trying again.
This won't prevent malicious or misconfigured clients from trying to overwhelm your service, but it should reduce the amount of strain they're able to put on your server. If you're really worried, then you'll need to sign up for a DDoS protection service.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
I have a problem with my modals. I'm creating my first portfolio website using js and the popup window is not working as I expect.
Everything works fine, only when I open the portfolio item and click "project details" each popup window has the same information about the item. Project name, category etc. do not change. What could be the problem? I will be grateful for your help.
link to project: <a href="https://codepen.io/bartekDD/pen/LYmLBKE">https://codepen.io/bartekDD/pen/LYmLBKE</a>[<a href="https://codepen.io/bartekDD/pen/LYmLBKE" target="_blank" title="New Window">^</a>]
|
|
|
|
|
Hello,
I want to dev an app with users, teachers, students, calendar, scheduler, etc... One user only can access to his own data, never can see other students or calendar of another user (except admin who can access to every data).
I dont know the best model for tthis app with mongodb. What is better:
1. Do every table as a little collection and put a userid key on every table
2. Do one big collection for every user and nested documents or collections for.every table.
What is the best options for a good scalable and performance?
Thanks, i hope u can gelp.me
|
|
|
|
|
Let me check to see if I have this correct. You want each type of user (teacher or student) to have a calendar and scheduler. If you never need to share calendars or schedules then having the calendar/schedule as a capability of the user is a clean way to manage this in Mongo.
|
|
|
|
|
Uff, I'm so sorry for my english. It's so hard for me explain my problem in not native language.
I have users, users can access to his data, and his data are students, teachers, shceduler, calendar, ...
This means, every user have his own data, and this data it's for app tables.
I have a mongodb, no sql.
Thanks, I hope I explained better now.
|
|
|
|
|
I am trying to implement pinch zoom in zoom out in js.
I am almost there, as I have calculated how to detect pinch zoom in zoom out in js using touch events.
....
var dist1=0;
function start(ev) {
if (ev.targetTouches.length == 2) {//check if two fingers touched screen
dist1 = Math.hypot( //get rough estimate of distance between two fingers
ev.touches[0].pageX - ev.touches[1].pageX,
ev.touches[0].pageY - ev.touches[1].pageY);
}
}
function move(ev) {
if (ev.targetTouches.length == 2 && ev.changedTouches.length == 2) {
// Check if the two target touches are the same ones that started
var dist2 = Math.hypot(//get rough estimate of new distance between fingers
ev.touches[0].pageX - ev.touches[1].pageX,
ev.touches[0].pageY - ev.touches[1].pageY);
//alert(dist);
if(dist1>dist2) {//if fingers are closer now than when they first touched screen, they are pinching
alert('zoom out');
}
if(dist1<dist2) {//if fingers are further apart than when they first touched the screen, they are making the zoomin gesture
alert('zoom in');
}
}
}
document.getElementById ('zoom_here').addEventListener ('touchstart', start, false);
document.getElementById('zoom_here').addEventListener('touchmove', move, false);
now i want to translate the img to keep zooming
n i want algo for translate
|
|
|
|
|
I want to create a campaign open window like the one below(cloud link : like excel file)
I want to insert an image and put the date in that location, how do I do that?
https://onedrive.live.com/edit.aspx?resid=329C341DE8ADE63E!14563&ithint=file%2cxlsx&authkey=!APuapFo6nWfcWGI
|
|
|
|
|
Member 15755181 wrote: how do I do that?
Probably by writing some code.
|
|
|
|
|
You're going to have to describe, in detail, what a "campaign open window" is.
|
|
|
|
|
I am trying to number each result so that it says:
City #1 is Los Angeles.
City #2 is...
City #3 is...
... and so on.
I was thinking that I had to write something inside the for loop?
<html>
<body style="text-align: center;">
<h2 id="hi">Enter Your Five Favorite Cities</h2>
<form class="" action="index.html">
<input type="text" name="favoriteCities[]" value="" /><br>
<br>
<input type="text" name="favoriteCities[]" value="" /><br>
<br>
<input type="text" name="favoriteCities[]" value="" /><br>
<br>
<input type="text" name="favoriteCities[]" value="" /><br>
<br>
<input type="text" name="favoriteCities[]" value="" /><br>
<br>
<button type="button" name="button" onclick="favoriteCities()">Submit</button>
</form>
<h3 id="hi">Results</h3>
<p id="output"></p>
<script type="text/javascript">
var r = "";
function favoriteCities() {
var input = document.getElementsByName('favoriteCities[]');
for (var i = 0; i < input.length; i++) {
var a = input[i];
r = r + "City #" + "???" + "is " + a.value + ("<br>");
}
document.getElementById("output").innerHTML = r;
}
</script>
</body>
</html>
I am using Notepad++.
|
|
|
|
|
You already have a number, which you're using as the index in the for loop. You just need to add 1 to get the numbers to start at 1 instead of 0.
You'll also want to HTML-encode the user-supplied data so that it displays properly. The simplest way to do that is to create an element and set its innerText property.
const favoriteCities = function() {
const output = document.getElementById("output");
output.innerHTML = "";
const input = document.getElementsByName("favoriteCities[]");
for (let i = 0; i < input.length; i++) {
const div = document.createElement("div");
div.innerText = `City #${i + 1} is ${input[i].value}`;
output.appendChild(div);
}
};
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Print the following pattern using for loop
*****
****
***
**
*
*
**
***
****
*****
|
|
|
|
|
You just need a loop that counts down from 5 to 1 and then up back to 5. Give it a try. If you need specific assistance with Javascript then go to JavaScript Tutorial[^].
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
