Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 11 years ago.
Improve this question
I'm trying to make a user interface that would do the following but I'm clueless as to how to do it.
The problem is this, I want to let people allocate a percentage of their account balance to different thing, say you want to allocate 40% to rent, 30% for savings and 30% to everything else
How would you let people choose the percentage between these things?
the problem is the total percentage will have to be 100% all the time, so say you want to put 3 textboxes on the page each indicating the ratio,
If the user chooses 80% for the first one and 20% for the next one, then the last one must remain 0, it's an awkward user interface and considering how little attention Internet users give to the pages the browse, I don't think anyone will fully understand and use it...
I was thinking about sliders like an audio equalizer, but even that is hard to make sense out of.
A pie chart of some kind that can let you change the values by clicking on the pie chart would probably be a good idea, but very hard to implement in js.
Let me know what you think
Disk partitioning tools address the same problem I think, with their visualisation of available space, partitions inside it, unpartitioned space, etc. Have you ever used anything like Partition Magic or similar?
But - yes, it's quite challenging UI to create in JavaScript, but still doable.
How about three slider bars that update each other?
Or How about an Interactive Pie Chart?
My vote is for sliders that update in real time; slider A is grabbed and, when changed, updates sliders B and C. You can have a pie chart update as well to reinforce what's going on.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 months ago.
Improve this question
My current site has horrible optimization. A mobile score of 10 and a desktop score of 60 does anyone have any information on what I can do to make these scores better? Would love some suggestions on what to do. Here is a link to google insights. Thank you to who can help.
https://pagespeed.web.dev/report?url=https%3A%2F%2Ftouchupdirect.com%2F&form_factor=desktop
https://pagespeed.web.dev/report?url=https%3A%2F%2Ftouchupdirect.com%2F&form_factor=mobile
Mobile Score
Desktop Score
I personally focus on the Core Web Vitals, which come from real user experiences, and not the PSI scores, which are based on a single simulated test.
I'll audit your home page:
LCP
This is the time it takes to show your carousel image. A first improvement would be to do a preload on that image so that it starts loading earlier. And then remove the lazy load from its img tag.
Important images that are above the fold should not be lazy-loaded but eagerly loaded.
Some of your lower-down images are lazy-loaded, which is good. But some are not. In particular, I saw the image in the expandable sections are not lazy-loaded. If you make them lazy-load, they will not get in the way of loading more important resources, like your LCP image.
Your JavaScript bundle is running a few long tasks. This can get in the way of rendering and therefore LCP. Consider looking into reducing or delaying what it is doing. In particular, delay the starting of animations.
CLS
Your green selector at the top of the page is added late and pushes down the whole page. This layout shift alone means you fail CLS. Try and pre-allocate the space for it, so nothing shifts.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
Thank you for taking the time reading this!
A quick disclaimer, I have never coded anything in my life!
I know some basics terms so you can communicate your response without defining them.
Anyways, my project is a simple game.
You press [START]
You hear a "random" word
You have a type-in box,
if you fill it right you get +5 points and get a random word .... and so on.
You fill it wrong, you lose immediately [gameover]
Although, I would deeply appreciate to code the whole game, for some of you it is relatively simple - I wish to do it myself for the learning experience and sense of accomplishment!
For now, I only need a push in the right direction.
I aim to use it on my tablet or phone (both run android)
Best,
haz
You should start by learning the fundamentals of JavaScript and HTML (should also learn CSS if you want the app to look nice). There are many sites (other than SO) that have multiple tutorials and/or full documentation (i.e. MDN, W3Schools). You could also use online teaching platforms for that.
Here are a couple of things you should consider after getting a grasp of the basic concepts:
When do you want to check if the user inserted the right input (timer, on enter, a submit button)?
Where will the sounds be stored and how will you retrieve them (a collection of sounds of files, a database with a server, a single big sound file containing all of the words)?
Regardless of how you store the sounds you will need a way to map text to the sound and the random number (Math.random()) to one of the two.
Finally create a JavaScript function that resets the text and gets a new word every time the user gets the word right or when the initial start button is clicked.
Once you reach any questions on the actual coding, search for the problem in SO (odds are it has been asked before). If you can't find an answer to your question create a new question (you should read How to ask first).
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I am trying to create the classic solitaire game in Javascript, but I am uncertain about how to design the HTML/CSS part of the game.
Requirements:
Animation. Dealing cards, shuffling cards etc. should be animated.
Each card can be dragged and dropped.
Here is my question:
What are the general strategies/techniques to position the elements in HTML5 games? Apparently in this game, we may not want to simply hard-code a card's position to something like top: 30px; left: 50px etc, because it has to adopt itself to different screen sizes, not to mention it has to align with other cards.
It depends mostly on how you want to go about it, but I would recommend using <canvas>. It supports animations, click handlers, everything you would need.
Also, there's the absolutely beautiful library CreateJS that you can take advantage of, which handles things like bitmaps, tweens, sounds, pre-loading large images, you name it!
If you'd prefer to just use a regular canvas, plenty of tutorials like this one that work specifically with card games in canvas.
As for clicking and dragging, the general concept is that you calculate where the object is by calculating the offset from the edge of the canvas. CreateJS allows you to easily have an 'object' that sits on the canvas, so it will automatically come complete with its own width and height. You can both define the offset and move it around with standard object syntax, using something along the lines of:
card.x = game_board.x + 100;
Having said that, there's no need to re-invent the wheel! Simon Sarris has created a great tutorial on clicking and dragging objects in canvas, which can be found here.
Hope this helps! :)
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
So I want to make a website where I can generate EVERY SINGLE Minecraft skin (which are 64 px by 64 px) possible (And put it up on a web page), by using many different combinations of many different coloured pixels in many different positions. (Or in fact, ALL of them.)
Similar to a generator which generates every black/white pixel combination in a 1x2 grid (I made a gif on that here, https://gyazo.com/071a5d482852fc8eea9963e841f5dbc1, but it's very small so you'll have to look at your screen closely), except using all colours and on a much larger scale.
But the problem is, I don't know what coding language to code it in.
And there are many different coding languages, like PHP, SQL, JavaScript, Ruby, Python, and others, but I just don't know which one to use to create a generator like this. (And I also don't know how to actually get it onto the web page so it can generate onto the web page real-time.)
If anyone could help me on this then that would be greatly appreciated.
Thanks.
You haven't done some quick math, have you?
There are 64*64 = 4096 pixels to choose a color for. If you choose from only 256 colors for each pixel, then you'd have 256^4096 possible pictures, which is about 1.4*10^9864. That's a number with 9865 decimal digits.
Now let's put any memory issues aside, suppose you need just a nanosecond to generate one picture. Then you'll be waiting
(256^4096)/(31557600*10^9)
or roughly 4.5*10^9847 years for your result.
I don't think the universe lives that long pal :/
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I’m working on a school project. It’s got to be done in about 10 weeks so I’ve got plenty of time to go about it. I’m very new to javascript so that explains why I’ve got so much time given for it. I’ve laid out a concept I feel passionate about and want to do it.
What I want from you guys are pointers, ideas or advice on what I should look into, maybe to do with specific functions or whatever, I’ll take any advice based on this concept.
The concept:
The project is a single page that shows a graphical design of the solar system. Planets that spin around the sun and there are two or three interactive options that I have to program.
They are:
When you click on the sun, the sun turns into a black hole that pulls on the revolving planets and they get drawn into the black hole with a nice little animation effect.
When you doubleclick on the sun, the sun disappears and the revolving planets are free from orbit and just float into outer space, outside of the canvas of the screen.
What would you say I should look into to realise this project. Again, I’m very new to javascript so that explains my asking. Thank you.
My first piece of advice is do not delay starting the project. Especially if you're new javascript (or programming in general, as sounds like might be the case?).
Besides that, there are a couple of things I can tell you're going to want to look at:
DOM events/event handlers
jQuery is a really spectacular javastript library that you will almost definitely want to use.
d3 is another library you may find helpful for your animations/drawings.
You may also find canvas helpful for drawing and animation.
Hopefully this points you in the right direction to start out.