Simple_JavaScript_Projects/index.html at main · Anaskaysar/Simple_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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Simple JavaScript Projects | Learn by Building</title>
    <meta
      name="description"
      content="A growing hub of beginner-friendly JavaScript projects focused on hands-on DOM manipulation and interactivity. Learn by doing."
    />
    <meta name="author" content="Anaskaysar" />
    <meta
      name="keywords"
      content="JavaScript, DOM, projects, practice, beginner, learn coding, JS exercises"
    />
    <meta name="robots" content="index, follow" />

    <!-- Open Graph -->
    <meta property="og:title" content="Simple JavaScript Projects" />
    <meta
      property="og:description"
      content="Practice DOM manipulation and JS interactivity with beginner-friendly projects."
    />
    <meta property="og:type" content="website" />
    <meta
      property="og:url"
      content="https://anaskaysar.github.io/Simple_JavaScript_Projects/"
    />

    <!-- Twitter card -->
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:title" content="Simple JavaScript Projects" />
    <meta
      name="twitter:description"
      content="Practice JavaScript through hands-on beginner projects. Learn DOM, events, logic."
    />

    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header>
      <h1>🧪 Simple JS Projects</h1>
      <p>Practice projects to sharpen JavaScript + DOM skills</p>
    </header>

    <main class="grid" aria-label="Project List">
      <div class="project-card">
        <h2>🎯 Guess My Number</h2>
        <p>A number guessing game using core DOM manipulation.</p>
        <div class="buttons">
          <a href="./01_Guess_My_Number/index.html" target="_blank"
            >Live Demo</a
          >
          <a
            href="https://github.com/Anaskaysar/Simple_JavaScript_Projects/tree/main/01_Guess_My_Number"
            target="_blank"
            >Source</a
          >
        </div>
      </div>
      <div class="project-card">
        <h2>💬 Modal Window</h2>
        <p>
          A project to practice showing and hiding a modal using classes,
          events, and keyboard handling.
        </p>
        <div class="buttons">
          <a href="./02_Modal_Window/index.html" target="_blank">Live Demo</a>
          <a
            href="https://github.com/Anaskaysar/Simple_JavaScript_Projects/tree/main/02_Modal_Window"
            target="_blank"
            >Source</a
          >
        </div>
      </div>
      <div class="project-card">
        <h2>Banklist Array</h2>
        <p>
          A project where I will focus on displaying all of these movements,
          enabling these operations, calculating statistics, and the current
          balance. I think it's going to be a lot of fun, and I am really happy
          with this application. It looks amazing and like a real-world use
          case. Overall, this is a great project for training with arrays
          because we can do many of these things you see on the screen using
          arrays..
        </p>
        <div class="buttons">
          <a href="./03_Banklist/index.html" target="_blank">Live Demo</a>
          <a
            href="https://github.com/Anaskaysar/Simple_JavaScript_Projects/tree/main/03_Banklist"
            target="_blank"
            >Source</a
          >
        </div>
      </div>
    </main>

    <section class="credits" aria-label="Project Credits">
      <h3>📚 Credits & Inspiration</h3>
      <ul>
        <li>
          Project idea: <strong>Guess My Number</strong> based on
          <a href="https://javascript.info" target="_blank">JavaScript.info</a>
          and
          <a
            href="https://www.udemy.com/course/the-complete-javascript-course/"
            target="_blank"
            >The Complete JS Course by Jonas Schmedtmann</a
          >
        </li>
        <li>
          <strong>Modal Window</strong> inspired by tutorials from
          <a
            href="https://www.udemy.com/course/the-complete-javascript-course/"
            target="_blank"
            >Jonas Schmedtmann</a
          >. Practiced and extended for learning purposes.
        </li>

        <li>
          Adapted, customized, and extended by <strong>Anaskaysar</strong> for
          learning purposes.
        </li>
        <li>More project credits will be listed as the collection grows.</li>
      </ul>
    </section>

    <footer>
      <p>
        Created by <strong>Anaskaysar</strong> |
        <a href="https://github.com/Anaskaysar" target="_blank">GitHub</a> |
        <a href="https://www.linkedin.com/in/kaysarulanas" target="_blank"
          >LinkedIn</a
        >
        <br />
        Hosted on GitHub Pages
      </p>
    </footer>
  </body>
</html>