DEV Community: Km-js

30 Creative Projects created with HTML, CSS and JavaScript- Part 3 #30days30projects

Km-js — Wed, 19 Feb 2025 00:58:52 +0000

What an incredible 30-day journey it has been!

As part of the GreatStack 30Days30Projects Challenge, I built projects exclusively using HTML, CSS, and JavaScript. This experience pushed my creativity and skills, proving that with dedication, you can achieve amazing things with code in just a month.

Excited to share the results of this adventure with you all!

21. Dropify 📂

The ultimate drag-and-drop productivity app designed to streamline your workflow effortlessly

Github Repo

22. AgeTeller ⌛️

The ultimate app to effortlessly calculate your age

Github Repo

23. BackgroundEvoke 🎨

The ultimate app for transforming your surroundings with captivating background change effects.

Github Repo

24. NightShade 🌙

Immerse yourself in a sleek and elegant dark mode that reduces eye strain and enhances visual comfort

Github Repo

25. PhotoFolio 🖼

Showcase your memories in a stunning and organized way

Github Repo

26. Quotegram 🌈

Receive a daily dose of wisdom delivered right to your device, inspiring you to start your day with purpose

Github Repo

27. ValidForm ✅

A powerful tool designed to streamline and enhance the form validation process for users

Github Repo

28. VoiceVibe 🔊

Translates written words into clear, natural speech

Github Repo

29. SoonPage 🚀

Start counting down to the next big launch

Github Repo

30. SubscribeMail 📧

All-in-one solution for managing email subscriptions effortlessly

Github Repo

30 Creative Projects created with HTML, CSS and JavaScript- Part 2 #30days30projects

Km-js — Wed, 19 Feb 2025 00:57:52 +0000

What an incredible 30-day journey it has been!

Excited to share the results of this adventure with you all!

11. MenuMagic ✨

User-friendly digital menu

Github Repo

12. Swift Calc ➕✖️

Simplifying calculations with style.

Github Repo

13. ImageScout 📸

Discover the world through images

Github Repo

14. QRFlow 🌐

Seamlessly create QR codes for websites, contact details, Wi-Fi networks, and more

Github Repo

15. InstaTimer 🕒

An elegantly designed stopwatch providing accurate timekeeping with start, stop, and reset functionalities.

Github Repo

16. RoundFlow 🔄

A visually dynamic UI element conveying task completion with a modern circular design

Github Repo

17. ToastBurst 🥂

Pop-up alerts that appear on a user's screen, providing timely information or updates

Github Repo

18. SecurePass 🔐

Fortify and protect your digital accounts

Github Repo

20. CryptoSheid 📈

Go-to app for real-time cryptocurrency prices

Github Repo

30 Creative Projects created with HTML, CSS and JavaScript - Part 1 #30days30projects

Km-js — Wed, 19 Feb 2025 00:57:07 +0000

What an incredible 30-day journey it has been!

Excited to share the results of this adventure with you all!

1. Weatherly 🌦

You can check the weather conditions, temperature, humidity, and wind speed just by entering the city name. 🌍

Github Repo

2. Task Buddy 📝

It's all about keeping tasks organized and productivity high.👆

Github Repo

3. Pocket Cal 📅

A handy digital calendar made with JavaScript.

Github Repo

4. PassGenius 🔐

Your Personal Password Wizard.

Github Repo

5. PopUp ✨

Click the submit button, and voila! A smoothly transitioned popup emerges.

Github Repo

6. Pixel Clock ⏰

It's not just any digital clock; it's a pixel-perfect timepiece!

Github Repo

7. Quizzy 🧠

The ultimate blend of learning and fun!

Github Repo

8. Toggle Password 🔒👁

Switch between hidden and revealed passwords.

Github Repo

9. Product Showcase Project 🛒

Presenting products in a captivating way

Github Repo

20 Days of HTML(Learn 20 amazing things about HTML) Part 2

Km-js — Sat, 25 Jan 2025 16:58:51 +0000

Day 11- Drag and Drop

Any HTML element can be dragged and dropped irrespective of its native behavior.⁣
⁣It is done by using the global attribute draggable i.e setting its value to true.⁣
⁣
Events like ondragstart, ondragover, etc. are used to make elements more functional.⁣
⁣Images and links are by default draggable.

