background color change

totaro · Jan 4, 2024 · bb9e963 · bb9e963
1 parent c58e287
commit bb9e963
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 98 deletions.
diff --git a/index.html b/index.html
@@ -62,6 +62,7 @@
 				<li><a href="#typewritereffect" id="menu-link">Typewriter Effect</a></li>
 				<li><a href="#mousefollow" id="menu-link">Mouse Follow</a></li>
 				<li><a href="#slidingcards" id="menu-link">Sliding Cards</a></li>
+				<li><a href="#changebg" id="menu-link">Change Background</a></li>
 			</ul>
 		</div>
 
@@ -245,6 +246,26 @@ <h4>Autumn</h4>
 
 		</div>
 
+		<a id="changebg"></a>
+		<div class="entry">
+			<div class="entry__meta">
+				<h6>Motion<span></span>#6</h6>
+				<h4>Change Background</h4><br>
+				<h5><ul class="inner-links">
+					<li><a href="#top">Top <i class="fa-solid fa-arrow-turn-up"></i></a></li>
+				</ul>
+				</h5>
+			</div>
+			<figure id="change-bg" class="entry__media">
+
+				<button class="togglebutton">
+					Chance to light &nbsp; <i class="fa-solid fa-sun"></i>
+				  </button>
+
+			</figure>
+
+		</div>
+
 	</section>
 
 	<footer>

diff --git a/script.js b/script.js
@@ -205,15 +205,14 @@ const btn = document.querySelector('.togglebutton')
 
 document.querySelector('.togglebutton').addEventListener('click', () => {
 
-  document.getElementById("change-bg").classList.toggle("change-figure-bg");
+    document.getElementById("change-bg").classList.toggle("change-figure-bg");
 
-   const initialText = `Chance to light &nbsp; <i class="fa-solid fa-sun"></i>`;
-
-  if (btn.innerHTML.toLowerCase().includes(initialText.toLowerCase())) {
-    btn.innerHTML = `Chance to dark &nbsp; <i class="fa-solid fa-moon">`;
-  } else {
-    btn.innerHTML = initialText;
-  }
+    const initialText = `Chance to light &nbsp; <i class="fa-solid fa-sun"></i>`;
 
+    if (btn.innerHTML.toLowerCase().includes(initialText.toLowerCase())) {
+        btn.innerHTML = `Chance to dark &nbsp; <i class="fa-solid fa-moon">`;
+    } else {
+        btn.innerHTML = initialText;
+    }
 })
 
diff --git a/style.css b/style.css
@@ -781,64 +781,51 @@
 			align-items: center;
 		}
 
-/* change bg and toggle button*/
-
-figure {
-    --accent-color: #1E90FF;
-    --background-color: #0C1229;
-    /*--text-color: rgb(223, 197, 197);*/
-    --text-color: rgb(189, 20, 20);
-    --button-text-color: var(--background-color);
-    /*--button-text-color: white;*/
-    --transition-delay: 1s;
-    /*background-color: #eeeeea;*/
-
-    --color-body: #0C1229;
+		/* change bg and toggle button ------------------------------------ */
+
+		figure {
+    		--accent-color: #1E90FF;
+    		--background-color: #0C1229;
+    		--button-text-color: var(--background-color);
+    		--transition-delay: 1s;
+    		--color-body: #0C1229;
 
-	transition: var(--transition-delay);
-  background-color: var(--background-color);
-  color: var(--text-color);
-
-  }
-
-  .change-figure-bg {
-
-    --accent-color: #0C1229;;
-  /*--background-color: #333;*/
-    /*--background-color:  coral;*/
-    --background-color: #1E90FF;
-    --text-color: white;
-
-    /*background-color: coral;*/
-
-  }
-
-
-.togglebutton {
-  background-color: var(--accent-color);
-  color: var(--button-text-color);
+			transition: var(--transition-delay);
+  			background-color: var(--background-color);
+  			color: var(--text-color);
+
+  		}
+
+  		.change-figure-bg {
+  			--accent-color: #0C1229;;
+    		--background-color: #1E90FF;
+    		--text-color: white;
+  		}
+
+		.togglebutton {
+  			background-color: var(--accent-color);
+  			color: var(--button-text-color);
 
+  			display: flex;
+  			justify-content: center;
+  			align-items: center;
+  			cursor: pointer;
+  			padding: 1rem 2rem;
+  			border-radius: 10px;
+  			margin: 1rem;
+  			border: none;
+  			outline: none;
+  			transition: var(--transition-delay);
+  			transform: scale(1);
+		}
 
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  padding: 1rem 2rem;
-  border-radius: 10px;
-  margin: 1rem;
-  border: none;
-  outline: none;
-  transition: var(--transition-delay);
-  transform: scale(1);
-}
-
-.togglebutton .icon {
-  margin-right: .5em;
-}
-
-.togglebutton:hover,
-.togglebutton:focus {
-  transform: scale(1.1);
-}
+		.togglebutton .icon {
+  			margin-right: .5em;
+		}
+
+		.togglebutton:hover,
+		.togglebutton:focus {
+  			transform: scale(1.1);
+		}
 
 
diff --git a/style_cards.css b/style_cards.css
@@ -5,40 +5,6 @@
     font-family: Arial, Helvetica, sans-serif;
 }
 
-.bodyx {
-
-
-	--accent-color: #333;
-  --background-color: #0C1229;
-  --text-color: black;
-  --button-text-color: var(--background-color);
-  --transition-delay: 1s;
-    /*background-color: #eeeeea;*/
-
-    --color-body: #0C1229;
-
-	transition: var(--transition-delay);
-  background-color: var(--background-color);
-  color: var(--text-color);
-
-}
-
-body.dark {
-  --accent-color: #eeeeea;
-  /*--background-color: #333;*/
-    --background-color:  #263574;
-  --text-color: white;
-}
-
-.dark-mode {
-    --accent-color: #eeeeea;
-  /*--background-color: #333;*/
-    background-color:  #267430;
-  --text-color: white;
-  }
-
-
-
 .wrapper {
     width: 100%;
     height: 100vh;