Skip to content

Commit 9fd5cee

Browse files
harshita2216harshita2216
authored
Merge pull request #168 from RiyaGupta89/button-change-effect-app
Button change effect app
2 parents 254a374 + f554be3 commit 9fd5cee

File tree

11 files changed

+584
-2
lines changed

11 files changed

+584
-2
lines changed

‎Index.md

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,10 +62,11 @@
6262
| [Double Vertical Slider](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Double-Vertical-Slider) | This App helps to Slide the two different parts of the webpage content at the same time . |
6363
| [Basic Contact Form](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Basic-Contact-Form) | A basic contact form having send and reset button. |
6464
| [Compound Interest Calculator](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Compound%20Interest%20Calculator) | A basic gradient Background Generator which allows you to create a background by selecting your required colors. This will make up a gradient mix and provide you the code line so that you can use it in your Website |
65-
6665
| [Youtube UI Clone](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Youtube-Clone) | A project which aims to clone YouTube UI with responsiveness by using HTML & CSS. |
67-
6866
| [Blog Application](https://github.com/khushi-purwar/Web-dev-mini-projects/tree/main/Blog%20Application) | Blog Application is an application where user can add a new blog, edit it, delete it as well as view other blogs and make changes in them. |
6967
| [Typing Speed Test Website](https://github.com/khushi-purwar/Web-dev-mini-projects/tree/main/Typing%20Speed%20Test%20Website) | This website is used to check the typing speed of the user. It will the give the information of how many seconds require for typing the particular sentence. |
7068
| [Breaking Bad Characters](https://github.com/khushi-purwar/Web-dev-mini-projects/tree/main/breaking-bad-characters) | A single page web application that uses the breaking bad API to display and filter characters from the show |
69+
| [Javascript Color Change App](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/JAVASCRIPT%20BUTTON%20APP) | It is a basic web app where the user can select a color from the options that are given on the web app and as he clicks on that option, all the buttons background color changes to that color. |
70+
71+
7172

‎JAVASCRIPT BUTTON APP/.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules

‎JAVASCRIPT BUTTON APP/README.md

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<h1>Welcome to the Javascript Button App</h1>
2+
3+
<p>Simple web app written in HTML, CSS, JAVASCRIPT where the user can select a color from the options that are given on the web app and as he clicks on that option, all the buttons background color changes to that color.</p>
4+
5+
<h3>Used Technologies</h3>
6+
<ul>
7+
<li>HTML5</li>
8+
<li>CSS3</li>
9+
<li>JavaScript</li>
10+
</ul>
11+
12+
<h3>Use of this Project</h4>
13+
<p>This project is for practicing HTML, CSS, JAVASCRIPT skils. This is good beginner friendly project to get started with. It changes the background color of the buttons.</p>
14+
15+
#### Steps to Use:
16+
---
17+
18+
- Download or clone the repository
19+
```
20+
git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
21+
```
22+
- Go to the directory
23+
- Open terminal
24+
- Run
25+
```
26+
cd '.\JAVASCRIPT BUTTON APP\'
27+
```
28+
- Then run
29+
```
30+
node app.js
31+
```
32+
- Have a look at the webapp.
33+
34+
## Screenshots
35+
36+
![Demo1](public/images/challenge1.png)
37+
38+
<br>
39+
40+
![Demo2](public/images/challenge2.png)

‎JAVASCRIPT BUTTON APP/app.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
const express = require("express");
2+
3+
const app = express();
4+
5+
app.use(express.static("public"));
6+
7+
app.get("/", function(req, res){
8+
res.sendFile(__dirname + "/index.html");
9+
});
10+
11+
app.listen(3000, function(req, res) {
12+
console.log("Server started running on port 3000.");
13+
})

‎JAVASCRIPT BUTTON APP/index.html

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="css/style.css">
8+
<title>Buttons</title>
9+
</head>
10+
11+
<body>
12+
<div class="container">
13+
<h2 id="change-my-color">Challenge 4: Changing the colors of all buttons</h2>
14+
<div class="flex-box">
15+
<form action="">
16+
<select name="backdrop" id="background" onchange="buttonChangeColor(this)">
17+
<option value="random">Random</option>
18+
<option value="red">Red</option>
19+
<option value="green">Green</option>
20+
<option value="reset">Reset</option>
21+
</select>
22+
</form>
23+
<button class="btn btn-blue">Submit!</button>
24+
<button class="btn btn-red">Click!</button>
25+
<button class="btn btn-yellow">Tap!</button>
26+
<button class="btn btn-green">Push!</button>
27+
</div>
28+
29+
</div>
30+
31+
<script src="js/script.js"></script>
32+
33+
</body>
34+
35+
</html>

0 commit comments

Comments
 (0)