diff --git a/.gitignore b/.gitignore index 6d0ee45db..a64ff47ef 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ .vscode -.DS_Store \ No newline at end of file +.DS_Store +venv/ \ No newline at end of file diff --git a/assets/98degrees.png b/assets/98degrees.png new file mode 100644 index 000000000..93604adfd Binary files /dev/null and b/assets/98degrees.png differ diff --git a/assets/cloudy.png b/assets/cloudy.png new file mode 100644 index 000000000..a617b9fa9 Binary files /dev/null and b/assets/cloudy.png differ diff --git a/assets/cloudy_sky.png b/assets/cloudy_sky.png new file mode 100644 index 000000000..3d949de6e Binary files /dev/null and b/assets/cloudy_sky.png differ diff --git a/assets/rainy.png b/assets/rainy.png new file mode 100644 index 000000000..841a560a6 Binary files /dev/null and b/assets/rainy.png differ diff --git a/assets/rainy_sky.png b/assets/rainy_sky.png new file mode 100644 index 000000000..d2c508330 Binary files /dev/null and b/assets/rainy_sky.png differ diff --git a/assets/snowy.png b/assets/snowy.png new file mode 100644 index 000000000..3292d676c Binary files /dev/null and b/assets/snowy.png differ diff --git a/assets/snowy_sky.png b/assets/snowy_sky.png new file mode 100644 index 000000000..59eeff1b1 Binary files /dev/null and b/assets/snowy_sky.png differ diff --git a/assets/sunny.png b/assets/sunny.png new file mode 100644 index 000000000..e6bc47bff Binary files /dev/null and b/assets/sunny.png differ diff --git a/assets/sunny_sky.png b/assets/sunny_sky.png new file mode 100644 index 000000000..a0ba400d9 Binary files /dev/null and b/assets/sunny_sky.png differ diff --git a/assets/sunny_world.png b/assets/sunny_world.png new file mode 100644 index 000000000..f7de92ef8 Binary files /dev/null and b/assets/sunny_world.png differ diff --git a/assets/world.png b/assets/world.png new file mode 100644 index 000000000..55e5987aa Binary files /dev/null and b/assets/world.png differ diff --git a/index.html b/index.html index e69de29bb..d15962188 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,164 @@ + + + + + + + + + Weather World + + + + +
+
🌞 Weather World. Where Weather Lives.🌞OR go to a Site that Works! +
+
+ + +
+
+

Weather World

+ +
+ + +
+
Weather World Cities:
Sunnyville, Cloudvile, Rainville, or Snowville
+ +
+

Weather Changes

+
+ + + +

Temperature

+

70

+ +
+ + +
+ +
+
+ + + + + +
+
+ + +
+
+ + + + +
+ + + + + + Sky View + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/scripts/index.js b/scripts/index.js index e69de29bb..39b1f6bc8 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -0,0 +1,166 @@ + +// HELPER FUNCTION // +function numsChangeColor() { + let temp = document.querySelector('#givenTemp'); + + if (state.givenTemp >= 100) { + temp.style.color = "black" + } else if ((state.givenTemp < 100) && (state.givenTemp >= 70)) { + temp.style.color = "red" + } else if ((state.givenTemp < 70) && (state.givenTemp >= 60)) { + temp.style.color = "orange" + } else if ((state.givenTemp < 60) && (state.givenTemp >= 50)) { + temp.style.color = "yellow" + } else if ((state.givenTemp < 50) && (state.givenTemp >= 40)) { + temp.style.color = "green" + } else if ((state.givenTemp < 40) && (state.givenTemp >= 30)) { + temp.style.color = "blue" + } else { + temp.style.color = "purple" + } +}; + +////////////////////////////// WAVE 2 ////////////////////////////////// +////////////////// EVENT HANDLER (UP/DOWN TEMPERATURE)////////////////// +// SELECT THE EVENT TARGET +// document.getElementById('givenTemp') || document.querySelector("#givenTemp"); + +////////////////////////////// WAVE 2 ////////////////////////////////// +/////////////// METHODS (UP/DOWN TEMPERATURE) BEHAVIORS //////////////// +const state = { + givenTemp: 70 +}; +const addTemp = (event) => { // Add temp UP Behavior + state.givenTemp += 1; + const tempUp = document.querySelector("#givenTemp"); + tempUp.textContent = state.givenTemp; + numsChangeColor(); +} +const subTemp = (event) => { // Add temp DOWN Behavior + state.givenTemp -= 1; + const tempDown = document.querySelector("#givenTemp"); + tempDown.textContent = state.givenTemp; + numsChangeColor(); +}; + +// REGISTER ALL EVENTS // use the .registerEventHandler +const registerEventHandlers = (event) => { // EACH EVENT needs a .addEventListener - listens fot the event i.e. "click" then performs a function + // WAVE 2 // reigster the upButton + const upButton = document.querySelector("#addUpButton"); + upButton.addEventListener("click", addTemp); + // WAVE 2 // reigster the downButton + const downButton = document.querySelector("#addDownButton"); + downButton.addEventListener("click", subTemp); + // WAVE 5 // register the reset / submit button + const submitButton = document.querySelector("#submitButton"); + submitButton.addEventListener("click", switchCity); + // WAVE 3 // register the skySelector + const skySelect = document.querySelector("#skySelector"); + skySelect.addEventListener("change", changeDisplay); +}; +///////////////////////////// WAVE 5 ///////////////////////////////// +//////////////////// METHOD (switchCity) BEHAVIOR //////////////////// + +// SELECT THE EVENT TARGET +// NOPE document.getElementById('changeCity') || document.querySelector("#changeCity"); +// Needs to be the "citySearch" id BUT specifically the VALUE of the user input that triggers the change/reset of the display +const switchCity = (event) => { + // change to different city Behavior // NOPE const rainville = document.getElementById('changeCity') // NOPE rainville.innerHTML = "

Rainville

\n55°F\n
\n\"Rainy\"/\n
Rainy with Temperatures between 40-65°F
" + const city = document.getElementById("citySearch").value; // THE USER INPUT** + let cityNameText = ""; + let cityTempText = ""; + let cityPicSrc = ""; + + switch (city){ + case "Sunnyville": + cityNameText = "Sunnyville"; + cityTempText = "80°F"; + cityPicSrc = "./assets/sunny.png"; + break; + case "Rainville": + cityNameText = "Rainville"; + cityTempText = "55°F"; + cityPicSrc = "./assets/rainy.png"; + break; + case "Cloudville": + cityNameText = "Cloudville"; + cityTempText = "55°F"; + cityPicSrc = "./assets/cloudy.png"; + break; + case "Snowville": + cityNameText = "Snowville"; + cityTempText = "30°F"; + cityPicSrc = "./assets/snowy.png"; + break; + default: + cityNameText = city + "? Type in a Weather World City"; + cityTempText = "98°F"; + cityPicSrc = "./assets/98degrees.png"; + break; + } + + const cityName = document.getElementById("cityName"); //STATE? - the thing to change + cityName.textContent = cityNameText; + + const cityTemp = document.getElementById("cityTemp"); //STATE? - the thing to change + cityTemp.textContent = cityTempText; + + const cityPic = document.getElementById("cityPic"); //STATE? - the thing to change + cityPic.src = cityPicSrc; + // preventDefault() - makes it stick with the change + event.preventDefault() +} + +///////////////////////////// WAVE 4 ////////////////////////////////// +///////////// A dropdown element to select the sky display //////////// +// SELECT THE EVENT TARGET +// document.getElementById('changeCity') || document.querySelector("#changeCity"); + +/////////////// METHOD (changeDisplay) BEHAVIOR //////////////// +const changeDisplay = (event) => { + const displaySky = document.getElementById("displaySky"); + displaySky.src = document.getElementById("skySelector").value; // USER INPUT ?? does this grab the option value? + + event.preventDefault() +} + + + +/* NOPE - need to import jQuery? +$("#skySelector").on("change", function(){ + let selection = $(this).val() + let changeSky = document.getElementById("displaySky") + changeSky.src = selection + // $("#displaySky").text(selection) +}); +*/ + +/* +const changeSky = (event) => { + const sky = document.getElementById("skySelector").value; + const display = document.getElementById("displaySky"); + .src + switch(sky) { + case "sunny": + } +*/ +// REGISTER ALL EVENTS and LISTENERS // +document.addEventListener("DOMContentLoaded", registerEventHandlers); + + +///////////////////////////// WAVE 4 ////////////////////////////////// +///////////// A dropdown element to select the sky display //////////// +// SELECT THE EVENT TARGET +// document.getElementById('changeCity') || document.querySelector("#changeCity"); + + + +// const form = document.querySelector(".top-banner form"); +// ^ this will return the form + +// form.addEventListener("submit", => { + +// .then(response?)s +// .catch(() => { +// msg.textContent = "Please search for a valid city 😩"; +// }); \ No newline at end of file diff --git a/scripts/script.js b/scripts/script.js new file mode 100644 index 000000000..d0c87d878 --- /dev/null +++ b/scripts/script.js @@ -0,0 +1,43 @@ +// FUN BONUS color change on click!! FLARE from Codecademy tutorial + +function newStyle() { + let newColor = ''; + let newFont = ''; + let x = Math.floor(Math.random()*7); + switch (x){ + + case 0: + newColor = 'red'; + newFont = 'Times New Roman'; + break; + case 1: + newColor = 'blue'; + newFont = 'Florence, cursive'; + break; + case 2: + newColor = 'yellow'; + newFont = 'Verdana'; + break; + case 3: + newColor= 'purple'; + newFont = 'Courier New'; + break + case 4: + newColor = 'cyan'; + newFont = 'Georgia'; + break; + case 5: + newColor = 'maroon'; + newFont = 'Palatino'; + break; + case 6: + newColor = 'lime'; + newFont = 'Impact'; + break; + } + + let elem = document.getElementById('colorwords'); + elem.style.color = newColor; + elem.style.fontFamily = newFont; +} + diff --git a/styles/index.css b/styles/index.css index e69de29bb..aa26838d0 100644 --- a/styles/index.css +++ b/styles/index.css @@ -0,0 +1,219 @@ +/* THE BASIC STYLES */ + /* CSS :root Selector */ /*target the highest-level “parent” element in the DOM */ +/* Use these (--labels) to change to exact colors in the :root theme accross the entire page */ +:root { + --bg_main: #184472; + --text_light: #fff; + --text_med: #53627c; + --text_dark: #2e225c; + --red: #ff1e42; + --darkred: #c3112d; + --orange: #ff8c00; + } + + /* CSS universal selector -- The asterisk (*) is the CSS universal selector. Selects all the elements on the page */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-weight: normal; + } + +button { + cursor: pointer; + } + +input { + /* -webkit-appearance: none; */ /*looks cool but I don't know how it works */ + border:0; /*remove default border */ + padding: 3px; + box-shadow:0 0 15px 4px rgba(0,0,0,0.06) /* black with opacity */ +} + +button, +input { + border: none; /*remove default border */ + background: none; /*remove default background */ + outline: none; /*remove default outline */ + color: inherit; /*the inherit keyword specifies that a property should inherit its value from its parent element */ +} + +img { + display: block; /* means that the element is displayed as a block with whitespace above and below it */ + max-width: 100%; /*means 100% is percentage of overall size of page */ + height: auto; /*automatically adjust its height to allow its content to be displayed correctly*/ +} + +body { + font: 1rem/1.3 "Roboto", sans-serif; /* 1rem equals the font size of the html element*/ + background: var(--bg_main); /* var() -- CSS variables can have a global or local scope. */ + color: var(--text_dark); /* calls the global variables (--bg__main) and (--text_dark) declared in the :root section*/ + padding: 50px; +} + +/* SECTION 1 */ +.top-banner { /* specifies the class with .top-banner */ + color: var(--text_light); /* var() This calls global variable (--text_light) from the :root section*/ + } + +.heading { + font-weight: bold; + font-size: 4rem; /* rem stands for "root em" - it is only relative to the html (root) font-size */ + letter-spacing: 0.02em; /* em is relative to the font-size of its direct or nearest parent */ + padding: 25px 0 0 0; /* top right bottom left */ + } + +.top-banner form { /* specifies
HTML element within the class .top-banner*/ + position: relative; /* positions relative to its current position without changing the layout around it. (VS position: absolute makes it relative to its parent's position and changed the layout around it)*/ + display: flex; /*A flex container expands items to fill available free space or shrinks them to prevent overflow*/ + align-items: center; + } + +.top-banner form input { /* specifies the input feature of the form */ + font-size: 2rem; /* this is half the size of the font in the heading class */ + height: 40px; /* makes it tall enough to fit the 2rem font-size */ + padding: 5px 5px 10px; /* provides space aroung the input feature */ + border-bottom: 2px solid; /* nice underlined input feature*/ + } + +.top-banner form input::placeholder { /* specifies the text-prompt/placeholder inside the input display feature */ + color: cadetblue; + } + +.top-banner form button { /* specifies the button with the form (I can style other buttons differently :) */ + font-size: 1rem; + font-weight: bold; + letter-spacing: .1em; + padding: 15px 20px; + margin-left: 15px; /*sets the left margin - give space from the input feature. */ + border-radius: 5px; + background: var(--orange); + transition: background 0.3s ease-in-out; /* Not working - do I need a webkit? what's webkit? */ + } + +.top-banner form button:hover { + background: var(--darkred); /* omgomgomg pretty */ + } + +/******* Temperature Buttons *********/ +.top-banner article button { /* There is probably a better way that the "article" element to distinguish these buttons*/ + + font-size: 1rem; + font-weight: bold; + letter-spacing: 0.1em; + padding: 10px 15px 10px 20px; + margin-left: 15px; + margin-bottom: 30px; + border-radius: 5px; + background: var(--darkred); + transition: background 0.3s ease-in-out; + } + +.top-banner article button:hover { + background: var(--orange); + } + +.top-banner #givenTemp { + font-size: 5rem; + font-weight: bold; + margin-left: 60px; + } + + +.top-banner nav { /* changed to a nav element because I couldnt get the CSS to work wiht the class specifier :(*/ + position: relative; + background: var(--text_light); + padding:50px; + width: 600px; + margin-left: 15px + /* margin: 20px auto 0 auto; */ + box-shadow: 0 2px 4px rgba(100,100,100,.1); + border-radius: 20px; + color: var(--text_dark) +} + +.top-banner figcaption { + margin-top: 10px; + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.top-banner sup { + font-size: 0.5em; +} + +.top-banner h6 { + font-size: 1em; + margin-bottom: 30px; +} + +/* SECTION 2 */ +/* CSS Grid to lay out the list items. Each list item will represent a city. +Their width will depend on the screen size. https://grid.malven.co/ */ + + +.city-section .cities { /* class="cities" is an unordered list, so this will take the 4 items in that list and spread them out in a grid*/ + display: grid; + grid-gap: 32px 20px; + grid-template-columns: repeat(4, 1fr); +} + +.city-section .city { /* class="city" is each item(city) in the ^ list. this will style those HTML
  • elements*/ + position: relative; + padding: 40px 10%; + margin-bottom: 30px; + border-radius: 20px; + background: var(--text_light); /* this light background gives each city a white box to be in */ +} + +.city-section figcaption { + margin-top: 10px; + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.city-section .city sup { + font-size: 0.5em; +} + + +/* SECTION 3 */ +/* SKY DISPLAY SELECTOR */ + +.sky label { + font-size: 2rem; + color: var(--text_light) +} + + +/* MISCELLENEOUS */ +/* "Where weather Lives" Banner */ +.live { + background: #fffbbc; + position: fixed; + top: 0; + left: 0; + width: 100%; + padding: 10px; +} + +.live a { + text-decoration: underline; +} + +.live a:hover { + text-decoration: none; +} + + +/* FOOTER */ +.page-footer { + text-align: right; + font-size: 3rem; + color: var(--text_light); + margin-top: 40px; +} + +.page-footer span { + color: var(--red); +} \ No newline at end of file diff --git a/tempcolors.js b/tempcolors.js new file mode 100644 index 000000000..7c74af7cf --- /dev/null +++ b/tempcolors.js @@ -0,0 +1,77 @@ +// ATTEMPTING A HELPER FUNCTION ... +const numsChangeColor = () => { + + let tempColor = document.querySelector('#givenTemp').style.color; + // let newColor = tempColor.style.color; + // let newColor = ''; + // https://stackoverflow.com/questions/17925577/change-text-color-with-javascript + // ^^ the site that told me this syntax works -- but it does-NOT work + + if (givenTemp >= 70) { + tempColor = "red" + } else if ((givenTemp < 70) && (givenTemp >= 60)) { + tempColor = "orange" + } else if ((givenTemp < 60) && (givenTemp >= 50)) { + tempColor = "yellow" + } else if ((givenTemp < 50) && (givenTemp >= 40)) { + tempColor = "green" + } else if ((givenTemp < 40) && (givenTemp >= 30)) { + tempColor = "blue" + } else if (givenTemp < 30) { + tempColor = "purple" + } +}; + + +// THIS IS CORRECT: +function numsChangeColor() { + let temp = document.querySelector('#givenTemp'); + + if (state.givenTemp >= 100) { + temp.style.color = "black" + } else if ((state.givenTemp < 100) && (state.givenTemp >= 70)) { + temp.style.color = "red" + } else if ((state.givenTemp < 70) && (state.givenTemp >= 60)) { + temp.style.color = "orange" + } else if ((state.givenTemp < 60) && (state.givenTemp >= 50)) { + temp.style.color = "yellow" + } else if ((state.givenTemp < 50) && (state.givenTemp >= 40)) { + temp.style.color = "green" + } else if ((state.givenTemp < 40) && (state.givenTemp >= 30)) { + temp.style.color = "blue" + } else { + temp.style.color = "purple" + } +}; + + + +// ATTEMPTING A SWITCH FUNCTION: +function numsChangeColor() { + let temp = document.querySelector('#givenTemp'); + temp.style.color = "" + + switch (state.givenTemp) { + case state.givenTemp >= 100: + temp.style.color = "black"; + break; + case ((state.givenTemp < 100) && (state.givenTemp >= 70)): + temp.style.color = "red"; + break; + case ((state.givenTemp < 70) && (state.givenTemp >= 60)): + temp.style.color = "orange"; + break; + case ((state.givenTemp < 60) && (state.givenTemp >= 50)): + temp.style.color = "yellow"; + break; + case ((state.givenTemp < 50) && (state.givenTemp >= 40)): + temp.style.color = "green"; + break; + case ((state.givenTemp < 40) && (state.givenTemp >= 30)): + temp.style.color = "blue"; + break; + case state.givenTemp <= 0: + temp.style.color = "purple"; + break; + } +}; \ No newline at end of file