Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit b283e86

Browse files
create a new project dark/night mode and update readme.md
1 parent 294172c commit b283e86

File tree

7 files changed

+257
-0
lines changed

7 files changed

+257
-0
lines changed

‎README.md

102 Bytes
(削除)

js-project-codezen

(削除ここまで)(削除) (削除ここまで)

(削除) Mini Projects (削除ここまで)(追記) JS-Mini Projects-CODEZEN (追記ここまで)

(削除) (削除ここまで)(追記) (追記ここまで)(追記) (追記ここまで)

Welcome to my collection of mini JavaScript projects!
Each project is built using HTML, CSS, and Vanilla JavaScript, focused on learning and improving core development skills.

🚀 Projects List

(削除)
Project Name Description Live Demo
Calculator A simple calculator with keyboard support. Coming Soon
To-Do App A to-do list with dark mode, . Coming Soon
counter App A timed quiz app with multiple choice questions. Coming Soon
(削除ここまで)(追記)
Project Name Description Live Demo
Calculator A simple calculator with keyboard support. Coming Soon
To-Do App A to-do list with dark mode, . Coming Soon
counter App A counter app with dark mode. Coming Soon
Light/Dark Light and dark mode . Coming Soon
(追記ここまで)

📌 Why This Repo?

  • Practice HTML, CSS & JavaScript in real use-cases
  • Strengthen JavaScript logic with small challenges
  • Build projects that can be added to a portfolio
  • Each project is modular and beginner-friendly

🔧 How to Use

  1. Clone the repository
  2. Open the project folder
  3. Open index.html in your browser

Installation

git clone https://github.com/codezenashish/js-project-codezen.git
cd js-project-codezen

Then open index.html in your browser or use a Live Server extension.

Connect