<p draggable="true">
  Drag and Drop me on the other side!
</p>

Day 12- Progress and Meter Elements

<progress> element:
- Displays a progress bar showing the completion progress of a task.⁣⁣
- It has two attributes max and value.⁣⁣
- No min attribute, the minimum value is always 0.⁣⁣ ⁣⁣
<meter> element:
- Displays either a fractional value or a value within a range.⁣⁣
- It is not only to show the progress(high), it can also fluctuate(high or low).⁣⁣
- Has the following attributes: max, min, high, low, optimum.

<label for="download">Download Progress</label>
<progress id="download" max="100" value="50">
</progress>
<br />
<label for="temp">Temperature Meter:</label>
<meter id="temp" min="0" max="100" low="30" high="60" optimum="80" value="10">
</meter>

Day 13- Play some Music

⁣<audio> element provides a way to add audio resources to a web page without the need to use any other plugin.⁣
Just include a path to the media inside the src attribute.⁣
⁣
A fallback text is enclosed within the tag to be shown to browsers that don't support the element.⁣
⁣
By default, the browser does not show any controls. ⁣
To add the ability for users to play, pause, adjust volume, etc. 'controls' attribute can be used.

<audio controls src="dope_music.mp3">
  Your browser does not support the audio element.
</audio>

Day 14- Show Insertion and Deletion

<ins> element indicates text that has been added to the document.⁣⁣
<del> is used for the text that has been deleted from the document.⁣⁣

So far, both of these have accessibility concerns which can be overcome by using, before and after pseudo-elements with the CSS content property.

<p>Go to a
  <del>movie</del>
  <ins>conference</ins>
  this weekend.
</p>

Day 15- Word Break Opportunity

⁣When a word is too long, and you don't want the browser to break it at the random place, <wbr> helps to break the word where you want.⁣
⁣
The <wbr> element specifies a position within text where it would be appropriate to add a line-break.

<p>This is a lonnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnngggggggggggggggggggggggggggggggggggggggggg<wbr>word.</p>

Day 16- Best Practices

A great place to find the HTML best practices to write maintainable and scalable code.

HTML best practices

Day 17- Adding Color picker and Date picker into the forms

⁣<input> element with the attribute of type="color" provides an interface of color picker or the user can also enter the color in hexadecimal format.⁣
⁣
<input> element with the attribute of type="date" creates a date picker or lets the user enter a date.⁣

<label>Choose Color:
</label>
<input type="color" value="#ffffff" />

Day 18- Setting Shortcut Keys

⁣The accesskey is a global attribute that specifies a shortcut key to activate an element.⁣
⁣
Shortcut keys can be accessed in number of ways according to the browser such as:⁣
ctrl + alt + accesskey⁣
OR⁣
alt + accesskey
OR⁣
alt + shift + accesskey

Day 19- Make Input fields readonly

⁣The readonly attribute prevents the editing on an input field by the user i.e. it makes the elements immutable.⁣
⁣
These readonly elements can be styled by :read-only and :read-write pseudo classes.⁣
⁣
It is different from the disabled attribute as the elements with readonly attribute are focusable whereas this isn't the case with the disabled.

<label for="country">Country:
</label>
<input type="text" name="country" value="India" readonly>

Day 20- Ways to improve Accessibility

Use semantic elements.⁣ ⁣
A label should be associated with every form control.⁣ ⁣
Alternative text should be included for images.⁣ ⁣
Use tabindex="0" to add an element that does not normally receive focus, such as <div> or <span>.⁣ ⁣
Use ARIA roles and attributes to provide additional meaning.For example, role="search" for search functionality.

Thanks for reading ❤

20 Days of HTML(Learn 20 amazing things about HTML) Part 1

Km-js — Thu, 23 Jan 2025 19:01:33 +0000

Day 1- Divide webpage into logical sections

⁣HTML5 offers several elements that will help you organize your layout in appropriate sections:⁣⁣

Header <header>
Navigation bar <nav>
Main Content <main> with <article> and <section> ⁣⁣
Sidebar <aside>⁣⁣
Footer <footer>

