john-smilga · sahil-pandey-sigma · Apr 29, 2025 · Apr 29, 2025 · Apr 29, 2025 · May 5, 2025
diff --git a/01-color-flipper/setup/app.js b/01-color-flipper/setup/app.js
@@ -1 +1,12 @@
 const colors = ["green", "red", "rgba(133,122,200)", "#f15025"];
+const btn = document.querySelector(".btn");
+const color = document.querySelector(".color");
+btn.addEventListener("click", function () {
+  const randomNumber = getRandomNumber();
+  document.body.style.backgroundColor = colors[randomNumber];
+  color.textContent = colors[randomNumber];
+});
+
+function getRandomNumber() {
+  return Math.floor(Math.random() * colors.length);
+}
diff --git a/01-color-flipper/setup/hex.js b/01-color-flipper/setup/hex.js
@@ -1 +1,15 @@
 const hex = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F"];
+btn = document.querySelector(".btn");
+color = document.querySelector(".color");
+btn.addEventListener("click", function () {
+  let hexColor = "#";
+  for (let i = 0; i < 6; i++) {
+    const randomNumber = getRandomNumber();
+    hexColor += hex[randomNumber];
+  }
+  document.body.style.backgroundColor = hexColor;
+  color.textContent = hexColor;
+});
+function getRandomNumber() {
+  return Math.floor(Math.random() * hex.length);
+}
diff --git a/01-color-flipper/setup/index.html b/01-color-flipper/setup/index.html
@@ -9,8 +9,21 @@
     <link rel="stylesheet" href="styles.css" />
   </head>
   <body>
-    <h1>color flipper</h1>
-    <!-- javascript -->
+    <nav>
+      <div class="nav-center">
+        <h4>Color Flipper</h4>
+        <ul class="nav-links">
+          <li><a href="index.html">Simple</a></li>
+          <li><a href="hex.html">Hex</a></li>
+        </ul>
+      </div>
+    </nav>
+    <main>
+      <div class="container">
+        <h2>Background Color : <span class="color">#f1f5f8</span></h2>
+        <button class="btn btn-hero">Click Me</button>
+      </div>
+    </main>
     <script src="app.js"></script>
   </body>
 </html>
diff --git a/02-counter/setup/app.js b/02-counter/setup/app.js
@@ -0,0 +1,25 @@
+// creating initial value 0
+let count = 0;
+
+const value = document.querySelector("#value");
+const btns = document.querySelectorAll(".btn");
+btns.forEach((btn) => {
+  btn.addEventListener("click", (e) => {
+    let styles = e.currentTarget.classList;
+    if (styles.contains("decrease")) {
+      count--;
+    } else if (styles.contains("increase")) {
+      count++;
+    } else {
+      count = 0;
+    }
+    if (count > 0) {
+      value.style.color = "green";
+    } else if (count < 0) {
+      value.style.color = "red";
+    } else {
+      value.style.color = "#222";
+    }
+    value.textContent = count;
+  });
+});
diff --git a/02-counter/setup/index.html b/02-counter/setup/index.html
@@ -9,7 +9,17 @@
     <link rel="stylesheet" href="styles.css" />
   </head>
   <body>
-    <h1>your code goes here</h1>
+    <main>
+      <div class="container">
+        <h1>Counter</h1>
+        <span id="value">0</span>
+        <div class="button-container">
+          <button class="btn increase">increase</button>
+          <button class="btn reset">reset</button>
+          <button class="btn decrease">decrease</button>
+        </div>
+      </div>
+    </main>
     <!-- javascript -->
     <script src="app.js"></script>
   </body>

