update weather app project tutorial (May 24)

docs/author_guide.mdx

@@ -0,0 +1,56 @@
+# Project Tutorial Author Guide
+
+Get up to speed on how to get started drafting your project along with the resources you’ll need to be successful in doing so. This document also contains logistics like how you’ll get paid and deadlines for submitting your draft and final piece.
+⚓ High-level Outline
+
+Week 1:
+Attend kickoff meeting with Sonny/Brandon
+Choose a project from the given list or suggest an idea
+Research/outline rough draft of project in Google Doc, get feedback from team
+Ensure you’re including the final output of the project in this outline
+Please email brandon@codedex.io + lillian@codedex.io with your outline. We will keep the line of communication via email for the duration of your drafting to publishing.
+Start drafting tutorial
+Week 2: 
+Finish drafting tutorial
+Submit first draft in Google Doc to Sonny/Brandon for review
+Receive feedback, make edits
+Coordinate optional meeting with the team to discuss feedback, etc.
+Week 3: 
+Move project tutorial draft to a PR on GitHub on the `projects` repository.
+Implement final 1-2 rounds of feedback from the team.
+If you haven’t already, be sure to create a Codédex account and fill out your profile + bio. Your profile/bio will be linked in the project. See screenshot below.
+
+Publish it!
+🤝 Meetings & Deadlines
+
+We believe three weeks is sufficient time to outline, draft and publish a project tutorial. 
+A kick off meeting (to be scheduled) is required prior to starting the draft.
+You may schedule an optional mid-project check-in.
+💡 Choose One Project
+
+Please choose a project that interests you so that the user feels your excitement about the subject! 
+
+Choose a project from the list below
+Decorate Your Terminal with X
+Build a Minecraft Mod with Python
+Build a Snake Game with Python
+Analyze (TV Show) with Python
+Build ____ with Three.js
+Suggest an idea
+📖 Resources
+Project Tutorial Guide
+Content Guidelines - While each project is different, we expect the author (ie. you!) to abide by our rules of formatting, voice & tone, image & video use, and of course, originality.
+Project template - Use this to input your work.
+Project Tutorial Catalog
+Please reference our current project tutorials to gain familiarity with how we structure and teach select concepts.
+Markdown Style Guide
+💭 Voice & Tone
+
+While we encourage you to infuse your personality/voice, below are guidelines in how we think about our voice & tone when speaking with or explaining a concept to our community members.
+
+Voice: We want to establish ourselves as coding experts in a supportive community where our users can lean on us. We are honest, non-judgmental, and accessible in our messaging and know-how. 
+
+
+We are motivating, fun, and inspiring people. We believe in a future where everyone can learn technical skills in a way that isn’t dry.
+
+We want to be easily understood, avoiding programming jargon that may isolate members of our community. Communicate simply, cue The Feynman Technique. Use humor, when relevant, and a mix of casual and professional language when teaching a topic. 

projects/view-weather-with-html-css-js/weather-app/script.js

@@ -6,12 +6,11 @@ async function fetchWeather() {
 
   const apiKey = "REPLACE WITH YOUR API KEY"
 
-
   if (searchInput == "") {
     weatherDataSection.innerHTML = `
     <div>
-    <h2>Empty Input!</h2>
-    <p>Please try again with a valid <u>city name</u>.</p>
+      <h2>Empty Input!</h2>
+      <p>Please try again with a valid <u>city name</u>.</p>
     </div>
     `;
     return;
@@ -33,8 +32,8 @@ async function fetchWeather() {
       console.log("Something went wrong here.");
       weatherDataSection.innerHTML = `
       <div>
-      <h2>Invalid Input: "${searchInput}"</h2>
-      <p>Please try again with a valid <u>city name</u>.</p>
+        <h2>Invalid Input: "${searchInput}"</h2>
+        <p>Please try again with a valid <u>city name</u>.</p>
       </div>
       `;
       return;
@@ -52,12 +51,12 @@ async function fetchWeather() {
     const data = await response.json();
     weatherDataSection.style.display = "flex";
     weatherDataSection.innerHTML = `
-    <img src="https://openweathermap.org/img/wn/${data.weather[0].icon}.png" alt="${data.weather[0].description}" width="100" />
-    <div>
-      <h2>${data.name}</h2>
-      <p><strong>Temperature:</strong> ${Math.round(data.main.temp - 273.15)}°C</p>
-      <p><strong>Description:</strong> ${data.weather[0].description}</p>
-    </div>
+      <img src="https://openweathermap.org/img/wn/${data.weather[0].icon}.png" alt="${data.weather[0].description}" width="100" />
+      <div>
+        <h2>${data.name}</h2>
+        <p><strong>Temperature:</strong> ${Math.round(data.main.temp - 273.15)}°C</p>
+        <p><strong>Description:</strong> ${data.weather[0].description}</p>
+      </div>
     `
   }
 

projects/view-weather-with-html-css-js/weather-app/styles.css

@@ -4,43 +4,39 @@
   box-sizing: border-box;
 }
 
-
 body {
-  background-image: url(https://www.travellens.co/content/images/size/w2000/format/webp/2022/06/Dumbo-NYC.jpg);
+  background-image: url(https://bit.ly/4bcK1Hc);
   background-repeat: no-repeat;
   background-size: cover;
   font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
   height: 100vh;
 }
 
-
 main {
   background-color: rgba(227, 193, 173, 0.85);
   position: relative;
   top: 30%;
   border: 1px solid;
   border-radius: 5px;
-  width: 45%;
+  min-width: 540px;
+  max-width: 50%;
   margin: auto;
   padding: 2em;
 }
 
-
 h1 {
   margin-bottom: 20px;
 }
 
-
 #search {
   border-radius: 5px 0 0 5px;
   border: none;
   padding: 10px;
   font-size: 16px;
   width: 70%;
-  height: 48px;
+  height: 42px;
 }
 
-
 #submit {
   border-radius: 0 5px 5px 0;
   padding: 10px;
@@ -53,30 +49,26 @@ h1 {
   display: flex;
   flex-direction: column;
   place-items: center;
-  height: 250px;
+  justify-content: space-between;
 }
 
 #weather-search {
   display: flex;
   width: 50%;
-  gap: 5px;
 }
 
-
-/* #weather-data {
+#weather-data {
   background-color: rgba(255, 255, 255, 0.85);
   border-radius: 5px;
   padding: 1.5em;
   margin-top: 20px;
 
-
   text-align: center;
   align-items: center;
   gap: 12px;
 }
 
-
 #weather-data > img {
   border-radius: 50%;
   background-color: lightskyblue;
-}*/
+}