My Hacktoberfest Experience

Ahmad — Fri, 06 Nov 2020 06:01:32 +0000

[Intro Heading]

Hello 😁, I joined DEV Community to share some of my works and learn from others, and I learned a lot from articles. Cause I can read it anytime & anywhere

Background

Now I finished my 4 pull requests and got accepted, and I got a Huge experience in this journey.

Contributions

I participated in open-source projects such as:
https://github.com/c0sm0void/ProjectMRU
I participated in c0sm0void/ProjectMRU so I can share my experience with other people, and help people if they got a problem or a question in their code.

Reflections

I really enjoyed working on open-source projects, and I'll participate again 😁

Theme Selector

Ahmad — Wed, 12 Jun 2019 06:21:38 +0000

Well, Today I'll show you how to make " Theme Selector "

Result:

Add jQuery

jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

add Themes btns

So how we can add it, and how much?

as much as you want, if you want to add 3 btns u can.

go to index.html and add ul with class switch-color

.then : inside the ul tag.
add as much as you want li tag, with attribute data-color

<li data-color="COLOR"></li>

How We'll use it?
well, for example:

We'll get this:

So, now we have to add CSS

CSS

First, we will add :root that it will change when we click the theme btns

:root { --maincolor: #080; // Original Theme }

Quick CSS code

.switch-color li { display: inline-block; width: 20px; height: 20px; cursor: pointer; transition: 0.5s; }

and then style for the li

.switch-color li:first-child { background-color: #b71540; color: white; } .switch-color li:nth-child(2) { background-color: #0c2461; } .switch-color li:nth-child(3) { background-color: #3c6382; } .switch-color li:nth-child(4) { background-color: #079992; } .switch-color li:nth-child(5) { background-color: #e58e26; } .switch-color li:nth-child(6) { background-color: #8e44ad; } .switch-color li:nth-child(7) { background-color: #2c3e50; color: black; }

Result:

Now we want some content to test the btns.

Content

Soo quick code HTML & CSS for Content

HTML

<div class="main"> <h2>Title</h2> <div class="main-content"> Content </div> </div>

CSS

main h2 { color: var(--maincolor); // From => :root } .main-content { background-color: var(--maincolor); // From => :root color: #fff; padding: 20px; }

Result:

JavaScript

$(function() { $(".switch-color li").on("click", function() { $(":root").css("--maincolor", $(this).data("color")); }); });

Explain: in click one of ul items. it will change --maincolor in :root to the data from the clicked li.

That's it :)

DEV Community: Ahmad

My Hacktoberfest Experience

[Intro Heading]

Background

Contributions

Reflections

Theme Selector

Add jQuery

add Themes btns

CSS

Content

CSS

JavaScript