Starting Out In LiveWeave - javascript

I have been trying to make cute little games recently in javascript, using LiveWeave HTML/CSS/javascript playground. However, I can't seem to figure out how to properly insert javascript. What blocks do I use? Could I put the script in the HTML? The reason I'm asking is that I tested it out by making a few rects around the screen, yet none showed up. To help, please go to http://liveweave.com.
Best Regards,
Dominic

Related

Is there a way to make text overflow while in javascript or p5.js?

I'm trying to make text overflow when you resize a window, like pretty much every site does. However, I have zero experience with HTML and CSS, so I only have JavaScript (I'm using the p5 library) to work with. Does anyone know if there's a way for me to do one of two things:
Make the text overflow somehow
Learn HTML and CSS (is there a good tutorial out there?)
Or should I just change it so that a certain window size changes the text manually in the code from "Example Text" to "Example\nText"? Basically, is there some function I should know about, should I do it manually, or is there a good tutorial for beginner to advanced HTML/CSS? I realize that I'm basically asking for a tutorial online, but I'm also hoping there's some other way. Help!!! :P
Did you mean Text-wrap which wraps your text content inside the div element?
TLDR; Use word-wrap or overflow-wrap.
Check this out
Also, check out this tutorial from FreeCodeCamp. You can learn pretty much all the basics from their website itself. HTML & Css

How can I build a responsive tiled photo gallery using JS?

So, I'm trying to get started conceptualizing a project for a friend of mine and I've run into a sort of problem right away.
They're wanting to do a photography website, which isn't a big deal, but I'm not sure how to go about replicating the functionality they're seeking for their front page.
This link is an example they gave me. They're looking to have a sort of "tile" setup of images from a gallery/folder that cleanly line up along the edges of the page (if possible) and are also responsive, so when you reach certain breakpoints, the images obviously shift to have less in each row, but still keep the same clean look.
http://www.amishakpatel.com
I figure it's probably possible to do this with various client-side JS libraries, but I'm out of practice and didn't know where to turn.
Any suggestions would be fantastic, I get the feeling that this specific part of this project is going to be more complex that I originally thought, and I'm not SUPER experienced in the art of writing responsive layouts, but I wanted to give this a shot and get better at it.
My original plan was to develop this thing as a WP website/theme, but now I'm almost wondering if due to the nature of the project that I should maybe just use WP for the backend and content management, then do the front-end separately using front-end that I'm a bit more comfortable with (React) as it's looking like the whole project will be heavy in JS anyway to do the stuff they're wanting to eventually do.
Thanks in advance for any suggestions!
After reading the advice given by the few folks who commented, I did some digging with Mosaic/Masonry layouts, and found this:
https://www.imagely.com/wordpress-gallery-plugin/
I'm gonna give this a shot, which lets me stick with WP for a platform for ease of use, keeping the whole project simple.
Thanks a lot, folks! I figured there was PROBABLY a word for what I was looking for in terms of layout, but didn't know what to Google. :P

How can I dynamically test text in a CSS class and then update CSS based on criteria?

I'm very new to this, but have a little programming background, so hopefully someone out there can parse through this with me.
I spend a LOT of time looking at Reddit for work and being able to quickly see which comments are newer than others would be super helpful. My ultimate goal is to have a color scale that will quickly guide me to the new comments. Something like Red is less than 30 minutes, Green is 30-60 minutes, and Blue is 60+ minutes or something like that.
I've been doing some research into building Chrome Extensions, and I found some similar topics, but they don't test the text in the field and update the CSS dynamically.
I would absolutely love some help walking through this. Also, if you have a partial solution, I'm open to that as well. Thank you in advance for your time and help!
UPDATE: I've been asked to provide code samples, but that's the real crux of my problem is I A) don't know how to even begin approaching this, and B) my web searching is not showing any results for me to play with. To be clear, I'm not asking anyone to make this extension for me. I'm looking for help identifying a CSS class area on a site, checking the text within it, and then applying a CSS addition based on results. If you can help point me to the right resources, I'd be very grateful!

New to javascript, what kind of topic does this fit in?

I'm learning HTML, CSS and Javascript after spending a few months creating test websites on Muse. I created this layout on it https://christianmdantas.000webhostapp.com/ but I've been trying to learn Javascript to not use muse anymore. I can't seem to find tutorials on how to do that. What topic does this layout fit in?
I've been trying to look for trigger changing images, something along got lines but can't seem to find it. Any help would be much appreciated. Thank you.
You should check out codeacademy.com, It's free and has courses on CSS, HTML, Javascript, and more. Thats where I learned Python! You could also take a look at udemy but I believe it requires a subcription fee.

Using HTML/JS or another web solution to render a twirling ribbon

Any thoughts on creating a fluid/flowing ribbon for a website effect?
I'm open to any ideas. Ideally I could do this simply with html and some js library, but I'm open to suggestions for doing this with flash also. Any links to tutorials or examples would be greatly appreciated as well.
Thoughts?
Processing.js is a popular JavaScript animation library which is a port of the Processing visualization language. There are some pretty impressive demos on the site, including this one of a snake which follows your mouse. I could imagine taking that and modifying it to be a twirling ribbon. Also, check out HasCanvas for 350+ more demos - I'm betting that someone has made something similar to what you're looking for - here is kind of a neat ribbon-y effect I saw on the first page.

Categories