diff --git a/03-reviews/.vscode/settings.json b/03-reviews/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/03-reviews/setup/app.js b/03-reviews/setup/app.js
@@ -2,83 +2,79 @@
 const reviews = [
   {
     id: 1,
-    name: 'susan smith',
-    job: 'web developer',
-    img: 'https://www.course-api.com/images/people/person-1.jpeg',
+    name: "susan smith",
+    job: "web developer",
+    img: "https://www.course-api.com/images/people/person-1.jpeg",
     text: "I'm baby meggings twee health goth +1. Bicycle rights tumeric chartreuse before they sold out chambray pop-up. Shaman humblebrag pickled coloring book salvia hoodie, cold-pressed four dollar toast everyday carry",
   },
   {
     id: 2,
-    name: 'anna johnson',
-    job: 'web designer',
-    img: 'https://www.course-api.com/images/people/person-2.jpeg',
-    text: 'Helvetica artisan kinfolk thundercats lumbersexual blue bottle. Disrupt glossier gastropub deep v vice franzen hell of brooklyn twee enamel pin fashion axe.photo booth jean shorts artisan narwhal.',
+    name: "anna johnson",
+    job: "web designer",
+    img: "https://www.course-api.com/images/people/person-2.jpeg",
+    text: "Helvetica artisan kinfolk thundercats lumbersexual blue bottle. Disrupt glossier gastropub deep v vice franzen hell of brooklyn twee enamel pin fashion axe.photo booth jean shorts artisan narwhal.",
   },
   {
     id: 3,
-    name: 'peter jones',
-    job: 'intern',
-    img: 'https://www.course-api.com/images/people/person-4.jpeg',
-    text: 'Sriracha literally flexitarian irony, vape marfa unicorn. Glossier tattooed 8-bit, fixie waistcoat offal activated charcoal slow-carb marfa hell of pabst raclette post-ironic jianbing swag.',
+    name: "peter jones",
+    job: "intern",
+    img: "https://www.course-api.com/images/people/person-4.jpeg",
+    text: "Sriracha literally flexitarian irony, vape marfa unicorn. Glossier tattooed 8-bit, fixie waistcoat offal activated charcoal slow-carb marfa hell of pabst raclette post-ironic jianbing swag.",
   },
   {
     id: 4,
-    name: 'bill anderson',
-    job: 'the boss',
-    img: 'https://www.course-api.com/images/people/person-3.jpeg',
-    text: 'Edison bulb put a bird on it humblebrag, marfa pok pok heirloom fashion axe cray stumptown venmo actually seitan. VHS farm-to-table schlitz, edison bulb pop-up 3 wolf moon tote bag street art shabby chic. ',
+    name: "bill anderson",
+    job: "the boss",
+    img: "https://www.course-api.com/images/people/person-3.jpeg",
+    text: "Edison bulb put a bird on it humblebrag, marfa pok pok heirloom fashion axe cray stumptown venmo actually seitan. VHS farm-to-table schlitz, edison bulb pop-up 3 wolf moon tote bag street art shabby chic. ",
   },
 ];
-// select items
-const img = document.getElementById('person-img');
-const author = document.getElementById('author');
-const job = document.getElementById('job');
-const info = document.getElementById('info');
+const img = document.getElementById("person-img");
+const author = document.querySelector(".author");
+const job = document.querySelector(".job");
+const info = document.querySelector(".info");
 
-const prevBtn = document.querySelector('.prev-btn');
-const nextBtn = document.querySelector('.next-btn');
-const randomBtn = document.querySelector('.random-btn');
+const prevBtn = document.querySelector(".prev-btn");
+const nextBtn = document.querySelector(".next-btn");
+const randomBtn = document.querySelector(".random-btn");
 
-// set starting item
+// Initial data load
 let currentItem = 0;
 
