Skip to content

Commit c3f01fd

Browse files
AnaskaysarAnaskaysar
committed
Repo Decoration
1 parent 0145217 commit c3f01fd

File tree

4 files changed

+236
-0
lines changed

4 files changed

+236
-0
lines changed

‎.DS_Store‎

6 KB
Binary file not shown.

‎index.html‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Simple JavaScript Projects</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<header>
11+
<h1>🧪 Simple JS Projects</h1>
12+
<p>Practice projects to sharpen JavaScript + DOM skills</p>
13+
</header>
14+
15+
<main class="grid">
16+
<!-- Project 1 -->
17+
<div class="project-card">
18+
<h2>🎯 Guess My Number</h2>
19+
<p>A number guessing game using core DOM manipulation.</p>
20+
<div class="buttons">
21+
<a href="./01_Guess_My_Number/index.html" target="_blank"
22+
>Live Demo</a
23+
>
24+
<a
25+
href="https://github.com/Anaskaysar/Simple_JavaScript_Projects/tree/main/01_Guess_My_Number"
26+
target="_blank"
27+
>Source</a
28+
>
29+
</div>
30+
</div>
31+
32+
<!-- Add more projects as you go -->
33+
34+
<!-- <div class="project-card">
35+
<h2>📘 Project Title</h2>
36+
<p>Short project description goes here.</p>
37+
<div class="buttons">
38+
<a href="./02_ProjectFolder/index.html" target="_blank">Live Demo</a>
39+
<a href="GitHub link" target="_blank">Source</a>
40+
</div>
41+
</div>
42+
-->
43+
</main>
44+
45+
<footer>
46+
<p>
47+
Created by <strong>Anaskaysar</strong> |
48+
<a href="https://github.com/Anaskaysar" target="_blank">GitHub</a> |
49+
<a href="https://www.linkedin.com/in/kaysarulanas" target="_blank"
50+
>LinkedIn</a
51+
>
52+
<br />
53+
Hosted on GitHub Pages
54+
</p>
55+
</footer>
56+
</body>
57+
</html>

‎readme.md‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
# 🧪 Simple JavaScript Projects
2+
3+
A growing collection of small JavaScript practice projects, focused on DOM manipulation, interactivity, and clean UI. Each project is a self-contained module with its own folder and live demo.
4+
5+
## 🌐 Live Homepage
6+
7+
👉 [Explore Projects on GitHub Pages](https://anaskaysar.github.io/Simple_JavaScript_Projects/)
8+
Browse and test all projects directly from your browser.
9+
10+
---
11+
12+
## 📁 Project Structure
13+
14+
```
15+
Simple_JavaScript_Projects/
16+
│
17+
├── index.html # Homepage with project list
18+
├── style.css # Styles for homepage
19+
│
20+
├── 01_Guess_My_Number/ # Project folder
21+
│ ├── index.html
22+
│ ├── style.css
23+
│ └── script.js
24+
│
25+
├── 02_Another_Project/
26+
│ └── ...
27+
```
28+
29+
Each project lives in its own folder with a minimal and isolated structure.
30+
31+
---
32+
33+
## ✅ Completed Projects
34+
35+
| Project | Description | Live Demo |
36+
| ---------------------- | -------------------------------------------- | ------------------------------------------------------------------------------------- |
37+
| 🎯 **Guess My Number** | A number guessing game using DOM interaction | [Launch](https://anaskaysar.github.io/Simple_JavaScript_Projects/01_Guess_My_Number/) |
38+
39+
> More projects will be added regularly as I progress.
40+
41+
---
42+
43+
## 🚀 Getting Started Locally
44+
45+
If you'd like to clone and run the site locally:
46+
47+
```bash
48+
git clone https://github.com/Anaskaysar/Simple_JavaScript_Projects.git
49+
cd Simple_JavaScript_Projects
50+
# Open index.html in your browser
51+
```
52+
53+
---
54+
55+
## 📚 What I’m Learning
56+
57+
- JavaScript fundamentals
58+
- DOM selection and manipulation
59+
- Event handling and game logic
60+
- Component structure and code organization
61+
- Responsive layouts with pure HTML/CSS
62+
63+
---
64+
65+
## 🛠 Planned Additions
66+
67+
- 🔢 Counter & Timer
68+
- 🧾 Quote Generator
69+
- 🛒 Simple Cart
70+
- ✅ Todo List with LocalStorage
71+
- 🎨 Theme Switcher
72+
73+
---
74+
75+
## 🙋‍♂️ Author
76+
77+
**Anaskaysar**
78+
79+
- 🔗 [GitHub](https://github.com/Anaskaysar)
80+
- 🔗 [LinkedIn](https://www.linkedin.com/in/kaysarulanas)
81+
82+
---
83+
84+
## 📝 License
85+
86+
This project is open-source and free to use under the [MIT License](LICENSE).

‎style.css‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
font-family: "Segoe UI", sans-serif;
9+
background-color: #f8f8f8;
10+
color: #333;
11+
}
12+
13+
header {
14+
background-color: #222;
15+
color: #fff;
16+
text-align: center;
17+
padding: 1.2rem 1rem;
18+
}
19+
20+
header h1 {
21+
font-size: 1.6rem;
22+
margin-bottom: 0.4rem;
23+
line-height: 1.2;
24+
word-break: break-word;
25+
}
26+
27+
header p {
28+
font-size: 1rem;
29+
opacity: 0.85;
30+
padding: 0 1rem;
31+
line-height: 1.4;
32+
}
33+
34+
main.grid {
35+
display: grid;
36+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
37+
gap: 1.2rem;
38+
padding: 2rem 1rem;
39+
max-width: 1200px;
40+
margin: auto;
41+
}
42+
43+
.project-card {
44+
background: #fff;
45+
padding: 1rem 1.2rem;
46+
border-radius: 8px;
47+
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
48+
display: flex;
49+
flex-direction: column;
50+
justify-content: space-between;
51+
min-height: 180px;
52+
}
53+
54+
.project-card h2 {
55+
font-size: 1.2rem;
56+
margin-bottom: 0.5rem;
57+
word-wrap: break-word;
58+
}
59+
60+
.project-card p {
61+
font-size: 0.95rem;
62+
margin-bottom: 1rem;
63+
line-height: 1.4;
64+
}
65+
66+
.buttons {
67+
display: flex;
68+
flex-wrap: wrap;
69+
gap: 0.5rem;
70+
}
71+
72+
.buttons a {
73+
text-decoration: none;
74+
background-color: #60b347;
75+
color: white;
76+
padding: 0.5rem 1rem;
77+
border-radius: 5px;
78+
font-size: 0.9rem;
79+
transition: background 0.2s;
80+
white-space: nowrap;
81+
}
82+
83+
.buttons a:hover {
84+
background-color: #4ea336;
85+
}
86+
87+
footer {
88+
text-align: center;
89+
padding: 1rem;
90+
font-size: 0.85rem;
91+
color: #666;
92+
background: #eee;
93+
}

0 commit comments

Comments
 (0)