DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,503 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for πŸš€#1 JavaScript Project Series That Makes You Pro.
Chetan Atrawalkar
Chetan Atrawalkar

Posted on • Updated on

πŸš€#1 JavaScript Project Series That Makes You Pro.

Hello Coders!πŸ‘‹

  • JavaScript is one of the leading names when it comes to front-end web development. Moreover, it is one of the best programming languages to learn and earn in 2021. There are several ways of learning JS, ranging from books to tutorials and one amazing way to learn javascript is building a projects.

  • So I'm start the series of javascript projects for learning javascript with enjoyable projects. Hope you like this mini project series.
    wow

πŸ’Ÿ Save This Series For Upcoming Projects.

  • πŸ’₯ Let's get started....πŸš€

1.🎨 Color Theme Switcher Using JavaScript.

  • In this, we're going to see how you can change the theme of your website to any color you want using JavaScript. This can be considered as a mini-project if you're learning JavaScript. It teaches you DOM concepts and how to change styling of CSS through JavaScript.

Here's a preview :-

preview

  • Step - 1: First Create project files - Index.html, Style.css and Script.js.

  • Step - 2: Then Copy the below HTML code and paste it into your code editor.

Index.html

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Color Change Buttons</title>
  <link rel="stylesheet" href="style.css">

</head>
<body>

<nav class="menu">
    <a href="#" class="menu__item menu__item--yellow " data-background="e4a924">
    </a>
    <a href="#" class="menu__item menu__item--red" data-background="c92142">  
    </a>
    <a href="#" class="menu__item menu__item--green" data-background="37b983">
    </a>
    <a href="#" class="menu__item menu__item--purple" data-background="9f32b8">
    </a>
  </nav>

  <script  src="script.js"></script>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode
  • Here we have used tag to choose various colors for the theme. We have used an attribute "data-background" to specify the default background of the anchor tags.

  • Step - 3: After creating html file next is the use CSS code for styling.

Style.css

html {
  height: 100%;
  font-size: 1.3vw;
}
body {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f6f7fc;
  transition: background-color 0.55s;
  will-change: background-color;
  margin: 0;
}
.menu__item {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 12.5rem;
  display: inline-block;
  margin-left: 2.1rem;
  animation-name: close;
  animation-duration: 0s;
  will-change: width background-color;
  transition: background 0.55s;
  vertical-align: top;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 5px rgba(0,0,0, 0.3);
}

.menu__item:first-child {
  margin-left: 0;
  background: #fabe2b;
}
.menu__item:nth-child(2){
  background: #f43768;
}
.menu__item:nth-child(3){
  background: #45e1a3;
}
.menu__item:nth-child(4){
  background: #c152da;
}
.menu__item--animate {
  animation-duration: 0.5s;
}
.menu__item--active {
  width: 17rem;
  animation-name: open;
}

.menu__item--active.menu__item--yellow { background: #fabe2b; }
.menu__item--active.menu__item--red { background: #f43768; }
.menu__item--active.menu__item--green { background: #45e1a3; }
.menu__item--active.menu__item--purple { background: #c152da; }
Enter fullscreen mode Exit fullscreen mode
  • Step - 4: Below is the JavaScript code which is the most important part in this Theme changer.
  • We declared a const 'menuItems' which will get the tag attributes of our tags.

  • Then in that const we store all the mouse event listener and at the same time calling the `buttonClick()` method which assigns the specified color to the background.

Script.js

const menuItems = document.querySelectorAll('.menu__item');

for (var i = 0; i < menuItems.length; i++) {
  menuItems[i].addEventListener('click', buttonClick);
}

function buttonClick() {
  if (!this.classList.contains('menu__item--active')) {
    document.body.style.backgroundColor = `#${this.getAttribute('data-background')}`;
  }
}
Enter fullscreen mode Exit fullscreen mode

And that's it. You're done.

πŸ’Ÿ Save This Series For Upcoming Projects.

That’s all! Let me know by comment below if you have successfully implemented this project.

πŸ›‘ And If you need more content like this follow @codev_land on instagram.

Keep Claim And Just Code It 😎

Top comments (1)

The discussion has been locked. New comments can't be added.
Collapse
 
abhilearnstocode profile image
Info Comment hidden by post author - thread only accessible via permalink
Abhii

JavaScript Project series that makes you pro

The title is catchy but I don't think so it will serve it's purpose unless you explain the code to your readers. Most of the readers reading this article may be beginners in JS and they won't get anything if you just serve them the code.

Try to explain the code, explain the concepts and the logic behind your code. Also make sure you include a codepen so that readers can actually see the output rather than blindly following the tutorial.

I hope you take it as constructive criticism and All the best for the future parts of the series.

Some comments have been hidden by the post's author - find out more

🀯

"I made 10x faster JSON.stringify() functions, even type safe"

☝️ Must read for JS devs