Skip to content

Commit a0c5ace

Browse files
harshita2216harshita2216
authored
Merge branch 'main' into 2048game
2 parents e1790ee + cd021f1 commit a0c5ace

File tree

6 files changed

+198
-7
lines changed

6 files changed

+198
-7
lines changed

‎Index.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -120,4 +120,5 @@
120120
| [Tabla](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/tabla) | It is a webapp that plays tabla beat on clicked on the tabla or clicked d or t.
121121
| [QR Code Generator](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/QR-CODE-Generator) | A simple web application which will generate a QR Code.
122122
| [Classifiers using JS](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Classifier-Using-JS) | It is a website which contains three different classifiers, built with the help of API.
123+
| [String Palindrome Checker](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/String%20Palindrome%20Checker) | Checks if the entered word is a palindrome or not, and also checks the string length.
123124
| [2048 Game](https://github.com/Gyynnn/Web-dev-mini-projects/tree/2048game/2048%20Game) | A simple 2048 game on website.

‎JAVASCRIPT GAME/README.md

Lines changed: 32 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,35 @@
1-
# Javascript Dinosaur Game 🦕
2-
3-
![dinosaurgame](https://user-images.githubusercontent.com/72425181/124359775-0b46ac80-dc44-11eb-9984-baa31075ebc7.png)
1+
# Welcome to the Dinosaur Game 🦕
42

53
*This web app allows you to play the dinosaur game where you have to make the dinosaur jump and safe himself from the cactus. If the dinosaur touches the cactus, the player lose. This is a fun game to play. Also, a good game to get started with Javascript*.
6-
>Technologies used:
7-
- HTML
8-
- CSS
9-
- JAVASCRIPT
104

5+
6+
## 💻Tech Stack
7+
<br>
8+
9+
![HTML](https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white)
10+
![CSS](https://img.shields.io/badge/css3%20-%231572B6.svg?&style=for-the-badge&logo=css3&logoColor=white)
11+
![JS](https://img.shields.io/badge/javascript%20-%23323330.svg?&style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)
12+
13+
<br>
14+
15+
16+
### How to get the project on your local machine:
17+
18+
---
19+
20+
- Download or clone the repository
21+
22+
```
23+
git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
24+
```
25+
26+
- Go to the directory
27+
- Open Javascript Game folder
28+
- Open index.html with live server by right clicking on the mouse cursor
29+
30+
### Screenshots
31+
32+
33+
![dinosaurgame](https://user-images.githubusercontent.com/72425181/124359775-0b46ac80-dc44-11eb-9984-baa31075ebc7.png)
34+
35+
# Happy Coding!

‎String Palindrome Checker/index.html

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
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">
6+
<title>String Palindrome Checker</title>
7+
<meta name="description" content="Checks if a word is a palindrome.">
8+
<meta name="author" content="Supritha">
9+
<link rel="stylesheet" href="style.css">
10+
</head>
11+
<body>
12+
<div class="container">
13+
<div class="inputBox">
14+
<h1>String Palindrome checker</h1><label>Enter a word</label><input type="text" name="" id="string"><br><label>String length</label><input type="text" name="" id="stringLength" disabled><br><label>Palindrome ?</label><input type="text" name="" id="stringPal" disabled><br><button id="btn">Go</button>
15+
</div>
16+
<!--inputBox-->
17+
</div>
18+
<!--container-->
19+
<script src="script.js"></script>
20+
</body>
21+
</html>
22+

‎String Palindrome Checker/readme.md

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<h1>String Palindrome Checker</h1>
2+
3+
<p>Checks if the entered word is a palindrome or not, and also checks the string length.</p>
4+
5+
### Use of the Project:
6+
7+
<p>User enters a word the JS app returns the length of the string and tells if the entered word is a palindrome or not.</p>
8+
9+
<h3>Used Technologies</h3>
10+
<ul>
11+
<li>HTML5</li>
12+
<li>CSS3</li>
13+
<li>JavaScript</li>
14+
</ul>
15+
16+
#### Steps to Use:
17+
18+
---
19+
20+
- Download or clone the repository
21+
22+
```
23+
git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
24+
```
25+
26+
- Go to the directory
27+
- Run the index.html file
28+
- Start Checking!
29+
30+
<h3> Video Demo </h3>
31+
32+
<video controls width="960" alt="palindrome">
33+
<source src="https://user-images.githubusercontent.com/78655439/127328702-50b0e983-cd63-4dd9-94d8-513bc7b8d467.mp4">
34+
</video>
35+
36+
<br>
37+
38+

‎String Palindrome Checker/script.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
document.getElementById("btn").addEventListener("click", function() {
2+
let your_string = document.getElementById('string').value;
3+
let string_length = your_string.length;
4+
let string_rev = your_string.split("").reverse().join("");
5+
let new_string = your_string.toUpperCase();
6+
let new_revstring = string_rev.toUpperCase();
7+
8+
if (new_string == new_revstring) {
9+
document.getElementById('stringPal').value = "Yes";
10+
} else {
11+
document.getElementById('stringPal').value = "No";
12+
}
13+
14+
document.getElementById('stringLength').value = string_length;
15+
});
16+

‎String Palindrome Checker/style.css

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
/*===== GOOGLE FONTS =====*/
2+
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&display=swap");
3+
4+
* {
5+
margin: 0;
6+
padding: 0;
7+
font-family: "Montserrat";
8+
box-sizing: border-box;
9+
user-select: none;
10+
font-weight: 700;
11+
}
12+
13+
html,
14+
body {
15+
text-align: center;
16+
display: flex;
17+
height: 100%;
18+
align-items: center;
19+
justify-content: center;
20+
background: #001f64;
21+
}
22+
23+
.container {
24+
position: absolute;
25+
}
26+
27+
h1 {
28+
padding-bottom: 20px;
29+
}
30+
31+
label {
32+
padding-left: 20px;
33+
padding-top: 20px;
34+
float: left;
35+
font-size: 20px;
36+
font-weight: 700;
37+
}
38+
39+
.inputBox {
40+
position: relative;
41+
background: #ba55d3;
42+
width: 500px;
43+
padding: 20px 30px;
44+
border-radius: 5px;
45+
box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff00de,
46+
0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de;
47+
height: 450px;
48+
}
49+
50+
.inputBox h2 {
51+
font-size: 24px;
52+
padding-left: 15px;
53+
}
54+
55+
.inputBox input {
56+
position: relative;
57+
width: 30%;
58+
height: 50px;
59+
margin: 15px 0 20px;
60+
background: #fff;
61+
border: 2px solid lightgrey;
62+
padding-left: 15px;
63+
border-radius: 5px;
64+
font-size: 15px;
65+
outline: none;
66+
transition: all 0.2s;
67+
}
68+
69+
.inputBox input:focus {
70+
border-color: #97e5d7;
71+
box-shadow: inset 0 0 3px #2fd072;
72+
}
73+
74+
.inputBox #btn {
75+
outline: none;
76+
position: relative;
77+
color: black;
78+
font-weight: 800;
79+
cursor: pointer;
80+
background: #97e5d7;
81+
font-size: 20px;
82+
padding: 10px 15px;
83+
border-radius: 8px;
84+
width: 150px;
85+
margin-left: 1%;
86+
}
87+
88+
89+

0 commit comments

Comments
 (0)