Skip to content

Commit 894c066

Browse files
harshita2216harshita2216
authored
Merge pull request #324 from jugeshraghav/magicColorChanger
Magic color changer
2 parents 666ce01 + f3298b1 commit 894c066

File tree

10 files changed

+146
-0
lines changed

10 files changed

+146
-0
lines changed

‎Index.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,4 +125,5 @@
125125
| [Movie Search App](https://github.com/Gyynnn/Web-dev-mini-projects/tree/main/Movie-Search-App) | Simple Movie Search App in HTML, CSS, and JavaScript using the APIs for fetching movies information.
126126
| [News App](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/news-app)| This is a React app which fetches the recent news from an api and renders it on the DOM without reloading the page.
127127
I've used the concept of *Async functions* and *react hook usestate* also worked with *APIs*.
128+
| [Magic-Color-Changer](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Magic-Color-Changer)| This is a pure javascript project.
128129
|

‎Magic-Color-Changer/images/blue.png

132 KB
Loading

‎Magic-Color-Changer/images/green.png

131 KB
Loading

‎Magic-Color-Changer/images/purple.png

133 KB
Loading

‎Magic-Color-Changer/images/red.png

131 KB
Loading

‎Magic-Color-Changer/images/yellow.png

133 KB
Loading

‎Magic-Color-Changer/index.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Document</title>
7+
<link rel="stylesheet" href="style2.css">
8+
</head>
9+
<body>
10+
<div class="main">
11+
<div class="color red"></div>
12+
<div class="color violet"></div>
13+
<div class="color cyan"></div>
14+
<div class="color green"></div>
15+
<div class="color yellow"></div>
16+
17+
</div>
18+
<div class="circle"></div>
19+
<script src="script2.js"></script>
20+
</body>
21+
</html>

‎Magic-Color-Changer/readme.md

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
# Welcome 🖐 to the Magic Color Changer.
2+
It is a simple and resonsive Food Website Website, you can navigate through them.
3+
4+
5+
## 💻Tech Stack
6+
<br>
7+
8+
![HTML](https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white)
9+
![CSS](https://img.shields.io/badge/css3%20-%231572B6.svg?&style=for-the-badge&logo=css3&logoColor=white)
10+
![JS](https://img.shields.io/badge/javascript%20-%23323330.svg?&style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)
11+
12+
<br>
13+
14+
### How to use:
15+
16+
---
17+
18+
- Download or clone the repository
19+
20+
```
21+
git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
22+
```
23+
24+
- Go to the directory
25+
- Run the index.html file
26+
- Navigate the website.
27+
28+
<br>
29+
30+
## how to see the colors changing
31+
### to viw different colors hover on the colors.
32+
![Red](images/red.png)
33+
![purple](images/purple.png)
34+
![blue](images/blue.png)
35+
![green](images/green.png)
36+
![yellow](images/yellow.png)
37+
38+
39+
## Happy Coding!

‎Magic-Color-Changer/script2.js

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
var red = document.querySelector(".red");
2+
var violet = document.querySelector(".violet");
3+
var cyan = document.querySelector(".cyan");
4+
var green = document.querySelector(".green");
5+
var yellow = document.querySelector(".yellow");
6+
var circle = document.querySelector(".circle");
7+
8+
9+
//red.addEventListener("mouseenter",()=>{
10+
// circle.style.background="red";
11+
//})
12+
//violet.addEventListener("mouseenter",()=>{
13+
// circle.style.background="violet";
14+
//})
15+
//cyan.addEventListener("mouseenter",()=>{
16+
// circle.style.background="cyan";
17+
//})
18+
//green.addEventListener("mouseenter",()=>{
19+
// circle.style.background="green";
20+
//})
21+
//yellow.addEventListener("mouseenter",()=>{
22+
// circle.style.background="yellow";
23+
//})
24+
//var color = getBgColor(element);
25+
26+
var getBgColor = (selectedElement) => {
27+
return window.getComputedStyle(selectedElement).backgroundColor;
28+
}
29+
30+
31+
32+
const magicColorChanger = (element, color) => {
33+
return element.addEventListener("mouseenter", () => {
34+
circle.style.background = color;
35+
});
36+
};
37+
magicColorChanger(red, getBgColor(red));
38+
magicColorChanger(violet, getBgColor(violet));
39+
magicColorChanger(cyan, getBgColor(cyan));
40+
magicColorChanger(green, getBgColor(green));
41+
magicColorChanger(yellow, getBgColor(yellow));
42+

‎Magic-Color-Changer/style2.css

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
*{
2+
margin:0;
3+
padding:0;
4+
background:black;
5+
6+
}
7+
.main{
8+
/*border:1px solid green; */
9+
width:100vw;
10+
height:30vh;
11+
display:flex;
12+
justify-content:center;
13+
14+
}
15+
.color{
16+
/*border:1px solid black;*/
17+
width:100px;
18+
height:30px;
19+
margin:2px;
20+
margin-top:50px;
21+
}
22+
.red{
23+
background-color:red;
24+
}
25+
.violet{
26+
background-color:violet;
27+
}
28+
.cyan{
29+
background-color:cyan;
30+
}
31+
.green{
32+
background-color:green;
33+
}
34+
.yellow{
35+
background-color:yellow;
36+
}
37+
.circle{
38+
width:250px;
39+
height:250px;
40+
/*border:1px solid black;*/
41+
border-radius:50%;
42+
margin:auto;
43+
}

0 commit comments

Comments
 (0)