-// load initial item
-window.addEventListener('DOMContentLoaded', function () {
-  const item = reviews[currentItem];
-  img.src = item.img;
-  author.textContent = item.name;
-  job.textContent = item.job;
-  info.textContent = item.text;
+// content loader
+
+window.addEventListener("DOMContentLoaded", () => {
+  showPerson(currentItem);
 });
 
-// show person based on item
-function showPerson(person) {
-  const item = reviews[person];
+const showPerson = (person) => {
+  const item = reviews[currentItem];
   img.src = item.img;
   author.textContent = item.name;
   job.textContent = item.job;
   info.textContent = item.text;
-}
-// show next person
-nextBtn.addEventListener('click', function () {
+};
+
+// adding next event listener
+
+nextBtn.addEventListener("click", () => {
   currentItem++;
-  if (currentItem > reviews.length - 1) {
-    currentItem = 0;
-  }
+  if (currentItem === reviews.length) currentItem = 0;
   showPerson(currentItem);
 });
-// show prev person
-prevBtn.addEventListener('click', function () {
+
+// adding prev even listener
+
+prevBtn.addEventListener("click", () => {
   currentItem--;
-  if (currentItem < 0) {
-    currentItem = reviews.length - 1;
-  }
+  if (currentItem === -1) currentItem = reviews.length - 1;
   showPerson(currentItem);
 });
-// show random person
-randomBtn.addEventListener('click', function () {
-  console.log('hello');
 
+// adding event listener for random btn
+
+randomBtn.addEventListener("click", () => {
+  // console.log(currentItem);
   currentItem = Math.floor(Math.random() * reviews.length);
   showPerson(currentItem);
 });
diff --git a/03-reviews/setup/index.html b/03-reviews/setup/index.html
@@ -14,7 +14,39 @@
     <link rel="stylesheet" href="styles.css" />
   </head>
   <body>
-    <h1>review project</h1>
+    <main>
+      <section class="container">
+        <!-- title -->
+        <div class="title">
+          <h2>Our Reviews</h2>
+          <div class="underline"></div>
+        </div>
+        <!-- Review -->
+        <article class="review">
+          <div class="img-container">
+            <img src="person-1.jpeg" id="person-img" alt="" />
+          </div>
+          <h4 class="author">Sara Jones</h4>
+          <p class="job">UX Designer</p>
+          <p class="info">
+            A user experience designer is not focused on the minutiae of web
+            design. Rather, as the name of the position suggests, a UX designer
+            is tasked with developing, guiding, and optimizing the experience
+            users have when they interact with a website or a piece of software.
+          </p>
+          <div class="button-container">
+            <button class="prev-btn">
+              <i class="fas fa-chevron-left"></i>
+            </button>
+            <button class="next-btn">
+              <i class="fas fa-chevron-right"></i>
+            </button>
+          </div>
+          <!-- Random button -->
+          <button class="random-btn">Click me</button>
+        </article>
+      </section>
+    </main>
     <!-- javascript -->
     <script src="app.js"></script>
   </body>

diff --git a/04-navbar/setup/app.js b/04-navbar/setup/app.js
@@ -3,3 +3,10 @@
 // add - add class
 // remove - remove class
 // toggle - toggles class
+
+const navToggle = document.querySelector(".nav-toggle");
+const links = document.querySelector(".links");
+
+navToggle.addEventListener("click", function () {
+  links.classList.toggle("show-links");
+});
diff --git a/04-navbar/setup/index.html b/04-navbar/setup/index.html
@@ -14,7 +14,60 @@
     <link rel="stylesheet" href="styles.css" />
   </head>
   <body>
-    <h1>navbar project</h1>
+    <nav>
+      <div class="nav-center">
+        <!-- nav header -->
+        <div class="nav-header">
+          <img src="./logo.svg" class="logo" alt="logo" />
+          <button class="nav-toggle">
+            <i class="fas fa-bars"></i>
+          </button>
+        </div>
+        <!-- links -->
+        <ul class="links">
+          <li>
+            <a href="index.html">home</a>
+          </li>
+          <li>
+            <a href="about.html">about</a>
+          </li>
+          <li>
+            <a href="projects.html">projects</a>
+          </li>
+          <li>
+            <a href="contact.html">contact</a>
+          </li>
+        </ul>
+        <!-- social media -->
+        <ul class="social-icons">
+          <li>
+            <a href="https://www.twitter.com">
+              <i class="fab fa-facebook"></i>
+            </a>
+          </li>
+          <li>
+            <a href="https://www.twitter.com">
+              <i class="fab fa-twitter"></i>
+            </a>
+          </li>
+          <li>
+            <a href="https://www.twitter.com">
+              <i class="fab fa-behance"></i>
+            </a>
+          </li>
+          <li>
+            <a href="https://www.twitter.com">
+              <i class="fab fa-linkedin"></i>
+            </a>
+          </li>
+          <li>
+            <a href="https://www.twitter.com">
+              <i class="fab fa-sketch"></i>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </nav>
     <!-- javascript -->
     <script src="app.js"></script>
   </body>

diff --git a/04-navbar/setup/styles.css b/04-navbar/setup/styles.css
@@ -3,7 +3,7 @@
 Fonts
 ===============
 */
-@import url('https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap');
+@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap");
 
 /*
 =============== 
@@ -43,8 +43,8 @@ Variables
   --clr-green-dark: hsl(125, 67%, 44%);
   --clr-green-light: hsl(125, 71%, 66%);
   --clr-black: #222;
-  --ff-primary: 'Roboto', sans-serif;
-  --ff-secondary: 'Open Sans', sans-serif;
+  --ff-primary: "Roboto", sans-serif;
+  --ff-secondary: "Open Sans", sans-serif;
   --transition: all 0.3s linear;
   --spacing: 0.1rem;
   --radius: 0.25rem;
@@ -199,9 +199,9 @@ nav {
   display: none;
 }
 .links {
-  /* height: 0;
+  height: 0;
   overflow: hidden;
-  transition: var(--transition); */
+  transition: var(--transition);
 }
 .show-links {
   height: 10rem;