text-editor/index.html at main · fattahsamit/text-editor · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!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>Text Editor</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <!-- Font Awesome Kit -->
    <script
      src="https://kit.fontawesome.com/a51a0813f0.js"
      crossorigin="anonymous"
    ></script>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <header class="text-center w-9/12 mx-auto my-12">
      <section>
        <h2 class="text-5xl font-semibold">
          <i class="fa-regular fa-file-lines"></i> Text
          <span class="text-slate-500">Editor</span>
        </h2>
      </section>
    </header>

    <main class="my-10">
      <section
        class="w-9/12 mx-auto p-8 rounded-lg drop-shadow-xl border-black border-2 bg-slate-400"
      >
        <section class="mb-5 flex justify-between gap-1">
          <!-- Style Options -->
          <div
            class="flex flex-col md:flex-row gap-1 justify-center items-center"
          >
            <button id="bold" class="p-2 rounded bg-white"><b>B</b></button>
            <button id="italic" class="p-2 rounded bg-white"><i>I</i></button>
            <button id="underline" class="p-2 rounded bg-white">
              <u>U</u>
            </button>
          </div>

          <!-- Align Options -->
          <div
            class="flex flex-col md:flex-row gap-1 justify-center items-center"
          >
            <button id="align-left" class="p-2 rounded bg-white">
              <i class="fa-solid fa-align-left"></i>
            </button>
            <button id="align-center" class="p-2 rounded bg-white">
              <i class="fa-solid fa-align-center"></i>
            </button>
            <button id="align-right" class="p-2 rounded bg-white">
              <i class="fa-solid fa-align-right"></i>
            </button>
            <button id="align-justify" class="p-2 rounded bg-white">
              <i class="fa-solid fa-align-justify"></i>
            </button>
          </div>

          <div class="flex flex-col md:flex-row gap-1 justify-end items-end">
            <!-- Font Size -->
            <input
              id="font-size"
              class="p-2 rounded w-4/12 bg-white"
              type="number"
              name="font-size"
              value="14"
            />

            <!-- Case  -->
            <button id="case" class="p-2 rounded bg-white">Aa</button>

            <!-- Color -->
            <input
              type="color"
              id="select-color"
              class="rounded p-2 bg-white h-10"
              name="select-color"
              value="#000000"
            />

            <!-- Clear Text  -->
            <button
              id="clear"
              class="py-2 px-4 rounded bg-red-500 text-white font-medium"
            >
              X
            </button>
          </div>
        </section>

        <!-- Editor -->
        <article>
          <textarea
            id="text-area"
            class="w-full h-full p-3 border-black border rounded-md"
            name="editor"
            cols="30"
            rows="10"
          ></textarea>
        </article>
      </section>
    </main>

    <footer class="w-3/6 mx-auto text-center my-2 font-light">
      <p>Copyright &copy; 2023 fattahsamit | All Rights Received</p>
    </footer>
    <script src="js/utils.js"></script>
    <script src="js/fontStyles.js"></script>
    <script src="js/textAlign.js"></script>
    <script src="js/fontSize.js"></script>
    <script src="js/fontType.js"></script>
    <script src="js/color.js"></script>
  </body>
</html>