You guys remember my coding with zero code adventure yes? It all started about 2weeks ago, I embarked on this adventure into the world of coding with no code and I started out a project to create a Valentine's Day webpage using HTML, CSS, and JavaScript.
it’s been fun and not so fun-issh! Or let me just say. It’s fun when everything is going well. Do programmers sometimes really feel like smashing their computers when coding and something they create disrupts the others and they fix it only to disrupt some other parts and do that over and over?
Well, that was me during the weekend when I sat down with this stuff, last time, all I wanted to do was try to change the fonts of the text, but then I had a better idea to animate the words first and change the font later. The result is below, but before we show it, let’s quickly review what I’ve coded so far.
The code is a simple webpage with a Valentine's Day theme. It has a counter that starts at 10 and counts down to 0.
The webpage asks a question, "Will you be my val?" and provides two options, "Yes" or "No." If the user selects "Yes" before the counter reaches 0, a message displays, "Happy Valentine's Day" with an animated message that reads, "Roses are red, violets are blue, I wrote this code thinking of you. Happy Valentine's Day, my love!"
If the user selects "No" before the counter reaches 0, an alert box displays, "Sorry to hear that. Maybe next time." Once the counter reaches 0, the page updates with a message, "Sorry goodbye."
The code uses JavaScript to create an event listener for when the "Yes" or "No" button is clicked. If "Yes" is clicked, a new message is displayed with an animated message. The animation is created by creating a function that retrieves the element that contains the message and sets the text content to be blank.
If "No" is clicked, an alert box displays a message, and the counter stops counting down. If the counter reaches 0 before either button is clicked, the page updates with a message, and the counter stops counting down.
The HTML code is straightforward, with class and id attributes used to identify the elements that will be targeted by JavaScript. CSS is used to style the page with a pink background color, red and white text colors, and various font sizes and styles. The styles for the animated message and the pulse animation are included in the style section of the HTML code.
Overall, the code is a simple example of how to create an interactive webpage using JavaScript. It uses basic JavaScript concepts, such as event listeners and setInterval(), to provide a user experience that is both fun and engaging or at least that’s the aim.
Unfortunately I couldn’t deliver in time, I still have to change the fonts and colors, maybe add some more interactivity and animation, maybe a simple game to go along. Maybe I’ll get it ready for next years Valentines or maybe not, maybe this entire code will morph into something else entirely along the way who knows. Lol.
Anyway. Here’s the link that shows you what the webpage looks like. https://countdown-for-valentines.jqymjvtdzq.repl.co/
And if you’ll like to fork the code and turn it into something entirely different, be my guest. Here’s the link on
https://replit.com/@jqymjvtdzq/Countdown-for-valentines?s=app.
This is it for now guys. What do you think ? Thanks for reading.
Posted Using LeoFinance Beta
Thanks for your contribution to the STEMsocial community. Feel free to join us on discord to get to know the rest of us!
Please consider delegating to the @stemsocial account (85% of the curation rewards are returned).
You may also include @stemsocial as a beneficiary of the rewards of this post to get a stronger support.
The rewards earned on this comment will go directly to the people( @mistakili ) sharing the post on Twitter as long as they are registered with @poshtoken. Sign up at https://hiveposh.com.
Nice.