Web Design Tips and Tricks

Who doesn't love chatGPT? Draw on Canvas Width: Height: Color: Brush Size: Clear Canvas Ok, took some doing to get there.. Somehow, the code from the codepen worked right away when pasted into blogger, not so with the code from chatG. Create a web page containing a canvas element whose size comes from the values contained in two input fields labelled "Width" and "Height". The viewer will be able to click and drag to draw on the canvas. The color he draws with can be set by a color selection input. Can you set the background of the canvas to white? Nothing happens when I click and drag on the canvas Actually, the previous JavaScript does work - in CodePen, but not in Blogger (Blogspot). Any idea why? Why is it that the code you gave me doesn't work, but the below code works in Blogger? The code you provided seems to work in Blogger because it's handling mouse events directly on t...

Thank you Taewan Kim . As long as it's an element like a div or a p aragraph or a span , this one is easy. Starting with <p>, just change that to (click below in the colored area to select it) <p  onclick="var range = document.createRange(); range.selectNodeContents(this); window.getSelection().removeAllRanges(); window.getSelection().addRange(range);" > And you're done

Unfortunately, this gets defeated by : Access to fetch at 'https://www.blogger.com/profile/16603721268975096125' from origin 'https://frontendkaizen.blogspot.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. The idea: blogspot (aka Google's blogger platform) gives you a search field per blog that you can use to search that blog. What if you want to give the reader a way to search all your blogs at once? We want a blog post (that we will ensure is at the top) that contains a simple UI that accepts search terms and has two buttons - "This blog" and "All blogs". Getting the link to the "profile" page, that has links to the other blogs is easy, done with chatGPT. See the file get_profile_link.txt. So, the d...

Go

To create a continuous Glowing Text animation using HTML and CSS, follow these steps: Add the following HTML code wherever you want the text to appear: <span class="glow-effect">Glowing Text</span> Add the following CSS code within a <style> tag or in your CSS file: (NOTE: click on code to select) .glow-effect { font-size: 24px; animation: glow 2s infinite; } @keyframes glow { 0% { text-shadow: 0 0 5px #ff0000; } 50% { text-shadow: 0 0 20px #ff0000; } 100% { text-shadow: 0 0 5px #ff0000; } } That's it! The text with the class "glow-effect" will now have a continuous glowing animation, with the glow effect fading in and out every 2 seconds.

To create a beating heart effect in HTML and CSS, follow these steps: Add the following HTML code wherever you want the heart to appear: <span style="font-size: 24px; animation: heartbeat 2s infinite;">❤</span> Copy Code Add the following CSS code within a <style> tag or in your CSS file: (NOTE: click to select) @keyframes heartbeat { 0% { font-size: 24px; } 50% { font-size: 32px; } 100% { font-size: 24px; } } That's it! The heart symbol (<span> with the content ❤ ) will now be displayed with a beating effect, growing and shrinking continuously every 2 seconds.