Making a countdown clock that resets and changes the page content - javascript

I'm slowly learning to implement Javascript into my websites to generate automated changes, actual code is scary for my graphic designer approach but I think I'm getting there.
I followed an exercise some time ago that had me make a countdown clock that resets every time it reaches 0, nothing to crazy but it got me thinking:
Is there any way to make that reset affect the content of the entire page?
The practical case that made me think of it is the website of a restaurant that has a different coupon every day of the week, they upload the coupon code to their social media everyday but if I could develop a site that loops the codes depending on the day and make it change the text content and the stylesheet on it's own the process would be automatic.
I can't figure out how you'd link the clock reset to that change though, tried searching for it and I think this might be solved with some AJAX shenanigans, but it seems to be a bit too specific to find, any guidance would be greatly appreciated.

Hi and welcome to stackoverflow. This is a very general question. It is hard to answer without specificity that requires knowledge the community doesn't have. For example:
When you say "I followed an exercise some time ago...", what did the code look like? What was your final product? How is JavaScript used?
When asking a question in stackoverflow, it can be helpful to share a snippet of what the code looks like so that others can help by testing the code themselves and giving feedback. Or at the very least observing the functionality and maybe catching small syntax errors.
To the second point of "Is there any way to make that reset affect the content of the entire page?" Yes. There are MANY MANY MANY ways to affect content of a page, either in pieces or in its entirety. Once again it depends on what you want to do with the code that YOU have specifically. Even with the basic tools of HTML and JavaScript you can do this. You don't need "AJAX shenanigans" LOL.
If you are just starting out, dig deep into the basics of JavaScript(if that is your preferred language). You will find a whole host of versatile functionality through creating objects, methods, manipulating the DOM, building your own event handlers, etc. Also if none of what I just wrote makes any sense, then you now have some terms worth researching on your own.
I hope that this is helpful for you, and I wish you the best of luck on your coding journey.

Related

Generate a diagram or schema that shows the relationships between all the files in a website

The last 9 months, I've been working on two big websites with PHP and Javascript without using any framework.
Every time I wanted to modify a page or fix a bug, I was spending:
10% of the time on finding the PHP file with the html content
20% of the time on locating the CSS and JavaScript files it is using
20% of the time on locating the PHP classes it's using and the functions and variables it's inheriting
20% of the time on locating all the scripts that are being called through ajax calls.
And only 30% percent of the time to actually fix the problem.
So, I wanted something that for every file that I want to modify within a project, after indexing all the aforementioned, it shows a list with all of these relationships on a diagram/flowchart along with the corresponding links to these files.
After a lot of Googling I couldn't find anything that directly solves this problem effectively. Right now, except for just opening all the includes inside the PHP file one by one, I am using Google Chrome's Inspector to quickly locate the includes from the Network tab or even add my whole Workspace in the Sources tab in order to apply CSS and JavaScript modifications directly from there. The problem with this, is that I don't have any options for locating any server-side code(PHP). Also I don't want to be dependent on any specific Web-Browser. Lastly, this solution doesn't provide me any graphical representation of the website's schema, something that's really important for understanding in seconds the whole structure of a webpage that you are going to modify for the first time.
I know that this question sounds a little off-topic but I couldn't find anything on the Web (maybe I didn't use the correct search keywords?) and I feel like it's something that a lot of developers struggle with sometimes so it could be really helpful if it's answered and stay visible. Even if I am missing the point due to luck of experience and there is a different approach to this kind of problems, I don't think I am the first one and It could be also good to be clarified for all the others out there.
I can't help you with the diagram part of your question but I understand that your problem is indexing.
You could use sublime which more or less work with all the operating systems and at the same time it's quite light. With it you will have indexing as you can see here.

Diagnosing jumpy/buggy-Angular Animations, (i.e. whats is the source of the bug, CSS/code/ng-directives?) BONUS: XKCD

just made an XKCD app for a mean stack class Im taking, and Im getting pretty close to being done, but one doggone visual bug thats pestering me, with angular animations:
here is my deployed app:
https://desolate-savannah-69543.herokuapp.com/#/
and here is the code:
https://github.com/nevaldiv/project4_relevant_xkcd
the issue is likely in my CSS I think the animations.css specifically, but am unsure.
but CSS is not my specialty so, really dont know.
for example, if you click on the checkbox filter for 2008 over and over, you can see that the ng-repeat div's popup slightly to the right? and 'ghost' or leave trails as they pop into their final resting position more towards the left, the heck is causing that? is that some CSS stuff outside of my angular-animations.css causing that? how can I diagnose that if its so fast and then gone, I feel like I need experienced eyes on it.
Ive tried but for the life of me cant seem to figure out what the heck is causing it.
anyway, feel free to tinker on my app thingy, I didnt have enough time to tie together my token auth with (or my user model with my comics model at all, even, besides schematically) anything, so its mostly just what you see on the landing page thats all the meat I got.
some more info (cant post more than 2 links)
here is the link to potential trouble code:
https://github.com/nevaldiv/project4_relevant_xkcd/blob/master/public/css/animations.css#L72

