NW6 | nazanin saedi | Module JS3 | JavaScript challenges | Weather challenges| week-3

.vscode/settings.json

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

README.md

@@ -8,21 +8,27 @@ Challenges must have the following content
 
 ```txt
 # Title
+Weather Data Visualisation
 
 ## Explanation
+In this task, you're tasked with creating a weather data visualization app that fetches weather information from OpenWeatherMap and displays corresponding images from Unsplash. The app should allow users to input a city and see the current weather along with matching images.
+
 
-An explanation of the task
 
 ### Example Result
 
-An example of given an input what the expected output to be
+Given the input "London", the app should display the current weather conditions in London along with images matching the weather description, such as sunny skies, rainy days, or snowy landscapes.
 
 ## Prior Knowledge
 
-What do the students need to already know to complete this task? What skills with it help them develop?
+To complete this task, students should have a basic understanding of HTML, CSS, and JavaScript. They should know how to work with APIs, make fetch requests, and handle JSON data. Additionally, familiarity with event handling and DOM manipulation will be helpful in building the interactive features of the app.
 
 ## Advanced Challenges
 
-A small set of challenges that students can use to push themselves
+1.Implement autocomplete functionality for the city input field, fetching city suggestions from a separate API.
+2.Add a feature to display a 5-day weather forecast for the selected city.
+3.Enhance the UI by adding animations or transitions when loading weather data and images.
+4.Implement a feature to allow users to save their favorite cities and view weather information for multiple locations simultaneously.
+5.Incorporate geolocation to automatically detect and display weather information for the user's current location.
 
 ```

challenge-cowsay-two/solution1.js

@@ -17,6 +17,43 @@ let saying = '';
 // 3. Make a cow that takes a string
 
 function cowsay(saying) {
+    if (saying.length > 20) {
+        saying = saying.substring(0, 17) + '...';
+
+    }
+    //construct the cow
+    let cow = `
+    ${topLine}
+   /                    \\
+  /   ${speechBubble}   \\
+ /______________________\\
+(                       )
+(       ${saying}        )
+(                       )
+  \\______________________/
+         \\  /(__)
+          (oo)\\_______
+          (__)        )\\/\\
+             ||----w |
+             ||     ||
+`;
+
+//log the cow to the console
+console.log(cow);
+}
+
+//check if an argument is provided
+if (Process.argv.length < 3) {
+    console.log("Please provide an argument for the cow to say.");
+} else {"
+// Get the argument from the command line
+    let saying = process.argv[2];
+    cowsay(saying);
+
+}
+
+
+
 // how will you make the speech bubble contain the text?
 
 // where will the cow picture go?

challenge-cowsay-two/solution2.js

@@ -4,15 +4,52 @@
 // https://nodejs.dev/learn/accept-input-from-the-command-line-in-nodejs
 // =================
 
-// 1. Make  a command line interface.
+const readline = require('readline');
 
-// 2. Make supplies for our speech bubble
-
-// 3. Make a cow that takes a string
+// Make supplies for our speech bubble
+let topLine = '______________________';
+let bottomLine = '----------------------';
 
+// Make a cow that takes a string
 const cow = (saying) => {
-    // how did you make the cow before?
+    // Ensure the saying isn't longer than 20 characters
+    if (saying.length > 20) {
+        saying = saying.substring(0, 17) + '...';
+    }
+
+    // Construct the speech bubble
+    let speechBubble = '\n< ' + saying + ' >';
+
+    // Construct the cow
+    let cow = `
+    ${topLine}
+   /                    \\
+  /   ${speechBubble}   \\
+ /______________________\\
+(                       )
+(       ${saying}        )
+(                       )
+  \\______________________/
+         \\  /(__)
+          (oo)\\_______
+          (__)        )\\/\\
+             ||----w |
+             ||     ||
+`;
+
+    // Log the cow to the console
+    console.log(cow);
 }
 
-// 4. Use readline to get a string from the terminal 
-// (with a prompt so it's clearer what we want)
+// Use readline to get a string from the terminal 
+// (with a prompt so it's clearer what we want)
+
+const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout
+});
+
+rl.question('What should the cow say? ', (saying) => {
+    cow(saying);
+    rl.close();
+});

challenge-weather-app/api_key.txt

@@ -0,0 +1,2 @@
+OpenWeather API Key: b656168070a8417b8dde4964b33c4df3
+Unsplash Access Key: xaHreyL1u-ao1WMY06UZjU2WiJE2XO6k9NqNpNLsv6E

challenge-weather-app/assets/styles.css

