Skip to content

Commit 6c2cc67

Browse files
harshita2216harshita2216
authored
Merge branch 'main' into Siddhi/simon-game
2 parents 57b35a6 + 9fd5cee commit 6c2cc67

File tree

11 files changed

+582
-0
lines changed

11 files changed

+582
-0
lines changed

‎Index.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,3 +67,4 @@
6767
| [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. |
6868
| [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 |
6969
| [Simon Game](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Simon_Game) |A basic memory game in which there are 4 boxes of different colors and one box is blinked. The user has to click the boxes blinked and also has to click the previous blinked boxes as well.|
70+
| [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. |

‎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)