Skip to content

Commit

Permalink
Added Pangram Checker: Avdhesh-Varshney#406
Browse files Browse the repository at this point in the history
  • Loading branch information
Anshika14528 committed Jun 30, 2024
1 parent 9165bf5 commit a9fbda7
Show file tree
Hide file tree
Showing 6 changed files with 212 additions and 1 deletion.
65 changes: 65 additions & 0 deletions Vanilla-JS-Projects/Basic/Pangram-Checker/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
<h1 align='center'><b>💥 Pangram 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 sentence contain every letter of the English alphabet at least once.

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

## :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]()


![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>
32 changes: 32 additions & 0 deletions Vanilla-JS-Projects/Basic/Pangram-Checker/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<!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>Pangram Checker</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div class="container">
<div class="header">
<h1 class="heading">Pangram Checker:</h1>
<h3 class="about">Pangram means given sentence contain every letter of the English alphabet at least once.</h3>
</div>
<div class="input">
<label for="string1">Sentence:</label>
<input type="text" id="string1" 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.
18 changes: 18 additions & 0 deletions Vanilla-JS-Projects/Basic/Pangram-Checker/script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
function check() {
const inputString = document.getElementById('string1').value.toLowerCase();
const alphabet = 'abcdefghijklmnopqrstuvwxyz';
let isPangram = true;

for (let char of alphabet) {
if (!inputString.includes(char)) {
isPangram = false;
break;
}
}

const outputText = isPangram
? 'The sentence is a pangram.'
: 'The sentence is not a pangram.';

document.getElementById('output-text').innerText = outputText;
}
96 changes: 96 additions & 0 deletions Vanilla-JS-Projects/Basic/Pangram-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(134, 0, 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(134, 0, 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(134, 0, 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(134, 0, 139);
border: none;
border-radius: 0.5rem;
cursor: pointer;
}

.output button:hover {
background-color: rgb(9, 0, 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;
font-weight: bold;
}
2 changes: 1 addition & 1 deletion Vanilla-JS-Projects/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@
| 43 | [Code-Editor](./Intermediate/Code-Editor/) | ![Intermediate](https://img.shields.io/badge/Intermediate-FFD700?style=for-the-badge) |
| 44 | [Prime-Number-Checker](./Basic/Prime-Number-Checker/) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge) |
| 45 | [Fitness Website](./Intermediate/Fitness-Website/) | ![Intermediate](https://img.shields.io/badge/Intermediate-FFD700?style=for-the-badge) |

| 46 | [Pangram-Checker](./Basic/Pangram-Checker/) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge) |
</div>


Expand Down

0 comments on commit a9fbda7

Please sign in to comment.