⁣⁣Good Webpages may look or perform differently but they share similar standard structure.⁣⁣
⁣⁣
By using this standard structure with the semantic elements mentioned above your document becomes more readable and accessible.⁣⁣

Day 2- What are the Semantic elements? Why are they important?

Rather than writing vague divs in your document.
How about using semantic tags?

Semantic tags define the purpose of the element. It's beneficial to use tags, class names and ids that give meaning to your content rather than just define its looks. Presentation is the responsibility of CSS.

For example- <p>,<header>,<figure> tells the content wrapped around them are paragraph, header or image. They help the browser, as well as developers, understand the meaning of their content.

Why is Semantic HTML important?

Helps to write clean and maintainable code
Enhances Accessibility
Improves SEO

Day 3- Make any content on your page editable by users

The text of the webpage can be made editable using the contenteditable attribute.

Just set the contenteditable to true on any of the elements you want to make editable.
It can be helpful in the making of a simple text editor.

<div contenteditable="true">
  Edit me!
</div>

Day 4- Implement a Download button with HTML5

Usually, when the user clicks on a link to media files, it will be opened in the browser.
If you want to give users the option to save that file on their computer, download attribute can be used.

The download attribute to <a> elements makes the linked URL a download link rather than a navigational. Meaning users can save the link rather than navigating to it.

The download attribute can be used with or without value. To rename the default name, a value can be given which becomes the name of the file.

<a href="this-is-the-download-link.pdf" download="Download.pdf">
  Download me
</a>

Day 5- Define options with datalist tag

⁣The Html5 <datalist> tag is used to provide autocomplete feature in the input field of the form.⁣
⁣
It specifies the set of predefined options for the user to input.⁣
⁣
To bind it to the input, it is usually used with the <input> element's list attribute whose value matches the datalist id.⁣
⁣It works with all types of inputs like data, range, color etc.⁣

<input list="languages" placeholder="Choose language" />
<datalist id="languages">
  <option>Python</option>
  <option>Javascript</option>
  <option>Java</option>
</datalist>

Day 6- Collapsible Sections with HTML5⁣

⁣Details tag is used to make collapsible sections when it is required to provide extra information about a subject that users can hide or view by their choice.
⁣
Used with the summary tag which specifies the title that can be clicked to expand or collapse the details.⁣

By default, the details are hidden, the open attribute can be used to change the default behavior.⁣

<details>
<summary> Javascript </summary>
<p> I am an amazing language </p>
</details>

Day 7- Responsive Images with srcset

⁣To make an image responsive means to switch between different versions of the image so that they are being displayed according to their respective device sizes and resolutions.⁣
⁣
⁣srcset, an attribute of <img> element is used to give URLs of different versions of the image and a descriptor so that the browser can display the most appropriate one in a given situation.⁣
⁣
Here, descriptor x represents device-pixel-ratio i.e a device with 2x resolution will only display the image associated with 2x in the srcset attribute. ⁣
⁣
The src attribute is present for browsers that don't understand srcset.

<img srcset="pizza-small.jpg,
             pizza-medium.jpg 1.5x,
             pizza-large.jpg 2x"
     src="pizza-large.jpg"
     alt="a slice of cheesy pizza">

Day 8- HTML Periodic Tables

⁣There exist periodic tables and cheatsheets for HTML elements. ⁣
⁣A great tool to find all the elements with their descriptions in a single place.⁣
These can be very helpful and handy as who remembers all the tags.

https://htmlcheatsheet.com/
https://developer.mozilla.org/en-US/docs/Learn/HTML/Cheatsheet
https://websitesetup.org/html5-periodical-table/

Day 9- All about Quotations

⁣Quotations are an important part of the content.⁣
There are few elements that can be used according to their semantic meanings to display quotations on your page:
⁣

The `<blockquote>` element:

Provides a section that defines quotations from another source.⁣
Used for indicating long quotations.⁣
Cite attribute is used to provide the URL of the source of the quotation.⁣

The `<q>` element:

Provides an inline quote in a block of text. ⁣
Used for indicating short quotations.⁣
Inserts quotation marks around the enclosed text.⁣

