MC-JUL-24 | Syed Arslan Haider| Module JS-3 | WEEK-3 | Javascript-Core-3-Challenges

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

challenge-cowsay-two/solution1.js

@@ -5,26 +5,36 @@
 // =================
 
 // 1. Accept arguments
-
+const input = process.argv[2] || '';
 // how will you accept arguments?
 
 // 2. Make supplies for our speech bubble
 
-let topLine = '_';
-let bottomLine = '-';
-let saying = '';
+let topLine = '_'.repeat(input.length + 2); // Dynamic length based on input
+let bottomLine = '-'.repeat(input.length + 2);
+let saying = input;
 
 // 3. Make a cow that takes a string
 
 function cowsay(saying) {
-// how will you make the speech bubble contain the text?
-
-// where will the cow picture go?
-
-// how will you account for the parameter being empty?
-
+  if (!saying) {
+    saying = "Moo? (No input provided!)";
+}
+  const speechBubble = `
+  ${topLine}
+ < ${saying} >
+  ${bottomLine}`;
+
+    const cow = `
+     \\   ^__^
+      \\  (oo)\\_______
+         (__)\\       )\\/\\
+             ||----w |
+             ||     ||`;
+
+  // Combine and return the result
+  return speechBubble + cow;
 }
-
 //4. Pipe argument into cowsay function and return a cow
-
+console.log(cowsay(saying));
 // how will you log this to the console?

challenge-cowsay-two/solution2.js

@@ -5,14 +5,32 @@
 // =================
 
 // 1. Make  a command line interface.
-
+const readline = require('readline');
+// Create an interface to accept input
+const rl = readline.createInterface({
+  input: process.stdin,
+  output: process.stdout,
+});
 // 2. Make supplies for our speech bubble
-
-// 3. Make a cow that takes a string
-
 const cow = (saying) => {
-    // how did you make the cow before?
-}
+  const topLine = '_'.repeat(saying.length + 2); // Adjust length dynamically
+  const bottomLine = '-'.repeat(saying.length + 2);
 
+  // Speech bubble and cow art
+  return `
+  ${topLine}
+ < ${saying} >
+  ${bottomLine}
+     \\   ^__^
+      \\  (oo)\\_______
+         (__)\\       )\\/\\
+             ||----w |
+             ||     ||`;
+};
 // 4. Use readline to get a string from the terminal 
+rl.question("What would you like the cow to say? ", (input) => {
+  const saying = input || "Moo? (No input provided!)"; // Default if no input
+  console.log(cow(saying)); // Log the result
+  rl.close(); // Close the readline interface
+});
 // (with a prompt so it's clearer what we want)

challenge-weather-app/app.js

@@ -0,0 +1,95 @@
+
+// Grab references to DOM elements
+const searchForm = document.getElementById("search");
+const cityInput = document.getElementById("search-tf");
+const photoContainer = document.getElementById("photo");
+const conditions = document.getElementById("conditions");
+const thumbsContainer = document.getElementById("thumbs");
+const creditUser = document.getElementById("credit-user");
+const creditPlatform = document.getElementById("credit-platform");
+
+const openWeatherAPIKey = "d1eaa2d1ed85341168097afcc7cf28d6";
+const unsplashAccessKey = "rBoeB3Y2d6uUxKOeYQwgYd7J-qsXePsoNjOT48AKc_8";
+// default city
+let currentCity = "madrid";
+//Fetch weather data 
+async function fetchWeather(city) {
+  const weatherUrl = `http://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${openWeatherAPIKey}&units=metric`;
+  const response = await fetch(weatherUrl);
+  const data = await response.json();
+
+   // Extract weather description
+  const weatherDescription = data.weather[0].description;
+  const temperature = data.main.temp;
+
+  // Update weather info on the page
+  conditions.textContent = `${weatherDescription}, ${temperature}°C`;
+
+  return weatherDescription;
+}
+// Fetch images from Unsplash based on weather description
+async function fetchImages(query) {
+  const unsplashUrl = `https://api.unsplash.com/search/photos?query=${query}&client_id=${unsplashAccessKey}`;
+  const response = await fetch(unsplashUrl);
+  const data = await response.json();
+  return data.results;
+}
+
+// Display images as thumbnails
+function displayThumbnails(images) {
+  thumbsContainer.innerHTML = "";
+
+  images.forEach((image) => {
+    const thumbLink = document.createElement("a");
+    thumbLink.href = image.urls.full;
+    thumbLink.classList.add("thumbs__link");
+
+    const thumbImage = document.createElement("img");
+    thumbImage.src = image.urls.small;
+    thumbImage.alt = image.alt_description;
+    thumbImage.classList.add("thumb");
+
+    // Add click event to update main photo
+    thumbLink.addEventListener("click", (e) => {
+      e.preventDefault();
+      displayMainImage(image);
+    });
+
+    thumbLink.appendChild(thumbImage);
+    thumbsContainer.appendChild(thumbLink);
+  });
+}
+
+// Display the main image and photographer's credit
+function displayMainImage(image) {
+  photoContainer.innerHTML = `<img src="${image.urls.regular}" alt="${image.alt_description}">`;
+
+  creditUser.textContent = image.user.name;
+  creditUser.href = image.user.links.html;
+  creditPlatform.href = image.links.html;
+}
+
+async function init() {
+  cityInput.value = currentCity; // Update search field with current city name
+  const weatherDescription = await fetchWeather(currentCity);
+  const images = await fetchImages(weatherDescription);
+
+  // Display a random main image
+  if (images.length > 0) {
+    const randomImage = images[Math.floor(Math.random() * images.length)];
+    displayMainImage(randomImage);
+  }
+
+  // Display all images as thumbnails
+  displayThumbnails(images);
+}
+
+// Handle search form submission
+searchForm.addEventListener("submit", (event) => {
+  event.preventDefault();
+  currentCity = cityInput.value;
+  init();
+});
+
+// Initialize the app when the page loads
+init();

challenge-weather-app/index.html

@@ -42,7 +42,7 @@ <h1 class="title">
       </form>
     </div>
   </main>
-
+<script src="app.js"></script>
   <!-- JS goes here -->
 </body>