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 91b1b96 commit a002eb2db20ef8dc118de7531c6e774cc5807f39
Showing with 45 additions and 88 deletions.
  1. +22 −51 README.md
  2. BIN Wireframes/IMG_1742.JPG
  3. +4 −27 src/About.js
  4. +9 −6 src/Prayer.js
  5. +10 −4 src/index.css
@@ -1,68 +1,39 @@
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
Prayer Times
<<<<<<<user stories

## Available Scripts
As a registered user I want to be able to see what is the prayer time for my location.

In the project directory, you can run:
As a registered user I want to be able to see what is the prayer time for other cities too.

### `npm start`
As a registered user i want to be able to see when is the sunset and sunrise so i can pray according and don't miss my prayers.

Runs the app in the development mode.<br />
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
As a register user I want to be able to get a random verse from Quran for everyday.

The page will reload if you make edits.<br />
You will also see any lint errors in the console.
As an unregisterd user i want to have a About page and prayer info so that i can get a more indept
<<<<<wireframe

### `npm test`

Launches the test runner in the interactive watch mode.<br />
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
<!-- ![Alt text](./wireframe.png "wireframe") -->

### `npm run build`
<<<<<<<<future ideas

Builds the app for production to the `build` folder.<br />
It correctly bundles React in production mode and optimizes the build for the best performance.
i would have added an option for users to be able to get a notification on there devices alerting them that its prayer time.

The build is minified and the filenames include the hashes.<br />
Your app is ready to be deployed!
i would have added an option for users to be able to get a countdown for when or how many hours later is the next prayer time.

See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
i would like to add an option were the user able to read the Quran and mark where the stopped.

### `npm run eject`
<<<<<technology used

**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
git hub and visual studio code application. Also i used API And geolocation of the user.

If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
sources: w3 school, free code academy

Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
<<<<installation

You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
All you need is: Command Line, Web Browser, Internet Connectivity, terminal, JavaScript support,

## Learn More

You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).

To learn React, check out the [React documentation](https://reactjs.org/).

### Code Splitting

This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting

### Analyzing the Bundle Size

This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

### Making a Progressive Web App

This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

### Advanced Configuration

This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration

### Deployment

This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

### `npm run build` fails to minify

This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
<<<<<<instructions
Prayer Times is an application built for Muslims who live in non-Islamic countries and cannot hear adhan (or azan) - the call to prayer - 5 times a day. The Prayer Times API is in JSON formats and allows users to stream the prayer announcement Adhan five times a day. Endpoints support prayer times calendar, geolocation information, and current time-stamp.
<<<<<<Background info
im a practicing muslim and im very intersted in my religious background. before even starting this project i wanted to do something related to my background
Binary file not shown.
@@ -2,33 +2,10 @@ import React from 'react';

const About = () => (
<div className= "AboutPage">
<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>
About Pagw working
</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>
<h2>HOW TO PRAY</h2>
<p>

</p>
</div>
)

@@ -6,16 +6,17 @@ import axios from "axios"

class Prayer extends React.Component {


state = {
lat: null,
long: null,
errorMessage: "",
city: null,
country: null,
array: [],
text: null
Verse: ""
};

componentDidMount() {
window.navigator.geolocation.getCurrentPosition(position =>
this.setState(
@@ -100,7 +101,7 @@ class Prayer extends React.Component {
console.log(response.data.data.ayahs[randomNumber].text)

this.setState({
text: response.data.data.ayahs[randomNumber].text
Verse: response.data.data.ayahs[randomNumber].text
})
})
}
@@ -116,8 +117,10 @@ class Prayer extends React.Component {
this.state.city &&
this.state.country ? (
<div>
<div>longitude: {this.state.long}</div>
<div>latitude: {this.state.lat}</div>

<h1>PRAYER TIMES</h1>
<div>Current longitude: {this.state.long}</div>
<div>Current latitude: {this.state.lat}</div>
<div>City: {this.state.city}</div>
<div>country: {this.state.country}</div>
{/* {this.state.array} */}
@@ -132,7 +135,7 @@ class Prayer extends React.Component {
<div>
<button className="buttonContainer" onClick={() => this.QuranApi()}>random</button>
{/* <p>{this.state.rquran}</p> */}
<div>text: {this.state.text}</div>
<div>Verse: {this.state.Verse}</div>
<form onSubmit={(e) => this.onFormSearch(e)}>
<input onChange={(e) => this.setState({ city: e.target.value })} name="city" type="text" placeholder="Enter City" />
<input type='submit' value="Search Another City " />
@@ -25,10 +25,14 @@ a:link, a:visited {
padding: 5px 5px;
text-align: center;
text-decoration: none;
display: inline-block;
/* display: inline-block; */
display: flex;
justify-content: center;
justify-content: left;
}
/* /* border: 1px solid #fff;
width: 900px;
display: flex; */
/* justify-content: space-around; */

body {
text-align: center;
@@ -57,12 +61,14 @@ body {
} */

/* .Prayer {
background-image: url('https://i.pinimg.com/originals/3e/1a/e2/3e1ae2771a445f3bed87c248663f8c14.gif')
background-image: url('https://img.freepik.com/free-vector/pastel-oil-painting-canvas-background_53876-93729.jpg?size=626&ext=jpg')
} */




/* .title {
color: aquamarine;
} */
a:hover, a:active {
background-color:goldenrod;
}

0 comments on commit a002eb2

Please sign in to comment.