JavaScript-Projects/index.html at main · MahmoodHashem/JavaScript-Projects · 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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>My Projects</title>
  <link rel="stylesheet" href="style.css" />

</head>

<body>
  <ul class="sidebar">
    <li><img onclick="hideSideBar()" src="/assets/icons/close.svg" alt=""></li>
    <li><a href="#home">Home</a></li>
    <li><a href="./about/About/index.html">About</a></li>
    <li><a href="./about/Social links profile/index.html">Contact</a></li>
  </ul>

  <nav class="navbar">
    <ul>
      <li><a href="#home" class="logo">
          <h2> My <strong>JS</strong> Projects</h2>
        </a></li>
      <li><a href="#home">Home</a></li>
      <li><a href="./about/About/index.html">About</a></li>
      <li><a href="./about/Social links profile/index.html">Contact</a></li>
      <li><img onclick="showSideBar()" class="menu" src="./Projects/responsive-navbar/icons/menu.svg" alt=""></li>
    </ul>
  </nav>

  <div class="grid-container" id="home">
    <!-- --------first one---------- -->
    <div class="card" class="rock_paper">
      <div><img src="images/rock_paper.jpeg" alt="rock_paper project" /></div>
      <div>
        <h2><a href="">Rock Paper Scissors</a></h2>
      </div>
      <div class="description">
        <p>
          In this project, we create a rock, paper, and scissors game. The
          computer will also choose a random option, and the results will be
          displayed. You can win, lose, or tie.
        </p>
      </div>
      <div class="links">
        <div class="link-item"><a
            href="https://github.com/MahmoodHashem/JavaScript-Projects/blob/main/Projects/Rock_paper_scissor"
            target="_blank">Project Repo</a></div>
        <div class="link-item">
          <a href="./Projects/Rock_paper_scissor/index.html" target="_blank">Live Demo</a>
        </div>
      </div>
    </div>
    <!-- ------------------------------------------- -->


    <!-- -------- second one ---------------- -->
    <div class="card" class="color-flipper">
      <div>
        <img src="images/color_flipper.jpeg" alt="color_flipper project" />
      </div>
      <div>
        <h2><a href="">Color Flipper</a></h2>
      </div>
      <div class="description">
        <p>
          This Project allows users to switch the background color of the webpage to red, blue,green or random by
          clicking buttons.
        </p>
      </div>
      <div class="links">
        <div class="link-item"><a target="_blank" href="https://github.com/MahmoodHashem/JavaScript-Projects/blob/main/Projects/Color%20Flipper
