├── README.md ├── script.js ├── index.html └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # Weather-App with HTML, CSS and JavaScript 2 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const btn = document.getElementById("toogler"); 2 | const btn_icon = document.getElementById("toogler-icon"); 3 | const contain = document.getElementById("contain"); 4 | const wind = document.getElementById("wind") 5 | btn.onclick = function() { 6 | if(contain.getAttribute("data-theme")!="dark"){ 7 | contain.setAttribute("data-theme","dark"); 8 | btn_icon.setAttribute("class","fas fa-solid fa-sun"); 9 | wind.setAttribute("style","color: orange;") 10 | } 11 | else{ 12 | contain.setAttribute("data-theme",""); 13 | wind.setAttribute("style","color: #0f345fe3;") 14 | btn_icon.setAttribute("class","fas fa-solid fa-moon"); 15 | } 16 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Weather App 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |

14 |

15 |

16 | 19 |

Weather App

20 | 23 |

24 |

25 | 28 |

29 | 30 | 31 | 32 | 33 | 34 | 35 |

36 |

37 | 38 | 27°C 39 |

40 |

41 |

42 | 46 | 50 |

51 |

52 |

53 |

54 | 55 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --font-color: #222; 3 | --bg-color: #f2f3f7; 4 | --button-bg-color: #f2f3f7; 5 | --button-shadow: 6 | -6px -6px 8px rgba(255, 255, 255, 0.9), 7 | 5px 5px 8px rgba(0, 0, 0, 0.07); 8 | } 9 | [data-theme=dark] { 10 | --font-color: #fff; 11 | --bg-color: #181818; 12 | --button-bg-color: #121212; 13 | --button-shadow: 14 | -2px -2px 4px rgba(255, 255, 255, 0.05), 15 | 0 0 10px 10px rgba(255, 255, 255, 0.005), 16 | 2px 2px 8px rgba(60, 60, 60, 0.1); 17 | } 18 | html { 19 | box-sizing: border-box; 20 | font-size: 18px; 21 | font-family: "Roboto", sans-serif; 22 | color: var(--font-color); 23 | } 24 | *, 25 | *:before, 26 | *:after { 27 | box-sizing: inherit; 28 | } 29 | body { 30 | background-color: #cecece; 31 | } 32 | .color-cool { 33 | color: #077dfe; 34 | } 35 | .color-warm { 36 | color: #ff7a00; 37 | } 38 | .container { 39 | display: flex; 40 | justify-content: space-evenly; 41 | padding-top: 100px; 42 | align-items: center; 43 | flex-direction: column; 44 | } 45 | @media screen and (min-width: 800px) { 46 | .container { 47 | flex-direction: row; 48 | } 49 | } 50 | .app-container { 51 | background-color: var(--bg-color); 52 | border-radius: 40px; 53 | box-shadow: -2px -2px 4px 0px #ffffff, 50px 50px 50px 0px rgba(0, 0, 0, 0.25); 54 | display: block; 55 | flex: 1; 56 | min-height: 500px; 57 | max-width: 350px; 58 | margin-bottom: 25px; 59 | overflow: hidden; 60 | padding: 30px; 61 | } 62 | .app-top-bar { 63 | display: flex; 64 | align-items: center; 65 | margin-bottom: 30px; 66 | } 67 | .app-heading { 68 | color: var(--font-color); 69 | display: block; 70 | flex: 1; 71 | font-size: 28px; 72 | font-weight: 800; 73 | margin: 0; 74 | text-align: center; 75 | } 76 | button { 77 | border: 0; 78 | } 79 | button:focus { 80 | border: none; 81 | outline: 0 !important; 82 | outline-style: none; 83 | } 84 | .button { 85 | color: var(--font-color); 86 | position: relative; 87 | border-radius: 15px; 88 | background: var(--button-bg-color); 89 | font-weight: 700; 90 | transition: all 100ms cubic-bezier(0.175, 0.885, 0.32, 1.275); 91 | box-shadow: var(--button-shadow); 92 | cursor: pointer; 93 | } 94 | .button.button-link { 95 | color: #067CF8; 96 | display: block; 97 | font-size: 17px; 98 | margin: 30px 0 0; 99 | padding: 20px 0; 100 | width: 100%; 101 | } 102 | .button.button-small { 103 | color: #6D6E74; 104 | font-size: 22px; 105 | line-height: 40px; 106 | width: 40px; 107 | height: 40px; 108 | } 109 | .button.button-large { 110 | display: flex; 111 | font-size: 20px; 112 | flex-direction: column; 113 | padding: 15px; 114 | text-align: left; 115 | width: 45%; 116 | } 117 | .button.button-large i { 118 | margin-bottom: 40px; 119 | margin-top: 25px; 120 | width: 30px; 121 | height: auto; 122 | 123 | } 124 | .button-dial { 125 | border-radius: 50%; 126 | display: flex; 127 | height: 270px; 128 | margin: 35px auto; 129 | align-items: center; 130 | justify-content: center; 131 | width: 270px; 132 | } 133 | .button-dial-top { 134 | background: var(--button-bg-color); 135 | box-shadow: var(--button-shadow); 136 | border-radius: 50%; 137 | width: 70%; 138 | height: 70%; 139 | margin: 0 auto; 140 | position: absolute; 141 | top: 15%; 142 | left: 15%; 143 | text-align: center; 144 | z-index: 5; 145 | } 146 | .button-dial-label { 147 | color: #067CF8; 148 | font-size: 28px; 149 | fill: #067CF8; 150 | position: relative; 151 | z-index: 10; 152 | } 153 | .button-dial-spoke { 154 | background-color: rgba(96, 171, 254, 0.6); 155 | display: block; 156 | height: 2px; 157 | width: 83%; 158 | position: absolute; 159 | margin: 0 auto; 160 | z-index: 5; 161 | top: 50%; 162 | } 163 | .button-dial-spoke:nth-child(2) { 164 | transform: rotate(30deg); 165 | } 166 | .button-dial-spoke:nth-child(3) { 167 | transform: rotate(60deg); 168 | } 169 | .button-dial-spoke:nth-child(4) { 170 | transform: rotate(90deg); 171 | } 172 | .button-dial-spoke:nth-child(5) { 173 | transform: rotate(120deg); 174 | } 175 | .button-dial-spoke:nth-child(6) { 176 | transform: rotate(150deg); 177 | } 178 | .button-block { 179 | align-items: center; 180 | display: flex; 181 | justify-content: space-between; 182 | padding: 15px 24px; 183 | width: 100%; 184 | } 185 | .button-block span { 186 | font-size: 16px; 187 | } 188 | .subtle { 189 | color: #6D6E74; 190 | } 191 | .flex-button-container { 192 | display: flex; 193 | justify-content: space-between; 194 | } --------------------------------------------------------------------------------