javascriptassignment-2/index.html at main · itsmeZoha/javascriptassignment-2 · 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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Chapter # 8-14 | Concatenation | Prompts | if...else and else if statements</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
    <!-- custom  css -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body class="d-flex flex-column min-vh-100">
    <header>
      <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
          <button
            class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarTogglerDemo03"
            aria-controls="navbarTogglerDemo03"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span class="navbar-toggler-icon"></span>
          </button>
          <a class="navbar-brand" href="javascript:void(0)">Assignment</a>
          <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="index.html"
                  >Chapter 8 - 14</a
                >
              </li>
            </ul>
             <div class="d-flex">
               <span class="text-white" id="userName"></span>
              </div>
          </div>
        </div>
      </nav>
    </header>
   <main>
      <div class="container ">
        <div class="py-5">
          <div class="row">
            <div class="col">
              <h3 class="text-center">
                Chapter # 8-14 | Concatenation | Prompts | if...else and else if statements
              </h3>
              <div class="border-bottom mt-4 border-secondary"></div>
            </div>
          </div>
        </div>
        <!-- ////////// BUTTONS //////////////// -->
        <!-- <div class="row  mt-md-5"> -->
          <div class="col-12 col-md-12 mb-3 mb-md-0">
            <h4 class="text-center">Buttons</h4>
            <div class="border rounded-3 p-4 text-center buttons" >
              <button class="btn btn-danger" id="concatenationSomeStrings">Concatenation Some Strings</button>
              <button class="btn btn-danger" id="askNameFromUser">Ask Name From User</button>
              <button class="btn btn-danger" id="comparisonOperators">Comparison Operators</button>
              <button class="btn btn-danger" id="ifElseIf">if else if</button>
              <button class="btn btn-danger" id="testingSetsOfConditions">Testing Sets of Conditions</button>
              <button class="btn btn-danger" id="ifStatementNested">If Statement Nested</button>
              <button class="btn btn-danger" id="logIn">Login</button>
            </div>
          </div>
        <!-- </div> -->
        <!-- ////////////// Original String //////////////-->
        <div class="row mt-3 mt-md-5">
          <div class="col-12 col-md-6">
            <h4 class="text-center">Original String</h4>
            <div class="border rounded-3 p-4 text-wrap originalStringBox" style="min-height: 122px">
              <div id="originalTextBox" class="text-center">
              </div>
            </div>
            <div class="text-center">
              <button class="btn btn-outline-dark my-4 " id="clearstatementButton" onclick="">
                Clear Statement
              </button>
           </div>
          </div>
          <!-- ///////// Output / Result ////////// -->
          <div class="col-12 col-md-6 mb-4">
            <h4 class="text-center">Output / Result</h4>
            <div class="border rounded-3 p-4 text-center" style="min-height: 122px">
              <div id="output"></div>
            </div>
            <div class="text-center">
              <button class="btn btn-outline-dark mt-4" id="clearOutputButton">
                Clear Output
              </button>
           </div>
         </div>
       </div>
   </main>

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

    <footer class="footer bg-dark pt-2">
      <div class="container">
        <div class="row">
          <div class="col">
            <p class="text-center text-white">
              &copy; <span id="year"></span>. All Right Reserved.Created By Zoha Asghar.
            </p>
          </div>
        </div>
      </div>
    </footer>

    <!-- bootstrap  -->
    <script
      src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
      integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
      integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
      crossorigin="anonymous"
    ></script>
    <script>
      var now = new Date()
      var year = now.getFullYear()
      document.getElementById("year").innerText = year
    </script>
    <script src="script.js"></script>
  </body>
</html>