">Project Repo</a></div>
        <div class="link-item">
          <a href="./Projects/Color Flipper/index.html" target="_blank">Live Demo</a>
        </div>
      </div>
    </div>
    <!-- --------------------------------------- -->

    <!-- ------- third one ------------ -->
    <div class="card" class="counter">
      <div><img src="images/counter.jpeg" alt="counter project" /></div>
      <div>
        <h2><a target="_blank" href="">Counter</a></h2>
      </div>
      <div class="description">
        <p>
          This project features a display area to show the current count and
          buttons to increase or decrease the count. JavaScript is used to
          update the count in response to button clicks.
        </p>
      </div>
      <div class="links">
        <div class="link-item"><a target="_blank"
            href="https://github.com/MahmoodHashem/JavaScript-Projects/blob/main/Projects/counter">Project
            Repo</a></div>
        <div class="link-item">
          <a href="./Projects/counter/index.html" target="_blank">Live Demo</a>
        </div>
      </div>
    </div>

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

    <!-- ------- fourth one ------------ -->
    <div class="card" class="Temprature Converter">
      <div><img src="images/temprature_converter.jpeg" alt="counter project" /></div>
      <div>
        <h2><a target="_blank" href="">Temprature Converter</a></h2>
      </div>
      <div class="description">
        <p>
          This project aims to create a temperature converter. The final version of the project includes three inputs
          for Celsius, Fahrenheit, and Kelvin temperature formats. When you change any of these inputs, for example, if
          you choose 100 degrees Celsius, you will see the equivalent Celsius value in Fahrenheit and Kelvin formats.
          Additionally, if you change one input, you will see a real-time change inside the other inputs.
        </p>
      </div>
      <div class="links">
        <div class="link-item"><a
            href="https://github.com/MahmoodHashem/JavaScript-Projects/tree/main/Projects/Temprature%20Converter"
            target="_blank">Project
            Repo</a></div>
        <div class="link-item">
          <a href="./Projects/Temprature Converter/index.html" target="_blank">Live Demo</a>
        </div>
      </div>
    </div>
    <!-- c---------------------------------------- -->
    <!-- ------- fifth one ------------ -->
    <div class="card" class="Darkmode toggle ">
      <div><img src="images/darckmode.jpeg" alt="counter project" /></div>
      <div>
        <h2><a href="">DarkMode Toggle</a></h2>
      </div>
      <div class="description">
        <p>
          A toggle button that switches the website between dark and light modes, with a sliding animation for a more
          visually appealing transition.
        </p>
      </div>
      <div class="links">
        <div class="link-item"><a target="_blank"
            href="https://github.com/MahmoodHashem/JavaScript-Projects/tree/main/Projects/Dark%20mode%20toggle">Project
            Repo</a></div>
        <div class="link-item">
          <a href="./Projects/Dark mode toggle/index.html" target="_blank">Live Demo</a>
        </div>
      </div>
    </div>
    <!-- ---------------------------------------- -->

    <!-- ------- sixth one ------------ -->
    <div class="card" class="character counter">
      <div><img src="images/character_counter.jpeg" alt="counter project" /></div>
      <div>
        <h2><a target="_blank" href="">Character Counter</a></h2>
      </div>
      <div class="description">
        <p>
          This project is a character counter app which typically allows users to input text and then displays the
          number of characters that have been entered.
        </p>
      </div>
      <div class="links">
        <div class="link-item"><a target="_blank"
            href="https://github.com/MahmoodHashem/JavaScript-Projects/tree/main/Projects/Character%20Counter">Project
            Repo</a></div>
        <div class="link-item">
          <a href="./Projects/Character Counter/index.html" target="_blank">Live Demo</a>
        </div>
      </div>
    </div>
    <!-- ----------Seventh one---------- -->
    <div class="card" class="New-Year-Countdown">
      <div><img src="images/countdown.jpeg" alt="countdown" /></div>
      <div>
        <h2><a target="_blank" href="./Projects/New Year Countdown/index.html">New Year Countdown</a></h2>
      </div>
      <div class="description">
        <p>
          The New Year Countdown Timer is a JavaScript-based application designed to dynamically display the time
          remaining until the start of the next Solar year.
        </p>
      </div>
      <div class="links">
        <div class="link-item"><a target="_blank"
            href="https://github.com/MahmoodHashem/JavaScript-Projects/tree/main/Projects/New%20Year%20Countdown">Project
            Repo</a></div>
        <div class="link-item">
          <a href="./Projects/New Year Countdown/index.html" target="_blank">Live Demo</a>
        </div>
      </div>
    </div>
    <!-- ---------------------------------------- -->


    <!-------Eighth one----------->
    <div class="card" class="Newsletter-signup">
      <div><img src="images/desktop-subscribe.jpeg" alt="counter project" /></div>
      <div>
        <h2><a target="_blank" href="./Projects/newsletter signup/index.html">Newsletter Sign Up</a></h2>
      </div>
      <div class="description">
        <p>
          This is a responsive newsletter sign-up form that enhances user interaction and data validation. It allows
          users to
          enter their email and submit it to subscribe to a newsletter. Upon successful submission, users receive a
          confirmation message displaying their email. The form includes validation checks to ensure the email field is
          not left empty and that the entered email is in a correct format.
        </p>
      </div>
      <div class="links">
        <div class="link-item"><a target="_blank"
            href="https://github.com/MahmoodHashem/JavaScript-Projects/tree/main/Projects/newsletter%20signup">Project
            Repo</a></div>
        <div class="link-item">
          <a href="./Projects/newsletter signup/index.html" target="_blank">Live Demo</a>
        </div>
      </div>
    </div>
    <!-- ---------------------- -->


    <!-- Ninth one -->
    <div class="card" id="Mouse Position">
      <div><img src="images/mouse-position.jpeg" alt="mouse-position" /></div>
      <div>
        <h2><a target="_blank" href="./Projects/Mouse position/">Mouse Position</a></h2>
      </div>
      <div class="description">
        <p>
          The Mouse Position Tracker is a lightweight, interactive JavaScript application designed to provide real-time
          tracking of the mouse cursor's position on the screen.
        </p>
      </div>
      <div class="links">
        <div class="link-item"><a target="_blank"
            href="https://github.com/MahmoodHashem/JavaScript-Projects/tree/main/Projects/Mouse%20position">Project
            Repo</a></div>
        <div class="link-item">
          <a href="./Projects/Mouse position/index.html" target="_blank">Live Demo</a>
        </div>
      </div>
    </div>


    <!-- 10th one-->

    <div class="card" id="Calculator">
      <div><img src="images/calculator1.jpeg" alt="calculator" /></div>
      <div>
        <h2><a target="_blank" href="./Projects/calculator/index.html">Calculator</a></h2>
      </div>
      <div class="description">
        <p>
          This project is a simple calculator built using HTML, CSS, and JavaScript. It is designed to perform basic
          arithmetic operations such as addition, subtraction, multiplication, and division. The calculator features a
          clean, user-friendly interface that allows users to input numbers and operations easily to see the results
          displayed on the screen.
        </p>
      </div>
      <div class="links">
        <div class="link-item"><a target="_blank"
            href="https://github.com/MahmoodHashem/JavaScript-Projects/tree/main/Projects/calculator">Project
            Repo</a></div>
        <div class="link-item">
          <a href="./Projects/calculator/index.html" target="_blank">Live Demo</a>
        </div>
      </div>
    </div>

    <!-- Advice generator -->


    <div class="card" id="advice-generator">
      <div><img src="images/advicegenerator.jpeg" alt="advice-generator" /></div>
      <div>
        <h2><a target="_blank" href="./Projects/qoute-generator/index.html">Advice Generator</a></h2>
      </div>
      <div class="description">
        <p>
          This project is an advice generator created using HTML, CSS, and JavaScript.The project combines front-end
          technologies to provide users with random advice each time they interact with the dice icon.
        </p>
      </div>
      <div class="links">
        <div class="link-item"><a target="_blank"
            href="https://github.com/MahmoodHashem/JavaScript-Projects/tree/main/Projects/qoute-generator">Project
            Repo</a></div>
        <div class="link-item">
          <a href="./Projects/qoute-generator/index.html" target="_blank">Live Demo</a>
        </div>
      </div>
    </div>


    <div class="card" id="dice">
      <div><img src="images/dice.jpeg" alt="dice" /></div>
      <div>
        <h2><a target="_blank" href="./Projects/Dice/index.html">Dice Game</a></h2>
      </div>
      <div class="description">
        <p>
          A simple Dice game.
        </p>
      </div>
      <div class="links">
        <div class="link-item"><a target="_blank"
            href="https://github.com/MahmoodHashem/JavaScript-Projects/tree/main/Projects/Dice">Project
            Repo</a></div>
        <div class="link-item">
          <a href="./Projects/Dice/index.html" target="_blank">Live Demo</a>
        </div>
      </div>
    </div>

    <div class="card" id="tictactoe">
      <div><img src="images/tictac.jpeg" alt="dice" /></div>
      <div>
        <h2><a target="_blank" href="./Projects/TicTacToe/index.html">TicTacToe Game</a></h2>
      </div>
      <div class="description">
        <p>
          A simple Tic Tac Toe game.
        </p>
      </div>
      <div class="links">
        <div class="link-item"><a target="_blank"
            href="https://github.com/MahmoodHashem/JavaScript-Projects/tree/main/Projects/TicTacToe">Project
            Repo</a></div>
        <div class="link-item">
          <a href="./Projects/TicTacToe/index.html" target="_blank">Live Demo</a>
        </div>
      </div>
    </div>

    <div class="card" id="tictactoe">
      <div><img src="images/typing.png" alt="typing-animation" /></div>
      <div>
        <h2><a target="_blank" href="./Projects/typing-animation/index.html">Typing Animation</a></h2>
      </div>
      <div class="description">
        <p>
          This simple Project allows users to enter up to 20 characters of text. Once the user presses the Enter key,
          the text is displayed with a fun typing animation effect. The animation creates the impression that the text
          is being "typed out" in real-time, adding an engaging and dynamic element to the user interface.
        </p>
      </div>
      <div class="links">
        <div class="link-item"><a target="_blank"
            href="https://github.com/MahmoodHashem/JavaScript-Projects/tree/main/Projects/typing-animation">Project
            Repo</a></div>
        <div class="link-item">
          <a href="./Projects/typing-animation/index.html" target="_blank">Live Demo</a>
        </div>
      </div>
    </div>

    <!------------------------------------>
  </div>


  <!--Script code-->
  <script defer>

    const sidebar = document.querySelector('.sidebar');
    const body = document.querySelector('body');
    let opened = false;
    function showSideBar() {
      sidebar.style.right = '0';
      body.classList.add('disable-scroll');
      opened = true;
    }

    if(opened){
      body.addEventListener('click', function(){
        sidebar.style.right = '-50%';
      })
    }
    function hideSideBar() {
      sidebar.style.right = '-50%';
      body.classList.remove('disable-scroll');
      opened = false;
    }


  </script>
  <!---->
</body>

</html>