diff --git a/Vanilla-JS-Projects/Basic/Pangram-Checker/README.md b/Vanilla-JS-Projects/Basic/Pangram-Checker/README.md new file mode 100644 index 00000000..a54001e5 --- /dev/null +++ b/Vanilla-JS-Projects/Basic/Pangram-Checker/README.md @@ -0,0 +1,65 @@ +

đŸ’Ĩ Pangram Checker đŸ’Ĩ

+ + + +

Tech Stack Used 🎮

+ + +
+ + ![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) + + ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E) + + + + + + + + + + + +
+ + +![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? 🕹ī¸ + + +- Fork this project and run the `index.html` file directly. + + + +## :zap: Screenshots 📸 + + +![image](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/168436423/35ea6ed1-6dcd-4e6e-a1e8-d12e495a3199) + + +![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847) + + + + +

Developed By Anshika

+

+ + + +

+ +

Happy Coding 🧑‍đŸ’ģ

+ +

Show some  â¤ī¸  by  đŸŒŸ  this repository!

diff --git a/Vanilla-JS-Projects/Basic/Pangram-Checker/index.html b/Vanilla-JS-Projects/Basic/Pangram-Checker/index.html new file mode 100644 index 00000000..939bdb65 --- /dev/null +++ b/Vanilla-JS-Projects/Basic/Pangram-Checker/index.html @@ -0,0 +1,32 @@ + + + + + + + + Pangram Checker + + + + +
+
+

Pangram Checker:

+

Pangram means given sentence contain every letter of the English alphabet at least once.

+
+
+ + +
+
+ +
+

+
+
+
+ + + + \ No newline at end of file diff --git a/Vanilla-JS-Projects/Basic/Pangram-Checker/screenshot.webp b/Vanilla-JS-Projects/Basic/Pangram-Checker/screenshot.webp new file mode 100644 index 00000000..d4613b97 Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Pangram-Checker/screenshot.webp differ diff --git a/Vanilla-JS-Projects/Basic/Pangram-Checker/script.js b/Vanilla-JS-Projects/Basic/Pangram-Checker/script.js new file mode 100644 index 00000000..3eac9f52 --- /dev/null +++ b/Vanilla-JS-Projects/Basic/Pangram-Checker/script.js @@ -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; +} diff --git a/Vanilla-JS-Projects/Basic/Pangram-Checker/style.css b/Vanilla-JS-Projects/Basic/Pangram-Checker/style.css new file mode 100644 index 00000000..f6b0b028 --- /dev/null +++ b/Vanilla-JS-Projects/Basic/Pangram-Checker/style.css @@ -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; +} \ No newline at end of file diff --git a/Vanilla-JS-Projects/README.md b/Vanilla-JS-Projects/README.md index 278e9424..addc0fa4 100644 --- a/Vanilla-JS-Projects/README.md +++ b/Vanilla-JS-Projects/README.md @@ -71,7 +71,7 @@ | 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 | [Drag-and-Drop](./Intermediate/Drag-and-Drop/) | ![Intermediate](https://img.shields.io/badge/Intermediate-FFD700?style=for-the-badge) | - +| 47 | [Pangram-Checker](./Basic/Pangram-Checker/) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge) |