Quran React

index.html

<div id='app'></div>

quran-react.markdown

Quran React

A Pen by abdurraufahmad on CodePen.

License.

script.js

var surahsNames = ['asl'];
function arabicDigits(num){
  num = num.toString().split('');
  var final =[];
  var arabnums = ['۰','۱','۲','۳','۴','۵','۶','۷','۸','۹'];
  for(var i = 0; i < num.length; i++){
      final.push(arabnums[parseInt(num[i])]);
  }

  return final.join('');
}

class SurahLayout extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      surs : [],
      surstrans: []
    }
  }
  goDown(){
    $('html, body, .surahscroll').animate({scrollTop: 0}, 300);
    $('.surah').animate({height: '0%',opacity: 0});
  }
  componentDidMount() {
    var _this = this;
    var suras = surahsNames;
    axios
 .get('https://api.alquran.cloud/quran/quran-uthmani')
  .then(function(result) { 
      var surs = result.data.data.surahs;
      console.log(( result.data.data.surahs[1].ayahs[0].text).replace(/بِسْمِ ٱللَّهِ ٱلرَّحْمَٰنِ ٱلرَّحِيمِ/,''));
     _this.setState({surs:surs});
      surahsNames = surs;
      
  });
    axios
 .get('https://api.alquran.cloud/quran/en.asad')
  .then(function(result) { 
      var surstrans = result.data.data.surahs;
     _this.setState({surstrans:surstrans});
  });
      
  }
  render(){
    return (
      <div className='surah'>
      <div className='surahscroll'>
      {this.state.surs.map(
      (x,index)=><div className='ayahs' id={x.englishName}><h2>CH. {x.number}: {x.englishName} ({x.englishNameTranslation})</h2><h1>{x.name}</h1>
 <h3>Revelation: {x.revelationType}</h3>
    {(x.englishName!="Al-Faatiha") ? <div className='ayah'>بِسْمِ ٱللَّهِ ٱلرَّحْمَٰنِ ٱلرَّحِيمِ</div>:null}
      {x.ayahs.map((y,ind)=>(y.sajda) ? <div className='ayah' >{(y.text).replace(/بِسْمِ ٱللَّهِ ٱلرَّحْمَٰنِ ٱلرَّحِيمِ/,'')}<span className='ayahnum'>{arabicDigits(y.numberInSurah)}</span>۝<div className='ayahtr'>{y.numberInSurah}. {this.state.surstrans[index].ayahs[ind].text}(sujjud)</div></div>:<div className='ayah' >{(index!=0)?(y.text).replace(/بِسْمِ ٱللَّهِ ٱلرَّحْمَٰنِ ٱلرَّحِيمِ/,''):y.text}<span className='ayahnum'>{arabicDigits(y.numberInSurah)}</span>۝<div className='ayahtr'>{y.numberInSurah}. {this.state.surstrans[index].ayahs[ind].text}</div></div>)}</div> 
    )}
    <button onClick={this.goDown}>Back to Index</button>
  </div>
    
      </div>
    )
  }
}

class PlayerLayout extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      surahs : []
    }
  }
  
  componentDidMount() {
    var _this = this;
    axios
 .get('https://api.alquran.cloud/quran/quran-uthmani')
  .then(function(result) { 
      var sur = result.data.data.surahs;
      var array = sur.map(x=>x.englishName);
      console.log(array);
      var ed = result.data.data.edition.englishName;
     _this.setState({surahs : sur});
      
      $(".surahscroll").scroll(function(){
    for(var i=0; i < array.length; i++){
    //console.log($("#"+array[i]+" h2").offset().top);
    if($("#"+array[i]).offset().top<0){  $("#"+array[i]).css({'padding-top': '50px'});
      $("#"+array[i]+" h2").css({'position':'fixed','top':0,'box-shadow':'0px 20px 60px -10px'})
    }else if($("#"+array[i]+" h2").offset().top==0){
       $("#"+array[i]+"").css({'padding-top': '0px'});
      $("#"+array[i]+" h2").css({'position':'relative','top':'auto','box-shadow':'none'})
    }
    }
  })
      
  });
      
  }
  handleClick(e, data){
    $('html, body').animate({scrollTop: 0}, 300);
    $('.surah').animate({height: '100%',opacity: 1});
    var clickedSurah = $(e.currentTarget).children()[2].innerHTML;
    setTimeout(
  function() 
  {
$('.surahscroll').animate({scrollTop: $("#"+clickedSurah).offset().top}, 'fast');  }, 1000);
    
  }
  
  render(){
    return (
    <table>
      <tr id='headingrow'>
      <th>Chapter</th>
        <th>Surah</th>
        <th>English Name</th>
      <th>English Name Translation</th>
      <th>Juz (Book)</th>
    <th>Ayahs ({this.state.surahs.map(x=>x.ayahs.length).reduce((a, b) => a + b, 0)} Verses)</th>
      </tr>
      {this.state.surahs.map(x => (x.ayahs[0].juz != x.ayahs[x.ayahs.length-1].juz) ? <tr onClick={this.handleClick}><td>{x.number}</td><td>{x.name}</td><td  className='surahName'>{x.englishName}</td><td>{x.englishNameTranslation}</td><td>{x.ayahs[0].juz}-{x.ayahs[x.ayahs.length-1].juz}</td><td>{x.ayahs.length}</td></tr> : <tr onClick={this.handleClick}><td>{x.number}</td><td>{x.name}</td><td  className='surahName'>{x.englishName}</td><td>{x.englishNameTranslation}</td><td>{x.ayahs[0].juz}</td><td>{x.ayahs.length}</td></tr>)}
  </table>
    )
  }
}

