From 3d1768b39982d75116b824872bab27a95f38d4d6 Mon Sep 17 00:00:00 2001 From: alialahmad68 Date: Wed, 13 Sep 2023 14:35:25 +0300 Subject: [PATCH 01/19] Change Name --- src/App.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index 81100a7..7f9a3f5 100644 --- a/src/App.js +++ b/src/App.js @@ -10,7 +10,7 @@ class App extends Component { constructor(props) { super(props); this.state = { - name: "Karim" + name: "alialahmad" }; } From eb377677f1d5c3c0db9744ab5156e68e03cc00de Mon Sep 17 00:00:00 2001 From: AghaDev Date: Wed, 13 Sep 2023 14:37:22 +0300 Subject: [PATCH 02/19] Added my name to the app! --- src/App.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index 7f9a3f5..48c1f39 100644 --- a/src/App.js +++ b/src/App.js @@ -10,7 +10,7 @@ class App extends Component { constructor(props) { super(props); this.state = { - name: "alialahmad" + name: "alialahmad_MohammadAlAgha" }; } From e6cec26274782ed6517dacac3c6db3b546c96253 Mon Sep 17 00:00:00 2001 From: AghaDev Date: Wed, 13 Sep 2023 14:52:10 +0300 Subject: [PATCH 03/19] comments --- src/App.css | 4 ++-- src/App.js | 30 ++++++++++++++++-------------- src/components/Search.css | 4 ++-- src/index.css | 4 ++-- 4 files changed, 22 insertions(+), 20 deletions(-) diff --git a/src/App.css b/src/App.css index 91802e8..c95045c 100644 --- a/src/App.css +++ b/src/App.css @@ -20,6 +20,6 @@ /* Current weather */ -div { +/* div { border: 5px solid red; -} +} */ diff --git a/src/App.js b/src/App.js index 48c1f39..bc6d44a 100644 --- a/src/App.js +++ b/src/App.js @@ -7,24 +7,26 @@ import fakeWeatherData from "./fakeWeatherData.json"; import "./App.css"; class App extends Component { - constructor(props) { - super(props); - this.state = { - name: "alialahmad_MohammadAlAgha" - }; - } + // constructor(props) { + // super(props); + // this.state = { + // name: "alialahmad_MohammadAlAgha" + // }; + // } - handleInputChange = value => { - this.setState({ name: value }); - }; + // handleInputChange = value => { + // this.setState({ name: value }); + // }; render() { return ( -
- - - -
+ //
+ // /* + // + // */ + //
+ +
alialahmad_MohammadAlAgha
); } } diff --git a/src/components/Search.css b/src/components/Search.css index af89a31..431dbae 100644 --- a/src/components/Search.css +++ b/src/components/Search.css @@ -1,3 +1,3 @@ -div { +/* div { border: 25px solid black; -} +} */ diff --git a/src/index.css b/src/index.css index 48b2810..e097e5d 100644 --- a/src/index.css +++ b/src/index.css @@ -1,4 +1,4 @@ -body { +/* body { margin: 40px; -} +} */ From b28879cce9f99fb9b954942fb51d7f4de7c7d133 Mon Sep 17 00:00:00 2001 From: AghaDev Date: Wed, 13 Sep 2023 15:32:56 +0300 Subject: [PATCH 04/19] agha branch --- src/App.css | 4 ++++ src/App.js | 7 ++++++- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/src/App.css b/src/App.css index c95045c..7a521e9 100644 --- a/src/App.css +++ b/src/App.css @@ -16,6 +16,10 @@ -moz-osx-font-smoothing: grayscale; } +h2{ + display: flex; + +} /* Search bar */ /* Current weather */ diff --git a/src/App.js b/src/App.js index bc6d44a..5a1e841 100644 --- a/src/App.js +++ b/src/App.js @@ -26,7 +26,12 @@ class App extends Component { // */ // -
alialahmad_MohammadAlAgha
+ //
alialahmad_MohammadAlAgha
+
+ london + + +
); } } From 64df4fc0d9879d77c703723f36b97cdc5da63240 Mon Sep 17 00:00:00 2001 From: alialahmad68 Date: Wed, 13 Sep 2023 15:41:57 +0300 Subject: [PATCH 05/19] new branch ali --- src/App.css | 10 ++++++++++ src/App.js | 10 ++++++++-- 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/src/App.css b/src/App.css index c95045c..8b3674a 100644 --- a/src/App.css +++ b/src/App.css @@ -23,3 +23,13 @@ /* div { border: 5px solid red; } */ + + +header{background-color: rgba(147, 155, 255, 0.89); + padding: 2%;} + + header button{ + height: 50%; + width: 30%; + + } \ No newline at end of file diff --git a/src/App.js b/src/App.js index bc6d44a..8c39d37 100644 --- a/src/App.js +++ b/src/App.js @@ -26,8 +26,14 @@ class App extends Component { // */ // -
alialahmad_MohammadAlAgha
- ); + +
+ + + +
+ + ); } } From d80984e52808836a72f07e610fcfb8b0a1e23bda Mon Sep 17 00:00:00 2001 From: alialahmad68 Date: Wed, 13 Sep 2023 15:45:46 +0300 Subject: [PATCH 06/19] new branch ali --- src/App.css | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/App.css b/src/App.css index c95045c..9391a58 100644 --- a/src/App.css +++ b/src/App.css @@ -23,3 +23,12 @@ /* div { border: 5px solid red; } */ + +header{background-color: rgba(147, 155, 255, 0.89); + padding: 2%;} + + header button{ + height: 50%; + width: 30%; + + } \ No newline at end of file From 5ea461b81cff95121933315b2996178a09b217e5 Mon Sep 17 00:00:00 2001 From: AghaDev Date: Wed, 13 Sep 2023 16:57:42 +0300 Subject: [PATCH 07/19] 50 git commit -m 50 --- src/App.css | 34 +++++++++++++++++++++++++++++++--- src/App.js | 14 ++++++++++---- 2 files changed, 41 insertions(+), 7 deletions(-) diff --git a/src/App.css b/src/App.css index 7a521e9..807570a 100644 --- a/src/App.css +++ b/src/App.css @@ -15,11 +15,39 @@ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } +header{ + background-color: #759eda; + padding: 1%; + font-family: Raleway; +} + +#city-name{ + color: white; + background-color: #759eda; + font-size: x-large; + border: none; + margin-right: 2%; + font-family: Raleway; + +} +.find-weather{ + font-size: x-large; + background-color: #5879c7; + padding: 1%; + /* margin-left: 1%; */ + border: none; + font-family: Raleway; -h2{ - display: flex; - } +body{ + margin: 0; + background-color: #9ccef4; +} +.mostly-cloudy{ + width: 15%; +} + + /* Search bar */ /* Current weather */ diff --git a/src/App.js b/src/App.js index 5a1e841..9bbc467 100644 --- a/src/App.js +++ b/src/App.js @@ -1,4 +1,5 @@ import React, { Component } from "react"; +import mc from "./img/weather-icons/mostlycloudy.svg" import Search from "./components/Search"; import SayHi, { SayHello } from "./components/WeatherItem"; @@ -17,7 +18,6 @@ class App extends Component { // handleInputChange = value => { // this.setState({ name: value }); // }; - render() { return ( //
@@ -27,11 +27,17 @@ class App extends Component { //
//
alialahmad_MohammadAlAgha
-
- london - +
+
+ +
+
+ +
+
+ ); } } From 62f278c11a0dcb8e2fe96cf911d3646aed4f9e82 Mon Sep 17 00:00:00 2001 From: AghaDev Date: Thu, 14 Sep 2023 10:52:30 +0300 Subject: [PATCH 08/19] updates --- src/App.css | 60 ++++++++++++++++++++++++++++++++++++++++++++--------- src/App.js | 12 ++++++++++- 2 files changed, 61 insertions(+), 11 deletions(-) diff --git a/src/App.css b/src/App.css index 807570a..1b64e76 100644 --- a/src/App.css +++ b/src/App.css @@ -21,22 +21,33 @@ header{ font-family: Raleway; } -#city-name{ - color: white; - background-color: #759eda; - font-size: x-large; +input{ + font-family:'Raleway', sans-serif; border: none; - margin-right: 2%; - font-family: Raleway; - + background-color:#759EDA; + margin-left: 1%; + font-size: x-large; + color: white; + outline: none; +} +::placeholder{ + color: white; + font-family:'Raleway', sans-serif; + } + input:focus{ + border-bottom: 2px solid #5879C7; } +#city-name{ + padding: 0.5%; +} + .find-weather{ font-size: x-large; background-color: #5879c7; padding: 1%; - /* margin-left: 1%; */ + margin-left: 3%; border: none; - font-family: Raleway; + font-family:'Raleway', sans-serif; } body{ @@ -44,9 +55,38 @@ body{ background-color: #9ccef4; } .mostly-cloudy{ - width: 15%; + width: 14%; +} +.img-mc{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + /* background-color: red; */ +} +.mc-text{ + color: white; + margin-top: -0.5%; + font-size: 25px; + font-family:'Raleway', sans-serif; } + .temp-data p{ + font-family:'Raleway', sans-serif; + font-size: x-large; + display: flex; + justify-content: center; +} +.humidity-pressure{ + /* background-color: aqua; */ + font-family:'Raleway', sans-serif; + font-size: medium; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + +} /* Search bar */ diff --git a/src/App.js b/src/App.js index 9bbc467..372a31a 100644 --- a/src/App.js +++ b/src/App.js @@ -33,9 +33,19 @@ class App extends Component {
-
+
+

overcast clouds

+
+

Temperature  10° to 11°C

+
+
+

Humidity     78%

+

     Pressure     1008.48

+ +
+
); From ffb3f5d4e461db53d244212f56676bd9a6af76fe Mon Sep 17 00:00:00 2001 From: alialahmad68 Date: Thu, 14 Sep 2023 10:55:46 +0300 Subject: [PATCH 09/19] updates --- src/App.css | 59 ++++++++++++++++++++++++++++++++++++++++++++++------- src/App.js | 35 ++++++++++++++++++++++++++++++- 2 files changed, 86 insertions(+), 8 deletions(-) diff --git a/src/App.css b/src/App.css index 9391a58..8594420 100644 --- a/src/App.css +++ b/src/App.css @@ -1,4 +1,4 @@ -.app { +/* .app { height: 100vh; width: 100vw; transition: background-color 1s ease-in; @@ -14,7 +14,7 @@ font-family: "Raleway", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -} +} */ /* Search bar */ @@ -24,11 +24,56 @@ border: 5px solid red; } */ -header{background-color: rgba(147, 155, 255, 0.89); - padding: 2%;} +*{ + font-family: "Raleway", sans-serif; + padding: 0px; + margin: 0px; + background-color: #9CCDF4; +} + + +header{ + background-color: #759EDA; + padding: 1%; + display: flex; +} + header input{ + margin-right: 5%; + border: 0; + background-color: #759EDA; + color: white; + font-size: x-large; + outline: 0; + } + +header input:focus{ + border-bottom: 1px solid grey; + + } + header input::placeholder{ + color: white; + opacity: 0.5; + } + header button{ - height: 50%; - width: 30%; + font-size: x-large; + margin-left: 5%; + border: none; + padding: 1%; + background-color: rgb(124, 124, 194); + + } + +main{ - } \ No newline at end of file + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + .mainImage{ + width: 15%; + } + + \ No newline at end of file diff --git a/src/App.js b/src/App.js index bc6d44a..90163ec 100644 --- a/src/App.js +++ b/src/App.js @@ -1,5 +1,16 @@ import React, { Component } from "react"; import Search from "./components/Search"; +import clear from "./img/weather-icons/clear.svg"; +import cloudy from "./img/weather-icons/cloudy.svg"; +import drizzle from "./img/weather-icons/drizzle.svg"; +import fog from "./img/weather-icons/fog.svg"; +import pc from "./img/weather-icons/partlycloudy.svg"; +import mc from "./img/weather-icons/mostlycloudy.svg"; +import rain from "./img/weather-icons/rain.svg"; +import snow from "./img/weather-icons/snow.svg"; +import storm from "./img/weather-icons/storm.svg"; +import unknown from "./img/weather-icons/unknown.svg"; + import SayHi, { SayHello } from "./components/WeatherItem"; import fakeWeatherData from "./fakeWeatherData.json"; @@ -26,7 +37,29 @@ class App extends Component { // */ // -
alialahmad_MohammadAlAgha
+
+
+ + + +
+ + +
+ +

overcast clouds

+

+

Temperature   10° to 11° C

+

+

Humidity   78%    Pressure   1008.48

+ + + + +
+ +
+ ); } } From 9872f56b9c7004b40a826848d71b58897706a07f Mon Sep 17 00:00:00 2001 From: alialahmad68 Date: Thu, 14 Sep 2023 12:13:44 +0300 Subject: [PATCH 10/19] updates --- src/App.js | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/src/App.js b/src/App.js index 90163ec..e841689 100644 --- a/src/App.js +++ b/src/App.js @@ -47,13 +47,14 @@ class App extends Component {
-

overcast clouds

-

-

Temperature   10° to 11° C

-

-

Humidity   78%    Pressure   1008.48

- - +
+

Temperature  10° to 11°C

+
+
+

Humidity     78%

+

     Pressure     1008.48

+ +
From 40f747f9a6d32c356774b45386fd732da12e4696 Mon Sep 17 00:00:00 2001 From: alialahmad68 Date: Thu, 14 Sep 2023 12:15:33 +0300 Subject: [PATCH 11/19] updates --- src/App.css | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/src/App.css b/src/App.css index 7c5c27a..1b64e76 100644 --- a/src/App.css +++ b/src/App.css @@ -95,13 +95,3 @@ body{ /* div { border: 5px solid red; } */ - - -header{background-color: rgba(147, 155, 255, 0.89); - padding: 2%;} - - header button{ - height: 50%; - width: 30%; - - } \ No newline at end of file From 34488770f8183f43b96ce3e9e2fdd41708cec13d Mon Sep 17 00:00:00 2001 From: alialahmad68 Date: Thu, 14 Sep 2023 12:22:13 +0300 Subject: [PATCH 12/19] updates --- src/App.css | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/src/App.css b/src/App.css index 8594420..28a1a24 100644 --- a/src/App.css +++ b/src/App.css @@ -76,4 +76,20 @@ main{ width: 15%; } - \ No newline at end of file + .temp-data p{ + font-family:'Raleway', sans-serif; + font-size: x-large; + display: flex; + justify-content: center; + margin-bottom: 15px; + } + .humidity-pressure{ + /* background-color: aqua; */ + font-family:'Raleway', sans-serif; + font-size: medium; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + + } \ No newline at end of file From 3b043083f757ed3a64f44e45c1bb0511cb05b8e5 Mon Sep 17 00:00:00 2001 From: alialahmad68 Date: Thu, 14 Sep 2023 15:04:47 +0300 Subject: [PATCH 13/19] html css update --- src/App.css | 130 ++++++++++++++++++++++++++++++---------------------- src/App.js | 61 ++++++++++++++++++------ 2 files changed, 122 insertions(+), 69 deletions(-) diff --git a/src/App.css b/src/App.css index 28a1a24..5ec9adc 100644 --- a/src/App.css +++ b/src/App.css @@ -26,70 +26,90 @@ *{ font-family: "Raleway", sans-serif; - padding: 0px; - margin: 0px; background-color: #9CCDF4; } - header{ - background-color: #759EDA; + background-color: #759eda; padding: 1%; - display: flex; + font-family: Raleway; } - - header input{ - margin-right: 5%; - border: 0; - background-color: #759EDA; - color: white; - font-size: x-large; - outline: 0; - } - -header input:focus{ - border-bottom: 1px solid grey; - - } - header input::placeholder{ - color: white; - opacity: 0.5; - } - - header button{ - font-size: x-large; - margin-left: 5%; - border: none; - padding: 1%; - background-color: rgb(124, 124, 194); - - } -main{ - - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; +input{ + font-family:'Raleway', sans-serif; + border: none; + background-color:#759EDA; + margin-left: 1%; + font-size: x-large; + color: white; + outline: none; +} +::placeholder{ + color: white; +opacity: 0.5; +} + input:focus{ + border-bottom: 2px solid #5879C7; +} +#city-name{ + padding: 0.5%; } - .mainImage{ - width: 15%; - } - .temp-data p{ - font-family:'Raleway', sans-serif; - font-size: x-large; - display: flex; - justify-content: center; - margin-bottom: 15px; - } - .humidity-pressure{ - /* background-color: aqua; */ - font-family:'Raleway', sans-serif; - font-size: medium; +.find-weather{ + font-size: x-large; + background-color: #5879c7; + padding: 1%; + margin-left: 3%; + border: none; +} +body{ + margin: 0; + background-color: #9ccef4; +} +.mostly-cloudy{ + width: 14%; +} +.img-mc{ display: flex; - flex-direction: row; + flex-direction: column; justify-content: center; align-items: center; - - } \ No newline at end of file + /* background-color: red; */ +} +.mc-text{ + color: white; + margin-top: -0.5%; + font-size: 25px; +} + .temp-data p{ + font-size: x-large; + display: flex; + justify-content: center; + +} +.humidity-pressure{ + /* background-color: aqua; */ + font-family:'Raleway', sans-serif; + font-size: medium; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; +} +.daily-weather img{ + width: 50%; + } +footer{ + margin: auto; + width: 80%; + font-family:'Raleway', sans-serif; + display: flex; + flex-direction: row; + margin-top: 3%; + justify-content: space-around; +} +.daily-weather{ + display: flex; + flex-direction: column; + align-items: center; +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index e841689..41ff1c4 100644 --- a/src/App.js +++ b/src/App.js @@ -38,27 +38,60 @@ class App extends Component { //
-
- - +
+ + -
- - -
- -
+
+
+ +

overcast clouds

+
+

Temperature  10° to 11°C

Humidity     78%

     Pressure     1008.48

-
- - - - + +
+
+

03:00

+ +

8°C

+
+
+

06:00

+ +

9°C

+
+
+

09:00

+ +

14°C

+
+
+

12:00

+ +

17°C

+
+
+

15:00

+ +

18°C

+
+
+

18:00

+ +

16°C

+
+
+

21:00

+ +

13°C

+
+
); From 6a71c560c3a06954d1b81043eeb58f9c650995c5 Mon Sep 17 00:00:00 2001 From: AghaDev Date: Thu, 14 Sep 2023 15:11:54 +0300 Subject: [PATCH 14/19] Components Created --- src/App.css | 28 ++++++++++++++++++---------- src/App.js | 50 ++++++++++++++++++++++++++++++-------------------- src/Footer.js | 45 +++++++++++++++++++++++++++++++++++++++++++++ src/Header.js | 15 +++++++++++++++ src/Main.js | 21 +++++++++++++++++++++ 5 files changed, 129 insertions(+), 30 deletions(-) create mode 100644 src/Footer.js create mode 100644 src/Header.js create mode 100644 src/Main.js diff --git a/src/App.css b/src/App.css index 88ecc53..9b6fefe 100644 --- a/src/App.css +++ b/src/App.css @@ -85,7 +85,23 @@ body{ flex-direction: row; justify-content: center; align-items: center; - +} +.daily-weather img{ + width: 50%; + } +footer{ + margin: auto; + width: 80%; + font-family:'Raleway', sans-serif; + display: flex; + flex-direction: row; + margin-top: 3%; + justify-content: space-around; +} +.daily-weather{ + display: flex; + flex-direction: column; + align-items: center; } /* Search bar */ @@ -95,12 +111,4 @@ body{ /* div { border: 5px solid red; } */ - -header{background-color: rgba(147, 155, 255, 0.89); - padding: 2%;} - - header button{ - height: 50%; - width: 30%; - - } \ No newline at end of file +/* */ \ No newline at end of file diff --git a/src/App.js b/src/App.js index 372a31a..2202e08 100644 --- a/src/App.js +++ b/src/App.js @@ -1,7 +1,18 @@ import React, { Component } from "react"; import mc from "./img/weather-icons/mostlycloudy.svg" +import clear from "./img/weather-icons/clear.svg"; +import cloudy from "./img/weather-icons/cloudy.svg"; +import drizzle from "./img/weather-icons/drizzle.svg"; +import fog from "./img/weather-icons/fog.svg"; +import pc from "./img/weather-icons/partlycloudy.svg"; +import rain from "./img/weather-icons/rain.svg"; +import snow from "./img/weather-icons/snow.svg"; +import storm from "./img/weather-icons/storm.svg"; +import unknown from "./img/weather-icons/unknown.svg"; import Search from "./components/Search"; - +import Header from "./Header"; +import Main from "./Main"; +import Footer from "./Footer"; import SayHi, { SayHello } from "./components/WeatherItem"; import fakeWeatherData from "./fakeWeatherData.json"; @@ -28,28 +39,27 @@ class App extends Component { //
alialahmad_MohammadAlAgha
-
- - - -
-
- -

overcast clouds

-
-
-

Temperature  10° to 11°C

-
-
-

Humidity     78%

-

     Pressure     1008.48

- -
+
+
+
+
- ); + ); + } } -} export default App; + +{/* +

09:00

+ +

12:00

+ +

15:00

+ +

18:00

+ +

21:00

+ */} \ No newline at end of file diff --git a/src/Footer.js b/src/Footer.js new file mode 100644 index 0000000..b64915c --- /dev/null +++ b/src/Footer.js @@ -0,0 +1,45 @@ +import mc from "./img/weather-icons/mostlycloudy.svg" +import clear from "./img/weather-icons/clear.svg"; +const Footer = () => { + return ( +
+
+

03:00

+ +

8°C

+
+
+

06:00

+ +

9°C

+
+
+

09:00

+ +

14°C

+
+
+

12:00

+ +

17°C

+
+
+

15:00

+ +

18°C

+
+
+

18:00

+ +

16°C

+
+
+

21:00

+ +

13°C

+
+
+ ); + }; + + export default Footer; \ No newline at end of file diff --git a/src/Header.js b/src/Header.js new file mode 100644 index 0000000..6854119 --- /dev/null +++ b/src/Header.js @@ -0,0 +1,15 @@ +const Header = () => { + return ( +
+ + +
+ ); +}; + +export default Header; diff --git a/src/Main.js b/src/Main.js new file mode 100644 index 0000000..ea735e1 --- /dev/null +++ b/src/Main.js @@ -0,0 +1,21 @@ +import mc from "./img/weather-icons/mostlycloudy.svg" +const Main = () => { + return ( +
+
+ +

overcast clouds

+
+
+

Temperature  10° to 11°C

+
+
+

Humidity     78%

+

     Pressure     1008.48

+
+
+ ); + }; + + export default Main; + \ No newline at end of file From 7e632bb66e115a77946ee39986bcd9f955c03038 Mon Sep 17 00:00:00 2001 From: AghaDev Date: Thu, 14 Sep 2023 15:15:09 +0300 Subject: [PATCH 15/19] Components Created --- src/App.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/App.js b/src/App.js index ad19176..35f4ab8 100644 --- a/src/App.js +++ b/src/App.js @@ -46,14 +46,11 @@ class App extends Component { -<<<<<<< HEAD ); -======= - ); + ; } ->>>>>>> agha } export default App; From b896ec530ffd460507b2760da8274884b36c42e2 Mon Sep 17 00:00:00 2001 From: alialahmad68 Date: Thu, 14 Sep 2023 15:25:42 +0300 Subject: [PATCH 16/19] updates --- src/App.css | 88 ----------------------------------------------------- src/App.js | 11 +------ 2 files changed, 1 insertion(+), 98 deletions(-) diff --git a/src/App.css b/src/App.css index 5628b8e..9427db8 100644 --- a/src/App.css +++ b/src/App.css @@ -16,94 +16,6 @@ -moz-osx-font-smoothing: grayscale; } */ -header{ - background-color: #759eda; - padding: 1%; - font-family: Raleway; -} - -input{ - font-family:'Raleway', sans-serif; - border: none; - background-color:#759EDA; - margin-left: 1%; - font-size: x-large; - color: white; - outline: none; -} -::placeholder{ - color: white; - font-family:'Raleway', sans-serif; - } - input:focus{ - border-bottom: 2px solid #5879C7; -} -#city-name{ - padding: 0.5%; -} - -.find-weather{ - font-size: x-large; - background-color: #5879c7; - padding: 1%; - margin-left: 3%; - border: none; - font-family:'Raleway', sans-serif; - -} -body{ - margin: 0; - background-color: #9ccef4; -} -.mostly-cloudy{ - width: 14%; -} -.img-mc{ - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - /* background-color: red; */ -} -.mc-text{ - color: white; - margin-top: -0.5%; - font-size: 25px; - font-family:'Raleway', sans-serif; -} - .temp-data p{ - font-family:'Raleway', sans-serif; - font-size: x-large; - display: flex; - justify-content: center; - -} -.humidity-pressure{ - /* background-color: aqua; */ - font-family:'Raleway', sans-serif; - font-size: medium; - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; -} -.daily-weather img{ - width: 50%; - } -footer{ - margin: auto; - width: 80%; - font-family:'Raleway', sans-serif; - display: flex; - flex-direction: row; - margin-top: 3%; - justify-content: space-around; -} -.daily-weather{ - display: flex; - flex-direction: column; - align-items: center; -} /* Search bar */ diff --git a/src/App.js b/src/App.js index 395a6ee..a3de04c 100644 --- a/src/App.js +++ b/src/App.js @@ -10,16 +10,7 @@ import snow from "./img/weather-icons/snow.svg"; import storm from "./img/weather-icons/storm.svg"; import unknown from "./img/weather-icons/unknown.svg"; import Search from "./components/Search"; -import clear from "./img/weather-icons/clear.svg"; -import cloudy from "./img/weather-icons/cloudy.svg"; -import drizzle from "./img/weather-icons/drizzle.svg"; -import fog from "./img/weather-icons/fog.svg"; -import pc from "./img/weather-icons/partlycloudy.svg"; -import mc from "./img/weather-icons/mostlycloudy.svg"; -import rain from "./img/weather-icons/rain.svg"; -import snow from "./img/weather-icons/snow.svg"; -import storm from "./img/weather-icons/storm.svg"; -import unknown from "./img/weather-icons/unknown.svg"; + import Header from "./Header"; From 053b571289ad9afa72f4df5c248b98ab480761a8 Mon Sep 17 00:00:00 2001 From: alialahmad68 Date: Thu, 14 Sep 2023 16:28:33 +0300 Subject: [PATCH 17/19] update design responsive --- src/App.css | 60 ++++++++++++++++++++++++++--------------------------- 1 file changed, 29 insertions(+), 31 deletions(-) diff --git a/src/App.css b/src/App.css index 9427db8..1c6a736 100644 --- a/src/App.css +++ b/src/App.css @@ -1,30 +1,3 @@ -/* .app { - height: 100vh; - width: 100vw; - transition: background-color 1s ease-in; -} - -.app__header, -.app__main { - width: 100%; - display: flex; - flex-direction: column; - align-items: center; - padding: 20px; - font-family: "Raleway", sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} */ - - -/* Search bar */ - -/* Current weather */ - -/* div { - border: 5px solid red; -} */ - *{ font-family: "Raleway", sans-serif; background-color: #9CCDF4; @@ -32,8 +5,9 @@ header{ background-color: #759eda; - padding: 1%; - font-family: Raleway; + padding: 1.4%; + display: flex; + } input{ @@ -106,7 +80,7 @@ footer{ font-family:'Raleway', sans-serif; display: flex; flex-direction: row; - margin-top: 3%; + margin-top: 5%; justify-content: space-around; } .daily-weather{ @@ -114,4 +88,28 @@ footer{ flex-direction: column; align-items: center; } -/* */ + + +@media ( max-width: 678px) { + + header{ + display: flex; + flex-direction: column; + } + .find-weather{ + margin-top: 10px; + margin-left: 0px; + } + + footer{ + display: grid; +grid-template-columns: 1fr 1fr; } + + .mostly-cloudy{ + width: 40%; + } + + .daily-weather{ + margin-bottom: 5%; + } +} From 0249bb53ba9ab62092626cd2aae0406ab2d58cc7 Mon Sep 17 00:00:00 2001 From: AghaDev Date: Thu, 14 Sep 2023 16:33:58 +0300 Subject: [PATCH 18/19] check --- src/App.css | 13 +------------ src/Footer.js | 1 + src/Header.js | 1 + src/Main.js | 1 + 4 files changed, 4 insertions(+), 12 deletions(-) diff --git a/src/App.css b/src/App.css index 9b6fefe..f576a8e 100644 --- a/src/App.css +++ b/src/App.css @@ -62,7 +62,6 @@ body{ flex-direction: column; justify-content: center; align-items: center; - /* background-color: red; */ } .mc-text{ color: white; @@ -78,7 +77,6 @@ body{ } .humidity-pressure{ - /* background-color: aqua; */ font-family:'Raleway', sans-serif; font-size: medium; display: flex; @@ -102,13 +100,4 @@ footer{ display: flex; flex-direction: column; align-items: center; -} - -/* Search bar */ - -/* Current weather */ - -/* div { - border: 5px solid red; -} */ -/* */ \ No newline at end of file +} diff --git a/src/Footer.js b/src/Footer.js index b64915c..2669e21 100644 --- a/src/Footer.js +++ b/src/Footer.js @@ -1,3 +1,4 @@ +import React, { Component } from "react"; import mc from "./img/weather-icons/mostlycloudy.svg" import clear from "./img/weather-icons/clear.svg"; const Footer = () => { diff --git a/src/Header.js b/src/Header.js index 6854119..7e57ea0 100644 --- a/src/Header.js +++ b/src/Header.js @@ -1,3 +1,4 @@ +import React, { Component } from "react"; const Header = () => { return (
diff --git a/src/Main.js b/src/Main.js index ea735e1..ee0cd43 100644 --- a/src/Main.js +++ b/src/Main.js @@ -1,3 +1,4 @@ +import React, { Component } from "react"; import mc from "./img/weather-icons/mostlycloudy.svg" const Main = () => { return ( From b5b845763cc908eb0324165caa1a3ef929c39500 Mon Sep 17 00:00:00 2001 From: AghaDev Date: Thu, 14 Sep 2023 16:37:53 +0300 Subject: [PATCH 19/19] Responsive HTML & CSS + React Components --- src/App.css | 32 +++++++++++++++++++++++++------- 1 file changed, 25 insertions(+), 7 deletions(-) diff --git a/src/App.css b/src/App.css index b8282ec..1c6a736 100644 --- a/src/App.css +++ b/src/App.css @@ -49,6 +49,7 @@ body{ flex-direction: column; justify-content: center; align-items: center; + /* background-color: red; */ } .mc-text{ color: white; @@ -62,6 +63,7 @@ body{ } .humidity-pressure{ + /* background-color: aqua; */ font-family:'Raleway', sans-serif; font-size: medium; display: flex; @@ -85,13 +87,29 @@ footer{ display: flex; flex-direction: column; align-items: center; -} +} + -/* Search bar */ +@media ( max-width: 678px) { -/* Current weather */ + header{ + display: flex; + flex-direction: column; + } + .find-weather{ + margin-top: 10px; + margin-left: 0px; + } -/* div { - border: 5px solid red; -} */ -/* */ \ No newline at end of file + footer{ + display: grid; +grid-template-columns: 1fr 1fr; } + + .mostly-cloudy{ + width: 40%; + } + + .daily-weather{ + margin-bottom: 5%; + } +}