How can I find jquery/javascript/modernizer code responsible for a effect

I'm learning web design, and there is no better method than redoing others work. So I'm reading other pages code, but it's so hard to find the jQuery, Javascript or modernizer or ... code responsible for the effect.
I'm using firebug, also used firequery, but the problem is they give me the event but not the code and a big tree of DOM, I don't know where even I look into it.
I really don't care which event is triggered, but I do care how the code is written. If I find the code so I can understand the event is on click or on focus...
Or let's say a website has a some javascript file, linked to a website. when I load the webpage i get a webpage consist of DOM and external/internal script. When I see a cool effect and want to read the code, I run firebug, inspect element to find the element. After that I don't know what to do? I can't search for selector or event in the script because maybe the developer of the site used different selector that I'm searching. Sometimes I find the code, but it's so jammed, not in human readable form, I don't know how to change the code to something indent and neat
The problem becomes more dramatic when the website using other java framework than jQuery.
I've searched a lot, used many tools, but couldn't find anything useful, please with your advice light my way to learn web developing
edit:--
I found a way but I'm sure there should be a better way outside
first in chrome I inspect the element to find the corresponding element, then i right click and check all the break point on it(if it doesn't work i do the same for parent element)
after that i play with that element to trigger the function and it break
usually the function that called the method is down in the callstack
also for reading
also for reading the script i use pretty print of chrome, i used some online prettyfier but most of them has limitation in number of character, for a long script none of the google first page resault is good enough. so the only good option here is for now is chrome, anyone have any other method?
It is difficult to learn how to do things just from inspecting it, as many effects may be implemented entirely in JavaScript, which may be deep, hidden away in a source file.
You mention that the code is not in human readable form, beautifying it may help:
https://stackoverflow.com/a/6318092/1061602
Most 'visual' effects should be able to be viewable from the CSS, e.g. JQuery Mobile's buttons, it is possible to see how the different classes are combined, ui-shadow, ui-btn, ui-disabled etc
Otherwise, searching for selectors is pretty much all you can do. Personally, if I am learning, looking at too much code at one time can be overwhelming. Also a lot of the UI effects may be difficult to trace.
My advice is, perhaps a better way around it would be to try and describe one single effect that you require, and then search on Google or Stack Overflow for guidance on how to create that effect.
The usual documentation sources will be useful:
http://www.w3schools.com/css3/default.asp
http://api.jquery.com/
Happy learning!

Any easy way to disable ads during development?

I am working on websites that will contain adds. However, I don't want these ads to be displayed during development.
Is there any easy way to disable the Javascript code generated by Google adsense? A flag for example? Should I fiddle something in JQuery document ready? Looking for a clean and easy solution. Thanks.
You definitely could wrap the Adsense JavaScript in a conditional statement, and set a flag yourself at the top of your document if you wanted; just be sure to strip it out in your build process, or whenever you're ready to ship your code.
While this is technically possible, I would probably suggest against it. I wouldn't worry too much about screwing up your reporting or anything - as was pointed out in the comments on your question, Google isn't exactly new at this; they can determine when it's a good time to show money-making advertisements, and when it's a good time to just toss in some fillers.
Please note that I do not represent Google, and I cannot say what activity will have your account(s) with them suspended. If you wish to protect yourself from accidental clicks, I would suggest you go ahead and disable the ads while in development. Better safe than sorry.

My datepicker is not working that well

Hi my friendly computer wizards!
I coded a simple datepicker in jQuery, the already finished packages was to heavy for my taste. I thought everything was a-ok until I noticed strange behaviour. I first decided it might have been the alcohol messing up the latency between my eyes and my brain, but when, after waking up, the problem persisted I decided to find help.
When I repeatedly click one of the arrows to change month, the script
starts to lagg behind and eventually stalls. After a while it comes
back to life. Approximately the first four or five month-changes work
as intended.
I have been trying to simplify the Date() calls to the best of my limited knowledge, but to no avail. Do I have some kind of memory leak?
I fiddled up an example that replicates the problem here (complete code): http://jsfiddle.net/DCfMj/
Any help is appreciated. It is also okay to say that I have written immensly crappy code and that I am a worthless sack of blood because of it. Constructive criticism like that builds character.
Every time you call $(...).datepicker, you're adding another click handler.
Eventually, it starts taking a long time to run all of those handlers.

Categories