Permalink
Browse files

aisha pro2

  • Loading branch information...
aisha laghmani.config aisha laghmani.config
aisha laghmani.config authored and aisha laghmani.config committed Nov 8, 2019
1 parent 0017806 commit 0102b5b5c14c0eed5cb0e3d665f2c5452a20a174
Showing with 210 additions and 28 deletions.
  1. +93 −0 package-lock.json
  2. +5 −1 package.json
  3. +26 −3 src/Home.js
  4. +31 −24 src/Prayer.js
  5. +54 −0 src/index.css
  6. +1 −0 src/index.js

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
@@ -2,8 +2,10 @@
"name": "prayer-time",
"version": "0.1.0",
"private": true,
"homepage": "https://pages.git.generalassemb.ly/alaghmani123/Project-2-prayer-times/.",
"dependencies": {
"axios": "^0.19.0",
"gh-pages": "^2.1.1",
"react": "^16.11.0",
"react-dom": "^16.11.0",
"react-router-dom": "^5.1.2",
@@ -13,7 +15,9 @@
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
"eslintConfig": {
"extends": "react-app"
@@ -2,9 +2,32 @@ import React from 'react';

const Home = () => (
<div>
<h1>home page</h1>
<p>Welcome to home page</p>
<p></p>
<h2>DAILY FIVE TIME PRAYERS (SALAH)</h2>
<p>Salat
Salat is the obligatory Muslim prayers, performed five times each day by Muslims.
</p>
<p>It is the second Pillar of Islam.</p>

God ordered Muslims to pray at five set times of day:
<ol>
<li>Salat al-fajr: dawn, before sunrise</li>
<li>Salat al-zuhr: midday, after the sun passes its highest</li>
<li>Salat al-'asr: the late part of the afternoon</li>
<li>Salat al-maghrib: just after sunset</li>
<li>Salat al-'isha: between sunset and midnight</li>
</ol>


<p>
<h2>
SUPEREOGATORY PRAYERS
</h2>
<p>
The fard are the required number of rakats. Additional rakats are often said: the sunnah are after the example of the Prophet Muhammad (peace and blessings upon him) and are said individuallythat is, not in congregation. The following is a chart of the order and number of rakats for each time of prayer:

</p>

</p>
</div>
)

@@ -12,7 +12,8 @@ class Prayer extends React.Component {
errorMessage: "",
city: null,
country: null,
array: []
array: [],
text: null
};

componentDidMount() {
@@ -55,7 +56,7 @@ class Prayer extends React.Component {
this.prayerApi()
}


prayerApi = () => {


@@ -74,36 +75,40 @@ class Prayer extends React.Component {
<p>Asr: {date.timings.Asr}</p>
<p>Maghrib: {date.timings.Maghrib}</p>
<p>Isha: {date.timings.Isha}</p>
<h3>Sunrise: {date.timings.Sunrise}</h3>
<h3>Midnight: {date.timings.Midnight}</h3>

</div>

// });
// this.setState({ array });
this.setState({ singleTiming })
});


axios({
method: "GET",
url: `http://api.alquran.cloud/v1/sajda/en.asad`
}).then(response => {
console.log('quran',response.data.data)
})


};


QuranApi = () => {
axios({
method: "GET",
url: `http://api.alquran.cloud/v1/surah`
}).then(response => {
console.log('quran',response.config)
QuranApi = () => {
const randomNumber = Math.floor((Math.random() * 15) + 1);

axios({
method: "GET",
url: `http://api.alquran.cloud/v1/sajda/en.asad`
}).then(response => {
console.log(response.data.data.ayahs[randomNumber].text)

this.setState({
text: response.data.data.ayahs[randomNumber].text
})
}


})
}



render() {

return (
<div>
{this.state.long &&
@@ -125,17 +130,19 @@ class Prayer extends React.Component {

)}
<div>
<div>{this.QuranApi}</div>
<button className="buttonContainer" onClick={() => this.QuranApi()}>random</button>
{/* <p>{this.state.rquran}</p> */}
<div>text: {this.state.text}</div>
<form onSubmit={(e) => this.onFormSearch(e)}>
<input onChange={(e) => this.setState({ city: e.target.value })} name="city" type="text" placeholder="city?" />
<input type='submit' value="Get city Prayer time" />
<input onChange={(e) => this.setState({ city: e.target.value })} name="city" type="text" placeholder="Enter City" />
<input type='submit' value="Search Another City " />
</form>
</div>
</div>

)
}

}


@@ -7,9 +7,63 @@ body {
-moz-osx-font-smoothing: grayscale;
/* background: black; */
}
a:hover, a:active {
background-color: lightpink;
}
/* body {
background-image: url('https://i.pinimg.com/736x/0a/21/11/0a2111abeba0717c8320d9587e74bd16.jpg');
} */

.buttonContainer {
padding: 14px 25px;
color: chocolate;
text-align: center;
}
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}

body {
text-align: center;
text-decoration-style: double;
color: #f44336;
font-size: 30px;

/* background-color: lightblue; */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
background-image: url('https://mymodernmet.com/wp/wp-content/uploads/2018/04/islamic-architecture-2.jpg')

}







a:hover, a:active {
background-color: red;
}
h1 {
color: white;
text-align: center;
}

p {
font-family: verdana;
font-size: 20px;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}


@@ -7,6 +7,7 @@ import axios from "axios";
import * as serviceWorker from './serviceWorker';



ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change

0 comments on commit 0102b5b

Please sign in to comment.