@@ -1,15 +1,16 @@
 .content {
   display: grid;
   grid-template-rows: auto 1fr auto auto auto;
-
   height: 100vh;
   overflow: hidden;
+  background-color: bisque;
 }
 
 .header {
   padding: 5px 10px;
-  background: rgba(0, 0, 0, 0.6);
-  color: rgba(255, 255, 255, 0.5);
+  background: rgba(150, 3, 86, 0.5);
+  color: rgba(233, 209, 230, 0.5);
+
 }
 
 .title {
@@ -35,34 +36,30 @@
   display: grid;
   justify-content: center;
   align-content: center;
-
   overflow: hidden;
   position: relative;
   margin: 20px 0;
 }
 
 .photo::before {
   content: "loading";
-
   display: grid;
   justify-content: center;
   align-content: center;
-
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
-
-  font-size: 0.8em;
+  font-size: 1.1em;
   text-transform: uppercase;
   letter-spacing: 3px;
+  background-color: rgb(245, 227, 238);
 }
 
 .photo__dummy,
 .photo > img {
   animation: 0.5s forwards fade-in;
-
   display: block;
   width: 100%;
   max-height: 100%;
@@ -80,15 +77,13 @@
 ------------------------------------------------------------------------------*/
 .thumbs {
   display: flex;
-
   -webkit-overflow-scrolling: touch;
   scroll-behavior: smooth;
-
   overflow-x: auto;
   overflow-y: hidden;
   height: var(--thumbs-h);
   padding: var(--thumbs-py) 0;
-  background: rgba(0, 0, 0, 0.25);
+  background: rgba(109, 3, 49, 0.25);
 }
 
 .thumbs__link {
@@ -100,7 +95,7 @@
   height: var(--thumb-h);
   margin: 0 1px;
   opacity: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: rgba(73, 2, 46, 0.5);
 }
 
 .thumb.active,
@@ -131,9 +126,8 @@
 .info {
   display: flex;
   justify-content: space-between;
-
   padding: 5px 10px;
-  background: rgba(0, 0, 0, 0.5);
+  background: rgba(150, 3, 86, 0.5);
   color: #ddd;
 }
 
@@ -142,7 +136,7 @@
 }
 
 .info__item > span {
-  color: #aaa;
+  color: rgb(230, 102, 158);
 }
 
 .info__item > a:hover {
@@ -159,14 +153,13 @@
 ------------------------------------------------------------------------------*/
 .controls {
   padding: 5px 10px;
-  background: rgba(255, 255, 255, 0.25);
+  background: rgba(78, 2, 49, 0.25);
 }
 
 .search,
 .search__input,
 .btn {
   transition: 0.5s background-color, 0.5s color;
-
   padding: 5px 10px;
   border: none;
   border-radius: 9999px;
@@ -179,7 +172,7 @@
 }
 
 .btn:hover {
-  background: #333;
+  background: rgb(80, 0, 39);
   color: #ccc;
 }
 
@@ -189,7 +182,7 @@
   margin: auto;
   padding: 2px 2px 2px 10px;
   font-size: 16px;
-  background: #333;
+  background: rgb(85, 2, 22);
   color: #ccc;
 }
 
@@ -211,7 +204,7 @@
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   text-transform: uppercase;
-  background: #666;
+  background: rgb(175, 53, 86);
   color: #fff;
 }
 

challenge-weather-app/index.html

@@ -1,49 +1,53 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-
-  <title>Meteoropolis</title>
-  <link rel="stylesheet" href="assets/globals.css">
-  <link rel="stylesheet" href="assets/styles.css">
-</head>
-
-<body>
-  <!-- Structure -->
-  <main class="content">
-    <header class="header">
-      <h1 class="title">
-        <i>Meteor</i>
-        <i>opolis</i>
-      </h1>
-    </header>
-
-    <figure class="photo" id="photo"></figure>
-
-    <div class="info">
-      <p class="info__item info__item--conditions" id="conditions"></p>
-      <p class="info__item info__item--credits">
-        <a href="#" id="credit-user"></a>
-        <span>on</span>
-        <a href="#" id="credit-platform">Unsplash</a>
-      </p>
-    </div>
-
-    <div class="thumbs" id="thumbs"></div>
-
-    <div class="controls">
-      <form class="search" id="search">
-        <label class="search__label" for="search-tf">City</label>
-        <input class="search__input" id="search-tf" name="city" placeholder="Enter city name" autocomplete="city" />
-        <button class="btn search__btn">Go</button>
-      </form>
-    </div>
-  </main>
-
-  <!-- JS goes here -->
-</body>
-
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Meteoropolis</title>
+    <link rel="stylesheet" href="assets/globals.css" />
+    <link rel="stylesheet" href="assets/styles.css" />
+  </head>
+
+  <body>
+    <!-- Structure -->
+    <main class="content">
+      <header class="header">
+        <h1 class="title">
+          <i>Meteor</i>
+          <i>opolis</i>
+        </h1>
+      </header>
+
+      <figure class="photo" id="photo"></figure>
+
+      <div class="info">
+        <p class="info__item info__item--conditions" id="conditions"></p>
+        <p class="info__item info__item--credits">
+          <a href="#" id="credit-user"></a>
+          <span>on</span>
+          <a href="#" id="credit-platform">Unsplash</a>
+        </p>
+      </div>
+
+      <div class="thumbs" id="thumbs"></div>
+
+      <div class="controls">
+        <form class="search" id="search">
+          <label class="search__label" for="search-tf">City</label>
+          <input
+            class="search__input"
+            id="search-tf"
+            name="city"
+            placeholder="Enter city name"
+            autocomplete="city"
+          />
+          <button class="btn search__btn">Go</button>
+        </form>
+      </div>
+    </main>
+
+    <!-- JS goes here -->
+    <script src="script.js"></script>
+  </body>
 </html>