The `<cite>` element:

Provides the title of the source of work(e.g. book, album, song, poem, essay, etc.)⁣

<blockquote>
  The future was uncertain, absolutely, and there were many hurdles, twists, and turns to come, but as long as I kept moving forward, one foot in front of the other, the voices of fear and shame, the messages from those who wanted me to believe that I wasn't good enough, would be stilled.
  ― Chris Gardner,
  <cite>The Pursuit of Happyness</cite>
</blockquote>
<p>
  <q>The goal isn't to live forever, the goal is to create something that will.</q><br>
  ― Chuck Palahniuk, <cite>Diary</cite>
</p>

Day 10- Highlight it!

⁣Ever wanted to have highlighted text on your page?⁣
You can do it with just HTML, use <mark> tag to highlight parts of the text which needs extra attention.⁣
⁣
Mostly used with quotations which are from other sources to determine which text is more relevant according to you. ⁣
⁣
Don't use it only for decoration purpose.⁣
⁣
Difference between <mark> and <strong>-
<mark> denotes relevance of the content, while <strong> indicates importance.

<p>
  <q>The goal isn't to live forever, the goal is to <mark>create something</mark> that will.
  </q><br />
  ― Chuck Palahniuk, <cite>Diary</cite>
</p>

Difference between n++ and ++n?

Km-js — Sun, 17 Sep 2023 15:22:04 +0000

Understanding Increment Operations:

Before we delve into post-increment and pre-increment, let's clarify what an increment operation is in the context of programming. Simply put, an increment operation is used to increase the value of a variable by 1. It's like counting one step forward.

Imagine you have a variable **n **set to 5. If you want to increase its value by 1, there are two main ways to do it: post-increment and pre-increment.

Post-increment (n++):

Post-increment is like saying, "Use the current value of n, and after you've used it, increase it by 1."

For example, if you have n = 5, and you write x = n++, what happens? x gets the current value of n (which is 5), and then, as a polite gesture, n increases to 6. So, x gets 5, and n becomes 6.

int n = 5;
int x = n++;  // x gets 5, n becomes 6.

Pre-increment (++n):

Pre-increment, on the other hand, is more direct. It's like saying, "Increase the value of n by 1 first, and then use the new value."

Suppose n = 5. If you write x = ++n, this time, n becomes 6 immediately, and x receives that new value. So, x gets 6, and n is also 6.

int n = 5;
int x = ++n;  // n becomes 6, and x gets 6.

Choosing Between Post-increment and Pre-increment:

Now that you understand how post-increment and pre-increment work, you might wonder when to use which.

In most cases, it depends on your specific programming needs. If you want to use the current value of a variable and then increment it, post-increment (n++) is the way to go. On the other hand, if you need the incremented value right away, pre-increment (++n) is more efficient.

Conclusion:

In programming, post-increment (n++) uses the current value before increasing it, while pre-increment (++n) immediately provides the updated value. Mastering these concepts is a valuable skill for writing efficient code. Happy coding!

Difference between useEffect, useMemo, useCallback hooks?

Km-js — Mon, 04 Sep 2023 15:01:59 +0000

useEffect Hook

The useEffect hook is all about handling side effects in React components. Side effects typically include operations like data fetching, DOM manipulation, and managing subscriptions. Here's a breakdown of its key characteristics:

Purpose: The primary purpose of useEffect is to execute code that has side effects. These side effects might be related to the component rendering or changes in its dependencies.
Usage: You provide a callback function to useEffect, and React executes this function after the component has rendered or when specified dependencies have changed.
Typical Use Cases: useEffect is commonly used for tasks such as data fetching, setting up and cleaning up event listeners, and performing actions in response to changes in props or state.

useEffect(() => {
  // Code to execute after rendering or when specified dependencies change
}, [dependencies]);

useMemo Hook

The useMemo hook is all about memoization. Memoization is a technique where the result of an expensive function or expression is cached so that it's only recomputed when its dependencies change. Here's a breakdown:

