ISSUE#7: 🌟 Contribute Your Own HTML/CSS/JavaScript Mini Project! 🎉

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}

README.md

@@ -6,13 +6,15 @@ Feel free to explore, adapt, and contribute to any of these projects!
 
 ---
 
-| #   | Project Name | Image Preview           |
-| --- | ------------ | ----------------------- |
-| 01   | [Todo List](https://github.com/jovdim/Micro-Projects-Collection/tree/main/to-do-list)    | [Image](https://github.com/jovdim/Micro-Projects-Collection/blob/7c2ea2cb3c8a2123cf5dfa759921b17be623a875/to-do-list/preview-image.png) |
-| 02   | [Digital Clock](https://github.com/jovdim/Micro-Projects-Collection/tree/main/to-do-list)    | [Image](https://github.com/jovdim/Micro-Projects-Collection/blob/939c594a36bbb90880a1fd5e6662d23e6d5ff5d2/digital-clock/preview-image.png) |
-| 03   | [Inspirational Quote Generator](https://github.com/jovdim/Micro-Projects-Collection/tree/main/inspirational-quotes-generator)    | [Image](https://github.com/jovdim/Micro-Projects-Collection/blob/b280d8913d13e886f3089426177907bdf02838a9/inspirational-quotes-generator/preview-image.png) |
-| 04   | [Calculator](https://github.com/jovdim/Micro-Projects-Collection/tree/main/calculator)    | [Image](https://github.com/jovdim/Micro-Projects-Collection/blob/3bb05d405dcfa8e08a1bd4692d6b8c24b9273fb1/calculator/preview-image.png) |
-| 05   | [Stopwatch](https://github.com/jovdim/Micro-Projects-Collection/tree/main/stopwatch)    | [Image](https://github.com/jovdim/Micro-Projects-Collection/blob/dfaf078687f4bc314ce0fef478ce948045a79d62/stopwatch/preview-image.png) |
+| #   | Project Name                                                                                                                  | Image Preview                                                                                                                                               |
+| --- | ----------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| 01  | [Todo List](https://github.com/jovdim/Micro-Projects-Collection/tree/main/to-do-list)                                         | [Image](https://github.com/jovdim/Micro-Projects-Collection/blob/7c2ea2cb3c8a2123cf5dfa759921b17be623a875/to-do-list/preview-image.png)                     |
+| 02  | [Digital Clock](https://github.com/jovdim/Micro-Projects-Collection/tree/main/to-do-list)                                     | [Image](https://github.com/jovdim/Micro-Projects-Collection/blob/939c594a36bbb90880a1fd5e6662d23e6d5ff5d2/digital-clock/preview-image.png)                  |
+| 03  | [Inspirational Quote Generator](https://github.com/jovdim/Micro-Projects-Collection/tree/main/inspirational-quotes-generator) | [Image](https://github.com/jovdim/Micro-Projects-Collection/blob/b280d8913d13e886f3089426177907bdf02838a9/inspirational-quotes-generator/preview-image.png) |
+| 04  | [Calculator](https://github.com/jovdim/Micro-Projects-Collection/tree/main/calculator)                                        | [Image](https://github.com/jovdim/Micro-Projects-Collection/blob/3bb05d405dcfa8e08a1bd4692d6b8c24b9273fb1/calculator/preview-image.png)                     |
+| 05  | [Stopwatch](https://github.com/jovdim/Micro-Projects-Collection/tree/main/stopwatch)                                          | [Image](https://github.com/jovdim/Micro-Projects-Collection/blob/dfaf078687f4bc314ce0fef478ce948045a79d62/stopwatch/preview-image.png)                      |
+| 06  | [Easy Format](https://github.com/syamjir/Micro-Projects-Collection/tree/e1061ed7f2364d1c2b9277435ece354f2244a6fb/easy-format) | [Image](https://github.com/syamjir/Micro-Projects-Collection/blob/e1061ed7f2364d1c2b9277435ece354f2244a6fb/easy-format/preview-image.png)                   |
 
 ---
+
 We welcome contributions to the **Micro Projects** collection! If you'd like to contribute, please check out our [contributing guidelines](https://github.com/jovdim/Micro-Projects-Collection/blob/main/CONTRIBUTING.md) to get started.

easy-format/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}

easy-format/app.js

@@ -0,0 +1,82 @@
+"use strict";
+
+// Take elements from the DOM
+let inputEl = document.querySelector(".input");
+let resultEl = document.querySelector(".result");
+let allCButtonEl = document.querySelector(".allC");
+let copyButtonEl = document.querySelector(".copy");
+let resetButtonEl = document.querySelector(".reset");
+let allLButtonEl = document.querySelector(".allL");
+let firstCButtonEl = document.querySelector(".firstC");
+let startCButtonEl = document.querySelector(".startC");
+let boldButtonEl = document.querySelector(".bold");
+let italicButtonEl = document.querySelector(".italic");
+
+// Space removal function
+let spaceRemoveAll = function (word) {
+  return word.trim().replace(/\s+/g, " ");
+};
+
+// Function to capitalize all letters
+let allCapitalize = function () {
+  let word = spaceRemoveAll(inputEl.value);
+  resultEl.value = word.toUpperCase();
+};
+
+// Function to convert all letters to lowercase
+let allLowercase = function () {
+  let word = spaceRemoveAll(inputEl.value);
+  resultEl.value = word.toLowerCase();
+};
+
+// Function to capitalize the first letter of each word
+let firstLetterCapitalize = function () {
+  let word = spaceRemoveAll(inputEl.value);
+  word = word.toLowerCase().split(" ");
+  let firstUpper = [];
+  for (let wd of word) {
+    firstUpper.push(wd.replace(wd[0], wd[0].toUpperCase()));
+  }
+  resultEl.value = firstUpper.join(" ");
+};
+
+// Function to capitalize the first letter of each sentence
+let firstLetterOfSentenceCapital = function () {
+  let word = spaceRemoveAll(inputEl.value);
+  word = word.toLowerCase().split(".");
+  console.log(word);
+  let firstUpper = [];
+  for (let wd of word) {
+    wd = wd.trim();
+    if (wd.length > 0) {
+      if (wd === word[0]) {
+        firstUpper.push(wd[0].toUpperCase() + wd.slice(1));
+      } else {
+        firstUpper.push(" " + wd[0].toUpperCase() + wd.slice(1));
+      }
+    }
+  }
+  resultEl.value = firstUpper.join(".");
+};
+
+// Function to copy the result to clipboard
+let copyText = function () {
+  resultEl.select();
+  document.execCommand("copy");
+};
+
+// Function to reset all fields and styles
+let resetAll = function () {
+  inputEl.value = "";
+  resultEl.value = "";
+  resultEl.classList.remove("bold");
+  resultEl.classList.remove("italic");
+};
+
+// Event handlers for button clicks
+allCButtonEl.addEventListener("click", allCapitalize);
+copyButtonEl.addEventListener("click", copyText);
+resetButtonEl.addEventListener("click", resetAll);
+allLButtonEl.addEventListener("click", allLowercase);
+firstCButtonEl.addEventListener("click", firstLetterCapitalize);
+startCButtonEl.addEventListener("click", firstLetterOfSentenceCapital);

easy-format/index.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Format paragraph || Perfect paragraph</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="container">
+      <div class="wrapper">
+        <h1 id="heading">Easy Format</h1>
+        <textarea
+          class="input"
+          name="Type your text here"
+          cols="30"
+          rows="10"
+          placeholder="Type your text here"
+        ></textarea>
+        <div class="formatBtn">
+          <button class="allC" title="Convert text to uppercase">All C</button>
+          <button class="allL" title="Convert text to lowercase">All L</button>
+          <button class="firstC" title="Capitalize first letter of each word">
+            First C
+          </button>
+          <button
+            class="startC"
+            title="Capitalize the first letter of each sentence"
+          >
+            Start C
+          </button>
+        </div>
+        <textarea
+          class="result"
+          name="Type your text here"
+          cols="30"
+          rows="10"
+          placeholder="Output is here ..."
+        ></textarea>
+        <div class="resetCopyBtns">
+          <button class="copy" title="Copy the formatted text">Copy</button>
+          <button class="reset" title="Reset the text fields">Reset</button>
+        </div>
+      </div>
+    </div>
+    <script src="app.js"></script>
+  </body>
+</html>

easy-format/style.css

@@ -0,0 +1,115 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100dvh;
+  display: flex;
+  align-items: center;
+  background-color: #fefefe;
+}
+
+.container {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  padding: 1rem;
+  background: linear-gradient(
+    90deg,
+    rgba(76, 175, 80, 1) 0%,
+    rgba(49, 220, 255, 1) 100%
+  );
+}
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 70%;
+  height: 30%rem;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+}
+.input,
+.result {
+  width: 90%;
+  height: 40%;
+  margin: auto;
+  padding: 0.5rem;
+  border-radius: 0.3rem;
+  border: 0.5px solid #e70daa;
+  background-color: rgba(187, 247, 226, 0.408);
+  outline: none;
+  transition: 0.1s ease-in;
+  font-size: 18px;
+  color: #581bf3;
+  transition: all 0.3s ease;
+  text-align: left;
+}
+.input:hover {
+  background-color: aqua;
+}
+.result:hover {
+  background-color: aqua;
+}
+
+button {
+  border: none;
+  outline: none;
+  padding: 0.6rem 1.3rem;
+  border-radius: 0.3rem;
+  background-color: #bbf7e268;
+  color: hsl(317, 89%, 48%);
+  border: 0.5px solid hsl(317, 89%, 48%);
+  transition: 0.1s ease-in;
+  transition: all 0.5s ease;
+}
+button:hover {
+  background-color: aqua;
+  color: #532b09;
+}
+.formatBtn {
+  max-width: 90%;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  margin: 0.5rem 0;
+  gap: 1rem;
+}
+.resetCopyBtns {
+  max-width: 90%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0.5rem 0;
+  gap: 1rem;
+}
+#heading {
+  margin: 0.2rem 0 0.5rem;
+  color: hsl(317, 85%, 45%);
+  margin-bottom: 1rem;
+}
+
+@media (max-width: 520px) {
+  .input,
+  .result {
+    width: 100%;
+    height: 70%;
+    font-size: 16px;
+  }
+  .wrapper {
+    width: 70%;
+    height: 10%;
+  }
+}
+
+@media (max-height: 750px) {
+  .wrapper {
+    height: 35rem;
+  }
+  .container {
+    padding: 1rem 0;
+  }
+}