‎day-and-night/README.md

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
# 🌗 Dark & Light Mode Toggle – JavaScript Project
2+
3+
A sleek and responsive **Dark & Light Mode** toggle web page built with **HTML, CSS, and JavaScript**.
4+
It provides a modern UI switch that remembers your preferred theme using `localStorage`.
5+
6+
---
7+
8+
## ✨ Features
9+
10+
- 🌞 Light Mode UI
11+
- 🌙 Dark Mode UI
12+
- 💾 **Remembers theme** using `localStorage`
13+
- 🎨 Smooth color transitions
14+
- ⚡ Theme toggle button with icon switch
15+
- 📱 Fully responsive design
16+
17+
---
18+
19+
## 📸 Screenshot
20+
21+
> *Live Preview of UI with Theme Toggle*
22+
![Dark Light Mode Screenshot](screenshot.png)
23+
24+
---
25+
26+
## 🛠️ Technologies Used
27+
28+
- **HTML** – Page Structure
29+
- **CSS** – Custom properties (CSS Variables) for theming
30+
- **JavaScript** – Toggle logic and `localStorage` for saving preferences
31+
32+
---
33+
34+
## 🚀 How to Use
35+
36+
1. Clone or download the repo.
37+
2. Open `index.html` in your browser.
38+
3. Click the theme toggle button (top-right corner) to switch themes.
39+
4. Refresh the page — your theme preference stays saved!
40+
41+
---
42+
43+
## 📚 What I Learned
44+
45+
- How to use CSS custom properties (`--variables`)
46+
- How to manipulate the DOM using JavaScript
47+
- Persisting user preferences with `localStorage`
48+
- Building a theme toggle system with icons and transitions
49+
50+
51+
---
52+
53+
## 🔗 Connect With Me
54+
55+
- 📸 Instagram: [@codezenashish](https://www.instagram.com/codezenashish/)
56+
- 💻 GitHub: [codezenashish](https://github.com/codezenashish)
57+
58+
59+

‎day-and-night/index.html

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="stylesheet" href="./style.css" />
8+
<title>Dark/light Mode</title>
9+
</head>
10+
11+
<body class="dark-mode">
12+
<header class="header">
13+
<button id="mode-toggle">
14+
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3">
15+
<path
16+
d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q14 0 27.5 1t26.5 3q-41 29-65.5 75.5T444-660q0 90 63 153t153 63q55 0 101-24.5t75-65.5q2 13 3 26.5t1 27.5q0 150-105 255T480-120Zm0-80q88 0 158-48.5T740-375q-20 5-40 8t-40 3q-123 0-209.5-86.5T364-660q0-20 3-40t8-40q-78 32-126.5 102T200-480q0 116 82 198t198 82Zm-10-270Z" />
17+
</svg>
18+
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3">
19+
<path
20+
d="M480-360q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Zm0 80q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM200-440H40v-80h160v80Zm720 0H760v-80h160v80ZM440-760v-160h80v160h-80Zm0 720v-160h80v160h-80ZM256-650l-101-97 57-59 96 100-52 56Zm492 496-97-101 53-55 101 97-57 59Zm-98-550 97-101 59 57-100 96-56-52ZM154-212l101-97 55 53-97 101-59-57Zm326-268Z" />
21+
</svg>
22+
</button>
23+
<h1>Dark Light Mode</h1>
24+
<p>
25+
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorum quia
26+
quisquam qui est dolore ipsum aliquam doloremque repellat voluptatum
27+
laborum! Natus corrupti officia nostrum, fugit dignissimos ipsum eveniet
28+
quae unde facere incidunt repellendus. Molestias culpa, magni tenetur id
29+
impedit vitae veniam illum blanditiis, eos voluptatem sequi rem incidunt
30+
exercitationem commodi.
31+
</p>
32+
<div>
33+
<button>Go Premium</button>
34+
<button>more info</button>
35+
</div>
36+
</header>
37+
<section>
38+
<h1>About Us</h1>
39+
<p>
40+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi iste
41+
cum laudantium, aliquam aspernatur neque quis eveniet dignissimos?
42+
Maxime voluptates repellendus tempore atque rem sit, dolore dolorum
43+
dignissimos, architecto officiis, delectus harum veniam nobis nemo ipsum
44+
sunt laborum eum praesentium!
45+
</p>
46+
</section>
47+
<script src="./main.js"></script>
48+
</body>
49+
</html>

‎day-and-night/main.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
let darkMode = localStorage.getItem("darkMode");
2+
const darkModeToggle = document.querySelector("#mode-toggle");
3+
4+
const enableDarkMode = ()=> {
5+
document.body.classList.add('dark-mode')
6+
localStorage.setItem('dark-mode' ,'active')
7+
}
8+
9+
const disableDarkMode = ()=> {
10+
document.body.classList.remove('dark-mode')
11+
localStorage.setItem('dark-mode' ,null)
12+
}
13+
14+
if(darkMode === 'active') enableDarkMode()
15+
16+
17+
darkModeToggle.addEventListener("click", () => {
18+
darkMode =localStorage.getItem('dark-mode')
19+
if (darkMode !== "active") {
20+
enableDarkMode();
21+
} else {
22+
disableDarkMode();
23+
}
24+
});

‎day-and-night/screenshot.png

444 KB
Loading[フレーム]

‎day-and-night/style.css

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
* {
2+
box-sizing: border-box;
3+
padding: 0;
4+
margin: 0;
5+
}
6+
html {
7+
font-family: 'Poppins', sans-serif;
8+
}
9+
:root {
10+
--base-color: white;
11+
--base-variant: #e8e9ed;
12+
--text-color: #111528;
13+
--secondary-text-color: #232738;
14+
--primary-color: #3a435d;
15+
--accent-color: #0071ff;
16+
}
17+
18+
.dark-mode {
19+
--base-color: #070b1d;
20+
--base-variant: #101425;
21+
--text-color: #ffffff;
22+
--secondary-text-color: #a4a5bd;
23+
--primary-color: #a6a9af;
24+
--accent-color: #0071ff;
25+
}
26+
27+
body {
28+
29+
background-color: var(--base-color);
30+
color: var(--text-color);
31+
min-height: 100vh;
32+
transition: background-color ;
33+
}
34+
35+
header {
36+
padding: 1rem;
37+
margin-top: 3rem;
38+
39+
}
40+
41+
#mode-toggle{
42+
height: 50px;
43+
width: 50px;
44+
display: flex;
45+
align-items: center;
46+
justify-content: center;
47+
background-color: var(--base-variant);
48+
border-radius: 50%;
49+
border: none;
50+
cursor: pointer;
51+
position: fixed;
52+
top: 1rem;
53+
right: 1rem;
54+
}
55+
#mode-toggle svg{
56+
height: 20px;
57+
width: 20px;
58+
fill: var(--text-color);
59+
}
60+
61+
#mode-toggle svg:last-child{
62+
display: none;
63+
}
64+
65+
.dark-mode #mode-toggle svg:first-child{
66+
display: none;
67+
}
68+
.dark-mode #mode-toggle svg:last-child{
69+
display: block;
70+
}
71+
72+
h1 {
73+
font-size: 2rem;
74+
font-weight: 600;
75+
margin-bottom: 1rem;
76+
color: var(--text-color);
77+
}
78+
79+
p{
80+
font-size: 1rem;
81+
color: var(--secondary-text-color);
82+
margin-bottom: 1rem;
83+
}
84+
85+
86+
87+
88+
div :first-child {
89+
margin-top: 1rem;
90+
background-color: var(--accent-color);
91+
color: var(--base-color);
92+
border: none;
93+
padding: 0.5rem 1rem;
94+
border-radius: 0.5rem;
95+
font-size: 1rem;
96+
cursor: pointer;
97+
}
98+
99+
div :first-child:hover {
100+
background-color: var(--base-variant);
101+
color: var(--text-color);
102+
}
103+
104+
div :last-child {
105+
margin-top: 1rem;
106+
background-color: var(--primary-color);
107+
color: var(--base-color);
108+
border: none;
109+
padding: 0.5rem 1rem;
110+
border-radius: 0.5rem;
111+
font-size: 1rem;
112+
cursor: pointer;
113+
}
114+
115+
div :last-child:hover {
116+
background-color: var(--base-variant);
117+
color: var(--text-color);
118+
}
119+
120+
section {
121+
padding: 1rem;
122+
background-color: var(--base-variant);
123+
margin-top: 2rem;
124+
}

‎index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ <h1>Code Zen - By Ashish</h1>
2020
<a class="project-link" href="/calculator-project/index.html">calculator</a>
2121
<a class="project-link" href="/to-do-list/index.html">to do app</a>
2222
<a class="project-link" href="/counter-app/index.html">counter app</a>
23+
<a class="project-link" href="/day-and-night/index.html">Dark Mode</a>
2324

2425
</div>
2526
</main>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /