PLAYING WITH HTML, CSS AND JAVASCRIPT - I CREATED A SIMPLE COLOR VIEWER APP.

Hey guys!
I trust we are all doing great 😊.

As it is I'm a newbie in the coding and programming field and I've been putting much time into learning web development, starting with the basic languages. It hasn't been a very smooth run but I can say that it's been very interesting and fun.

Like my tutors would always say, playing around with code helps in the mastering process because it provides one the opportunity to expand understanding and also get creative.
So today I'll be showing you what I was able to achieve with the little knowledge I've gained so far.

So yeah, as my title states, I was able to create a simple web application (I guess I can call it that😅) using my smart phone. It's a color viewer app that displays any color you type in. I know it's quite silly and will not be of much use😅 but it was still a good way to practice my little knowledge of HTML, CSS and JavaScript.

Screenshot_20220826-003948.png

HOW I DID IT:

I got on my Anwriter app; a nice mobile text editor which I use to edit code and also preview it on my smartphone.

I started to write the HTML code which created the elements I wanted in my app like the top label, display screen , text input field and the button.

Screenshot_20220826-002553.png

Then the CSS which is pretty much what brings out the beauty of my creation styled all the HTML elements I created, specifying every single detail from the width to the height, padding, fonts and many more.

Screenshot_20220826-002716.png

Screenshot_20220826-002743.png

And lastly the JavaScript which is behind the functionality of my app gets the color which is typed into the input field and sets it as the background color of the screen when the button is clicked. The code for this is quite short and simple but also technical.

Screenshot_20220826-002822.png

And that's how I got it done, it would display any color typed in as long as the color inputed is CSS recognized.

img_1661470875609.jpg

That's all for now, I really look forward to learning more to improve my skills so as to create more useful projects in the future.
Let me know what you think in the comments section 😊.

Thanks for reading! ❤️



0
0
0.000
6 comments
avatar

Welcome to frontend programming! I would recommend using a code formatter to make your code more consistent and easier to read.

0
0
0.000
avatar

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. 
 

0
0
0.000
avatar

Congratulations @charlrific! You have completed the following achievement on the Hive blockchain and have been rewarded with new badge(s):

You received more than 300 upvotes.
Your next target is to reach 400 upvotes.
You got more than 10 replies.
Your next target is to reach 50 replies.

You can view your badges on your board and compare yourself to others in the Ranking
If you no longer want to receive notifications, reply to this comment with the word STOP

Support the HiveBuzz project. Vote for our proposal!
0
0
0.000
avatar

this is a really lovely project
I'll give it a trial.

0
0
0.000
avatar

Thanks a lot bro...that would be really nice.

0
0
0.000