Purpose: useMemo is used to memoize (cache) the result of a function or an expression. This can improve performance by preventing unnecessary calculations.
Usage: You provide a function and an array of dependencies to useMemo. React executes the function and caches its result. If the dependencies change, the function is re-executed, and the result is updated.
Typical Use Cases: Memoization is useful for computationally expensive calculations or preventing unnecessary re-renders of components.

const memoizedValue = useMemo(() => {
  // Expensive calculation or function
  return result;
}, [dependencies]);

useCallback Hook

The useCallback hook is closely related to useMemo, but it focuses on memoizing functions rather than values. It's particularly useful when passing callback functions to child components. Here's a breakdown:

Purpose: useCallback is used to memoize (cache) a function so that it's only recreated when its dependencies change. This can optimize performance when passing callbacks as props.
Usage: You provide a function and an array of dependencies to useCallback. React returns a memoized version of the function. If the dependencies change, a new memoized function is created.
Typical Use Cases: It's commonly used for memoizing callback functions, especially when passing those functions to child components.

const memoizedCallback = useCallback(() => {
  // Function to memoize
}, [dependencies]);

Key Differences

useEffect is used for handling side effects and executing code after rendering or when certain dependencies change.
useMemo is used to memoize the result of a function or expression to prevent unnecessary recalculations.
useCallback is used to memoize functions, especially useful for optimizing child components that depend on callback functions.

All three hooks take an array of dependencies. When these dependencies change, useEffect runs its effect function, useMemo recomputes the value, and useCallback recreates the memoized function.

In summary, these hooks have distinct purposes and are valuable tools for managing different aspects of your React components. Understanding when and how to use useEffect, useMemo, and useCallback can lead to more efficient and maintainable React applications.

DEV Community: Km-js

30 Creative Projects created with HTML, CSS and JavaScript- Part 3 #30days30projects

21. Dropify 📂

22. AgeTeller ⌛️

23. BackgroundEvoke 🎨

24. NightShade 🌙

25. PhotoFolio 🖼

26. Quotegram 🌈

27. ValidForm ✅

28. VoiceVibe 🔊

29. SoonPage 🚀

30. SubscribeMail 📧

30 Creative Projects created with HTML, CSS and JavaScript- Part 2 #30days30projects

11. MenuMagic ✨

12. Swift Calc ➕✖️

13. ImageScout 📸

14. QRFlow 🌐

15. InstaTimer 🕒

16. RoundFlow 🔄

17. ToastBurst 🥂

18. SecurePass 🔐

20. CryptoSheid 📈

30 Creative Projects created with HTML, CSS and JavaScript - Part 1 #30days30projects

1. Weatherly 🌦

2. Task Buddy 📝

3. Pocket Cal 📅

4. PassGenius 🔐

5. PopUp ✨

6. Pixel Clock ⏰

7. Quizzy 🧠

8. Toggle Password 🔒👁

9. Product Showcase Project 🛒

20 Days of HTML(Learn 20 amazing things about HTML) Part 2

Day 11- Drag and Drop

Day 12- Progress and Meter Elements

Day 13- Play some Music

Day 14- Show Insertion and Deletion

Day 15- Word Break Opportunity

Day 16- Best Practices

Day 17- Adding Color picker and Date picker into the forms

Day 18- Setting Shortcut Keys

Day 19- Make Input fields readonly

Day 20- Ways to improve Accessibility

20 Days of HTML(Learn 20 amazing things about HTML) Part 1

Day 1- Divide webpage into logical sections

Day 2- What are the Semantic elements? Why are they important?

Day 3- Make any content on your page editable by users

Day 4- Implement a Download button with HTML5

Day 5- Define options with datalist tag

Day 6- Collapsible Sections with HTML5⁣

Day 7- Responsive Images with srcset

Day 8- HTML Periodic Tables

Day 9- All about Quotations

The <blockquote> element:

The <q> element:

The <cite> element:

Day 10- Highlight it!

Difference between n++ and ++n?

Understanding Increment Operations:

Post-increment (n++):

Pre-increment (++n):

Choosing Between Post-increment and Pre-increment:

Conclusion:

Difference between useEffect, useMemo, useCallback hooks?

useEffect Hook

useMemo Hook

useCallback Hook

Key Differences

The `<blockquote>` element:

The `<q>` element:

The `<cite>` element: