Skip to content

Commit

Permalink
Added Anagram Checker: #358 (#371)
Browse files Browse the repository at this point in the history
* Added Anagram Checker: #358

* Made changes
  • Loading branch information
Anshika14528 authored Jun 22, 2024
1 parent 4f953a2 commit 58e72ea
Show file tree
Hide file tree
Showing 6 changed files with 217 additions and 0 deletions.
65 changes: 65 additions & 0 deletions Vanilla-JS-Projects/Basic/Anagram-Checker/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
<h1 align='center'><b>💥 Anagram Checker 💥</b></h1>

<!-- -------------------------------------------------------------------------------------------------------------- -->

<h3 align='center'>Tech Stack Used 🎮</h3>
<!-- enlist all the technologies used to create this project from them (Remove comment using 'ctrl+z' or 'command+z') -->

<div align='center'>

![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)
![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)
<!-- ![Bootstrap](https://img.shields.io/badge/bootstrap-%238511FA.svg?style=for-the-badge&logo=bootstrap&logoColor=white) -->
![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)
<!-- ![jQuery](https://img.shields.io/badge/jquery-%230769AD.svg?style=for-the-badge&logo=jquery&logoColor=white) -->
<!-- ![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB) -->
<!-- ![Redux](https://img.shields.io/badge/redux-%23593d88.svg?style=for-the-badge&logo=redux&logoColor=white) -->
<!-- ![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white) -->
<!-- ![Web3.js](https://img.shields.io/badge/web3.js-F16822?style=for-the-badge&logo=web3.js&logoColor=white) -->
<!-- ![Express.js](https://img.shields.io/badge/express.js-%23404d59.svg?style=for-the-badge&logo=express&logoColor=%2361DAFB) -->
<!-- ![Angular.js](https://img.shields.io/badge/angular.js-%23E23237.svg?style=for-the-badge&logo=angularjs&logoColor=white) -->
<!-- ![Next JS](https://img.shields.io/badge/Next-black?style=for-the-badge&logo=next.js&logoColor=white) -->
<!-- ![NodeJS](https://img.shields.io/badge/node.js-6DA55F?style=for-the-badge&logo=node.js&logoColor=white) -->
<!-- ![Vue.js](https://img.shields.io/badge/vuejs-%2335495e.svg?style=for-the-badge&logo=vuedotjs&logoColor=%234FC08D) -->
<!-- ![MongoDB](https://img.shields.io/badge/MongoDB-%234ea94b.svg?style=for-the-badge&logo=mongodb&logoColor=white) -->
</div>


![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)

<!-- -------------------------------------------------------------------------------------------------------------- -->

## :zap: Description 📃

- This application can tell if given two strings whether one string can be rearranged to get another string and vice versa.

<!-- -------------------------------------------------------------------------------------------------------------- -->

## :zap: How to run it? 🕹️

<!-- add the steps how to run the project -->
- Fork this project and run the `index.html` file directly.

<!-- -------------------------------------------------------------------------------------------------------------- -->

## :zap: Screenshots 📸
<!-- add the screenshot of the project (Mandatory) -->

![image](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/168436423/807fe995-39c1-4270-b9d2-2fd2ce0e02c8)


![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)


<!-- -------------------------------------------------------------------------------------------------------------- -->

<h4 align='center'>Developed By <b><i>Anshika</i></b> </h4>
<p align='center'>
<a href='https://github.com/Anshika14528'>
<img src='https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white' />
</a>
</p>

<h4 align='center'>Happy Coding 🧑‍💻</h4>

<h3 align="center">Show some &nbsp;❤️&nbsp; by &nbsp;🌟&nbsp; this repository!</h3>
35 changes: 35 additions & 0 deletions Vanilla-JS-Projects/Basic/Anagram-Checker/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anagram Checker</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div class="container">
<div class="header">
<h1 class="heading">Anagram Checker:</h1>
<h3 class="about">Anagrams means given two strings whether one string can be rearranged to get another string.
</h3>
</div>
<div class="input">
<label for="string1">String1:</label>
<input type="text" id="string1" required>
<label for="string2">String2:</label>
<input type="text" id="string2" required>
</div>
<div class="output">
<button onclick="check()">Check</button>
<div class="output-box">
<p id="output-text"></p>
</div>
</div>
</div>
<script src="script.js"></script>
</body>

</html>
Binary file not shown.
20 changes: 20 additions & 0 deletions Vanilla-JS-Projects/Basic/Anagram-Checker/script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
function check() {

var string1 = document.getElementById("string1").value;
var string2 = document.getElementById("string2").value;


string1 = string1.replace(/[^a-zA-Z]/g, '').toLowerCase();
string2 = string2.replace(/[^a-zA-Z]/g, '').toLowerCase();

string1 = string1.split('').sort().join('');
string2 = string2.split('').sort().join('');

var result = (string1 === string2);

if (result) {
document.getElementById("output-text").innerText = "The strings are anagrams.";
} else {
document.getElementById("output-text").innerText = "The strings are not anagrams.";
}
}
96 changes: 96 additions & 0 deletions Vanilla-JS-Projects/Basic/Anagram-Checker/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
* {
box-sizing: border-box;
}

body {
background-color: rgb(244, 127, 146);
font-family: 'Arial', sans-serif;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.about {
font-weight: bold;
color: rgb(0, 118, 139);
}

.container {
width: 70%;
background-color: rgb(254, 254, 229);
border-radius: 1rem;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.header {
text-align: center;
margin-bottom: 20px;
}

.heading {
font-size: 2.5rem;
color: rgb(0, 118, 139);
font-weight: bold;
}

.input {
font-weight: bold;

display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
padding: 20px;
}

.input label {
font-size: 1.5rem;
color: rgb(0, 118, 139);
font-weight: bold;
}

.input input {
width: 80%;
padding: 10px;
font-size: 1.2rem;
border-radius: 0.5rem;
border: 2px solid darkblue;
}

.output {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20px;
}

.output button {
padding: 10px 20px;
font-size: 1.5rem;
color: white;
background-color: rgb(0, 118, 139);
border: none;
border-radius: 0.5rem;
cursor: pointer;
}

.output button:hover {
background-color: rgb(0, 118, 139);
}

.output-box {
margin-top: 20px;
width: 80%;
background-color: rgb(224, 242, 255);
padding: 15px;
border-radius: 0.5rem;
text-align: center;
}

p {
font-size: 1.5rem;
color: darkblue;
}
1 change: 1 addition & 0 deletions Vanilla-JS-Projects/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@
| 37 | [Text-to-Image-Generator](./Intermediate/Text-to-Image-Generator/) | ![Intermediate](https://img.shields.io/badge/Intermediate-FFD700?style=for-the-badge) |
| 38 | [Text-Translator](./Basic/Text-Translator/) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge) |
| 39 | [Interactive-Periodic-Table](./Intermediate/Interactive-Periodic-Table/) | ![Intermediate](https://img.shields.io/badge/Intermediate-FFD700?style=for-the-badge) |
| 40 | [Anagram-Checker](./Basic/Anagram-Checker/) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge)
</div>


Expand Down

0 comments on commit 58e72ea

Please sign in to comment.