class Finesse extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      error: null,
      isLoaded: false,
      items: [],
      edition: ''
    }
     this.handleChange = this.handleChange.bind(this);                        
  }
    
    handleChange(event){
      $('tr').hide();
      $('#headingrow').show();
    $('tr').filter(":contains('" + event.target.value + "')").show();
    }
  componentDidMount() {
    var _this = this;
    axios
 .get('https://api.alquran.cloud/quran/quran-uthmani')
  .then(function(result) {
      var ed = result.data.data.edition.englishName;
     _this.setState({edition : ed});
  });
      
  }
  
  render() {
    return (
       <div>
         <h1>Al-Quran Majeed</h1>
      <h3>The Holy Recitation</h3>
      <h4>{this.state.edition} Edition</h4>
      <div id='searchdiv'>
      <input id='search' type='search' onChange={this.handleChange}/>       </div>
          <PlayerLayout />
          <SurahLayout />
       </div>
    );
  }
};

React.render(<Finesse />, document.getElementById('app'))


$(document).ready(function(){
  var array = [];
$('.ayahs').each(function(){
    var id = $(this).attr('id');
    array.push(id);
    console.log(id);
});
  console.log(array);
  $('#searchdiv').append('<i class="fas fa-search"></i>');
  
})
  var lastscroll;
  var newscroll;
  console.log(surahsNames);

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>

style.scss

$main-fonts: Arial, sans-serif;
$headings-color: green;
body{
  background-color: beige;
}
h1,h3,h4{
  font-family: $main-fonts;
  text-align: center;
  }
a{
  text-decoration: none;
  color: $headings-color;
}
table{
  font-size: 25px;
  margin:auto;
  margin-bottom: 50px;
  text-align:center;
  tr{
    height: 100px;
    cursor: pointer;
    border-radius: 50px;
  }
  tr:hover{
    cursor: pointer;
    box-shadow: 0px 0px 100px 5px;
    transition: box-shadow 300ms ease;
  }
  th{
    width: 300px;
    border-right: 2px solid;
    
  }
  th:last-child{
    border:none;
  }
  tr:first-child:hover{
      box-shadow:none;
    cursor: initial;
    }
}
.ayahs{
  position:relative;
  font-size:50px;
  text-align: center;
  width: 100%;
margin-top: 200px;
}
.ayah{
  max-width: max-content;
  margin:auto;
  margin-top:80px;
  border-bottom: 1px solid;
  padding-bottom: 20px;
    transition: border-width 0.3s ease;

}
.ayah:hover{
  border-width: thick;
  transition: border-width 0.3s ease;
}
.surah{
  position:fixed; 
  bottom: 0; 
  height: 0px;
  overflow:hidden;
  opacity: 0;
  background: beige;
  transition: all 0.3s ease;
}
.surahscroll{
  position:relative;
  overflow: scroll;
  height: 100%;
}
.ayahnum{
  text-align:center;
  font-size: 15px;
  position: relative;
  left: 36px;
  top: -12px;
  text-align:center;
}
.ayahtr{
  font-size: 20px;
}
button{
  position: fixed;
  z-index:3;
  bottom: 0;
  width: 100%;
  background: #00000079;
  border: none;
  height: 50px;
    color: white;
  cursor: pointer;
  outline: none;
  transition: all 0.3s ease;
}
button:focus{
  outline:none;
}
button:hover{
  height: 75px;
  background: #00bfffde;
  transition: all 0.3s ease;
}
.ayahs h2{
  position:relative;
  background: beige;
  width:100%;
  border-top: 5px solid;
  transition: all 1s ease;
  z-index: 2;
}
#search{
  margin-left: 30%;
    width: 40%;
    margin-top: 20px;
    height: 40px;
    outline: none;
    font-size: 32px;
    margin-bottom: 20px;
    border: none;
    text-align: center;
    background: transparent;
    border-bottom: 2px solid black;
}
.fa-search{
  font-size: 32px;
  position: relative;
  left: -38px;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />