diff --git a/assets/.keep b/assets/.keep index e69de29bb..fa652c29c 100644 --- a/assets/.keep +++ b/assets/.keep @@ -0,0 +1 @@ +🌡__🐍_πŸ¦‚_🌡🌡__🐍_🏜_πŸ¦‚ \ No newline at end of file diff --git a/index.html b/index.html index e69de29bb..45bd28f3a 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,61 @@ + + + + Weather Report + + + + + +
+ +
+
+

Temperature

+
+
⬆️
+
⬇️
+
+ 71 +
+ + +
+
+

Sky

+
+ +
+
+

City Name

+
+ + Reset +
+
+

Weather Garden

+
+
+

☁️ ☁️ ☁️ β˜€οΈ ☁️ ☁️

+
+
+
+

🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷

+
+ +
+
+
+ + + + diff --git a/scripts/index.js b/scripts/index.js index e69de29bb..3668276cd 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -0,0 +1,109 @@ + + +const tempToColor = (temp) => { + if (temp >= 80){ + return "red-temp"; + } else if (temp >= 70){ + return "orange-temp"; + } else if (temp >= 60){ + return "yellow-temp"; + } else if (temp >= 50){ + return "green-temp"; + } else { + return "teal-temp"; + } + // ((temp>= 70) && (temp <= 79)) +}; + +const tempToLandscape = (temp) => { + if (temp >= 80){ + return "🌡__🐍_πŸ¦‚_🌡🌡__🐍_🏜_πŸ¦‚" + } else if (temp >= 70){ + return "🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷" + } else if (temp >= 60){ + return "🌾🌾_πŸƒ_πŸͺ¨__πŸ›€_🌾🌾🌾_πŸƒ" + } else { + return "πŸŒ²πŸŒ²β›„οΈπŸŒ²β›„οΈπŸ‚πŸŒ²πŸπŸŒ²πŸŒ²β›„οΈπŸ‚πŸŒ²" + } +}; + +const skyToLandscape = (sky) => { + if (sky == "sunny"){ + return "☁️ ☁️ ☁️ β˜€οΈ ☁️ ☁" + } else if (sky == "cloudy"){ + return "☁️☁️ ☁️ ☁️☁️ ☁️ 🌀 ☁️ ☁️☁️" + } else if (sky == "rainy"){ + return "πŸŒ§πŸŒˆβ›ˆπŸŒ§πŸŒ§πŸ’§β›ˆπŸŒ§πŸŒ¦πŸŒ§πŸ’§πŸŒ§πŸŒ§" + } else if (sky == "snowy"){ + return "πŸŒ¨β„οΈπŸŒ¨πŸŒ¨β„οΈβ„οΈπŸŒ¨β„οΈπŸŒ¨β„οΈβ„οΈπŸŒ¨πŸŒ¨" + } +} + +const resetClickCount = ()=>{ + StaticRange.clickCount = 0; + const townnameContainer = document.getElementBy("town-name"); +}; + +const setTempClass = (tag, className) => { + tag.classList.remove("red-temp"); + tag.classList.remove("orange-temp"); + tag.classList.remove("yellow-temp"); + tag.classList.remove("green-temp"); + tag.classList.remove("teal-temp"); + //remove all the classes + tag.classList.add(className); +}; + +const setGroundLandscape = (temp) => { + let p = document.getElementById("ground-landscape"); + let groundValue = tempToLandscape(temp); + p.innerText = groundValue; +}; + + +const increaseTemperature = function(){ + let span=document.getElementById("temp-value"); + let value = parseInt(span.innerText); + value +=1; //convert from string to int + span.innerText = value; + let className=tempToColor(value); + setTempClass(span,className); + setGroundLandscape(value); +}; + + + + +const decreaseTemp = () => { + const span = document.querySelector("#temp-value"); + let value = parseInt(span.textContent); + value -=1; + span.textContent = value; + let className=tempToColor(value); + setTempClass(span,className); + setGroundLandscape(value); +}; + +const changeSky = () => { + + let p = document.getElementById("sky-landscape"); + let select = document.querySelector("#sky-card > select"); //select is tag + let weather = select.value; + let landscape = skyToLandscape(weather); + p.textContent = landscape; + + // use sky to landscape function select.value + // let className=tempToColor(value); + // skyToLandscape = select.value +} +const decreaseTempArrow = document.querySelector("#decreaseTempArrow"); //# is id +decreaseTempArrow.addEventListener('click',decreaseTemp); +let select = document.querySelector("#sky-card > select"); //select is tag +select.addEventListener('change',changeSky); + + + + + + + diff --git a/styles/index.css b/styles/index.css index e69de29bb..227ab9f4f 100644 --- a/styles/index.css +++ b/styles/index.css @@ -0,0 +1,33 @@ + +#select by class +.orange-temp { + color: orange; +} + +.red-temp { + color: red; +} + +.yellow-temp { + color: yellow; +} + +.green-temp { + color: green; +} + +.teal-temp { + color: teal; +} + +#city-card input { + background-color: red +} + +#city-card > h3 { + margin: 20px; +} + + + +